Growth Marketing

The 3-Step Hack for Startups Bootstrapping Their Design

Design for HackersWe 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.

Colorless logo

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.

Font families for DIY design

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.

Learn design from Evernote's logo

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?

Complementary color pairs

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.

What font to use for your headline?

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.

Can you design your own logo?

 

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

 

About the author

Joanna Wiebe

Joanna Wiebe - Copywriter and author of "Copy Hackers"

  • Greg Watson

    Great post!

    Now how about you and Joanna critiquing a site together via video so that we can see you two duking it out as to what should be done to improve things.

    Cheers

  • Robert

    Also, if you liked the article, give us an up-vote on Hacker News: http://news.ycombinator.com/item?id=4945443

  • Ben

    This is great! To continue to learn design, are there any resources for marketers who want to live a life outside of using Microsoft Paint? Or, is there a CopyHackers type book for people wanting to learn design?

  • Robert,

    Your post came at a great time. I know my website needs design help. I’m just not ready to spend an arm and a leg to fix it. When I read about web design, the material is usually very good but often complex and a little overwhelming for a non-designer. They give you too many details to think about. I appreciate that you simplify the process, taking it step by step. Your “Step 1: Restrict your options” advice is especially valuable. I also like your suggestions to do a first draft without color and to avoid using black. I’m going to see what I can do to improve my home page without hiring a designer. Then when I hire a designer, I’ll be better prepared to discuss with him or her what I think the site needs.

    Thanks!

    Dave

    • Robert

      That’s a great idea. As a designer, it’s great when a client comes to you with a solid grasp of what they’re looking for. I recently wrote a newsletter covering this topic, I cover what questions you should ask yourself before hiring a designer in order to ensure you get the designers best work: http://us2.campaign-archive2.com/?u=1e57267f9f4986ade0a4b60b5&id=8b7097d5c9

Copywriting tutorial

Come see Jo talk copy & content in 2017

Wistiafest
June 11 to 13 in Boston, MA
Business of Software
September in Boston, MA
Content Jam
November 1 & 2 in Chicago, IL

We built a million-dollar business on blogging

Amazing blog posts build businesses and print money. Now Copy Hackers is teaching indies and teams to write kick-ass posts in half the time. Get notified when we're live.

Unsubscribe anytime. 100% privacy. Powered by ConvertKit