A free excerpt from the best-selling eBook

Bootstrapping
Design
Roll your own design.
Youre building a business, but great design feels out of
reach. What if you could design it yourself?
Available for purchase at http://BootstrappingDesign.com

This sample includes Chapters 1 & 7 and the Design Critique

Cheatsheet.
If you have any feedback or comments, email me at:
[email protected].
Thanks for reading!
Jarrod Drysdale (@studiofellow)

Bootstrapping
Design
Roll your own design.

Second Edition
The design eBook for bootstrappers,
founders, and hackers.
BY JARROD DRYSDALE

Part 1: Mentality
Introduction 4
You, The Designer 10
UX, UI, and Other Buzzwords
Part 2: Principles
Layout 25
Visual Hierarchy

38

Proximity & Space 48

Typography 56
Color

88

Part 3: Practice
Your New Process 103
How To Steal 114
Visual Design Tips 124
Evaluating Design 143
UI Examples 152
Thanks 193
Resources

195

Author Bio

199

Acknowledgements

202

17

Chapter 1

Introduction

Bootstrapping Design

We are bootstrappers: developers, scientists, hackers,

founders, marketers, writers, designers, and thinkers who are
building the new breed of online businesses.
We are starting businessesnot pandering for design
awards. Were building lean and profitable startups rather
than the next Facebook.
If you arent a bootstrapper, this book isnt for you. There
are many design books that teach how to become a full-timejob designer and many that teach formal design theory and
advanced techniques for readers with years of experience.
This book contains the minimum design fundamentals
that bootstrappers must understand in order to launch a
business. My intent is to emphasize design basics rather than
to reduce the whole of design to a bag of tricks. Youll notice
peripheral topics such as kerning, color wheels, and art history
are absent. This is not because such topics are unimportant
but because they are neither suitable for beginners nor
relevant to their bottom line.
Im writing this book because design truly affects the
success of businesses. I believe in bootstrappers and the
businesses they are building, and I know design can help them
succeed. I believe great design is for everyonenot just the
few fortunate enough to have big budgets.

Chapter 1: Introduction

Attracting More Users

Getting more users is the wrong way to think about
business. Before you do anything else, including read this
book, you should know who your users are, where they are,
and how you can reach them. Great business comes from
understanding peoplewe have all seen that truth firsthand.
Design cannot fix a flawed business strategy. My first
web app was beautiful by all accounts, but it failed. It failed
because I did not understand business nor the customers
I wanted to reach. Do yourself a favor: before you start up,
learn. Read about business and research your customers.
However, be careful who you listen to because there is much
bad advice in the startup scene. The only reliable sources of
business advice I have found are Amy Hoys 30x500 class and
Ash Mauryas book, Running Lean.

Design Affects Business

Once you understand potential customers, you can use design
to engage them. How? Design strengthens communication.
Design exists to support content and deliver ideas with

Bootstrapping Design

greater effect, clarity, and insight.

If potential customers do not understand what you are
offering, they will not buy your product. So not only do you
need to be a good writer; you need to learn to present your
message clearly.
However, your goals do not end with making a sale;
designers aim to create a painless and, hopefully, even
enjoyable experience. Forming an emotional connection with
customers cements your brand in their minds.
Research reveals that visual beauty supports business
goals. Aesthetics build trust in mere milliseconds, affect
purchasing decisions, and even affect perceived value and
usability.
(Read about the research at A List Apart here and here,
and at UX Myths.)

Design It Yourself
You wouldnt be reading this book if you didnt already see the
value of great design. The real question is: why should you be
the designer for your business? There are many other ways
to fulfill your design needs: themes, templates, frameworks,

Chapter 1: Introduction

crowdsourcing, and (obviously) hiring professional designers.

Hiring a designer is expensive, and when bootstrapping
you have to question whether a new, undeveloped idea
warrants such a substantial investment. Many of us couldnt
afford to pay a designer $100 per hour even if we wanted to.
However, validating the idea before you sink too much money
into a project is wise, regardless of whether you can afford it.
Themes, templates, and crowdsourced design never fit
the project. They are generic and inflexible. They are created
without any understanding of the problem they propose to
solve. These methods reveal the difference between design
and decoration; you will accomplish more by tailoring a
message than you will by slapping any pretty logo on a page.
Frameworks like Twitter Bootstrap and Foundation can
provide a great starting point for a new project, but most still
require some design acumen to be fully realized.
So instead of any of these, learn to design it yourself.
You are absolutely capable of producing beautiful design
that supports your business. Keep in mind that later, as your
successful business brings in profits, you can even hire a
professional designer if youd like.

Bootstrapping Design

10

But for now, designing it yourself is the best course of

action. Be honestits the option you fear most. But rather
than fearing the edge of the precipice, were just going to
jump off the ledge.

Chapter 7

Typography

Bootstrapping Design

12

Typography presents an incredible opportunity for those of us

who are woefully unskilled in illustration or creating custom
graphics. Its a surprisingly easy way to add lots of visual
appeal to your work.
Youll notice that fonts are a topic of passionate debate
in the design community, famously Comic Sans and Papyrus.
Furthermore, type geeks have strenuous and detailed criteria
for pairing fonts. Ignore all that. The goal for this chapter
is to teach you a few simple strategies for getting a custom
typographic look without wading through thousands of fonts.
Many design books go into exhaustive detail about
typography and explain classifications, historical significance,
genres, and other minutiae. Most of this knowledge is of little
use for bootstrapping a new business, so Im leaving it out. If
you really want to geek out on the finer points of typography,
Ill list a few resources for you at the end of this chapter.
However, for the sake of getting your business rolling, heres
all you need to know about type.

Chapter 7: Typography

13

Display and Text Fonts

As of right now, start thinking about fonts in terms of two
uses: display and text.
Display fonts are for headlines, logos, illustrations, and
other features that can accommodate larger font sizes or more
decorative typography. The goals for display are emphasis and
visual interest.
Text fonts are for paragraphs, long-form content, and
prose. Here, the goal is readability.
Some fonts can work well for both display and text.
However, many do not. Learning to recognize the difference
is important, but there are no concrete rules. Some fonts
might not provide enough visual interest in a display setting,
while many more decorative display fonts would be nearly
impossible to read in a paragraph. If you are unsure about
whether or not a font will work for one of these settings, try
it. The important point is that you pay attention to the role of
the font.

Bootstrapping Design

14

Type Terms
Font: the software file that stores the shapes of
letters. Arial is a font file. Arial Bold is a separate file.
Typeface: the design of the shapes of letters. Arial is
a typeface design you can use by installing the Arial
font file.
Font Weights: Versions of the line thickness in
letters, such as regular weight and bold weight. Font
families can include weights such as: hairline, thin,
light, medium, regular, semibold, bold, heavy, black,
and ultra.
Font Styles: Variations in the shapes of letters such
as italics and weights, or combinations of the two.
Font Family: The group of font files for each of the
styles of a typeface. Arial, Arial Bold, and Arial Italic
together form a font family.

Chapter 7: Typography

15

Serif

Typefaces that have short wedge

shapes or lines at the ends of the
strokes of characters.

Sans Serif

Typefaces that do not have serifs.

Slab Serif

Typefaces that have block-like serifs.

Script

Letters are connected like

cursive handwriting.

Italic / Oblique
Letters are slanted.

Bootstrapping Design

16

Use Custom Fonts

Instead of Defaults
Browser-safe fonts and native device fonts are fine for many
uses, but you will always get more mileage out of custom
fonts. Custom fonts can contribute visual polish without
requiring much extra work.

If you are working on the web, use a service like Typekit,

Fontdeck, or Google Fonts. These are more affordable than
buying fonts to install on your computer, and they provide
incredible value. Also, because of technical challenges and
licensing restrictions, running Typekit or Fontdeck is easier
than purchasing webfonts to host on your own server and
apply via @font-face.

Chapter 7: Typography

Choosing Fonts
for a Project
The best rule of thumb is to limit your design to two font
families. This limit simplifies your decision while creating
your design. Each time you discover an element that needs a
new style, you have fewer options to weigh.
When picking fonts for your project, use one of these
strategies:
1. Pick one display font and one versatile text font family.
Using this strategy, you can have a nice, expressive font
for your logo or headlines and can fill in the gaps with the
more versatile text font. By versatile, I mean a family that
works well for paragraphs, but can also work for buttons,
subheaders, and navigation when the display font isnt
suitable.
2. Pick one extremely versatile font family and use it for
everything.
Some font families are extremely versatile because they
include lots of weights and styles. Using one of these

17

Bootstrapping Design

18

families is a great way to have lots of expressive and dynamic

typography that always matches. You dont have to worry
about making sure the fonts you pick match. The person who
designed the typeface already did that hard work (Youll notice
I used this strategy in this book by picking the Calluna font
family).

Readability First
Font size.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
faucibus varius dolor, eget auctor magna fringilla ut. In orci purus,
iaculis vitae convallis vitae, rutrum vel augue. Nunc blandit posuere
nulla, ac placerat nisi iaculis condimentum. Proin aliquet iaculis
fringilla. Nam quis est felis. Aenean dolor quam, facilisis vel lacinia
eget, aliquet sed risus. Morbi mattis ipsum non sapien ultricies laoreet.
Mauris egestas enim quis nisl tincidunt eu suscipit felis pellentesque.
Cras scelerisque malesuada dignissim.

Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Praesent faucibus varius
dolor, eget auctor magna fringilla ut. In
orci purus, iaculis vitae convallis vitae,
rutrum vel augue. Nunc blandit posuere

Dont make readers squint. Set paragraph text at a minimum

equivalent to 16px, and then pick text sizes for other elements
relative to that. Dont decrease the font size if your content
looks too long. Instead, edit your content. If your grandma
cant read it without her magnifying glass, its too small.

Chapter 7: Typography

19

Line height (or leading).

Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Praesent faucibus varius
dolor, eget auctor magna fringilla ut. In
orci purus, iaculis vitae convallis vitae,
rutrum vel augue. Nunc blandit posuere
nulla, ac placerat nisi iaculis condimentum.
Proin aliquet iaculis fringilla. Nam quis

Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Praesent faucibus varius
dolor, eget auctor magna fringilla ut. In
orci purus, iaculis vitae convallis vitae,
rutrum vel augue. Nunc blandit posuere

The spacing between lines of a paragraph is equally crucial for

easy reading. Rule of thumb dictates that spacing should equal
about 125% of the font size, or 1.25em. You might decide to
adjust this depending on the characteristics of the fonts you
are using, and thats perfectly fine. For some fonts, I even use
150% or 1.5em line heights.
Color Contrast.
Lorem ipsum dolor sit amet, consectetur

Lorem ipsum dolor sit amet, consectetur

adipiscing elit. Praesent faucibus varius

adipiscing elit. Praesent faucibus varius

dolor, eget auctor magna fringilla ut. In

dolor, eget auctor magna fringilla ut. In

orci purus, iaculis vitae convallis vitae,

orci purus, iaculis vitae convallis vitae,

rutrum vel augue. Nunc blandit posuere

rutrum vel augue. Nunc blandit posuere

The contrast between text color and background color affects

reading speed. Too many websites have light gray text thats
difficult to read on anything but an Apple Cinema Display.

Bootstrapping Design

20

Give readers a break and use high contrast for all your text.
For more, see the Color chapter.

Maintain Consistent Styles

If you write CSS, you understand the concept of styles that
are applied to multiple elements on a web page. Regardless of
the medium, maintaining consistent type styles is crucial for
the sake of clarity and readability. This sounds simple, but Id
argue it is the biggest and most common typographic mistake
that people make.
Content must be well-organized before you can apply
consistent typographic styles.
Many typographic errors are caused by poorly formatted
or organized content. As a designer, you are responsible for
facilitating communication; you guide the user through
the content. This means you must understand which lines
are headers, subheaders, or just bold. If you didnt write the
content, work with the person who did to get it organized
before you continue. This includes maintaining writing
conventions for the usage of headers, subheaders, bold, etc.

Organize
your
content.

Bootstrapping Design

22

Use the fewest text styles possible.

No project needs five different paragraph styles or eight
different header styles. Start with one text style for each of
the most common elements and be judicious when adding
new styles. Reuse styles whenever possible, unless doing so
sacrifices clarity.
Ensure a minimum difference in text styles.
Headers, subheaders, and paragraphs need to be substantially
different. For example, do not set a header at 30px bold and
a subheader at 28px bold. Readers will not recognize the
difference and will struggle to recognize when transitions
occur in the content.
Font size is not the only way to differentiate styles. You
can also use weight, italics, capitalization, color, and more. For
example, main headlines could have a light weight and vastly
larger font size, and to contrast, subheaders could be smaller,
bold, and in all caps.

Chapter 7: Typography

23

How to Know If Fonts Go

Well Together
Pairing fonts is challenging. As I mentioned at the beginning
of this chapter, typography geeks often pair fonts based on
categories and historical genres. Approaching font selection
this way requires substantial knowledge before it becomes
productive. This is not an effective use of your time, so
instead, here are some simple guidelines for pairing fonts.
Dont use two fonts that have a similar style.

My First Blog
By Frank Blogger

My First Blog
By Frank Blogger

The first example uses two different fonts. The second uses the same font.
Note the differences between the letter g in the first example.

Using two similar fonts can make your design look amateur.
Theres no reason to use two similar fontsusing only one is
always better, since they serve the same purpose, anyway.

Bootstrapping Design

24

Dont use two fonts that have a lot of personality or are

highly decorative.

My First Blog
By Frank Blogger

My First Blog
By Frank Blogger

My First Blog

By Frank Blogger

Instead of using two decorative fonts, pick just

one of them and use a text font next to it.

Using two decorative fonts in the same design runs the risk
of looking distracting, cluttered, and overwhelming. Some
recent design trends, such as retro signage lettering, do this
but they require some experience in order to get the balance
right. Its not worth the risk and additional time spent while
you are trying to get your business off the ground. Instead,
just pick one of the display fonts and let it be the center of
attention.
Consider using a serif and a sans-serif, possibly from the
same family.

My First Blog
By Frank Blogger

Calluna and Calluna Sans are designed to go well together.

Chapter 7: Typography

25

A classic and beautiful pairing is a sans serif for display and a

serif for text. Inverting this pairing can work, too. The point is
that choosing a serif and a sans reduces the likelihood that the
fonts will clash because of being substantially different. Even
better if your fonts are part of the same font family: they are
guaranteed to match, such as a couple of the suggested starter
font families in this chapter.
Dont over-think it. Just try it.
Lorem ipsum dolor

Lorem ipsum dolor Lorem ipsum dolor

Lorem ipsum dolor

Morbi accumsan tincidunt

augue et aliquam. In et dui.

Morbi accumsan tincidunt

augue et aliquam. In et dui.

Morbi accumsan tincidunt

augue et aliquam. In et dui.

Morbi accumsan tincidunt

augue et aliquam. In et dui.

Examples of Type Studies. Any of them could be correctthe point is to explore!

The best way to know if fonts go well together is to try them!

A common method for doing so is to use a type study. A type
study is essentially just a template of content samples you can
use to switch out fonts for comparison. Use something like
Lorem Ipsum (or even better, sections of real content) and
create a page with a headline and a paragraph. Save several
copies of the page and try different font combinations on
each. You can do this in any format you want, such as HTML
or Photoshop. Print them out and compare. This is easier
than switching out fonts repeatedly on your real design.

Bootstrapping Design

26

How To Get Started

With Typography
Pick your go-to fonts.
Rather than face the staggering volume of choices head on,
start small. Choose just a couple of font families that you
really like and use them for every project. The truth is, you
dont need a new unique font for every project. The best
fonts are versatile. They are suitable for a variety of design
aesthetics. Pick out a couple of favorites; these are your go-to
font families. Then use them everywhere. Later in the chapter,
Ill provide a few suggestions to get you started.
Let the font do the heavy lifting.
Decorative or overtly expressive typography is difficult to
achieve without looking tacky or unprofessional. For now, be
conservative. Delay trying more sophisticated styles until you
have some more experience under your belt.
Dont try to force your fonts to be unique by modifying
them or drawing special shapes or characters. Beautiful
typography is about calling attention to the elegant shapes of

Chapter 7: Typography

27

the letters. This is an exercise in restraint. Pick a quality font

and let it speak for itself. Type designers spend thousands of
hours perfecting every curve and angle of every character in
their fonts. Right now, you are no match for their skill. Lend
some trust. Let your fonts work for you. Thats what the pros
do, and thats how youll get beautiful typography.

Let the
font speak
for itself.

Chapter 7: Typography

29

Versatile Font Families to

Get You Started
Many design books will point you toward traditional fonts
like Trajan, Garamond, and Gill Sans. Thats fine, but these
fonts probably arent going to give you the look you want for
projects like modern web applications (Furthermore, pairing
them with node.js, Rails, or the latest framework hotness
seems downright immoral). So, instead of supplying the oldschool staples, Im going to recommend some newer, more
popular, but also impeccably well crafted and timeless fonts
as a starting point for your typography adventures. Look over
the type specimens below. For each font family, Ive noted
whether it is appropriate for display and/or text and linked to
it directly on Typekit or Google Fonts.

30

Bootstrapping Design

Calluna & Calluna Sans Display & Text Typekit

Taken from online PDF type specimens for Calluna and Calluna Sans.
All rights belong to respective creators.

Chapter 7: Typography

31

&
FF Meta & FF Meta Serif Display
& Text Typekit

Meta Meta
vs

Meta ist ein Frauenvorname. Es handelt sich

dabei um eine Abkrzung von Margaretha

ff Meta Serif ist eine Schrift, gestaltet von

E. Spiekermann, C. Schwartz & K.Sowersby.

Before the development of modern science, scientific questions were

addressed as a part of metaphysics known as natural philosophy; the
term science itself meant knowledge. The scientific method, however,
made natural philosophy an empirical and experimental activity unlike the rest of philosophy, and by the end of the eighteenth century it
had begun to be called science in order to distinguish it from philosophy. Thereafter, metaphysics became the philosophical enquiry of a
non-empirical character into the nature of existence. Thus the original
situation of metaphysics being integral with (Aristotelian) physics and
science, has become reversed so that scientists generally consider
metaphysics antithetical to the empirical sciences.

Before the development of modern science, scientific questions were

addressed as a part of metaphysics known as natural philosophy; the
term science itself meant knowledge. The scientific method, however,
made natural philosophy an empirical and experimental activity
unlike the rest of philosophy, and by the end of the eighteenth century it had begun to be called science in order to distinguish it from philosophy. Thereafter, metaphysics became the philosophical enquiry of
a non-empirical character into the nature of existence. Thus the original situation of metaphysics being integral with (Aristotelian) physics
and science, has become reversed so that scientists generally consider
metaphysics antithetical to the empirical sciences.

Kitchen
Buffet
The Meta forms the northern
boundary of Vichada Department. In Puerto Carreo it
flows into the Orinoco.

1050 Meta is an asteroid.

Its provisional designation was 1925 RC.

Saint Augustine of Hippo asked the fundamental question

about the nature of time. A traditional realist position in ontology
is that time and space have existence apart from the human mind.
Idealists, including Kant claim that space and time are mental
constructs used to organise perceptions, or are otherwise unreal.

Heavy Meta
Taken from online type specimens for FF Meta and FF Meta Serif.
All rights belong to respective creators.

Bootstrapping Design

32

Proxima Nova Display & Text Typekit

Proxima Nova Regular

VOYAGER
supernova
NEUTRON STAR

Planetary Orbits
HORSEHEAD NEBULA

2001: A Space Odyssey, 68

APOLLO LANDS ON MOON: 1969
Vexed Buzz quietly watched Neil jumpin

VEXED BUZZ QUIETLY WATCHED NEIL JUMPIN

1957 SPUTNIK 1958 EXPLORER 1961 VOSTOK 1962 MERCURY 19
1. MERCURY 2. VENUS 3. EARTH 4. MARS 5. JUPITER 6. SATURN 7. U
Vexed Buzz quietly watched Neil jumping to mark the surface. Vex
MARK SIMONSON 2006. ALL RIGHTS RESERVED.

M
N
O

T H I S F ON T I S AVA I L A B L E F R OM W W W. MS -ST U D I O. C OM

Taken from online PDF type specimens for Proxima Nova.

All rights belong to respective creators.

Chapter 7: Typography

Skolar Display & Text Typekit

intellect
Academic
calligraphy
Las edicines de lujo, con cuidado

I can see many things far off

beruka 1973-85

sign
high x-heightlow contrastserif

perpendicular
www.type-together.com

Taken from online PDF type specimens for Skolar.

All rights belong to respective creators.

33

Bootstrapping Design

34

Adelle Display & Text Typekit

International
Conference will be held in Kopenhagen in 2009

Modern time
financial reviewers
School tests for 7 and 11 years old

Newsreel

GLOBAL
Chic without the suffering: fashion displays its ethical face at the

Responsibility
Foreign policy makers
www.type-together.com

Taken from online PDF type specimens for Adelle.

All rights belong to respective creators.

Chapter 7: Typography

Pacifico Display Only Google Fonts

Taken from online type specimens for Pacifico.

All rights belong to respective creators.

35

36

Bootstrapping Design

Playfair Display Display Only Google Fonts

Taken from online type specimens for Playfair Display.

All rights belong to respective creators.

Chapter 7: Typography

Overlock Display Only Google Fonts

Taken from online type specimens for Overlock.

All rights belong to respective creators.

37

38

Bootstrapping Design

Source Sans Pro Display & Text Google Fonts

Taken from online type specimens for Source Sans Pro.

All rights belong to respective creators.

Chapter 7: Typography

Lora Display & Text Google Fonts

Taken from online type specimens for Lora.

All rights belong to respective creators.

39

Bootstrapping Design

40

Alegreya Display & Text Google Fonts

Taken from online type specimens for Alegreya.

All rights belong to respective creators.

Chapter 7: Typography

Bitter Display & Text Google Fonts

Taken from online type specimens for Bitter.

All rights belong to respective creators.

41

Bootstrapping Design

42

How to Find New Fonts

Take a few minutes and browse some design work that
you admire. Jot down the fonts used and build a short list.
Then, try them out using the type tester features on Typekit,
Fontshop, or MyFonts. You can read more ideas about this
tactic in Chapter 10, How To Steal. Also, the resources below
are great places to discover new fonts.

Further Reading &

Inspiration
The Typographic Desk Reference
FontShop Email Newsletter
FontFeed, blog
MyFonts Email Newsletter
Typophile, an online typography community
Fonts In Use, a design gallery that labels fonts used.
I Love Typography, blog
Typedia, an online shared encyclopedia of typefaces
The Elements of Typographics Style Applied to the Web

Simple ways to evaluate a design.

Just like they teach in design school, only about $40,000 cheaper.
A free preview of the upcoming eBook, Bootstrapping Design.
http://BootstrappingDesign.com

1. Readability.
Etiam rhoncus
metus vel semper.
Cras elementum

Lorem
ipsum

Clear enough your grandma could read it without her magnifying glass.

Size

Contrast

Phasellus a mi nec eros ornare

tristique. Vivamus feugiat quam
sollicitudin metus egestas gravida.
Suspendisse eu felis non arcu
condimentum sodales eu nec justo.

Phasellus a mi nec eros ornare

Spacing

tristique. Vivamus feugiat quam

sollicitudin metus egestas gravida.
Suspendisse eu felis non arcu
condimentum sodales eu nec justo.

2. Hierarchy. Guide the user through page elements in order of importance.

1
2
3
4
5

Close your eyes.

Open your eyes.

Where did you

look first?
Second?

3. Composition & Balance. Feng shui for your <div>s and <p>s.

View from 5 feet away.

View from 10 feet away.

View upside down.

4. Grid. Get in line or get out.

Hold a piece of paper up to the screen. Move it
left to right. Do elements line up to the vertical
gridlines formed by the edge of the paper?

5. Comparison. How does your work stack up against something you know is awesome?
vs.
OMFG!
Seaux awesome.

Does it suck?