Some really useful and in-depth concepts about human perception and cognition, and its implications for designing better UI.

Steve Jobs once said:

“You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying ‘no’ to 1,000 things.”

Jared Spool reminds me above quote with his latest post.
Read the article

Along with a decent idea and great execution there’s more to the success of a web app. It’s not the features list but the simplicity and details of an app that matters. Here’s a talk by Des Traynor where he emphasizes the role of good content strategy in the success of a web app.

Being a designer who knows HTML/CSS quite well helps me to make thoughtful decisions about how my designs will perform. Front-end plays a great part in overall performance of an website/webapp. Lara Swanson emphasizes the point in her recent article at A List Apart.

Adding half a second to a search results page can decrease traffic and ad revenues by 20 percent, according to a Google study. The same article reports Amazon found that every additional 100 milliseconds of load time decreased sales by 1 percent. Users expect pages to load in two seconds—and after three seconds, up to 40 percent will simply leave.

Read the article

“Most people make the mistake of thinking design is what it looks like. That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works.” said Steve Jobs and I remember this by heart and try to follow it always.

These days there’s been a trend of using big heavy images and multiple web fonts which highly affect performance of a website, especially on mobile devices.

Brad Frost emphasizes on performance saying:

The road towards better performance doesn’t start with developers or technology stacks. It begins with a shared interest on everyone’s part in making a product that’s lightning fast.

Read the article

I have said “NO” to few great opportunities from Google, AOL, Intel, Groupon and few others because of my interests and priorities in life.

Learn to say “NO” from my favorite designer – Jason Santa Maria. He talks about when and why to say NO, and whom to say NO.

There are principles, rules and best practices for everything we do. Last week while working on revising colors for graphs of Unmetric, I wanted to refresh myself and learn more about using colors in graphs. Luckily I found a brief but useful articles by Stephen Few, author of Information Dashboard Design which I read last year while working with Intel.

Here are 9 rules by Stephen about using colors in charts and graphs:

1. If you want different objects of the same color in a table or graph to look the same, make sure that the background—the color that surrounds them—is consistent.
2. If you want objects in a table or graph to be easily seen, use a background color that contrasts sufficiently with the object.
3. Use color only when needed to serve a particular communication goal.
4. Use different colors only when they correspond to differences of meaning in the data.
5. Use soft, natural colors to display most information and bright and/or dark colors to highlight information that requires greater attention.
6. When using color to encode a sequential range of quantitative values, stick with a single hue (or a small set of closely related hues) and vary intensity from pale colors for low values to increasingly darker and brighter colors for high values.
7. Non-data components of tables and graphs should be displayed just visibly enough to perform their role, but no more so, for excessive salience could cause them to distract attention from the data.
8. To guarantee that most people who are colorblind can distinguish groups of data that are color coded, avoid using a combination of red and green in the same display.
9. Avoid using visual effects in graphs.

Read the article [pdf]

I’ve done both and totally agree that Prototyping wins over Wireframing. I use Keynote for former and Fireworks for latter. However, Prototyping consumes more time thus needs more budget, which is worth it.

Leisa Reichelt lists 11 points why prototyping beats wireframing. Here are top 3:

1. You’re making, not documenting. You can feel the thing you’re making.
2. You’ve got a thing you can start testing, in all kinds of ways, almost immediately. Prototyping is more like experimenting than describing your grand design.
3. Prototypes create the impression of real progress—of something actually happening—in a way that wire framing never does.

See all of them

I’ve read a few books and good articles about baseline grid and how to use it for the Web. But over the time I’ve found it difficult to fit it in my usual design process. Jason Santa Maria share his problems with baseline grids on the web and other technical issues.

It’s incredibly difficult to maintain a baseline grid in a medium as inconsistent and fluid as a web page. Images, form elements, rendering differences between browsers and platforms: these can all throw a baseline grid out of phase. This only gets worse when you’re setting up a design for someone else to implement or maintain, as we often do in client work. In other words, if you’re not intimately familiar with the intricacies of a given grid system, it’s incredibly easy to mess it up.

Read the article

P.S. I still religiously use vertical grid :)

There are many definitions of Simplicity but Daniel Ritzenthaler explains what does Simple actually mean at 52 Weeks of UX:

Prevailing wisdom suggests that simplicity is about less…removal and reductionism. But simplicity is really about comprehension and clarity of purpose…can we design such that people instantly understand what’s going on and make a confident decision about what to do next? To practically achieve simplicity we can stick to a single core idea, improve clarity over time, and use consistency to help users achieve efficiency.

Read the article

Typography along with grids, space and color is one of the most important aspect that distinguishes between good and great design. Jason Santa Maria is very well know for his elegant typography skills and I especially love his work for A List Apart. Here’s his talk “On Web Typography” where he talks about details of type and how to efficiently use it for web.

Since the Responsive Design has been introduced, we all started focusing on making websites responsive and on our way we ignored the aesthetics. At A List Apart, Paul Lloyd explores this subject and suggests how we can retain the aesthetics while being responsive.

We’re embracing “responsive” but neglecting the second part: “design.” We’re replacing fixed-width divs with fluid ones. As we undergo a period of reassessment, both of our practice and of our tools, now is the right time to seek out an aesthetic that is truer to the medium.

Read the article

Designers are trying different UI elements to enhance user interaction everyday. Stephen P. Anderson has compiled some latest and interesting UI patterns emerging lately answering to the following question:

What are the best UI elements (controls, patterns, etc.) that have cropped up in modern web sites and web apps recently?

→ Check the answer on Quora

And do read “Seductive Interaction Design” by Stephen, a really good book about UX design.

A website homepage has been considered most important page till date as it’s believed to be the first impression of any product or company, online. Kyle Meyer—product designer at Facebook—lists 3 types of homepage layouts: Sparse, Short-form and Long-form and explains why Long-form does the best job and how:

Long-form home pages aim to provide the bulk of the site’s content in one place. This provides a pair of benefits: a) you can ensure the user will experience the content in a linear manner (starting at the top and scroll to the bottom), and b) most people want to finish a short story, and the scrollbar tells them there’s an end in sight. As long as your initial content is engaging enough for them to scroll, they’ll most likely stick it out for the ride. Don’t worry, people scroll—it’s the easiest interaction with any internet browsing device—both on mobile and desktop.

Read more at Kyle’s blog

Mailchimp.com is more famous for it’s personality than newsletters. While reading Redesigning the Web by Smashing Magazine I came across the case study about Mailchimp.com redesign launched in January of 2011. It contains some vitals thoughts from senior designer, Aaron Robbs:

I’m a big proponent of modernism and minimalism. If we stripped it back to a four column grid and one typeface, we had to do something to bring the personality back in and take that harsh edge off. Modernism can be very sterile and empty and cold, but that’s not MailChimp’s personality at all. We thought it would be cool to put in these splashes of color, big typography, and use illustrations as a way to expand the visual vocabulary that would give our chimp mascot, Freddie, new elements to relate to.

Read the case study

Kim Culen shares tips and tricks that the visual designers at Adaptive Path use to manage effective client reviews:

I like to think of the visual design as the emotional bridge between the user and interface. However, emotional responses are very personal and hard to quantify. When you are dealing with differing preferences over color, the best solution is not always so obvious. So what do you do when you are faced with a client that simply HATES the color green that you’ve chosen but cannot explain why?

Read the full article

Being a UI designer is much more than pushing pretty pixels. You’ve huge responsibility on your shoulders to help your audience achieve their goals easily and completely. Just like graphic design, UI design has some principles too. Joshua Porter has compiled a list of 20 such principles, that I’m trying to remember by heart.

1. Clarity is job #1
2. Interfaces exist to enable interaction
3. Conserve attention at all costs
4. Keep users in control
5. Direct manipulation is best
6. One primary action per screen
7. Keep secondary actions secondary
8. Provide a natural next step
9. Appearance follows behavior (aka form follows function)
10. Consistency matters
11. Strong visual hierarchies work best
12. Smart organization reduces cognitive load
13. Highlight, don’t determine, with color
14. Progressive disclosure
15. Help people inline
16. A crucial moment: the zero state
17. Existing problems are most valuable
18. Great design is invisible
19. Build on other design disciplines
20. Interfaces exist to be used

Read more at Bokardo.com

Short and valuable piece about why we must learn to write well:

Writing is the connective tissue that creates understanding. We, as social creatures, often better perform rituals to form understanding one on one, but good writing enables us to understand each other at scale.

Read more at Rands In Repose

Few days back I got an email from Steven Walker – Product Design Manager at Groupon – asking about working with Groupon. After Google, AOL and Intel this was another thrilling offer but it didn’t work out because of single simple reason: relocation. While I prefer working from home, these great companies need people sitting together working on great ideas. Let’s see how it goes in future, but thanks for considering me, Groupon.

I, too, am practitioner of minimal design that is built on solid foundation of grids and typography. But sometimes minimalism is misinterpreting as Minh Tran states on Viget Inspire:

A generalized definition of minimalism could be when something, an object or idea, is stripped down to its essential elements. In minimalistic art in the 1960s, furniture and objects were stripped down to the elements that made them structurally sound. These were parts which defined the furniture and was translated into different objects and structure oriented art. Living minimalistically is similar in the ideas of focusing on the elements that are what define us and re-evaluating what is important. Our job as designers is the same. Our job is to craft, refine, and communicate the message of our clients through design, regardless if it is in a minimalist or maximalist style. There should be no erroneous design elements that take away from the focus of your project or message.

This comment from Nate Eagle digs even deeper:

Minimalism comes from the idea that design should eschew elements that are merely decorative rather than functional. Because you jettison all the decoration, you’re forced to hone and optimize the fundamental machinery of a design, and you’re right to point to grids and typography as essential for that.

I think one of the reasons we like minimalism, in general, is that it helps improve these basic aspects of a design since there are no remaining tools for a designer to cover up or distract from a shaky foundation. Good minimalism is hard and involves a lot of work, but it’s work that’s likely to improve you as a designer.

So be careful when thinking about Minimalism, it’s not trend but a solid timeless design practice.