If you are looking for an effective tool to help the review of design drafts, providing the ability to add comments, suggestions, to highlight problems or to contribute new ideas, Concept.ly is definitely worth a try.
This new web app allows you to upload just about any type of image file that needs to be showcased, organize it with other related files and to share it with your selected teammates or customers.
Key additional features include:
- Compare multiple designs back to back
- Support for mobile devices
- Link different images and pages easily
- Track progress and statistics
- Full support for Dropbox, GDrive, Box.
P.S.: Free to use for a lifetime if you join the beta program now.
In “Storytelling in Web Design,” I explained the three most basic aspects of storytelling — character, setting, and action — and offered ways to begin including storytelling in web design using basic design elements..."
Gridset is a tool that allows you to create sets of grids for your site.
Robin Good's insight:
Gridset is a commercial web-based app for web designers for making grids, designed and built by the team at Mark Boulton Design.
Gridset allows you to create grids for a number of different breakpoints. Each grid can be different – from ratio grids, to simple column grids. This set of grids is then compiled to one fully responsive CSS file for your site.
From the official site: "With responsive design forcing us into working and thinking differently about web layouts, the maths involved in designing for a plethora of different screen sizes started to take up valuable time and cause more than a few headaches.
We were hitting the same hurdles as everyone else. So when we looked to the web for a tool to help simplify the process and realised there wasn’t anything out there, we decided to make our own. And that’s how Gridset came to be."
Not every designer gets the chance to work on a high-profile redesign. In fact, the vast majority will never have that chance. At least not officially. But
Robin Good's insight:
Cameron Chapman does a great job of curating a showcase of great re-design mockups to get great inspiration from.
From Adobe to Amazon, YouTube and the NYT here are 25 great, uncommissioned re-designs of great, popular websites.
P.S.: This is not only useful from a design-inspiration viewpoint, but it provides a great example of how you can build a much richer and more interesting portoflio of your work even when nobody is yet knocking at your door.
This article explains why, when designing for the reading experience, we shouldn't assume anything but learn everything we possibly can in order to establish a solid design concept.
Robin Good's insight:
Marko Dugonjić does an excellent job of explaining why it is very important to make very rational, objective and well-planned decisions when it comes to web typography, as the objective shouldn't be the one of "pleasing" or creating something "nice", but rather one of being accessible and readable for as many people as possible.
The guide covers everything from content strategy, to software and hardware concerns, accessibility, typeface selection, typeface combination, legibility issues and more.
Excellent introduction to typography and font usage on the web. 8/10
Robin Good: If you are looking for a web prototyping solution and wondering which other alternatives are available out there, the newsroom team at Usertesting.com has put together a truly great infographic guide, that showcases the best prototyping, wireframing and web site simulation tools.
From the official site: "If you’re into building websites, mobile sites, or apps, you probably use some type of mockup tool—prior to coding—to help you envision how a site will work and look.
But do you get customer feedback on them? In this ultimate guide, we’ll explore leading mockup tools — wireframing, prototyping, and simulating –and show you how to run user tests with them."
Robin Good: If you are looking for free tools that can help you draft the design of your web site or application, look no further as this is a good collection providing ten wrireframing alternatives.
Definition of Wireframe: A wireframe is a visual illustration of one Web page. It is meant to show all of the items that are included on a particular page, without defining the look and feel (or graphic design).
It’s simply meant to illustrate the features, content and links that need to appear on a page so that your design team can mock up a visual interface and your programmers understand the page features and how they are supposed to work.
Robin Good: If you are considering adopting a web design responsive solution to make your web site fully compatible with any type of screen and mobile device, you may want to give a good read to this excellent guide by Slavik Volinskion SEOMoz, which highlights all pros and cons of adopting this approach. Both from a design-usability and from a SEO viewpoint.
SEOMoz: "Responsive design is not a one-size-fits-all solution to mobile.
According to the author of the Responsive Web Design book, Ethan Marcotte:
"But most importantly, responsive web design isn't intended to serve as a replacement for mobile web sites. [...] And as a development strategy, it's meant to be evaluated to see if it meets the needs of the project you're working on."
Robin Good: With the free Keynotopia Mockup Bundle, you can draft, edit and sketch highly-detailed elements of a user interface while using only Apple Keynote (but don't fret. There are libraries and themes also for PowerPoint and other presentation tools).
The Keynotopia Mockup Bundle includes: -> Over 1,000 vector user interface components designed entirely in Apple Keynote. The following templates are included in the bundle: ->> iPhone Mockup Templates ->> iPad Mockup Templates ->> Android Mockup Templates ->> BlackBerry Mockup Templates ->> Web Application Mockup Templates ->> Facebook Mockup Templates ->> OS X Mockup templates ->> Windows 7 Mockup Templates ->> Windows Phone Mockup Templates
"Keynotopia is the largest collection of user interface design templates that enable you to prototype and test your app ideas in 30 minutes or less using Apple Keynote, Microsoft PowerPoint, or OpenOffice Impress.
The templates include thousands of wireframe and high fidelity vector UI components, meticulously designed from scratch in Keynote, Powerpoint and OpenOffice, and fully editable and customizable without needing additional design tools."
The Keynote Mockup Templates Bundle is available in exchange for a simple tweet (normally they are $49).
Robin Good: If you are looking to understand how to create and manage those pop-up content windows that while dimming the stuff in the background, offer you an elegant peek at what you have clicked upon, this guide by Greg Bates will definitely provide you with all of the basic info you need.
What are modal boxes? What's the difference between Modal and Modeless? How can they be used? Where can I find some sample scripts to start using and experimenting with them?
Generate a color palette from PNG, JPG or GIF image/photo. Receive color suggestions, download Photoshop swatches (.ACO)
Robin Good's insight:
Pictacolous is a free color palette generator which allows you to easily find matching color schemes for any image you submit.
Courtesy of Mailchimp (the email newsletter distribution service) the new free service analyzes your image (any JPG, GIF or PNG not larger than 500K) for individual colors before tapping into Adobe Kuler and ColourLovers public collection of color palettes and suggesting the most relevant ones.
Build high-fidelity fully interactive mobile app prototypes in minutes. Prototypes can be viewed on browser or device giving a real experience to the user how the app will look like and behave.
Robin Good's insight:
Turn your wireframes and designs into interactive prototypes that you can actually see, in the same way that your users will with Proto.io. See exactly how your app will work and look. Swipe, tap, rotate and examine your app inside out the same way your end user will.
Proto.io is also the first web protoyping tool that supports full feature animations and touch events.
Proto.io is an excellent platform to prototype your new app across all kinds of devices and screens from smartphones, to smart TV. refrigerators, car screens, etc.
They say a picture is worth a thousand words. True or not, images are an important part of any website we create. Since it is so easy to embed an image in a website (even the process of creating your
Robin Good's insight:
If you want to learn how to use images effectively inside your website or blog here is a truly excellent guide by Chistian Vasile on 1WD.
In the guide you will find rational and fact-supported advice on how to choose, place and test image use inside web-based content as well as lots of extremely relevant examples of effective image use online.
From the original article: "...if you manage to find the right pictures and insert them in the right places, they can do wonders for you, as they did for some others."
A fantastic, rich and elegantly organized showcase of everything you may possibly want to know about how Google Search works. From policies to algorithms, Google curates in this wonderfully designed website, all of his best assets and information to further educate its global audience.
Ever wondered how Google’s search works? The company launched a new website Friday, appropriately called How Search Works, to give you a behind-the-scenes look at the process from start to finish.
“Here you can follow the entire life of a search query, from the web, to crawling and indexing, to algorithmic ranking and serving, to fighting webspam,” Google Product Manager Jake Hubert said in a blog post announcing the page.
“The site complements existing resources, including this blog [Google’s Inside Search blog], the help center, user forums, Webmaster Tools, and in-depth research papers. We hope the site helps to illuminate the split-second journey from algorithms to answers,” he added.
Jessica Meher at Hubspot has put together a really valuable collection of 15 home page designs to look up to. While the selected designs may not represent your ideal taste or style, they all integrate some of the key critical elements for a home page to be successful. Namely:
a. States clearly what the site is about, what problems it offers, who does it talk to
b. Uses visuals, possibly representing the object/focus of our interest or some "humans" that are doing what we are interested into
c. Provides info bursts that detail what the site is about, what it offers and more.
From the official guide: "This document defines formatting and style rules for HTML and CSS.
It aims at improving collaboration, code quality, and enabling supporting infrastructure.
...like other Google style guides, deals with a lot of formatting-related matters.
It also hints at best practices so to encourage developers to go beyond indentation.
Many style guide authors know the underlying motivation from the question whether to describe the code they write—or to prescribe what code they want to write. Not surprisingly then, in our HTML and CSS style guide you’ll find both (as much as you’ll still find a lot of different development styles in our not entirely small code base)."