Thursday, February 9, 2012

Fucking Ship It Already: Visual Design

I asked on Twitter whether anybody would buy a UX book called Fucking Ship It Already. Apparently some of you are interested. So, in the interest of following my own advice, I’m shipping the book iteratively in the form of this blog. You’re welcome.

I’ve talked in the past about lots of ways to do user research faster. Now, let’s talk about a way to make your design process faster. This is not a new idea, but it’s worth reiterating for those of you who are trying to make decisions like this on a day to day basis.

Today’s chapter will cover the fastest and most useful sort of visual design for your lean startup.

There is some tension out there in lean startup land. Many people favor eschewing visual design polish all together, since it’s more important to figure out if a product is useful and usable before spending time “making it pretty.” Other people argue that a good user experience includes things like trust and delight, which can be enhanced by good visual design.

I’ve seen this work both ways. I was speaking with an entrepreneur the other day who told me a relevant story. Apparently, she had spent time on visual polish for a login screen. There were a few things that took awhile to implement, but they made the screen look much better. Unfortunately, the next week she had to rip it all out to change the feature, and all that time pushing pixels was wasted.

On the other hand, I’ve had dozens of people talk about Path’s gorgeous and delightful interface recently. Would they have gotten that kind of buzz without spending time on the visual details? Most likely not.

So, what does this mean for you? Should you spend time on pixel perfect screens and delightful visual design? No. And yes.

Here’s what you should do: spend a little time developing clean, flexible, easy to implement visual design standards.

What That Means

It’s probably not worth your time to fret and sweat over every single pixel on every single new page, mostly because you should always plan on iterating. When you’re a startup, any new feature may be killed or transformed in a week’s time.

If you spend days getting everything lined up beautifully on a product detail page, that could all be blown to hell as soon as you add something like Related Products or Comments.

Many people think that the right answer is to have a grand vision of everything that will eventually go on the page, but things just change far too rapidly for this. Imagine that you’ve carefully designed a tabbed interface with just enough room for four tabs. Now imagine that you need to add a fifth tab. I hope you didn’t spend too many hours getting all that spacing exactly right.

What You Should Do Instead

How about spending time on the basics that won’t have to change every time you add a feature?

For example, you could establish standards for things like:

  • An attractive color palette
  • Font sizes and color standards for headers, sub-headers, and body text
  • Column sizes in grid layouts
  • A simple and appealing icon set
  • Standards for things like boxes, gradients, backgrounds, and separators
  • A flexible header and footer design

Why You Should Do This

The great thing about having standards like these is that engineers can often combine them with sketches to implement decent looking screens without having to go through a visual design phase at all.

Also, since these things are reusable and flexible, there’s no wasted effort in creating them. Killing a feature doesn’t make knowing that your H1s should be a certain size and color any less valuable.

The best part is that you save time in a few important ways. First, as I mentioned, you don’t necessarily need to involve a visual designer every time you want to create a new screen. Second, this sort of approach tends to encourage a much simpler, cleaner, more flexible design, since items need to work in various combinations. And lastly, it tends to keep things more consistent across your product, which means that you’re less likely to have to go back later and do a complete redesign after things have gotten hideously out of whack.

It won’t solve all of your visual design woes, but it will make developing new features go faster, and you won’t be quite as sad when they fail miserably and you have to kill them.

Like the post? Want more tips on shipping already? Follow me on Twitter.

5 comments:

  1. Hi - thanks for the post and suggested approach. Would you have any links (even just keywords) to resources for engineers wanting to get a basic but standard visual design up and running (without a visual designer)?

    ReplyDelete
  2. Hi MrHatken,

    Yes. Try something like Bootstrap. https://github.com/explore/forever
    It actually establishes a lot of those patterns for you.

    Alternatively, check out things like PatternTap to get inspiration from other great sites.

    Or google "color palette generator" for ways to pick a nice palette.

    There are also thousands of free icon sets that you can search for at Smashing Magazine.

    ReplyDelete
  3. Thanks Laura - that's a great start. I knew of some of the tools (like colour palette generators) but Smashing Magazine and Bootstrap are great suggestions. Cheers, Ashley (MrHatken).

    ReplyDelete
  4. Laura, just found your blog and have enjoyed your writing so far. Do you have more thoughts on the value of Bootstrap? I've used it on several projects (including a pretty big app) and I'm considering integrating it into the design process of my firm (we partner with founders to build web startups). Only a few tools deserve mention in the same sentence as process, but I think Bootstrap may be one of them. Early in a product's life, it helps a designer focus on what's important, not things like button size and whether h1 is 46 or 48px. What do you think?

    ReplyDelete
    Replies
    1. Glad you liked it.

      I don't really have more thoughts on bootstrap. In general, I'm for anything that helps a designer focus on the flow and usability before starting to stress about pixels and gradients and fonts. Those things are all useful, but they're too easy to get obsessed with before you actually have a product that people can use. Fabulous visual design can't make an unusable product usable, but a very basic, clean visual design, like what you get from Bootstrap or Blueprint or a few others, are fine for an MVP.

      Although, if you've got a designer who's thinking about button size before flow, you've honestly got a bigger problem. Honestly, they should be working out the flows and usability in whatever tool is easiest for them to move quickly.

      Delete