5 Keys to Productive Design – For Non Designers

5 Keys to Productive Design – For Non Designers

By: Nathan Kontny

http://www.fastcolabs.com

I came to design rather late and had to learn my lessons the hard way. Nonetheless, I’ve been able to make something people like to look at and find pleasant to use. So, here are five important things I’ve learned, that won’t automatically make you a designer, but have helped me make my work a lot better.

1. Don’t make decisions

I read a story of why Apple’s products are so simple. The hypothesis was Steve Jobs was terrified about making the wrong choices. He eliminated as many things in Apple’s products as he could where he’d have to make decisions.

That’s inspired me in making Draft. Everything fights to be on the page. I don’t add a line or a color or a fancy navigation bar because I think it would look good. It HAS to be there. If I introduce a line, it’s because it separates two things. Without it, you’d be confused.

Too many people add bits for merely aesthetic reasons. That’s fine if you’re confident in your ability. I’m not. I’m terrified about making the wrong choice. So I give myself as few choices as possible.

Don’t put anything on the page unless it has utility.

2. Do align things

People notice elements that aren’t well aligned. Often, the result looks messy or haphazard.

I invented this exercise to teach myself how to recognize and create harmoniously aligned pages:

Take a website or webpage, not one of your own, and change the alignment of the elements. Here’s an example I created by nudging things around on 37signal’s Basecamp page.

Before:

3015853-inline-inlinenate24125127871176raw

After

3015853-inline-inlinenate24125132835576raw

The changes are subtle. I’ll highlight them:

Before:

3015853-inline-inlinenate24125127367482raw

After

3015853-inline-inlinenate24125132910726raw

You can argue which one you like better. Some colleagues liked mine. But the point of the exercise was to make myself aware of how elements can be aligned and their impact.

Today, I spend considerable time experimenting with alignment. Recently I did a split test of Draft’s homepage:

3015853-inline-screen-shot-2013-08-08-at-111044-am

People already liked it and it converted well. But I centered everything:

3015853-inline-screen-shot-2013-08-08-at-111101-am

My conversion rate improved 10%. Just like many split tests, I can’t define why one is better than the other, and changes like this might have different consequences for you. But just something as simple sounding as alignment has improved how my work is perceived and the amount of people using my software.

3. Make text readable

I don’t care how beautifully crafted your page design is, if I can’t read the text, I’m clicking the Back button and never coming back. Don’t worry about anything else until you’ve made your site easy to read:

  • Learn to design in em’s. It’s a scalable size so your work reads properly on different resolution machines.
  • A font size of 12px was easy to read 10 years ago, but for high-resolution monitors, you need something bigger: 1em or larger.
  • Readable text requires contrast. Designers are trained to think of text as a dark rectangular element against a lighter background (or sometimes reversed). Gray on gray isn’t going to work.
  • Think about line length and spacing. For instance, how’s your favorite book formatted? Most likely there aren’t more than 50-75 characters per line of body text. It’s hard for the eye to find the next line if the line length is too long. Similarly, it’s hard for the eye to pick out the next line if lines are too close together. 150% of font size is one rule of thumb for comfortable line spacing.
  • When the keys to readability make sense to you, start exploring the huge variety of font choices available from services like Google Web Fonts orTypekit. You don’t have to stick with the defaults of Arial, Helvetica, or Times New Roman, which everyone else is using.
  • Don’t forget my first point, which applies to font choices, as well: Don’t make decisions. If you can, stick with one font for everything. If you must, pick two contrasting fonts: one for headlines, one for body text. Choosing one serif and one sans-serif face is the most obvious way to assure typographic contrast. In Draft, I wanted a fixed-width font for writing, so I chose “source-code-pro,” but the headlines looked ridiculous. A nice contrast was my favorite headline font: Futura.

4. Choose colors wisely or stick to the rules

If you’re not trained in color theory, you’re going to need help picking your color palette. My advice: Don’t trust your own taste to make color choices. For Draft, I knew the color palette could be a make-or-break decision, so I picked a triad based on a simple systematic rule. A Triad color scheme uses any three colors that are equidistant on the color wheel–they can be connected by drawing an equilateral triangle.

I found a blue I loved and a couple shades of gray. Done. Since I needed a couple more colors to help signify other things in my application like successful notifications or error messages, I turned to a wonderful color tool, Kuler, picked the Triad color rule, set my two grays and blue I already had, and then used the rule’s constraint to find a red and a green.

5. Taste the soup

If you’ve ever watched Top Chef, you know what happens to contestants who fail to taste and correct their seasonings. Padma tells them to pack their knives and leave.

Similarly, the world’s most brilliantly designed UI is worthless if your users find it hard to use. For about $25 you can watch a video of someone failing to use your application, and I guarantee you, they will fail.

For Draft, I relied on services such as UserTesting.com andBetaPunch.com to capture video of people using early versions. It wasn’t pretty.

People were confused. Things didn’t work as I expected or didn’t work at all. Users even got angry, when, as part of the test, they were asked for $5 after clicking a button they thought would share a simple document with their friend. But, payment was only meant for Draft’s premium copy-editing service, which wasn’t clear. The ensuing ordeal was both humbling and enlightening, and the solution was remarkably simple. I changed the label for the premium editing service from “Share with an Editor” to “Ask a Pro.”

Without video to give me an over-the-shoulder view of users’ struggles, many issues I fixed would have been much more difficult to identify and locate.

You Can Learn

These five points aren’t rules, just guidelines that have proven helpful. Another great resource on these topics is Jarrod Drysdale’s book, Bootstrapping Design.

More importantly, we should realize that good design is available to all of us. The fortunate few seem to be born with genuine talent and trained designers will have many skills most of us can only admire.

On the other hand, we can learn how to design websites and webpages that are usable and useful. And with practice, we, even developers like me, can gain considerable skill at turning out aesthetically pleasing designs.

It’s not easy, and there will be times when you’d like to give up. I struggled, too, but Mr. Serpe didn’t just teach me Algebra. He taught me to believe I could learn anything.

P.S. I’d love to meet you on Twitter.