Your Version 1.0 Doesn’t Have to Look Like Crap
I am a big proponent of getting your product out there as quickly as possible, shipping early and often. Matt Mullenweg put it best:
“Usage is like oxygen for ideas. You can never fully anticipate how an audience is going to react to something you’ve created until it’s out there. That means every moment you’re working on something without it being in the public it’s actually dying, deprived of the oxygen of the real world. It’s even worse because development doesn’t happen in a vacuum — if you have a halfway decent idea, you can be sure that there are two or three teams somewhere in the world that independently came up with it and are working on the same thing, or something you haven’t even imagined that disrupts the market you’re working in.”
If you’re not consistently shipping you’re losing. The lean start up movement also contributed significantly to this line of thought. Get the most valuable minimum increment of a functional product out the door. What I find though is that some semblance of quality gets lost when this line of thought is taken to an extreme. I came across a tweet the other day that quoted angel investor Dave McClure of 500 Startups that echoes a sentiment that I’ve heard from a number of people:
“You want to get to the market as fast possible even with the shittiest product and get feedback to improve.”
Although I agree with getting out to the market as fast possible I don’t agree with shipping garbage. As to Matt’s point, there are probably multiple teams around the world working on the same product. Design becomes a key differentiator as it ultimately leads someone to choose one product over another. The goal is to build half of a product, not a half assed product (Jason Fried quote). There are some very simple solutions that don’t take that much time in your development cycle:
1. Use a grid system
2. Consider proportion
3. Have a professionally designed logo.
4. Focus on basic building blocks.
The goal here is not perfectionism but a clean look and feel that positively contributes to your user experience. No over investment in design time is required. The goal should be to build a solid foundation that you can evolve and design on top of going forward. If you’re building an iPhone app by virtue of using Apple’s standards and style guide the app should look relatively decent although undifferentiated. However if you are developing a web application (mobile we or otherwise) some additional care will need to be taken as it should work across platforms.
1. Grid System
I can’t stress the importance of leveraging a grid system. It makes a world of difference in terms of organization and visual appeal. Khoi Vinh and Mark Boulton are a great resource when it comes designing grid systems for the web if you’d like to dig deeper. With that being said you don’t need to over think it. There are plenty of CSS frameworks out there that you can leverage that are fairly straightforward to use.
I’ve used the Nathan Smith’s 960 grid system for a while until responsive web design and media queries came along. With the popularity of responsive web design a number of responsive CSS grid system have cropped up. Some notable examples include: cssgrid.net, columnal.com, getskeleton.com, lessframework.com, and goldengridsystem.com. I like goldengridsystem.com as the “Golden Gridlet” overlays grid columns and a baseline grid so you can maintain vertical rhythm as screen resolutions are adjusted. A great tool as you are developing your layouts.
Anyhow, if you’re laying out a page it doesn’t take that much more effort to lay it out in a grid.
2. Proportion
In any composition proportion is key. People tend to favor compositions that are proportionally structured over ones that are not. It is always more pleasing to the eye. David Kadavy in his book “Design for Hackers” has a wonderful case study on the MailChimp logo as a study in proportion. I wish the kindle would let me share the whole thing but it only let’s me share the 1st paragraph. Anyhow, I might re-post the whole case study at a later date. It’s located in chapter 5 on proportion.
Apply proportions not only to your grid system but to your typography, logos and other elements. There’s the golden ratio 1:1.618… but I would recommend playing around with other proportions as David outlines, the root 2 rectangle: 1:1.41, the 2:3 rectangle and the 3:4 rectangle. Our canvas is the screen and screens follow some of the proportions outlined above. The 1024x768 screen is a 3:4 ratio (0.75), Apple’s iPhone 4 with a resolution of 960x640 is a 2:3 ratio (0.66) while the Nexus S and MacBook Pro come close to the golden ratio 0.618.
As you a putting your CSS together keep your calculator open and crunch some numbers instead eyeing sizing of typography and site elements by eye. Chose a ratio and stick to it.
3. Have a professionally designed logo
It’s a relatively simple thing to do and it makes an impact. It’s a worthwhile investment. Don’t dwell on it though. Get something that’s of a reasonable level of quality and ship. Don’t let it hold up the launch of your product. If you do have some design savvy and would like to put something together yourself or if you’d like some guidelines in selecting an appropriate logo Marc Hemeon has an excellent blog post. David Airey’s Logo Design Love is also an excellent resource. This can be another blog post in and of it itself so I’ll keep it short. I’ve summarized of their key points below:
Keep it simple - Simplicity allows a design to be more versatile and allows to be used in a variety of contexts. The focus should be on one thing. It’s hard to create something distinct or iconic when you’re trying to do too much. Longevity and timelessness should be the goal.
Work in one color - Again keeps the logo versatile. Black and white is the best approach to start. The focus should be on legibility and contrast.
Work on scale - The logo should work in both a small and large with little degradation.
Be Symbolic - Incorporate some element of the product or service the logo represents. Relevance plays a role here. Again try not do too much.
If all else fails I would recommend creating a wordmark. Text only typographic treatment without any graphic elements. I would purchase a nice typeface if you decide to go the word mark route. Youworkforthem.com tends to have a great selection from various type foundries.
4. Focus on the basic building blocks.
A key building block that should not be overlooked is the user experience design. The screens or interaction someone needs to go through to accomplish a task. The focus should always the least amount of screen, clicks, form fields, etc. Efficiency is the key. Focusing on layout and proportion add an additional enhancement to the user experience. It will provide a solid foundation to add more design elements in the future. Color palettes, accents, illustrations, alternate typefaces, etc. should only be the focus after you’ve shipped your version 1. With basic structure in place you should release.
In short by focusing on the basics, using a grid system, keeping proportion in mind in the development cycle along with getting a half decent logo will go a long way to building a product with a decent look and feel that you can still get out the door. It doesn’t have to look bad. There’s no excuse.
