Want to move fast? Just do this (part 1 – Design)

I recently posted “20 hours with Rails 3 & Twilio” on Hacker News.  I set a goal for myself, when creating Phoneify, to move as quickly as possible to get the MVP (minimum viable product) launched.

I promised a write up on how I moved fast and what tools I used.  Many commenter specifically asked for advice on design and layout which isn’t surprising.  Most hackers/coders are pretty bad designers (myself included).  The backend stuff is easy, but when the pixels land on the screen it tends to looks like crap… the perfectionist gene takes over and you’re too embarrassed to launch your MVP, even though everything pretty much works.  This post will focus on speed in design.  I’ll cover non-design related factors in part 2.

Things are a lot easier when someone just gives you the answers.  So I’m going to save you a ton of time on design, and simply feed you my answers.  You won’t become a killer designer employing these tips, but hopefully you’ll grok some useful tips.  Again, the goal isn’t to create a masterpiece of design, but to move quickly towards an MVP launch and to release without being embarrassed about design.

Some of this is Rails related, so YMMV with other frameworks.

1. Useful Tools

Compass/Blueprint/HAML/Sass

Use the Compass gem + HAML gem.  With it you get Sass and a Blueprint grid framework which also provides a browser/IE reset and a variety of design taxonomy freebies.  There is a short learning curve with HAML/Sass, but if you’re in Rails it’s definitely going to be worth your time to pick these tools up.  For me, the most painful part of learning these was not the syntax but learning how to organize your imports and includes (upcoming blog post on that).

http://compass-style.org/

http://haml-lang.com/

Fancy-buttons

Use the Fancy-buttons Gem to create 3 buttons that you will re-use for most everything.  1 Big green button, 1 smaller green button, and 1 non-green button.  Throughout your webapp, when you need a pretty button, use one of these.  https://github.com/imathis/fancy-buttons

Fancy Buttons to the rescue

2. Site Elements

• Use Blueprint for a 24 column, 950px wide fixed-width center-aligned layout.  It’s a modern design pattern that looks great on a majority of screens and users are familiar with.  Avoid going over 1000px wide.  I made the mistake of going along with a previous client’s desire to have a super-wide site (1240px wide)… while it looks great on big monitors, it’s cramped on laptop screens.
• Use a Tri-tone color scheme.  Pick a primary color and then slide up/down Key Black (the K in CMYK) to get your darker & lighter variants.

Tri tone color scheme

• Use a white background.  It’s friendlier.
• Use #CCCCCC for borders and lines.  #999999 for quiet text.   #333333 for most text (using pure black as the text color is a mistake)
• Master font: ‘Helvetica Neue’,arial,helvetica,sans-serif;
• Alternative marketing font:   Georgia,serif;
• Design for 5-6 top level nav elements, with the right-most two being “Login” and “Sign Up” (as needed)
• Give your site some depth by putting a shadow on your main marketing text:  ”text-shadow: 1px 1px 1px #222222;”
• Give primary images /logo some outer glow.  A very small amount (10 px spread) will give a nice polished feel to your images in a un-obtrusive way

Subtle outer glow on images

Photoshop layer settings to achieve outer glow

3. Page Layout/ Basic design

Create a top section for the Logo and Primary Nav.  Below that, have  a section I call the “primary marketing” section.  This is where eyes will be drawn to, so your most compelling marketing message and imagery will be placed here.  Below that will be the “secondary marketing” area for further proof points or secondary call to action.

Creating a visually pleasing design is largely about being extremely consistent and providing a focused visual taxonomy.  Always make sure things are left or right aligned along virtual guide lines.  Use the same padding/margins on content area.  Compass+Blueprint helps in these regards by providing a set of default rules translated into CSS.  Try to always use the same font colors, pixel sizes for similar content types.  When you do break one of your visual rules, it should be on purpose and because you want to call attention to something important on the page.

A note on rounded corners:  never deal w/ image based rounded corners.   Image based corners are a huge time sink*.  Especially when compared to the Sass mixins for rounded corners, which reduces the syntax to line: “@include border-radius(5px);”

This same philosophy should apply to anything that can be done in CSS.  Do as much as possible in CSS/HTML (Sass/HAML actually).  Buttons, Lines, Gradients (if you must) can all be done in CSS3.  Only use images for your logo and primary marketing images.  You’re a coder.  Play to your strengths.

When you do use images, make them transparent PNGs so you can change the background color in CSS without having to re-cut a non-transparent image in Photoshop.

4. Design for Marketing / Call to Action

This is probably the most important section here, but the advice may be the simplest to implement.  Place one big green call-to-action button in the bottom-left of the main marketing area.

Place 1-2-3 workflow text on the right side of the main marketing area.  Work hard to boil it down to 1-2-3.  Yes, 1-2-3 is for retards, but this works.  Customers appreciate this kind of simplicity.

Call to Action and 1-2-3 Workflow

Your main marketing graphic section (the right side of the primary marketing area) is where you should quantify your apps value proposition in graphical terms.  If you app looks really good, and is self-explanatory, you can use a screenshot as done on Active Interview:

Screenshot instead of 1-2-3 Marketing message

The hard part here is deciding *what* your marketing message and call-to-action should be.  Work hard to distill this down to the bare minimum.  Poll your friends, co-workers, or a select few entrepreneurs on your messaging.  If you are unsure or conflicted, do some light A/B testing.

It’s also not too early to start thinking about the funnels on your site, and tracking those funnels.  Having the bare minimum of user choices on the home page helps in tracking conversions and goal completions through these funnels. See: http://www.seotips247.com/google-analytics-tips-for-webmasters

5. Logo/ Icons/ Graphics

Pick a font for your logo here:  http://www.fontsquirrel.com/ Make sure to look at the license terms.

If you need random graphics (workflow arrows, badges, seals, etc), first look for it and purchase it from http://graphicriver.net/.  Why create this stuff from scratch when you can buy them for $5-$10 a pop?

For in-app icons, use the popular Fugue set:  http://p.yusukekamiyamane.com/. Even better, use this sprite which wraps it all up into easy to use css selectors:  http://esdev.net/fugue-icon-set-and-fugue-sprite-css-framework/

If you need better icons, buy these:  http://www.deliciousicons.com/azur.html or these http://picons.me/

6. Organize your asset files

MVC helps keep most of your app organized, but doesn’t enforce organization of your asset files.  To move fast on design, you’ll need to be radically organized.  Here’s my advice on how to handle JS / CSS:

http://codefastdieyoung.com/2011/03/css-js-organization-best-practice/

The Result

Home page final product

* If you want to move fast, avoid the quagmire that is accommodating older versions of IE.  Does it matter if CSS rounded corners don’t render properly on IE?  No, it does not matter.  IE users can live with boxy buttons.  Trust me, this is the least of worries for IE users.