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.


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.


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


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


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


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)


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?


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


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.


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 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:


About the author

Joanna Wiebe

Joanna Wiebe - Copywriter and author of "Copyhackers"

  • 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.


  • Robert

    Also, if you liked the article, give us an up-vote on Hacker News:

  • 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.



    • 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:

Copyhackers Tutorial Tuesdays training calendar

Copywriting tutorials

How to write a long-form sales page using survey data
SEO copywriting
Why good copy performs badly
Conversion copywriting defined
How to use VoC to create outlines
How to validate your copy
How to make your writing sound good
Getting creative with conversion copy
How to write headlines
How to be specific in your copy
How to write great bullet lists
How to write a long-form sales page
How to write compelling “agitation” copy
How to write holiday copy
3 essential copy techniques to use daily
How to write a sales page
How to optimize crossheads/subheads

How to optimize Facebook ad copy
How to write an Adwords ad
How to write Facebook-compliant ads

How to evergreen your course sales
How to use SEO landing page
How to get more subscribers
How to script the first sales video
How to script the second sales video
How to script the third sales video

How to write welcome emails
How to write a launch-day sales email
How to write a last-day launch email
How to write a cold email
How to write cold emails for services
How to write a trial-ending SaaS email
How to write a post-welcome SaaS email
How to write TOFU emails

How to get paid to write proposals
Creating and selling packages
How to write a project proposal
How to present your copy to clients
How to get more proposals approved
How to wireframe your landing pages
The art & science of pestering
How to pitch your copywriting services
How to create a biz-worthy home office
How to handle awkward client convos
How to master customer interviews
How to keep your copy reviews on track

How to write a long-form sales page using survey data
A super-speedy formula to find VoC
How to Marie Kondo your VoC data
Optimize your email sequence with Trello
How to research a blog post
How to plan a SaaS onboarding funnel
How to use Amazon review mining
How to do a content audit
How to know what your visitor’s thinking
Creating a launch command center
A 3-part copywriting process for newbies

Likes to leads
SEO copywriting
How to optimize a headline
How to optimize a SaaS sequence
How to optimize content for SEO
How to validate your copy
How to optimize Facebook ad copy

How to write an epic blog post
How to write a mass-appeal blog post
How to write funny content
How to keep readers reading
Blog post formula for authority building
How to write an ultimate guide

Sweep 1: The Clarity Sweep
Sweep 2: The Voice + Tone Sweep
Sweeps 3 & 4: The Believability Sweeps
Sweep 5: The Specificity Sweep
Sweep 6: The Heightened Emotion Sweep
Sweep 7: The Zero Risk Sweep