Sacha Greif - Thinking Like A Designer: Principles and Tools for Effective Web Design

I have a confession to make: I call myself a designer, but I never went to design school, only worked in a web agency for a couple months, and learned what I know by reading blogs and following along tutorials.

I think this is one of the reasons why I love writing and blogging: it gives me a chance to give back and in turn help aspiring designers just like I was helped myself.

And I also blog because I want to show that although good design can often feel magical, the process itself isnt: its just about mastering the basics, and a lot of hard work. If I can do it, I believe you probably can as well.

So what you have here is a selection of the most interesting articles Ive written over the past couple years. All I hope is that they will help make a long plane ride a little bit shorter, and just maybe give you some new perspectives on design.

Youve probably encountered these two endangered species in the wild before. The developer who has no eye for color, does not understand typography, and absolutely cannot design. Or the designer who sucked at math even in primary school, is a left-brained person, or doesnt want to mess up the code...

To help you steer clear of these dangerous specimens, here are some distinctive signs to identify them:

Coders Who Cant Design...

• Need a Photoshop mockup for every single screen, including the I forgot my password dialog and the Terms of Use page.
• Assign different values at random to every margins and paddings.
• Think 11px is the perfect size for body copy (and 14px is great for headlines).
• Ask you to export a background image even for a 1px black line.
• Do not understand the concept of aligning things together.

Designers Who Cant Code.. .

• Never think about what the site will look like past the dimensions of their PSD.
• Have been using web fonts since 1998: they just export all text as JPEGs.
• Design a site in Illustrator Indesign.
• Think they can set an images blending mode to overlay in CSS.
• Actually use Photoshops HTML generate HTML from slices feature.

To be clear, Im not saying you should try to do everything yourself. For example, when I work for clients I only provide a PSD or sliced images, I dont code sites. But at least I know enough about coding to communicate with any developer.

Whats more, people often use their ignorance (real or feigned) as a way to avoid extra work and extra effort. And when each person is trying to do as little as they can, projects are rarely successful.

Reaching out to the other side and learning a bit more than the absolute minimum will not only make you produce better work, it also goes a long way towards smoothing the wrinkles in the designer-developer relationship.

Do you ever stop and wonder if what you do really matters? What if the things you do day in and day out had no impact on people? What if it turned out that all this time youve been missing the goal by a mile?

If youre a firefighter saving lives, or a scientist inventing newer, cleaner power sources, theres probably little doubt in your mind that youre making a difference. But as a designer, I must confess that I often start doubting myself. Would it really matter if those text blocks werent aligned on a grid? Arent my clients wasting good money paying me to spend 10 minutes getting a tabs gradient just right?

Unlike artists who create whatever they feel like (those useless bums!), designers like to think theyre solving real problems and contributing to society. Every choice we make is a step towards a well-defined goal. So wed better be sure that were actually useful and making a positive impact.

Big Redesign, Small Impact.

So what to make of this post by Jason Cohen that states that the recent redesign of his company site barely impacted his conversion rate? Does that mean design is useless for start-ups? Is his case representative, or just an outlier?

To answer this question, we first need to define what design actually means. I think we can broadly separate design in three parts: user experience, visual design, and branding. Or, to put it another way , design is how it works, how it looks, and how it feels .

How It Works: User Experience

Although I dislike the term user experience (I prefer interaction design), Ill use it for now so that were on the same page. What I mean by it is the general way things fit together: Is the site straightforward to use? Can the user build a mental model of the way your app works? Do things make sense?

I think we can all agree that UX is important. Although UX has become somewhat of a meaningless buzzword of late, at its core good UX just means a good product. I cant think of many examples of product with bad UX that are still successful, except maybe the ones put out by behemoths like Microsoft that can mitigate their products suckyness with other factors (then again, Vista was a good illustration that youre never completely safe from a backlash... )

Hipmunk: No ads and a great user interface.

The poster child of this idea is Hipmunk . Instead of prioritizing ad revenue or affiliate clicks like many of their competitors, the Hipmunk crew has simply tried to build the best product they could. But this shouldnt seem like a new idea: in the real world, there has always been companies that value product quality over other factors, and some of them have even become very successful doing so.

How It Looks: Visual Design

In comparison,visual design is more straightforward to grasp: does it look pretty? Are you using Helvetica, or just Arial? Do you have rounded corners, or boring old sharp ones?

It pains me to say it, but visual design is probably not that important in most cases. Unlike a car, clothes, or a big flat-screen televisions, websites are not status symbols and are mostly utilitarian. This explains why a big majority of people just dont care how your app looks as long as it gets the job done. Hacker News or Stack Overflow are good examples of very successful sites that have horrible visual design.

Craigslist and MySpace used to be held up as shining examples of the aesthetics dont matter philosophy, but theyre both losing steam. Hmm, might visual design matter after all... ?

How It Feels: Branding

Before we can answer that question, we need to look at the third element of the equation: branding.

Branding is the way people perceive your product and relate to it. If your product was a person, branding would be their personality: is your product warm and friendly? Or is it serious and reliable? Or maybe fun and a little bit out of control?