We all wish we could spend $50,000 to hire an awesome design agency for every new idea we have.
But for early stage startups – especially bootstrappers – that isn’t always a sound investment.
True, a high quality, custom-built brand and website is going to make all the difference someday – and it’s great that you’re into design, man (should be read in hippy voice) – but today you want to focus on getting your idea off the ground and proving its value.
Smart!
So, you’ve got the copy hacking down. And you’ve laid out exactly what you want to say.
But now you need to slap some Tre Chic visuals across your site.
You want this new design to compliment your awesome copy… at which point, getting the most from design comes down to a few choice decisions, which will decide if you look like an MS Paint catastrophe or a Photoshop masterpiece.
First, Let’s Dissect Why We Sometimes Go
Down the Wrong Path with DIY Design
Startups start out loving life. We’re ready to take on the world by designing our own website, logo – whatever.
What happens next?
Based on what I’ve seen, startups get quickly inundated by design decisions. The millions of different paths we can take. The limitless possibilities as to how we can present ourselves. …With so much to consider, instead of focusing on one or two directions to try, we Facebook for a few hours.
(Bonus points if you unproductively vent on Facebook about ‘being unproductive’.)
Today, we say goodbye to being overwhelmed by the wide, wild and wonderful world of web design. I’m going to show you 3 steps you can take to turn endless amounts of options into a clean, clear and attractive design.
And I’m going to ask you to stop seeing the vast forest and start focusing on these 3 primary design ‘trees’: color, typography and graphic elements.
STEP 1: Restrict Your Options
Starting from a blank slate can be intimidating. This is where you put on some dark shades and say ‘pfff… less is more’.
Limitlessness causes apathy, like when you start off looking for new music but end up listening to the same 5 songs as yesterday. That’s why the goal is to not start from a blank slate. Instead, you should be starting with a few key decisions already made for you.
COLOR:
Use no color on your first draft.
This helps you focus on composition and whitespace – instead of contending with matching colors, finding the perfect hue and crazy color theory. If it looks good with no color, it will look good in color as well.
Don’t use black.
What the hell?! First you can’t use color… and now no black? What are you supposed to use, Jedi mind tricks? Yes and no. You can use shades of grey that are close to black to trick people into seeing black.
Why no black? In real life, there is no such thing as pure black. Shadows, the night sky and your designer-mandatory hipster iPhone are all different shades of dark grey or other colors – so the eye is confused by it and unnecessarily drawn to it. Actual pure black on your design overpowers everything else on the screen. That’s a no-no.
Bonus Bootstrap Resource: Never Use Black
TYPOGRAPHY:
Use only 1 font family.
I’m not gonna tell you what font to use (pysch! use Source Sans Pro). What’s more important than the font you use is how you use it. Push it… push it real good. Choose a font family that is extremely legible and has lots of different weights. This will give you the ability to create versatile typography that also feels like it belongs together (one big happy font-family). Side note: keep body copy above 14px at the lowest.
Bonus Bootstrap Resource: Better Google Fonts
GRAPHIC ELEMENTS:
Portray only 1 central theme or concept per graphic element.
There’s nothing worse in design than looking at something that just has too much going on. So, at this stage, as you introduce visuals, make the concept as simple and straightforward as possible. For example, at this stage, Evernote’s logo would only feature the concept of an elephant and not the peeled back ear which represents a note icon. Focus on determining what is the most accurate visual representation of your product or service, and depict it simply. Even if it seems too obvious or unclever.
Bonus Bootstrap Resource: Iconmonstr
STEP 2: Introduce Some Personality
COLOR:
Add one color.
I’ve just unleashed your color beast within. I know you’re ready to roar, but before you start pairing your Crayolas, remember even the most successful startups limit their color palette to one or two colors and each color must be chosen very carefully.
Instead of picking a color because of how it looks or because you like it, think about what role it will play psychologically. What does your brain associate with the color?
Bootstrap Resource: Color Theory for Startups
(free e-book available with awesome newsletter sign-up)
TYPOGRAPHY:
Find the most important phrase on your site and make it a display font.
Display fonts are fonts that carry more personality than a normal font. Display fonts can sometimes be less legible.
You wouldn’t want your whole site to be in this font, but for headlines that need to stand out, a display font is a good idea. Think about your audience, and try to find the font that speaks to them.
GRAPHIC ELEMENTS:
Think of a secondary theme to tie into your original graphic elements.
Look at the Evernote logo again. What subtle twist can you add to your original graphic that will connect to the secondary themes your company embodies? This twist may not even be directly related to your product or service… but it should create visual interest.
For example, in the Startup Cup logo below, the subtle twist is the wind up lever. The cup illustration is in the name of the company, so it’s a direct representation of a central theme of the company (which is exactly what we did in step 1). However, the wind-up lever carries different connotations that are subtle but still relate to the first theme: coffee winds you up and gets you going. Try it and ask yourself, does it look stupid? This brings us to step #3.
STEP 3: Bolster What’s Working… Destroy What Isn’t
COLOR:
Decide if your design needs any accent colors. If yes, add them.
Although super successful startups tend to keep their colors as simple as possible, you will surely find that you need an accent color for elements like call to actions / buttons and links – things that need to stand out on the page.
TYPOGRAPHY:
Decide if you need to add text-shadows or other elements to differentiate certain text.
Look at well-designed startup sites, and see if there’s anything they’re doing with text (usually headlines or subheads) that’s creating visual excitement. Remember to keep focus on legibility.
~
Voila! You just learned how to design. Consider yourself officially graduated from design poser to design noob. All this without an expensive art school tuition, lucky.
You’ll be receiving your I Hate Starbucks sticker in the mail shortly. 😉
~robert
Robert Williams is a freelance web designer specializing in startups. He’s worked with design agencies and successful startups like Appstack and Piece of Work. Tell him how you’ll use his tips below, and check out his FREE newsletter about design for startups: www.startupdesignnewsletter.com
Conversation