Showing posts with label DEV DESIGN. Show all posts

Is Facebook the New Google+?

Buffer Pin It Now!

Facebook-news-feed-google-plus

Facebook unveiled today a radical new look for the news feed, but it wasn't the only social network getting major buzz following the design announcement.

Minutes after Facebook debuted the overhaul, boasting multiple feeds, mobile consistency and a bigger focus on pictures, people took to Twitter to discuss the similarities between the update and the existing look of competitor Google+, which was trending on Twitter in the U.S. for a good portion of Mark Zuckerberg's presentation.

Facebook's announcement comes just one day after Google+ launched new features of its own, including a "Local" reviews tab and larger cover photos.

As a part of an effort to de-clutter news feeds, Facebook introduced on Thursday more white space to make reading easier on the eyes. This shift is indeed reflective of Google+'s signature look. Both platforms now have a lot more space in the center of the page.

Facebook Google Plus

Looking at the designs side by side, the similarities are obvious. For example, Facebook's new look takes updates from friends — also called Stories — from small thumbnails to beautiful, blown-up displays, just like Google+'s approach to highlighting updates. Previews of articles shared from friends will also take up more real estate in the redesigned news feed. (Google+ does this too.)

In addition, Facebook will be removing its cluttered left side bar and replacing it with a cleaner, sleeker black bar with visual icons for bookmarks, such as messages and chat. This resembles Google+'s existing grey-scale side bar, also with stacked icons. If you take a look at Facebook's sidebar now, which features smaller icons and more text, this is a huge change toward saving space and streamlining the design. It's also similar to Facebook's iPhone app.

Google+ Facebook Side Bar

But Facebook has taken its design to another level by adding multiple news feeds that allow you to go beyond just scratching the surface of what's happening on the site. Thanks to feeds that highlight photos, music news (what friends are listening to and what concerts they're attending) and a section just for celebrities and organizations you subscribe to, the move gives you more control over the stories you.

Although a Google+ spokesperson declined to comment to Mashable's Chris Taylor on the comparisons, he didn't deny social networks in general are seeing the same kinds of needs for cleanliness from users.

Do you think the redesign looks like Google+? Take the poll below and let us know your thoughts in the comments.

Does the new Facebook news feed look like Google+?

Images are Mashable Composites

Facebook News Feed Event

Mark Zuckerberg

Screen-shot-2013-03-07-at-1-06-40-pm

Old news feed

Screen-shot-2013-03-07-at-1-08-01-pm

Sharing stats

Screen-shot-2013-03-07-at-1-09-55-pm

New news feed

Screen-shot-2013-03-07-at-1-11-31-pm

New way to view shares

Screen-shot-2013-03-07-at-1-14-17-pm
Screen-shot-2013-03-07-at-1-15-33-pm

New profile photos

Screen-shot-2013-03-07-at-1-15-48-pm

New Pinterest display

Screen-shot-2013-03-07-at-1-17-24-pm

Music stream

Screen-shot-2013-03-07-at-1-23-03-pm

News stream

Screen-shot-2013-03-07-at-1-24-53-pm

New mobile and desktop view

Screen-shot-2013-03-07-at-1-22-33-pm






























View the Original article

Posted in , , , , , , , | Leave a comment

Can Beautiful Design Make Your Resume Stand Out?

Buffer Pin It Now!

Resumecartoon

The amount of time a recruiter spends looking at your resume is roughly six seconds — the length of a Vine video.

For people who are unemployed or underemployed, figuring out how to stand out in the job search is crucial. Despite discovering job openings that fit your experience, you send your resume out to the ether — and feel you're continuously overlooked in favor of someone with equal qualifications. Many job seekers have taken to desperate measures.

"Visual design is a great way to differentiate yourself from other job candidates," says Dodd Caldwell, cofounder of Loft Resumes. "Design in general is increasingly important in the business world."

Companies are always looking for candidates who will go the extra mile, and your resume is literally your first point of contact — your first chance to put yourself in the "yes" bucket. And what recruiters are looking for can mostly be narrowed down to science, as The Ladders found last year in an eye-tracking study on resumes.

Recruiters spent 80% of their time looking at six data points:

  • Name
  • Current title and company
  • Previous title and company
  • Current start and end dates
  • Previous start and end dates
  • Education


The key is to keep these important data points clear. Loft Resumes recommends a hierarchy that presents information in a way that is easy to find and digest. Its service relies on graphic design principles, and clients can select from various formats or color palettes, but no two resumes will be exactly the same.

While presenting information visually is a plus, especially in a time when Pinterest, Instagram and other visual experiences are winning our time and attention — it's still not a good idea to put a photo on your resume (unless your industry requires it). Research from The Ladders on online profiles found the human eye is naturally drawn to photos, in this case the profile photo, which prevented recruiters from looking at more relevant data such as experience.

While a resume from Loft Resumes is not cheap ($99), it is an investment. The price includes two rounds of revisions. Additional revisions later — perhaps after you've acquired additional skills or experience — are only $5.

Have you tried using a service for professionally designed resumes? Did it make a difference in your job search? Let us know in the comments.

Here are some examples of resume makeovers by Loft Resumes:







Images courtesy of Loft Resumes, lead image via iStock, RussellCreative


































View the Original article

Posted in , , , , , , , , | Leave a comment

10 Essential Chrome Extensions for Designers

Buffer Pin It Now!

Chrome-crayons

1. Benchwarmer

What if the first tab in your browser every morning was a healthy shot of inspiration? Benchwarmer is a neat extension for Chrome that replaces the "New Tab" screen with six shots from Dribbble. Dribbble is an invite-only, high-quality community of designers who share what they are currently working on, in the high altar of pixel-perfection.

Once installed Benchwarmer defaults to the latest top-rated shots; however, you can customize this view using the gear symbol. Hovering over a shot shows its number of likes and who posted it. You also can enter your own Dribbble username to display the work of users you follow.

The extension is open-sourced on Git Hub, if you are looking to contribute.

Benchwarmer

2. ColorZilla

When ColorZilla launched for Firefox over seven years ago, it was one of the first browser-based color pickers available. This official port for Chrome proves equally useful and includes a color picker, eye dropper and gradient generator, along with additional advanced color tools. You can get a color reading from any point in the browser (and save these colors in custom palettes), make edits on the fly and paste the output (in CSS, Hex, RGB and more) into other apps.

The ability to analyze DOM elements on a webpage and inspect its palette of colors is a particularly valuable feature. You can also pick colors from Flash Objects at any zoom level, and generated or sampled colors automatically copy to the clipboard.

Colorzilla


3. WhatFont

The days of right-clicking to "view source" are long over. WhatFont identifies all the fonts used on a webpage and gives in-depth details, such as the font family, font size, along with the color, weight and line height (you can even tweet this information). Apart from native web safe fonts, it detects the services used for serving the font and supports Typekit and Google Web Fonts.

It gives you the fall-back string, and if a font called for is not installed, it's striked-through, showing the actual font used. It's important to remember it only works for online pages, not locally. Once activated, hover on text and a pop-up displays all the selected fonts information.

Whatfont

4. Screen Capture

An official Google extension, Screen Capture quickly captures visible objects, whole pages, visible sections of pages and drawn selections as PNG files. Each snapshot can be edited and annotated (before being saved), and highlighting, lines, arrows and redacting and adding text are fully supported. It intelligently detects floating objects on a page to avoid repeating the capture of the same objects if the whole page requires scrolling.

It works quickly, even when capturing large pages, and will also scroll the page horizontally if necessary. Share the snapshots on Picasa, Facebook and Imgur for instant collaboration.

Also of note is Awesome Screenshot, which boasts a rich feature list for capturing and annotating webpages.
Screencapture

5. Evernote Web Clipper

When we spend most of our time using a web browser, storing and cataloging information effortlessly becomes essential. The Evernote Web Clipper for Chrome makes it quick and easy to store just about anything you find on the web in your Evernote account, including selected text, articles, links, PDF's, images and even entire webpages. Tag each snapshot when saving and select an Evernote notebook in which you'll store the snapshot. The "intelligent," context-aware functionality is impressive, with the pre-selection of notebooks (and tags) based on website content.

There is virtually no limit to the ways in which you use it; for example, you could collect inspiration for a particular design project you are working on, and have access to it whenever you need, even if the original is removed.
Evernoteclipper

6. Pixlr Editor

Pixlr Editor is a fully featured photo editor available directly in your browser. Sharing interface similarities to Adobe Photoshop, the learning curve is low and it boasts a wealth of capabilities you would only normally find in a desktop application. The fast, intuitive, thoughtfully organized interface means quick edits are a breeze. It includes editing, filters and adjustment tools and even opens PSD files.

Accomplish image editing entirely in the cloud using Pixlr Editor -- open images from Facebook, Picasa or Flickr, edit them and then save back to the cloud.
Pixlreditor

7. MeasureIt

With MeasureIt, draw out a ruler which shows the alignment and exact pixel width and height dimensions of any selected element on a webpage, an especially useful tool when designing and developing websites. To use the extension, just click and drag out the ruler to find an element's dimensions quickly and easily.

While not as feature-rich as its Firefox counterpart, it is especially useful when tweaking CSS, where accuracy down to the last pixel is necessary. MeasureIt works on local installs of most CMS's but does not work on local HTML files.
Measureit

8. Palette

Colors play an important role in design, and it can be challenging to create the "perfect" palette. Having an extension such as Palette at easy reach within your browser can make this particular task much more efficient.

Palette for Chrome can create up to 64 color palettes and is useful for grabbing ideas and inspiration for color palettes from images around the web. The interface is intuitive and easy to use; simply right-click on the desired image, select "Palette for Chrome," and choose the number of colors you want the palette to generate. A new tab will open, displaying the image and resulting color palette.

The extension was recently updated to fix several bugs, and the code is now open-source and available on Git Hub.
Palettechrome

9. Yet Another Lorem Ipsum Generator

When testing content or typography, dummy text can be useful. For those who don't use alternatives, try Yet Another Lorem Ipsum Generator. It will generate text (paragraphs of variable length), titles, dates and dummy email and web addressees, with other options available via the toolbar button. You can configure the date format and choose specific dates or generate a random date.

Copy text to the clipboard for use in other apps; the extension itself is extremely lightweight as it doesn't include any external libraries or require access to other online resources.
Loremipsum

10. Pendule

Pendule complements the built-in developer tools of Chrome and makes website edits easy, such as viewing CSS, disabling styles, reloading CSS (without having to reload the entire webpage), viewing JavaScript and much more. The extension itself is unobtrusive, quick and responsive, featuring an extensive toolset. The the ability to switch off both images and CSS is particularly useful when designing and developing websites.

There is also a color picker, display ruler, link checker and several script validators, with each feature neatly arranged into groups. The option to change the display resolution, for checking how your website renders on multiple screen resolutions, is neat, and you can even set keyboard shortcuts for the extension from the Options menu.
Pendule

As a designer you may have used Google Chrome for some time already, but are you using the browser to its full advantage? Chrome features a robust extension system that deserves to be explored and tested. It's one reason Chrome can now claim to be the world's most popular browser.

We've gathered 10 of the best Google Chrome extensions for web designers and, when used in combination with the chrome extensions for developers, you could have a fully customized, powerhouse of a browser, completely suited to your individual requirements.

Have we missed any great extensions you love and use on a daily basis? If so, please share your recommendations with other readers in the comments below.

Homepage image composite via iStockphoto, Kameleon007































View the Original article

Posted in , , , , , , , , , , , | Leave a comment

9 Apps Built by Self-Taught Coders

Buffer Pin It Now!

Learning-html5

You can access plenty of service online when learning to code: Codecademy, Skillshare, Treehouse, Code School, Learn Code The Hard Way, Udemy, General Assembly, Udacity and the list goes on. Some charge per class or by monthly membership, while others are free or accept donations.

But still, learning anything outside traditional education requires personal initiative. For many people, it will involve setting aside time outside of a regular day job in which you do something other than programming. But as our world is more and more influenced by what we're able to accomplish with code, being a maker of such programs gives a person an advantage in nearly any industry.

Here are a few apps made by people who had just learned to code. Some have gone on to do greater things, while others might stick around and build their basic prototype into a full-fledged product. At least one is generating enough revenue to make a living on apps he built.

Have you tried to learn to code? What would you want to build? Tell us in the comments.

1. SimpleTax


SimpleTax is a program to help people in Canada file their taxes. Right now, you can sign up with your email address to be notified when the program is live — but while you're waiting, try out the tax calculator, which is already functional. This app is being built by Jonathan Suter, who learned to code with Codecademy.

2. Sworkit

Sworkit is a mobile app that gives users circuit training workouts they can do anywhere. Some example workouts target core, upper body or stretching, and the app also includes cardio workouts and yoga.

Army veteran Ryan Hanna built Sworkit in 2012 as a project to help him learn programming. He used Codecademy lessons to teach himself to code.

3. Open Office Hours



This app lets anyone post office hours along with where they'll be, whether it is a physical location or on Skype. It's also a great place to browse interesting people you might want to meet — and if they are available, you can easily set up that meeting.

Nate Westheimer, executive director at New York Tech Meetup, built the app after learning to code. He explains in a blog post how frustrating it is to work at startups as the product person without being able to build prototypes yourself.

4. BrideBook

This app helps soon-to-be brides keep track of the important things while planning a wedding. Once signed up, you can put in your fiancé's name, the wedding date and other details, including the budget, a guest list, tasks alongside timeframes and businesses, such as the caterer or floral arrangement shop you plan to use.

BrideBook was built by Manuel da Costa, who learned to code through One Month Rails on Skillshare, Michael Hartl's tutorial and Codeschool. Right now the app is tailored for use in the UK, but even without logging your "real" location — features such as the wedding countdown and task lists are still useful. Da Costa is getting user feedback and testing the business model now, and will consider expanding internationally in the future.

5. Reminder Apps

After learning to code through Treehouse, Jordan Garn built three iOS apps, all paid, and now earns $2,000 each month from sales.

One app helps users create an exercise or diet plan, with reminders. Another is focused on good habits, and allows you to track progress (after all, it takes 30 days to build a habit). The last is more general — for any kind of reminders.

6. Major Finder



This app isn't quite finished, but we can already tell it could become quite useful. For anyone who took months, or years, to finally pick a major: What if there was a place to browse and ask people, at schools from all over, what studying for their major was like?

Major Finder was built by a One Month Rails Skillshare student.

7. BusNear.me

This app will ask permission to check your location, and assuming you're in New York, it can indicate which buses are nearby. It's simple, designed for a mobile browser and laid out very simply.
BusNear Me was built by Jonathan Werbell, who took a class at Skillshare and works at Bloomberg Philanthropies.

8. Instacurate

Instacurate uses a hashtag or Twitter user to generate a Pinterest-style layout of links — curated, if you will. When you're looking for the latest news on a trending topic, it might be a fun way to browse.

The app was built by David Bauer, who completed Codecademy's CodeYear. After initially signing up, he took a six-month break before returning to the coding lessons. With his project, he says that the community at Github was helpful with the trickier portions of the app.

9. Worst Best Hairy Chest



Remember the old grade school fable: "First the worst / Second the best / Third the one with the hairy chest"? Well, one Skillshare student, Joshua Beckerman, built an app that passes judgement on who or what is good, bad or plain weird. Right now the site shows a few examples but doesn't seem to be accepting new ones.
Mashable composite. Images via iStockphoto, leluconcepts









































View the Original article

Posted in , , , , , , , , , | Leave a comment

Become a Graphics Pro for Free During Photoshop Week

Buffer Pin It Now!

Photoshop-week

Beginning Monday, CreativeLIVE will host a week full of 40 free online classes taught by professionals at the top of their fields. Taking down two of the largest barriers to accessing education — geography and cost — founder Chase Jarvis hopes Photoshop Week will inspire creative individuals to pursue their passion for photo editing.

Classes are geared toward all levels, from noobs to pros, but each course focuses on how photo editing can be used to further your career.

CreativeLIVE has already educated a few million people through online workshops and tutorials through the website.

"When you get these people next to each other, you get to survey and sample a broad range of styles and types of education — and you get to experience it all at the same time," Jarvis said. "What's broken is the education system. Our hope is to transcend that system."

Online audiences can interact with the instructors through social media on Twitter and Facebook. Designated students who participate in the live audience will act as ambassadors, bringing the online students' questions to instructors. This not only allows students from all over the world to take part in the course but allows them to shape its direction.

"We are inherently social. Online classes where you can download the syllabus — that is not social," Jarvis said.

Gurus are given the ultimate access to anything they might need to aid them during instruction. All workshop sessions are shot with the full CreativeLIVE treatment, using multiple cameras and equipment that keeps the audience engaged. "The best teachers you ever had were entertaining and engaging. We want to continue in that vein," Jarvis said. "They’ve gotten better and have more at their disposal."

Lesa Snider, a long-time CreativeLIVE instructor and the author of the Photoshop and iPhoto series of Missing Manuals, says being able to communicate with an engaged audience that wants to participate is a huge incentive for her as an instructor. "That is a huge difference. I can feel the whole of the Internet there with me, and it is the most rewarding and fulfilling thing that I have been able to do," she said.

Enrollment in Photoshop Week is free by signing up on the website. From looking at advanced numbers, Jarvis is hopeful this will be the biggest Photoshop course of its kind in the world.
Image via iStockphoto, ileela
















































View the Original article

Posted in , , , , , , , , | Leave a comment

10 Must-Have Chrome Extensions for Developers

Buffer Pin It Now!

Chrome-wrench-850

2. Firebug Lite

A must-have extension for many web developers, and for good reason, Firebug allows you to analyze network performance and activity, and edit, debug and monitor HTML, CSS and JavaScript live on any web page. It's not a substitute for Chrome Developer Tools, but works alongside it to allow you to debug with ease.

Written in JavaScript, it is integrated into the toolbar and can be activated on a particular domain. It loads before all other scripts and is quick to load itself, as all code and images are stored in the extensions directory on your machine.

Firebuglite

2. Web Developer

The official port of the long-time favorite Firefox extension, Web Developer, takes the form of a toolbar and boasts a wealth of options, including analyzing web pages and layouts, testing your code and making edits on the fly.

While not as feature-rich as its Firefox counterpart, it still offers a variety of invaluable tools, such as the ability to show hidden elements, populate forms, control browser cache and quickly modify and switch between stylesheets.

Webdeveloper

3. Session Manager

When you're working on the web, browser tabs management is a priceless skill -- it's so easy to slip into bad habits and become "tab happy." Session Manager saves your browsing state and lets you re-open the session later. It is particularly useful if you find yourself opening the same web pages over and over.

The extension groups and saves related tabs, so for example, you could save your favorite news or social networking sites under their own session names, and then quickly access them without having to individually open each website.

Sessionmanager

4. Clear Cache

This simple but supremely useful extension allows you to clear your cache from the toolbar. It works "silently," meaning there are no annoying popups or confirmation dialogs to distract you. It's completely customizable in terms of how much data you want to clear, including app cache, downloads, file systems, form data, history, local storage, passwords and much more, available in the Options settings.
Combine this with the extension Edit This Cookie and you have perfect control of your cache and cookies, for web development.

Clearcache

5. Chrome Sniffer

While experienced web developers can simply look at a website's source code to understand what frameworks and technologies it's using, or even use a resource such as Built With, a quicker, more convenient way exists for Chrome. Chrome Sniffer lists all known JavaScript libraries and CMS frameworks that a websites uses, and can currently detect more than 100 popular CMS and JavaScript libraries.

Once installed, an icon will appear on the address bar indicating the detected frameworks on a website, with version detection. The code for the extension itself is GPL, available on GitHub.

Chromesniffer

6. JSONView

As a developer working with Restful API, reading raw JSON data on a browser can be painfully awkward. It's much easier to read well formatted JSON in tree view, rather than in its raw data format. The Chrome extension JSONView (an unofficial port of the Firefox extension), helps you view JSON documents in the browser.

Instead of being forced to download or be rendered as text, the extension presents documents in the browser similar to how XML documents are shown. The document is formatted and highlighted, and arrays and objects can be collapsed and expanded.

Jsonview

7. Resolution Test

The process of testing the look and feel of your website in different resolutions is not one many web developers look forward to. What Resolution Test does, though, is to make that process efficiently straightforward. The extension changes the size of the browser window to preview the website in different screen resolutions. Choose from a list of commonly used screen resolutions, with an option to customize the list according to your requirements.

Click on a specific resolution or a combination thereof and hit "View all selected." The browser window launches and resizes to the exact specifications you asked for.

Resolutiontest

8. Edit This Cookie

Inspired by the lack of a good cookie manager in Chrome, Edit This Cookie fills that role with ease. The clean, organized interface makes it simple to edit, add, delete, search, protect or block cookies. It presents your current cookies, their values and what properties are attached to the cookie, all of which can be modified.

It's easy to export or import cookies, limit the expiration date of any cookie, or even create a custom cookie -- you will find the "Delete All" feature supremely useful, too. Using the extension proves much quicker than going through the Chrome settings screen to search for cookies related to a particular website.

Editcookie9.

Page Speed Insights

Created by Google, Page Speed Insights analyzes all aspects of a page load, including resources, DOM, network and the timeline, and provides suggestions to make them faster. It integrates well with the Developer Tools toolset and runs the open-source PageSpeed Insights SDK securely, to optimize images, JavaScript, CSS and HTML resources on a website.

It gives specific suggestions for improvement and generates a numeric score, indicating the room for improvement on the current page. When a page is being analyzed, PageSpeed displays the list of web performance best practices, sorted by importance and priority.

Also of note is YSlow, Yahoo's page performance extension that uses either a predefined or a user-defined rule set.

Pagespeed

10. Postman - REST Client

A potential Swiss army knife for web service developers, Postman is a powerful HTTP client to let you test REST web services. With its incredibly clean and intuitive interface and a rich feature set, it's an ideal way to quickly test your requests when developing a REST app. Being able to switch environment variables, from local testing to deploying to the cloud and testing there, is supremely useful. The low learning curve also means you will be building and testing RESTful web services quickly.

Requests can be grouped into collections, enabling support for multiple projects, with the ability to export and share these collections with others, allowing you to collaborate on the same set of requests.

Postman

Working on the web means spending huge chunks of your time within the browser. If Google Chrome is your workhorse of choice, it pays to explore what extensions are available to make your daily tasks less of a chore.

While Chrome has a set of developer tools built in, you can access a wealth of extra extensions that add valuable functionality.

This post covers 10 of the best Google Chrome extensions for web developers to utilize in their everyday tasks, with an upcoming post on Chrome extensions for designers.

Are there any great extensions that we missed? If so, please leave a comment and share them with other readers.

Photo composite images courtesy of dAKirby309, tannerrussell





















View the Original article

Posted in , , , , , , , , , , , | Leave a comment