Contents

I. Visual design

1. Visual design prinrciples 006

2. Color theory 032

3. Web typography 052

II. Designing for the web

4. 10 essential UI (user-interface) design tips 072

5. Designing for mobile 094

6. Interaction and animation design 105

7. Building high-performing websites 115

8. Landing page design 133

9. How element spacing works: the box model 147

III. Design process

10. Why your design process should start

with content 161

11. Always choose prototypes over mockups 174

12. The pre-launch checklist 186

INTRO

INTRO

Web design 101

The future of the web is in your hands.
Learn how to build it right.

WEB DESIGN 101 1

INTRO

Congratulations.
The future of the web is in your hands.

Once upon a time, the web was the sole domain of experts.

The people who bought computers back when getting your

computer to do something meant writing the program
yourself. The people who still look at an app and see the code
that makes it work, instead of the beautiful skin a designer
laid over it. The people who are more fluent in markup than
conversational English.

Thankfully, those days are done.

The same geniuses who once ruled the web started building
tools to help the rest of us join in the fun.

It all started with the LiveJournals and Bloggers — tools that

translated the process of writing HTML into writing text.
Then it spread to tools like Dreamweaver, which took that
same process a step further to help people build entire websites.

Flash forward to 2016 and all kinds of tools for making web design
a more intuitive process have emerged. They vary in myriad ways,
but they all share a mission to translate the abstractions of code
into more tangible, visual modes of working.

WEB DESIGN 101 2

INTRO

The web has become the world’s most democratic medium

That’s exactly why we built Webflow. As cofounder and CEO

Vlad Magdalin (wordlessly) calls out in “A (Cheeky) Guide to
Creative Tools,” no other design discipline still uses text-based
abstractions to create its visual products. And we think it’s
(long past) time that changed.

What Web Design 101 is

You don’t need to know code to use Webflow, though it helps
to know a few things about how code works (and we’ll help
you with that).

But to make the most of Webflow, you do need to know a

thing or three about:

1. Visual design

2. Web design

3. Design process

That’s what this free ebook, Web Design 101, will teach you
all about.

Coauthored by designer Mat Vogels, developer Neil O’Grady,

and content strategist John Moore Williams (that’s me), it dives

WEB DESIGN 101 3

INTRO

deep into all three topics to offer tips, insights, and principles
on everything from how to design your design process to how
to build landing pages that turn visitors into customers.

In short, it’s the kind of stuff you’ll want to reference, well, daily.

What Web Design 101 isn’t

This book is only the beginning of your journey into web
design. Hence the name.

To deepen your understanding of web design (both generally,

and with Webflow), you’ll want to subscribe to our blog and
check out the various video tutorials we (and others) have built:

1. Webflow 101 crash course

2. Ultimate web design course

3. Building a business website

4. Building a full site in Webflow

It’s also worth noting that Web Design 101 isn’t about the
technical side of web design.

There’s a ton to learn there, but we’re confident that Webflow

itself will help you learn most everything you need to know.
And for what it won’t — well, the web is a wild, worldwide
place, and you’ll discover the rest out there.

WEB DESIGN 101 4

INTRO

The web today — and tomorrow

Today, the web has become the world’s most democratic
medium. Never before have so many people had the power to
share their thoughts, feelings, projects, ideas, and businesses
with the entire world.

Never before has there been a medium that can so quickly and
powerfully communicate a message and urge people to act —
as proved by everything from this month’s top Kickstarter to
the Arab Spring.

But it can be even more democratic.

The fact is that the web is still a very young medium. We’ll no
doubt discover and develop countless new uses for it over the
coming decades.

And with Webflow, you have a part to play in defining that future.

So if you were to ask us where the web will go next, we’d have
to say: You tell us.

Or better yet: You show us.

WEB DESIGN 101 5

VISUAL DESIGN

Visual design
principles
Discover how the human brain interprets
visual information — and how you can use
that in your web designs.
CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

Every design seeks to either create a sense

of unity among disparate elements, or
creatively break that unity to encourage a
particular action. The principles covered
here will help you do both.
Every visual design seeks to either create a sense of unity
among disparate elements, or creatively break that unity to
encourage a particular action.

Thankfully, there are a few simple but powerful guidelines for

creating — and disrupting — unified designs. Who do we have
to thank for that? The Gestalt psychologists.

If you’re not familiar, it’ll help to understand that gestalt means:

A structure, configuration, or pattern of physical, biological,

or psychological phenomena so integrated as to constitute a
functional unit with properties not derivable by summation
of its parts

(Sounds kinda like a website, right?)

Basically, the Gestalt psychologists were searching for a way

to explain how human beings arrive at meaningful (and/or
delusive) perceptions in a chaotic world. And through that
effort, they identified 4 core concepts that describe how
human beings’ interpret visual data.

WEB DESIGN 101 7

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

These 4 fundamental principles expand into 13 specific rules of

thumb about visual experiences, that we can all keep in mind
to create better designs.

The 4 core principles of

Gestalt theory

1. Emergence
The principle of emergence states that we attempt to make
sense of the whole before we start identifying its parts.

When we see an object, we first try to take in its outline, then

we compare the outline against other things we’ve seen before.
If we find a match, we assume we know what it is, and we might
then start to analyze its components. If we don’t find a match,
we might then start to analyze the parts in pursuit of a whole.

What’s emergence mean for design?

Hate to break it to you, but the principle of emergence suggests

that we should stick to familiar, easily recognizable patterns.

So as much as you might want to go crazy with your next form

design, it’s probably best to stick with the styles people have

WEB DESIGN 101 8

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

seen before. Clearly outlined and labeled boxes with a “send”

button at the end will be recognized as a form more quickly
than a more “creative” design. But hold up. That doesn’t mean
you should stop reading — or designing creatively.

Here’s where it gets complicated: Emergence indicates a

hierarchy of visual interpretation: we begin with the whole,
then zoom into the parts. That means that you can get creative
with individual form elements, as long as the whole thing is
immediately recognizable as a form.

Emergence offers a compelling argument for minimalism:

a simpler form is easier to recognize than a complex one.
So keep it simple, friends.

2. Reification
The principle of reification states that our minds fill in gaps in
visual information in order to identify objects. That means that
you don’t have to see the entirety of something to understand
what it is, though the simpler or more widely recognized the
whole object is, the easier it’ll be to recognize it by a part.

Which means you should have no trouble recognizing the

meaning of this symbol:

WEB DESIGN 101 9

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

Even with half the image gone, you get it, right?

So what does reification mean for design?

Reification means that you don’t have to include all of an
object for it to be identifiable. You can use this principle to
save space in a layout, to suggest the content of the next slide
in a carousel, make your “coming soon” page both clearer and
more enticing, and more.

A List Apart takes advantage of reification to limit

the space that their wordmark takes up.

WEB DESIGN 101 10

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

3. Multistability
This one gets a little late-night-in-your-dorm-room, but here
we go: Multistability explains why you can see just the faces, or
just the vases in that famous optical illusion, but never both at
the same time.

Faces or vase? Multistability means you can really only see one at a time.

The human mind doesn’t dig uncertainty, you see, so it fixates

on one way of seeing something to the exclusion of possible
alternatives. Fascinating, right? Kinda makes you think about
politics. But let’s move on.

WEB DESIGN 101 11

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

What’s multistability mean for design?

Multistability can be a tough one to apply effectively in design

because it tends to contribute to confusion more than
understanding (which is, of course, our usual design goal).

But, as dozens of powerful logos have proven over the years,

you can use multistability to make really memorable and
pleasantly surprising designs, like the FedEx logo. Once you
see that arrow (between the E and the X), and the other
arrows that reification suggests, it’s pretty hard to unsee it.

Multistability means you'll see the arrow ... once you notice it.

4. Invariance
The principle of invariance states that we’re really good at
recognizing similarities and differences. That means that
it’s really easy to make something stand out of a crowd of
similar objects.

WEB DESIGN 101 12

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

Remember the lady in the red dress in The Matrix? How about
the little girl in the red jacket in Schindler’s List? Those two
stand out so much — and remain so memorable — because
their bright color practically screams out of the homogenous
black-and-white backgrounds we see them moving against. It
marks them as meaningful and worthy of your attention.

What does invariance mean for design?

In the realm of design, invariance can produce powerful
results when one different element is introduced in an
otherwise homogenous group of elements.

One area where you’ll often see this applied is on products’

pricing pages, where one column is made to stand out from
the rest of the pricing table through color or size.

Which column draws your eye the most?

WEB DESIGN 101 13

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

Echo’s pricing page uses invariance to make the “custom”

option stand out and draw the eye with a strikingly different
color. While the other columns all use a different shade of
blue, they’re similar enough to fade away in the face of the
custom column’s bright hue.

You’ll also see this in some website’s main navigational systems,

where designers have made one link stand out from the crowd
with a brighter color or a variant design.

MailChimp's designers use invariance to draw your eye to those "Sign Up Free" buttons.

This lets the user know what action the site wants you to take,
clarifying the user experience. In MailChimp’s example, the
identical design and language in the two primary CTAs also
make it clear that either link will take you to the same place.

Feel like an expert on the core principles yet? Awesome. Let’s

dive a little deeper.

WEB DESIGN 101 14

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

Applying the Gestalt principles

to web design
In general, the Gestalt principles help us understand how we
process visual information by either starting with the whole
and then working our way to the parts, or by attempting to
break a confusing whole into its simpler component parts.

In other words, when it comes to our interpretation of visual

stimuli, we’re always looking for the simplest possible way to
understand a thing. The Gestalt psychologists called this the:

Law of Prägnanz (aka “good figure” or

“law of simplicity”)

“People interpret ambiguous or complex images as the

simplest form(s) possible.”

So instead of seeing the design of the Olympic logo as a bunch

clipped circles and leaf shapes, we just see an arrangement of
interlocking rings.

As per the Law of Prägnanz, we see the Olympic logo as interlocking rings (left),
instead of a bunch of meaningless, complex shapes (right).

WEB DESIGN 101 15

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

Note that, as per the principle of multistability, you can try to

see the more complex arrangement, but it takes more effort —
your eyes just want to return to the simpler pattern.

What’s that mean for your designs? It means that you can
play with creating complex arrangements of simple shapes,
so long as they come together to form an easily understood
whole. That’s basically what Georges Seurat was doing with
his pointillist paintings:

Seurat knew we'd see shapes in his pointillist paintings.

Which leads us neatly to the principle of closure.

WEB DESIGN 101 16

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

Closure
When we see a complex arrangement, we look for a single,
recognizable pattern.

We’re always trying to bring meaning and order to meaning-

less chaos (and we’re not talking about your last relationship),
and our eyes do that via reification: the filling in of missing
data to make sense of something we see.

You can see this in action in this (sadly rejected) design for
OneFund by Mike Erickson, aka, Logomotive. (Not to mention
the vast majority of minimal logo designs you see.)

Your mind's search for closure creates an F out of nothing.

Here, we aren’t given all the visual information we need to

form the letter F, but we extrapolate the missing information
provided by the shadows to create the letter. We do that
because, otherwise, the image is just a few seemingly random
blocks of black with some type below.

Closure is basically what makes all minimal logos work.

WEB DESIGN 101 17

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

Symmetry and order

It should come as no surprise that people tend to look for order
in objects, and symmetry is one means of doing that. That’s why
symmetry is so satisfying to us: it’s a simple, harmonious rule
that conveys a sense of order and rightness in things. That’s
probably why symmetry proves so popular in governmental
buildings throughout the world. (And why 3-column designs
are all the rage.) Studies have also shown that our standard for
“beauty” in faces depends largely on symmetry.

Our love of symmetry explains the popularity of the 3-column design.

While symmetrical shapes are satisfying, they can also seem a

bit static or stale due to all that harmoniousness. Sometimes
they lack a sense of movement or dynamism. That problem
offers designers an opportunity: by adding an element of
imbalance to an otherwise symmetrical design, you can draw

WEB DESIGN 101 18

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

attention to the point of imbalance. Might just be the perfect

place for your call to action, no?

Figure/ground
People see objects as either figure (the focal point) or ground
(background).

When several objects are juxtaposed, we naturally create a

sense of spatial relationships between them, even in the absence
of overt visual cues. That means that even very simple
arrangements of objects can be used to create a sense of
relationship, and hence, even a hint of narrative.

One of the ways we do that is by comparing the two (or more)

objects’ size, automatically judging the smaller object to be
the figure, and the larger to be the ground. You can see that
in the images above — whatever its color, we always see the
smaller rectangle as the figure, the larger as the background.

WEB DESIGN 101 19

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

We also tend to be pretty creative in interpreting such

relationships, using past experiences to instill visual content
with a narrative. For example, in those images above, I can’t
help but see the little rectangle as a person, standing perhaps
toward a view of a darkening (or foggy) sky.

You can take advantage of this in your website designs to

draw focus away from larger elements and toward smaller
ones. That’s one reason that a copy plus button combo laid on
top of a full-bleed image draws attention to the button.

Evernote once upon a time used figure/ground to draw your eye to their Sign Up button.

You can also use visual cues like drop shadows to clarify spatial
relationships between different elements. It’s why you’ll find so
many shadows in Google’s material design guidelines.

WEB DESIGN 101 20

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

Uniform connectedness

We see elements that are visually connected as more related

than elements with no connection.

The shapes on the left seem more related than those on the right — even where the shapes are the
same!

In the image above, the large blue rectangle and the smaller
blue circle on the left seem more related than the shapes on
the right — even though the repetition of blue also suggests a
connection.

Note that the connecting element (the small rectangle above)

doesn’t have to actually touch the other objects to create this
sense of relationship. That explains why arrows are often used
to connect text to an image, as you can see in the image below.

WEB DESIGN 101 21

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

The arrows help us connect copy and image to better grasp the graphic's message.

Without the arrows, it’s possible to connect “it looks good

here & here” to the corresponding images, but that would
require some inference on the viewer’s part to understand
that one “here” refers to the tablet, the other to the phone.
The arrows make the connections between copy and image
clearer, making the whole thing easier to grok.

Common regions

You see elements as part of a group if they’re enclosed

within the same region.

You see websites using this visual trick all the time. In fact, it’s
become one of the hallmarks of what many people decry as the

WEB DESIGN 101 22

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

increasing homogeneity of web design. But that doesn’t lessen

the technique’s power in clarifying relationships between
various groups of design elements.

The principle of common regions helps us connect headline, body copy, and image into a story.

In the screenshot above (taken from Google’s Now site), the

designer uses giant cards to help us understand that the
headline, image, and paragraph are all related. We immediately
get that “The right information at just the right time” defines the
topic of both the image and the copy below and that “Assistance
around the clock” is introducing a new group of elements.

WEB DESIGN 101 23

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

Proximity

We see objects that are close to each other as more related

than objects that are far apart.

Visually, distance defines relatedness. Objects that are

close together are seen as related, while objects that are
far apart … aren’t.

For example, check out Google’s Now site, below. The text
“Spotify” is clearly related to all the content in the card below —
even though it’s not enclosed within the card — because it’s
closer to the card than, say, the text “OpenTable.”

Proximity helps us keep the complex relationships at play in this image straight.

WEB DESIGN 101 24

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

You can also combine proximity and common regions to

create more complex effects. Check out how in Mook, a free
Webflow template for creative agencies designed by Tim Noah.

Proximity at work in Tim Noah's Mook template.

Here, Tim uses both proximity and common regions to make

it clear that “Our work” and “Discover what we’ve done for
others” are related. Same goes for the unit of “Strategy,” body
copy, and image below.

Continuation

We see elements that are on a line or curve as more related

than elements that aren’t on the line or curve.

WEB DESIGN 101 25

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

We know those three dots are related because of continuation.

As Subaru’s Zero Landfill site illustrates, lines and curves

help us understand relationships too. As you can see in the
screenshot above, it’s obvious that the dots on that rough ring
are closely related to each other — at least, more so than they
are to the text in other areas of the page.

Common fate (synchrony)

We see elements that move in the same direction as more

related than elements that are stationary or move in
different directions.

WEB DESIGN 101 26

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

The Boat keeps image and text related via common fate.

You can see the principle of common fate play out with beautiful
dramatism on The Boat, which uses parallax scroll to both convey
the chaotic tossings of a storm and the forward momentum of
the story it tells.

With all that motion going on, you’d be forgiven for missing
the fact that the text in the center of the screen above is
related to the two foreground images it sits between. But as
the boat and storm-tossed waves move generally to the right
of the screen, the relationship between foreground text and
images becomes clearer — because they move up the screen.
(Though the designers added drama by having text and image
tilt and shift as you scroll.)

WEB DESIGN 101 27

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

Parallelism
We see parallel elements as more related than non-parallel
elements.

To see parallelism in action, I can’t think of a better example

than Italian Futurist F.T. Marinetti’s classic visual poem “Parole
in liberta” (“Free words” or “Words in liberty”).

Lines of parallel text help us make sense of this complex tangle of letters.

Amidst this chaotic jumble of text, Marinetti offers occasional

breathers of (relative) clarity and relatedness by setting a few
lines of type parallel to each other. These parallel lines create

WEB DESIGN 101 28

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

tension with the otherwise scattered text, but also create

relief by momentarily restoring a normal reading experience
to the dynamic composition.

Similarity
We see elements that share characteristics as more
related than those that don’t.

You’ve already seen a few examples of similarity in action

(see the uniform connectedness section, and in MailChimp’s
design in the invariance section). But to zoom in a little more,
take a look at this design from Designer News:

The circular icon helps us understand that the two Site Design posts are related
(i.e., the same type of post).

Here, the web page icon with the yellow background serves
to connect the two Site Design posts, making it clear that
they are the same type of post. The fact that the same color

WEB DESIGN 101 29

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

appears in the Subscribe button to the right might make you

think it’s also related somehow, but the different shape and
the text help differentiate it.

Focal points

Points of interest, emphasis, or difference capture and hold

our attention.

Focal points serve as the key to so many elements of web

design that it almost feels odd to point it out. But that
centrality makes it all the more important to intelligently and
purposefully apply emphasis and difference — after all, as
the saying goes, “if everything’s emphasized, nothing is.”

Of course, there are all kinds of ways to create emphasis in a

design, including:

• Dramatic color changes, such as when a CTA button or

other link is given a highly contrasting color

• Dramatic size changes, such as a hero headline set at 72pt

• Typographic emphasis, like bolding, italics, all caps, etc.

• Dramatic whitespace, like when you place a focal point in

total isolation from other elements

And so much more.

WEB DESIGN 101 30

CHAPTER I VISUAL DESIGN VISUAL DESIGN PRINCIPLES

Past experiences

We perceive things in terms of our past experiences.

Okay, here’s a really tricky one. Unlike all the other principles
of visual design we’ve discussed here, there’s just no controlling
a person’s past experiences.

The best you can do here is aim to appeal to the average past
experience. For example, most people associate ice cream with
all sorts of warm, fuzzy feelings — not to mention the essential
pleasure that comes from its deliciousness. An image of an ice
cream cone might evoke nostalgia for the endless summer days
of childhood, or a sense of togetherness from those traditional
bowls of ice cream served after a family dinner.

Or, a person might suffer from lactose intolerance. Leaving

the image of ice cream forever marked with associations of …
unpleasantness.

You also have to keep in mind variations in your audience. If you

design websites or products for an international audience —
or even an audience of diverse ages — you’ll need to keep in
mind that the emotional and experiential resonances of some
imagery or design elements may differ across segments.

WEB DESIGN 101 31

CHAPTER II VISUAL DESIGN COLOR THEORY

VISUAL DESIGN

Color theory
You’ve got a practically infinite palette to
work with when it comes to color. Find out
how to do it right.

WEB DESIGN 101 32

CHAPTER II VISUAL DESIGN COLOR THEORY

You have a whopping 16.8 million colors

to choose from when designing a website.
And when you start combining them to
form a palette? Your array of choices
instantly becomes practically infinite.

Overwhelmed? I certainly used to be. But once you nail the basic
theory and vocabulary of color — and get acquainted with a few
handy tools and resources — you’ll find establishing your palette
becomes with one of the fastest, easiest, and most fun parts of
your design process.

To get you started, I’ll dive into the following topics:

• Vocabulary – from tints to saturation to warmth and more,

we’ll cover the lingo designers use when talking color

• Color wheel – a powerful tool for visualizing the relationships

between colors

• Color schemes – how to use the color wheel to choose

your color schemes

• Color psychology – the feelings and meanings people

often associate with particular colors

• Tools and resources – apps and guides to help you master

designing with color

WEB DESIGN 101 33

CHAPTER II VISUAL DESIGN COLOR THEORY

Why you should care about color

If someone handed you the keys to your dream car, for free,
your head would explode with excitement, right? Of course!

But what if the car was painted in your most-hated hue? Or

each panel was a different color entirely? Or if the interior
mixed lime green and construction yellow?

You might be a little less excited, right?

Colors have meaning. They impart a tone and emotional impact

just like fonts do, and that makes them a powerful design tool.

The vocabulary of color

Before we dive into theory, you’ll need to know the
following terms:

Primary colors

The three primary colors: cyan, magenta, and yellow.

WEB DESIGN 101 34

CHAPTER II VISUAL DESIGN COLOR THEORY

Primary colors form the basis for all other shades. Humans
perceive three base colors: magenta, cyan, and yellow. Every
other color we see consists of a combination of these three
colors in varying amounts, brightnesses, tints, and shades
(see below).

Traditionally, we considered red, blue, and yellow to be the

primary colors, but research has shown that magenta, cyan,
and yellow better describe our experience of color.

RGB and hex

Red, green, and blue used to create other colors.

On the web, we use RGB (red-green-blue) and hex values to

represent colors.

The RGB color system defines all colors as a combination of

three different values: a particular shade of red, another of
green, and another of blue. So:

WEB DESIGN 101 35

CHAPTER II VISUAL DESIGN COLOR THEORY

• rgb(59, 89, 145) equals Facebook blue

• rgb(0, 0, 0) equals black

• rgb(255, 255, 255) equals white

The hex color system converts each value to a hexadecimal

(base 16) representation, like so:

• #3b599b equals Facebook blue

• #000000 equals black

• #ffffff equals white

Every two characters represents a color value, so for Facebook

blue, the red hue is 3b, the green is 59, and 9b is blue.

Hot and cold

Cool and warm colors

WEB DESIGN 101 36

CHAPTER II VISUAL DESIGN COLOR THEORY

Colors also have a “warmth,” and each can be classified as

either a warm or a cool color.

Warm colors contain higher amounts of reds and yellows.

They can invoke a sense of warmth and passion in a design.
They can also feel very aggressive and bold, reminding us of
the internationally recognized stop sign. That’s why red is
often used in error messages.

Cool colors contain higher amounts of blue, evoking chilly

climates, ice, winter, water, nighttime, death, and sadness.
They can carry connotations of loneliness, coldness, and fear.
Cool colors are also less aggressive and much more soothing.
Think of a blue sky, or crystal clear blue waters on a beach.
Relaxed yet?

Temperature

Increasing an image’s temperature means increasing its

orange levels. It generally makes an image look warmer and
happier, similar to how the world looks happier when the sun
casts its orange glow upon it. In contrast, reducing an image’s
temperature makes it look colder and less inviting, like an
overcast day.

WEB DESIGN 101 37

CHAPTER II VISUAL DESIGN COLOR THEORY

Tints and shades

A tint results from adding white to a color — a shade when

you add black. Tints and shades let you create monochrome
color schemes by adding varying levels of white and black to
a base color.

For example, if your base color is #8dbdd8 (a lightish blue)

as seen in the image below, you can create a monochrome
scheme by choosing two tints (two brighter blues) and two
shades (two darker blues).

I built this monochrome color scheme from #8dbdd8, using COLOURCODE.

Saturation, hue, and lightness

Saturation describes the intensity of a color. Increasing

saturation makes the color richer and darker, while reducing
saturation makes it look faded and lighter. When we say “light
blue” or “dark green,” we’re describing changes in saturation.

WEB DESIGN 101 38

CHAPTER II VISUAL DESIGN COLOR THEORY

Hue defines the degree to which a color can be described as

similar to or different from red, orange, yellow, green, blue,
indigo, and violet (the colors of the rainbow). So when you
describe a color as “greenish blue,” you’re defining it in terms
of two hues.

Lightness, also known as value or tone, defines the perceived

brightness of a color compared to pure white.

The HSL color scheme. Adapted from "Munsell-system."

Licensed under CC BY-SA 3.0 via Commons.

WEB DESIGN 101 39

CHAPTER II VISUAL DESIGN COLOR THEORY

The color wheel

Color wheel

A basic color wheel contains the 12 standard colors used to

create color schemes. Each slice of the pie represents a family
of colors that can be achieved with different saturations,
hues, tints, shades, and mixes of neighbouring colors. The
combination colors (e.g., yellow-orange) result from mixing
equal amounts of the base hues (yellow and orange).

Red, yellow, and blue are the primary colors. Violet, orange, and
green are the secondary colors. Everything else is a tertiary color,
a mix of primary and secondary colors.

Designs use the color wheel to choose color schemes, which

come in four flavors.

WEB DESIGN 101 40

CHAPTER II VISUAL DESIGN COLOR THEORY

The 4 kinds of color schemes

Designers create color schemes by pairing multiple color

families from the color wheel. This usually works best when
you follow one of the following patterns.

1. Monochrome

A monochrome color scheme consists of various tints, shades,

and saturations of a single base color. They’re very cohesive,
but run the risk of becoming monotonous.

A monochrome color scheme based on purple.

2. Complementary

Complementary schemes are based on two colors from opposite

sides of the color wheel. Because the two hues will be wildly
different, such schemes can very impactful and noticeable.

WEB DESIGN 101 41

CHAPTER II VISUAL DESIGN COLOR THEORY

Pro tip: Pick a complementary color for your calls to action.

Using the scheme below, if your page background is mint
green, you might use the pink for your CTA button.

Complementary color scheme based on shades of green and red.

3. Analogous
Analogous schemes feature three colors that sit next to each
other on the color wheel. Because of the tonal similarities,
these schemes can create a very cohesive, unified feel, without
the monotony of a monochrome scheme.

Analogous color scheme based on red, orange and yellow.

WEB DESIGN 101 42

CHAPTER II VISUAL DESIGN COLOR THEORY

4. Triadic

To make a triadic color scheme, draw an equilateral triangle

(a triangle where all three sides are the same length) on the
color wheel, and select the three colors at the points of the
triangle. This creates a diverse, yet balanced, scheme.

Triadic color scheme based on purple, beige, and green

Color psychology
Every color has its unique tones and meanings. By carefully
selecting your colors, you can reinforce the overall message
of a site.

Note: Color meanings can vary dramatically across cultures

and regions. The following descriptions hold mostly for the
United States.

WEB DESIGN 101 43

CHAPTER II VISUAL DESIGN COLOR THEORY

Red
This vibrant, aggressive color can convey a variety of meanings
depending on context, but it does it all with power and flair.
Combine it with black for a masculine, aggressive feel perfect
for a sports car. Pair it with whites and golds, and it speaks
of love and passion. Red also represents danger — think stop
signs — and blood — think The Red Cross.

Orange
Warm, but less aggressive than red, orange is hard to miss —
which explains its use in construction, safety, and hunting
equipment. It also practically screams fall, pumpkins, and
Halloween. Orange’s warmth can evoke a fun and energetic
atmosphere.

Yellow
Yellow represents the sun, warmth, and summertime. It’s also
the most visible color on the spectrum, so it really jumps out at
you. It’s especially eye-catching when combined with white or
black, as it is in safety equipment, school buses, and taxis. Be
careful with yellow, though, as many people find it irritating.

Blue
Blue evokes the celestial, the tropical, and — oddly — the
professional. Given its long association with water, we think

WEB DESIGN 101 44

CHAPTER II VISUAL DESIGN COLOR THEORY

of blue as refreshing and cleansing. Darker shades of blue,

however, can invoke sadness. There’s a reason we call it “the
blues,” after all.

Green
As the color of most plant life, green conveys a sense of growth
and health, making it perfect for organic, environmentally
friendly, and healthy products. Combine it with blues and
browns to capture nature. Green also represents wealth and
finance in the U.S.

Brown
You won’t see much brown on the web, probably because it
implies dirtiness. But it’s perfect if you’re looking to create a
sense of earthiness and luxury, perhaps for a sophisticated
fashion site.

Purple
In ancient Rome, only the rich could afford purple (the dye
was made from snail shells). That association remains strong
all these centuries later, making purple an ideal hue for
luxury brands. When combined with red, it can feel intimate
and romantic. With whites and pinks, it becomes playful and
child-like.

WEB DESIGN 101 45

CHAPTER II VISUAL DESIGN COLOR THEORY

White
White is all about purity, innocence, and sterility. You’ll see it in
sites focused on weddings, healthcare, science, and spirituality.
It also connotes a sense of cleanliness and freshness, like freshly
laundered and folded sheets.

Black
Black implies strength, luxury, evil, death, and the unknown.
The battle between good and evil is represented as white
versus black — just look at Darth Vader and Luke Skywalker’s
usual costumes.

Color tools and resources

With all the complexity and flexibility designing with color
offers, it should come as no surprise that designers have built
an array of tools to help with the process. Here are just a
couple of our favorites.

Color scheme (palette) generators

My two favorite palette generators let you choose each color
manually or automatically generate them based on a color or two.

WEB DESIGN 101 46

CHAPTER II VISUAL DESIGN COLOR THEORY

COLOURCODE features preset modes for scheme types like

monochrome and complementary, and you can export your
schemes as .scss, .less, an image, or just permalink to it. It’s
also a fun discovery tool, as the shades update as your mouse
moves across the screen

Adobe Color CC, formerly “Kuler,” also features scheme type

presets, but adds two great features COLOURCODE doesn’t
have. First, Color has a social layer built in, so you can explore
others’ palettes. The second (and far superior) is the ability to
extract a color scheme right from an image.

WEB DESIGN 101 47

CHAPTER II VISUAL DESIGN COLOR THEORY

Color palette inspiration

Need inspiration for great color combos? The following sites

use images and designs to illustrate how different colors work
together. Use them to help guide your choices.

COLOURLovers hosts a community of color fanatics sharing

colors, palettes, patterns, and color-related articles.

Design Seeds presents still-life and nature photos alongside

their color palettes to inspire your designs. You can also
search by color to help fill out your palettes.

WEB DESIGN 101 48

CHAPTER II VISUAL DESIGN COLOR THEORY

Flat UI Colors Material Design color kit

Color usage inspiration

Need inspiration from fellow designers? Look no further than:

Awwwards – curated examples of some of the best designs

on the web.

WEB DESIGN 101 49

CHAPTER II VISUAL DESIGN COLOR THEORY

Oh, hey. Webflow's on Dribbble.

Dribbble and Behance – design portfolio sites ranging from

typography, illustrations, product design, architecture, and
web design.

Color your world

Get out there and use your newfound color knowledge to spice
up your designs. Color is a powerful tool to impart a specific
mood or feeling to your guests, and can be used to increase
brand recognition. You’d probably recognize a Coca-Cola sign
just by its color alone, let alone its iconic text.

Color is so important that franchises like Starbucks have

extremely low tolerances on color deviations for each of its
franchise locations. Each franchisee has to choose from the
list of approved colors. Before the doors to the cafe open,
a representative from head office comes to ensure that the
color as applied on the wall fits within the strict tolerances.

WEB DESIGN 101 50

CHAPTER II VISUAL DESIGN COLOR THEORY

Use color correctly, and your site will feel more natural and
put together. Now that you have the basics down, I encourage
you to keep walking further down the path into color theory.
But most of all, make sure to look at beautiful examples of color
used right, and to practice, practice, practice.

Happy designing.

Have great resources, tools, or examples to share with fellow

readers? Let us know on Twitter!

WEB DESIGN 101 51

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

VISUAL DESIGN

Web
typography
Your quick and easy intro to typography
in web design.

WEB DESIGN 101 52

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

Typography matters

In his classic The Elements of Typographic Style, Robert

Bringhurst defines typography as “the craft of endowing
human language with a durable visual form.” In most cases, that
visual form needs to be legible and readable, and it must set
the right tone. If your typography makes a text difficult or
downright impossible to read, then it’s useless — no matter
how amazing it looks.

Just imagine how different history might be if the Bible, for

example, had been typeset in green Indie Flower on a blue
background:

...as I walk through the valley of

the shadow of death…
Imagine how history might’ve changed if the Bible were published like this.

I’m not sure people would have taken it as seriously.

Which brings us to three key concepts in typography: tone,

readability, and legibility.

WEB DESIGN 101 53

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

Tone is the mood or feeling that your typography conveys

visually, which is distinct from the tone of the content itself.
Tone ranges across a spectrum from informal to formal, and
you’ll want to make sure your typography sets the right tone
for the message and brand. The typesetting above illustrates
this beautifully. The young, playful feel of the font just can't
support the gravitas of the quote.

Legibility defines how easy it is to distinguish between

individual letterforms (the shapes of the letters), and is a
vital consideration for setting type in user interfaces. For
instance, some fonts make it difficult to distinguish between
an uppercase I and a lowercase l. (See what I mean?) This is
usually a function of the font’s design, though certain design
choices, such as setting letter-spacing too high or low, or
setting text in all caps, can impact legibility.

Readability defines how easy it is to read paragraph content.

It’s determined by the font's design and your own design
choices, including sizing, spacing, and color.

I’ll cover all of these aspects in more detail, but let’s start with
one of the most important decisions: the fonts themselves.

WEB DESIGN 101 54

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

The many types of fonts

Typographers categorize fonts in many different ways, but the
following categories are the most common:

Serif – The undisputed king of printed content, serif fonts

feature small lines called “serifs” on the ends (or “terminals”)
of individual letters. Examples: Times New Roman, Georgia,
Droid Serif

Sans Serif – As the name suggests, sans serif fonts lack serifs.
They've become the standard for the web because early
computer screens had a hard time rendering serifs crisply.
Examples: Arial, Verdana, Droid Sans

Monospaced – Every character in a monospaced font takes

up the same width. Created back when typewriters were all
the rage, these fonts have experienced a renaissance due to
their use in text editors. Example: Inconsolata

Cursive – Cursive fonts mimic handwriting. They tend to

emphasize visual interest over legibility, making them better
suited for titles and headings than body text. Examples: Indie
Flower, Great Vibes

Display – Display fonts tend to be either big and bold or

hairline thin, and they often have highly complex letterforms.
Due to their attention-grabbing impact, they’re best used in
headlines. Example: Changa One

WEB DESIGN 101 55

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

The vast majority of fonts you see in books, documents, and

webpages are either serif or sans serif. (Since this post is just
an intro to typography, we’ll focus on these two.)

To serif, or not to serif?

If serifs and sans serifs constitute the standard, go-to font

types, then how do you decide between the two? The answer,
as it so often is in the world of design, is: it depends.

Those red bits are serifs.

Many people believe that serifs increase legibility in printed

materials, but in the digital world, they have a reputation for
ruining legibility due to the low resolution of older digital
screens. With retina and 4K displays becoming standard, this
has become less of a concern, but if your audience uses a
wide variety of devices to view your site, you might be better
off playing it safe with a sans serif for body text.

Don’t get me wrong. Serif fonts remain relevant on the web, but
they’re better suited for headings and other short, large-set
blocks of text. Due to their more ornate appearance, serifs can

WEB DESIGN 101 56

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

impart a more formal, professional tone to your designs, making

them ideal for certain brands.

For example, news outlets and professional blogs often

use serif fonts for body text. This is of particular interest to
newspaper sites, where serif fonts keep the site looking and
feeling like a newspaper. Many people also maintain that serif
fonts are better for long-form reading, though that may be
more of a function of familiarity than of scientific fact.

TL;DR: Lean towards sans serif fonts for your body text to
maximize legibility, and consider using serifs for headings and
shorter content. But keep in mind that a serif might be just
right for your brand or industry.

Each font has a voice of its own

Every font has its own tone, whether it’s professional, playful,
classic, or aggressive. That means using the wrong font in the
wrong place can lead to silly results:

WEB DESIGN 101 57

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

U.S. Constitution set in Comic Sans, as suggested on the Reddit thread

“What would be the worst thing to be written in Comic Sans?"

The U.S. Constitution looks ridiculous when set in a font with

a highly informal tone like Comic Sans. It just doesn’t make
sense for such a serious document!

Of course, no specific set of font characteristics determines

a font’s tone. It’s more of a feeling you get from looking at
or reading it. That's why it’s best to start your typography
explorations with a few distinct options and test each of them
in context. For each sample setting, ask yourself: Does this
font convey the tone I’m looking for? Does that tone match

WEB DESIGN 101 58

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

the content and its medium? You’ll also want to try them out
with friends, colleagues, and people in your target audience.

TL;DR: Trust your eye, and match the tone to the content. Ask
others to look at the font in context and tell you what tone they
set. Their answers might surprise you.

Playing matchmaker:
creating the perfect font pairing

When you use more than one font on a page, you need to
consider how they pair up. Some fonts will just clash, while
others look like they were made to be together (and sometimes,
literally were).

For more on font pairing, check out how to pick the nicest
font for your site. Otherwise, experiment with a few different
pairings in your designs and see how they look together.
Typegenius can be super handy for this.

Pro tips: Be careful mixing sans serif and serif fonts unless
you’re confident in your pairing abilities, as they can easily
clash. You’ll also want to steer clear of pairing two fonts of the
same type (i.e., two sans serifs, or two serifs), as they're often
too similar to be easily distinguishable.

WEB DESIGN 101 59

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

Just don’t get carried away with your font pairing endeavors:
stick to a maximum of three different fonts in your designs.
Anything more tends to look busy and can confuse users
about your hierarchy.

Useful font resources

Places to find fonts

• Typekit – This service hosts and serves a vast collection of
premium fonts for websites. And they’re easy to integrate
into Webflow.

• Google Web Fonts – This massive collection of free fonts

includes its fair share of duds, but it also boasts some
beautiful and flexible gems, like Open Sans and Alegreya.

• Behance and Dribbble – Many designers create and share

their own awesome fonts for you to download for free.

Places to get typography inspiration

• Typewolf

• Awwwards Picked Typography Sites

• Hello Happy – Beautiful Web Type

• Hand-picked tales from Aesop's Fables with hand-picked

type from Google Fonts

• FontPair – A fantastic tool for testing your font pairings

WEB DESIGN 101 60

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

On contrast

For obvious reasons, contrast between text and its background

is critical for legibility.

But it might surprise you to learn that the best color

combination for legibility is dark grey text on a light grey
background — not pure black (#000) on pure white (#fff).
That’s because black text on a stark white background
causes subtle blurring and color bleeding due to the
reflective and absorptive properties of the colors. And,
let's face it, pure white can strain the eyes after a while.

Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse varius enim in adipiscing elit. Suspendisse varius enim in
eros elementum tristique. Duis cursus, mi eros elementum tristique. Duis cursus, mi
quis viverra ornare, eros dolor interdum quis viverra ornare, eros dolor interdum
nulla, ut commodo diam libero vitae erat. nulla, ut commodo diam libero vitae erat.
Aenean faucibus nibh et justo cursus id Aenean faucibus nibh et justo cursus id
rutrum lorem imperdiet. rutrum lorem imperdiet.

Left: Black text on a white background. Right: Dark grey text on a light grey background.
I find the text on the right a bit crisper and easier on the eyes.

Although it's tempting, try to avoid setting light text on a

dark background for long passages. Light text reflects light,
causing it to blur slightly, while black text absorbs light,
making it crisper.

WEB DESIGN 101 61

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse varius enim in adipiscing elit. Suspendisse varius enim in
eros elementum tristique. Duis cursus, mi eros elementum tristique. Duis cursus, mi
quis viverra ornare, eros dolor interdum quis viverra ornare, eros dolor interdum
nulla, ut commodo diam libero vitae erat. nulla, ut commodo diam libero vitae erat.
Aenean faucibus nibh et justo cursus id Aenean faucibus nibh et justo cursus id
rutrum lorem imperdiet. rutrum lorem imperdiet.

Left: Black text on a white background. Right: White text on a black background.
The text on the right not only blurs a bit, but it's also a bit retina-burning.

If you insist on setting light type on a dark background, or

you’re displaying text over an image, make the background as
dark as you can, and consider adding a slight text-shadow on
the white text to make it pop. And keep such passages short
to limit eye strain.

Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Suspendisse varius enim in adipiscing elit. Suspendisse varius enim in
eros elementum tristique. Duis cursus, mi eros elementum tristique. Duis cursus, mi
quis viverra ornare, eros dolor interdum quis viverra ornare, eros dolor interdum
nulla, ut commodo diam libero vitae erat. nulla, ut commodo diam libero vitae erat.
Aenean faucibus nibh et justo cursus id Aenean faucibus nibh et justo cursus id
rutrum lorem imperdiet. rutrum lorem imperdiet.

The text on the right has a slight text shadow added, and I've darkened
the image. Better than the text on the left, but still not great.

TL;DR: For long passages of text, use dark type on a light

background — preferably dark grey on light grey. If you're
displaying text on a color or an image, make the background
as dark as possible and consider adding a subtle text shadow.

WEB DESIGN 101 62

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

Keep an eye on line length

Line length measures the number of characters per line of

text. As desktop monitors reach sizes of 30” or more, this has
become of increasing concern.

How long is too long? Would it be comfortable to read a book

that spanned the entire width of your laptop screen or desktop
monitor? I think not. Nor would it be comfortable to read a
book that was the width of a bookmark.

Comparison of three line lengths: 45 characters, 80 characters, and 120 characters.

In general, limit your line length to 45–60 characters per line —

although many typographers consider up to 80 characters per
line acceptable. Anything less and your readers will get tired
from bouncing back and forth across lines. Anything more, and
the reader might lose their place — shuttling from the end of
one line to the beginning of the next.

WEB DESIGN 101 63

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

For reference, Arial set at 11px in Google Docs runs to about

80 characters per line, as does the body text in this article.

Maintaining legibility across device sizes requires striking a

balance between font size and line length. The bigger you set
your font, the fewer characters per line you’ll get. On small
devices, this could lead to very few characters per line.

TL;DR: Aim for a line length of 45–80 characters per line.

That's about 30em, if you're working on a responsive design.

Watch your font weight

Font weight defines the thickness (or boldness) of each individual
letter. The default font weight is 400, whereas bold is 700. Many
fonts have weights ranging from 100 to 900 in increments of 100,
with 100 being super thin and 900 being super thick.

Exo 2 features weights ranging from 100 to 900. Image taken from Google Fonts

WEB DESIGN 101 64

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

TL;DR: Use a bolder weight to emphasize or add drama to

particular passages, and avoid using thin weights outside
of large display settings. For web design, you’ll want to pick
which weights you use carefully: loading all nine weights of
Exo 2 could seriously slow down your pages.

Get your units right

In print applications, people often talk of font sizes in terms

of “points,” but on the web, we tend to use the pixel (px). It’s a
similar concept.

But with responsive designs, it’s actually best to set all size and
spacing properties using relative units like ems and percentages,
rather than absolute units like pixels.

An em is a relative unit of measurement equal to the current

font size of the HTML element in question (default of 16px
for paragraphs). So, 2em would be double this size (32px for a
default paragraph).

Why? Two reasons: First, spacing needs change as font sizes

change. A line height of 24px might work beautifully when
the font is set to 16px, but at 32px tall, that height would be
far too cramped:

WEB DESIGN 101 65

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

diam libero vitae

Lorem ipsum dolor sit amet,

erat. Aenean fau-

consectetur adipiscing elit.

cibus nibh et justo

Suspendisse varius enim in eros

cursus id rutrum
elementum tristique. Duis cursus,

lorem imperdiet
mi quis viverra ornare, eros dolor
interdum nulla, ut commodo

Left: Font size of 16px, line height of 25px. Right: Font size of 32px, line height of 25px.
Spacing needs change with font size.

Second, relative units make responsive design (altering layout

and styling to accommodate various devices) a little easier. If you
design everything relative to the base font size, you can change
that base font size down the line, and the rest of your site will
automatically adjust, saving you a lot of manual tweaking.

And you certainly will need to tweak, as pixel sizes vary wildly
across devices. For example, an iPhone can display a 16px font
at about 60% the size of a 16px font on a Macbook — making
it very difficult to read.

Using whitespace in web typography

Proper spacing makes content much, much easier to read.
Inadequate spacing can cause lines, letters, or words to blur
together, creating a cramped feeling. The three types of
spacing you need to be concerned with to maximize legibility
are letter spacing (tracking), line height (leading), and word
spacing (this doesn’t have a fancy term).

WEB DESIGN 101 66

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

Letter spacing (tracking)

Letter-spacing (or tracking, in print design) defines the

distance between each letter in a word, and can either
increase or decrease the legibility of your text. Note that
tracking (letter-spacing) differs from kerning in that tracking
sets a single distance between all letters, while kerning allows
for custom spacing between different letters.

Left: Default tracking. Middle: –2px tracking. Right: +3px tracking.

TL;DR: In general, the default value is the right value: it

represents what the font designer envisioned as the perfect
spacing. But when you're setting text in block capitals (all-
caps), which decreases legibility, you may need to add tracking
to help readers better distinguish between individual letters.

Word spacing

Word spacing dictates the distance between words in a sentence.

The best word spacing clearly distinguishes different words
without forcing the eye to travel too far between them.

WEB DESIGN 101 67

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

TL;DR: You won't usually need to tweak word spacing, unless

you find that words set at large sizes appear too close together.

Making the most of line height

Line height (leading, in print design) defines the vertical space
between each line of text, and is measured from baseline to
baseline (the red line in the images below), ignoring ascenders
and descenders.

Text ascenders and descenders shown in red. The horizontal red line is called the “baseline.”

Insufficient leading not only feels claustrophobic, but it can

also leave you reading the same line over and over again.
We’ve all been there. In contrast, too much leading can make
your content look disjointed.

WEB DESIGN 101 68

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

TL;DR: A good rule of thumb is to set your line-height to

around 1.5em (or 1.5 times the body text size). To maintain
vertical rhythm, paragraph spacing (margin-bottom) should
match the leading (line-height).

Size matters
Font size conveys relative importance, creates drama, and
plays a big part in determining readability.

Large things attract our attention more than small ones —

especially when they’re bigger than expected. A normally
sized German shepherd isn't going to catch your attention.
But a German shepherd that's the size of a small horse? That
you’ll be Instragramming in no time.

It signals importance

We also assign more importance to larger things. Headings are

almost always larger than body paragraphs, which themselves
are larger than footnotes. Size differences help us decide what
to focus on and what to ignore.

It adds drama (not the high school kind)

Size can also be used to create impact and drama. A line of

copy set all-caps in tall, bold letters spanning the page can
make a more powerful statement than one set lowercase,
italicized, and small.

WEB DESIGN 101 69

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

TL;DR: If you want to draw eyes to an element, make it no-

ticeably bigger. This is why calls to action (CTAs) like email
subscription boxes, “buy now” buttons, and headlines tend to
be much larger than the rest of the page’s elements.

It improves readability

Have you ever tried to read a book set in a 6pt font? I did.
It was Lord of the Rings: Return of the King. It strained my
eyes the entire time, and was impossible to read in anything
but ideal lighting. Luckily, I was 20 years old and didn’t need
glasses, but imagine what it would have been like for your
dear grandmother and her bifocals.

The web’s default font size for paragraphs is 16px, but the
most common sizes used on the internet are 12px, 13px, and
14px. I recommend never going below 14px for body text, as
anything less can make for tough reading.

Note: As a rule of thumb, set your main heading (H1) to twice

the size of your body font. For the rest of your headings
(H2 and down), just lower your size by about 25% per level.
So, if your body text is set at 16px, your H1 would be 32px,
your H2 would be 24px, etc. Tim Brown's Modular Scale is a
super-handy tool for creating type hierarchies with a little
more mathematical rigor.

WEB DESIGN 101 70

CHAPTER II VISUAL DESIGN WEB TYPOGRAPHY

Now that you know the basics

of typography...
There’s a whole lot more you can dive into, especially when it
comes to the world of fonts. Here are some useful resources
to learn more about typography:

• Hack Design – This detailed course covers just about all

things web design, including typography.

• Tuts+ – A great web design course focused on typography.

• Design for Hackers – This is a great introductory book on

design, featuring an analytical point of view and a fantastic
section on typography.

Now get out there and make the Internet’s type something
to behold!

Have any great examples of typography done right? Or any

questions on the art of type? Let’s see them in the comments
below, and I promise to weigh in.

WEB DESIGN 101 71

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

DESIGNING FOR THE WEB

10 essential UI
(user-interface)
design tips
Memorize these 10 guidelines if you
want to build elegant, easy to use, and
human-centered user interface designs.

WEB DESIGN 101 72

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

A website is much more than a group of

pages connected by links. It’s an interface,
a space where different things — in this case,
a person and a company’s or individual’s
web presence — meet, communicate, and
affect each other. That interaction creates
an experience for the visitor, and as a web
designer, it’s your job to ensure that
experience is as good as it can possibly be.

And the key to that is to think about your user first, foremost,
and always.

Thankfully, while web design is a relatively new discipline,

it owes a lot to the scientific study of human-computer
interaction (HCI). And these 9 handy guidelines straight
from HCI research will help you focus on your users when
designing websites and apps.

Interface design, which focuses on the layout of functionality

of interfaces, is a subset of user experience design, which
focuses on the bigger picture: that is, the whole experience,
not just the interface.

WEB DESIGN 101 73

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

1. Know your users

Above all else, you have to know who your users are — inside
and out. That means knowing all the demographic data your
analytics app(s) can pull, yes. But more importantly, it means
knowing what they need, and what stands in the way of them
achieving their goals.

Getting to that level of empathy requires more than careful

analysis of stats. It requires getting to know the people who use
your website. It means speaking with them face to face, watching
them use your product (and maybe others), and asking them
questions that go deeper than, "What do you think of this design?"

What are their goals? What stands in the way of them achieving
those goals? How can a website help them overcome or work
around those challenges?

Don't stop at knowing what your users want. Dig deeper and find
out what they need. After all, desires are just outgrowths of needs.
If you can address a user's deep-seated need, you'll address their
wants while also fulfilling more fundamental requirements.

The insights you'll uncover from analyzing data and speaking

with users will inform every decision you make, from how
people use your interface to what types of content you’ll
highlight within that interface.

WEB DESIGN 101 74

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

2. Define how people use your

interface
Before you design your interface, you need to define how peo-
ple will use it. With the increasing prevalence of touch-based
devices, it’s a more pivotal concern than you might think. Just
look at

Tinder: the app’s user experience is literally defined by the

ease and impulsivity of a simple swipe.

People use websites and apps in two ways: directly (by interacting
with the interface elements of the product) and indirectly (by
interacting with ui elements external to the product).

Examples of direct interactions

• Tapping a button

• Swiping a card

• Dragging and dropping an item with a fingertip

Examples of indirect interactions

• Pointing and clicking with a mouse

• Using key commands/shortcuts

WEB DESIGN 101 75

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

• Typing into a form field

• Drawing on a Wacom tablet

Who your users are and what devices they use should deeply
inform your decisions here. If you’re designing for seniors or
others with limited manual dexterity, you wouldn’t want to
lean on swiping. If you’re designing for writers or coders, who
primarily interact with apps via the keyboard, you’ll want to
support all the common keyboard shortcuts to minimize time
working with the mouse.

3. Set expectations
Many interactions with a site or app have consequences:
clicking a button can mean spending money, erasing a website,
or making a disparaging comment about grandma’s birthday
cake. And any time there are consequences, there’s also anxiety.

So be sure to let users know what will happen after they click
that button before they do it. You can do this through design
and/or copy.

WEB DESIGN 101 76

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

Setting expectations with design

• Highlighting the button that corresponds to the desired action

• Using a widely understood symbol (such as a trash can for a

delete button, a plus sign to add something, or a magnifying
glass for search) in combination with copy

• Picking a color with a relevant meaning (green for a “go”

button, red for “stop”)

Setting expectations with copy

• Writing clear button copy

• Providing directional/encouraging copy in empty states

• Delivering warnings and asking for confirmation

For actions with irreversible consequences, like permanently

deleting something, it makes sense to ask people if they’re sure.

WEB DESIGN 101 77

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

‍In InVision, clicking the trashcan icon doesn’t immediately delete a screen.
Instead, it asks if you're sure and lets you know it can't be undone.

4. Anticipate mistakes
To err is human; to forgive, divine.
—Alexander Pope, "An Essay on Criticism"

People make mistakes, but they shouldn’t (always) have to

suffer the consequences. There are two ways to help lessen
the impact of human error:

1. Prevent mistakes before they happen

2. Provide ways to fix them after they happen

You see a lot of mistake-prevention techniques in ecommerce

and form design. Buttons remain inactive until you fill out all

WEB DESIGN 101 78

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

fields. Forms detect that an email address hasn’t been entered

properly. Pop-ups ask you if you really want to abandon your
shopping cart (yes, I do, Amazon — no matter how much it
may scar the poor thing).

Anticipating mistakes is often less frustrating than trying to

fix them after the fact. That’s because they occur before the
satisfying sense of completion that comes with clicking the
“Next” or “Submit” button can set in.

That said, sometimes you just have to let accidents happen.

That’s when detailed error messages really come into their own.

When you’re writing error messages, make sure they do two things:

1. Explain the problem. E.g., “You said you were born on

Mars, which humans haven’t colonized. Yet.”

2. Explain how to fix it. E.g., “Please enter a birthplace here

on Earth.”

Note that you can take a page from that same book for
non-error situations. For instance, if I delete something, but
it’s possible to restore it, let me know that with a line of copy
like “You can always restore deleted items by going to your
Trash and clicking Restore.”

WEB DESIGN 101 79

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

The principle of anticipating user error is called the poka-yoke

principle. Poka-yoke is a Japanese term that translates to
“mistake-proofing.”

5. Give feedback — fast

In the real world, the environment gives us feedback. We
speak, and others respond (usually). We scratch a cat, and it
purrs or hisses (depending on its moodiness and how much
we suck at cat scratching).

All too often, digital interfaces fail to give much back, leaving
us wondering whether we should reload the page, restart the
laptop, or just fling it out the nearest available window.

So give me that loading animation. Make that button pop and

snap back when I tap it — but not too much. And give me a virtual
high-five when I do something you and I agree is awesome.
(Thanks, MailChimp.)

WEB DESIGN 101 80

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

‍MailChimp offers both feedback and encouragement when you schedule or send an email.

Just make sure it all happens fast. Usability.gov defines any

delay over 1 second as an interruption. Over 10 seconds, a
disruption. And the latter’s generous: for about half the U.S.
population, 3 seconds is enough to cause a bounce.

If a page will load in under 5 seconds, don’t display a progress

bar, as it’ll actually make the loading time seem longer. Instead,
use a visualization that doesn’t imply progress, like Mac’s

WEB DESIGN 101 81

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

infamous “pinwheel of death.” But not that. If you do use progress

bars on your site, consider trying some visual tricks to make the
load seem faster.

6. Think carefully about visual

element placement and size
Fitts’ Law, a fundamental principle of human-computer
interaction (HCI), states that:

The time to acquire a target is a function of the distance

to and size of the target.

In other words: the closer and/or bigger something is, the

faster you can put your cursor (or finger) on it. This obviously
has all kinds of implications for interaction and user interface
design techniques, but three of the most important are:

Make buttons and other “click targets” (like icons and text
links) big enough to easily see and click. This is especially
important with typography, menus, and other link lists, as
insufficient space will leave people clicking the wrong links
again and again.

Make the buttons for the most common actions larger and
more prominent.

WEB DESIGN 101 82

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

Place navigation (and other common interactive visual elements,

like search bars) on the edges or corners of the screen. This
last might seem counterintuitive, but it works because it
lessens the need for accuracy: a user doesn’t need to worry
about overshooting their click target.

While you’re thinking about element placing and size, always

keep your interaction model in mind. If your site requires
horizontal scrolling rather than vertical scrolling, you’ll need
to consider where and how to cue users to this unusual
interaction type.

7. Don’t ignore standards

Being highly creative types, designers tend to love to reinvent
things — but it’s not always the best idea.

Why? Because a revamped version of a familiar interaction or

interface adds “cognitive load”: it makes people think again about
a process they’ve already learned. Obviously, you can reinvent
the wheel all you want — but only if it actually improves the design.

This rule of thumb explains why Google Docs’ menu bar features
almost all the same options as Microsoft Word’s before Vista:

WEB DESIGN 101 83

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

Microsoft Word's menu bar before Vista.

‍Google Docs' menu bar, 2015

It also explains why Pocket had to change the placement of

the archive button in their Android app a few years back.

‍Changing a single button to be more consistent with Android's design patterns

made new users 23% more likely to keep using Pocket.

Up till fall 2013, the archive button was at the top left of the
screen — right where Android design specs said the “Up” button
should be. Pocket wanted to focus people on the reading
experience, and not duplicate an existing hardware control, but
the inconsistent placement caused new users to accidentally
close and archive the article they were reading, rather than
simply returning to their reading list as expected.

WEB DESIGN 101 84

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

That tiny change "increased the likelihood [new users] would

continue using Pocket from this point onwards by 23%."

8. Make your user interface

easy to learn
When it comes to simplicity, people often cite a paper by Harvard
psychologist George Miller called, “The Magical Number Seven,
Plus or Minus Two: Some Limits on our Capacity for Processing
Information.” The article suggests that people can only hold 5 to
9 things in their short term memory with any reliability. Miller
himself called this a coincidence, but that doesn’t seem to hold
anyone back from citing him.

That said, it’s only logical that the simpler something is, the
easier it is to remember in the short term. So, whenever
possible, limit the number of things a person needs to
remember to use your interface efficiently and effectively.
You can facilitate this by chunking information, i.e., breaking
it into small, digestible chunks.

This idea dovetails with Tesler’s Law of Conservation of

Complexity, which states that UI designers should make their
interfaces as simple as possible. That can mean masking the
complexity of an application behind a simplified interface

WEB DESIGN 101 85

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

whenever possible. A popular example of a product failing to

follow this law is Microsoft Word.

Most people only do a few things in Word — e.g., typing —

while others can use it to do all sorts of powerful things.
But around the world, everybody opens the same version of
Word, with the same UI, leaving your average Joe — who's not
a power user — overwhelmed by the variety of options they’ll
probably never use.

This led to a concept called progressive disclosure, where

advanced features are tucked away on secondary interfaces.
You’ll often see this on websites’ home pages, where short
chunks of copy introduce a product or feature, then link off
to a page where users can learn more. (This also happens to
be a best practice for mobile design, where robust navigation
is always a challenge.)

Pro tip: Avoid using “learn more” and similarly non-specific

text in links and buttons. Why? Because it doesn’t tell users
what they’ll “learn more” about. Often, people simply scan a
page looking for a link that takes them where they want to
go, and “learn more,” repeated 15 times, doesn’t help. This is
especially true for users of screen readers.

WEB DESIGN 101 86

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

9. Make decision-making simple

Too much of the web screams at us: “Banners” suddenly expand
to become full-screen ads. Modals pop up, imploring us to
subscribe to blogs we haven’t had a chance to, you know, read
yet. Video interstitials stop us in our tracks, forcing us to watch
precious seconds tick oh-so-slowly by. And don’t even get me
started on the widgets, flyouts, tooltips …

Sometimes I long for a calmer web — and Hicks’ Law gives us

all a reason to build one. The idea’s as simple as its end result:
the more ui options you present a user, the harder it becomes
for them to make a decision.

This impacts almost everything we build:

• Overall layouts

• Navigation menus

• Pricing pages

• Blog indexes

• Content feeds

The list goes on. But the upshot is: the simpler we make our
designs, the faster and easier it is for users to make the decisions
we want them to make. That’s exactly why landing pages and
non-newsletter emails should only have one call to action.

WEB DESIGN 101 87

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

Pro tip: Sometimes, you actually do want users to slow down

and consider their options. That’s why the tiled designs of
Pinterest, Dribbble, and many blogs actually work well. After
all, the more options you have to decide between, the more
likely it is you’ll find one that works for you.

10. Listen to the data

While we all might wish our designs were evaluated purely on
their artistic merit, the reality is that optimizing your design to
meet its objective is just as important.

While user research and testing can be incredibly helpful in

guiding your design decisions toward fulfillment of your site’s
goal, data gathered after launch remains invaluable.

So set up analytics for your site, and analyze them regularly.

There’s a bunch of different analytics tools out there, but I
recommend Google Analytics and/or Mixpanel, depending on
the project type.

Mixpanel focuses on events, so it collects data based on actions

a visitor takes on your site, while Google Analytics is more
behavioral, giving you session times, traffic sources, etc. While
both tools can provide both forms of data, they really shine in
their focus areas, so choose whichever best fits your needs.

WEB DESIGN 101 88

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

Note: both of these tools are free for up to a certain amount

of data points. Webflow and similar platforms usually make
analytics setup easy through a simple API key exchange.

Great interaction design in

Webflow sites
Many designers who use Webflow have applied these guidelines
to build intuitive and engaging interactions. Here’s a few examples.

Expanding circle navigation

Waldo Broodryk created a fun mobile- and desktop-friendly

animated menu. On page load, the circle in the lower right
reads “Menu.” On click, it expands to reveal the available pages
and changes to an X, allowing the user to close the menu and
refocus on the content.

WEB DESIGN 101 89

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

It’s a great combo of clear and engaging design, and plays close
attention to Fitts’ Law: it’s easiest to target links at the edge of
the screen. Circular navigation makes for an interesting option
when you don't want to imply hierarchy in your navigation.

Do you buy that girl a drink?

Designer Shane Hurt put together this amazing interactive

decision tree to help you decide whether or not to buy that
girl a drink. The visual design packs in a ton of content, but
keeps you laser-focused on the task at hand: answering the
current question, and moving on toward your decision. Way
to keep the interface simple, Shane.

WEB DESIGN 101 90

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

Uniqlo redesign

Designer Tim Noah was shopping on the Uniqlo website one

day when he realized how complex and unique their naviga-
tional system is. Inspired, he decided to “recreate this but in a
more tablet and mobile friendly way.”

My favorite thing about it is how he turned Uniqlo’s multi-level

nav, which takes several clicks and page loads to traverse on the
brand’s actual desktop website, into a single-page experience.
(To be fair, Uniqlo does the same thing on their mobile site,
but it’s a mobile subdomain, not a responsive version of their
desktop site.)

Note: this redesign was a personal project only, and in no way

affiliated with Uniqlo.

WEB DESIGN 101 91

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

Lead Sport Accelerator

Early in 2017, designer Jaro Quastenberg launched a site that

really shows the power of visual interactions in Webflow:
Lead Sport Accelerator.

The site really shines on two of the above mentioned tips.

The first: knowing your users. Lead Sports Accelerator knows
they’re trying to attract product-builders, and to do that they
must make a great first impression via their website. The
second is giving feedback. Whether you’re scrolling, hovering,
or clicking an element on the page, it immediately responds to
the visitor’s action, often in dramatic and delightful ways.

From the menu to scroll interactions – this is a great example of

optimized function on what some may consider art combined.

WEB DESIGN 101 92

CHAPTER II VISUAL DESIGN 10 ESSENTIAL UI DESIGN TIPS

Ok, you’ve nailed the basics

Now go forth and make some gorgeous, usable interfaces. And
feel free to share the best — and worst — examples of UI design
you’ve seen in the worldwide wilds of the web in the comments.

WEB DESIGN 101 93

CHAPTER II DESIGNING FOR THE WEB DESIGNING FOR MOBILE

DESIGNING FOR THE WEB

Designing for
the mobile
world
Discover the differences between
responsive and adaptive design, plus
how to craft content for mobile.

WEB DESIGN 101 94

CHAPTER II DESIGNING FOR THE WEB DESIGNING FOR MOBILE

We all know the web’s gone mobile. But it’s easy to underestimate
just how significant that is. These numbers from ComScore
should help drive the point home:

• 21% of millennials no longer use a desktop computer

to go online

• Time spent on smartphones increased 394% from the

end of 2010 to the end of 2014

• Time spent on tablets increased 1,721% percent in the

same period

• Over 75% of Americans use the internet on multiple devices

• And according to a 2015 report by the Pew Research Center:

• 15% of Americans have limited ways to access the web

beyond their smartphone

• 10% don't have any form of high-speed internet at home

beyond their phone

People don’t just browse the web on mobile when they need
to — they do it whenever, and wherever, it’s convenient. And
sometimes, they do it because they have to. Especially in
developing nations where a web-capable phone proves much
easier to get than a computer.

WEB DESIGN 101 95

CHAPTER II DESIGNING FOR THE WEB DESIGNING FOR MOBILE

Which means we can’t infer context or intent from device

anymore — if we ever could. So we designers need to create
websites that meet people’s needs regardless of their device.

With consistent design and content strategies across all

platforms, you can give people a seamless experience.

Now, that’s not to say it’s easy. But these tips should help.

Responsive vs. adaptive design

Image via Flickr by luc legay

Your first choice when starting a design in this mobile world

of ours is: whether to use responsive or adaptive design.

What’s the difference? Well, there’s a lot in a name.

WEB DESIGN 101 96

CHAPTER II DESIGNING FOR THE WEB DESIGNING FOR MOBILE

Responsive design

Responsive web design (or RWD) uses relative measurements

like percentages and ems (or rems) to ensure that your website
responds to the device it’s being viewed on. In other words,
your website remains the same, it’s just had content reflowed,
reorganized, and resized for a better mobile experience.

Responsive makes a good workflow choice because you

essentially design one layout for your site, then adjust for
different screen sizes. It’s also good for the end user in that
they see essentially the same site no matter what device
they’re using. So all the content and functionality they’ve
come to expect from the desktop site remains available on
their mobile device.

Responsive sites also make maintenance and updates easier

since you only have to make content and layout changes once,
rather than six or more times. Plus, responsive is more future
friendly, because you won’t have to create a new design if a
new screen width becomes popular.

That said, if you’re not careful with things like image optimization
and media queries, you can end up offering a laggy experience
to smartphone users.

WEB DESIGN 101 97

CHAPTER II DESIGNING FOR THE WEB DESIGNING FOR MOBILE

Of course, if you’re using Webflow, we manage the queries

for you. Not to mention, make tweaking layouts for different
screen sizes much easier.

Advantages of responsive design

• A consistent experience across devices

• Easier maintenance

• Future friendliness

Disadvantage of responsive design

• Can be slower than adaptive sites

Adaptive design

Instead of responding to different devices, adaptive web

design (AWD) serves unique designs for different common
screen widths. So each design is like an adaptation of your
core experience (whatever that is).

Instead of responding fluidly to the device someone is using

to view your site, AWD uses “breakpoints” to decide which
design the user will see. This can offer more flexibility, allowing
you to customize your site for different contexts. But there’s
always the danger you’ll make the wrong assumptions about
what users want. (Analytics prove invaluable here.)

WEB DESIGN 101 98

CHAPTER II DESIGNING FOR THE WEB DESIGNING FOR MOBILE

Breakpoint (n.) - a screen width you decide to serve a different

design at.

Advantages of adaptive design

• Faster performance

• Customizability for different devices

Disadvantage of responsive design

• Too many devices to account for

• No future proofing (against the next big thing in devices)

Always be testing

No matter which route you go, never assume you’re providing

the best experience for the device. Check out your designs on
a wide array of devices to make sure it looks and performs as
it should. And, equally important, that it’s fulfilling the goals
you defined for it.

WEB DESIGN 101 99

CHAPTER II DESIGNING FOR THE WEB DESIGNING FOR MOBILE

Content considerations for

mobile users
Because people use the mobile web so much — and so often,
to get stuff done — you need to shape your content with
mobile in mind.

Here are a few things to keep in mind when designing and

creating content with a mobile-first mindset:

Keep navigation simple

There’s no room for mega-menus on mobile, and dropdowns

need thoughtful implementation to work. So these time-honored
solutions for packing the most content into the tiniest space may
warrant a quick, curt goodbye.

The solution: keep it simple.

Highlight the most vital aspects of your site in your main

navigation, and offer people paths to other pages through
your homepage content.

If you’re designing for a software-as-a-service (SaaS) company,

your main nav might contain: Features, Products, Pricing/Plans,
and a content-focused page like Blog, or Learn. Other pages,
like About or Mission or Jobs can be linked from the main

WEB DESIGN 101 100

CHAPTER II DESIGNING FOR THE WEB DESIGNING FOR MOBILE

content area, or relegated to a link list in your footer. Building a

restaurant site? Then make sure you highlight your Menu and
Location/Hours info. And please, please don’t serve up your
Menu as a PDF.

If you’re building a massive estore, you’ll want to focus your

main nav on the most abstract categories — say, Men’s,
Women’s, and Children’s — and let people dig deeper on sub
pages. Plus, make search a prominent option so people with
some idea what they’re looking for can cut to the chase.

Pro tip: Take a cue from Google and ensure that your
search technology enables prediction. No matter how many
things people are getting used to doing on their phones,
typing still sucks.

By keeping your navigation simple, you’ll not only create a

better mobile experience, but also simplify your site for every
user. And that’ll help keep you focused on your core message
and the behaviors you’re really looking for from people.

Oh — and don’t forget to make your buttons a finger-friendly

size, and provide adequate whitespace around text links.

Check out the Nielsen-Norman Group’s article “Supporting

Mobile Navigation” for more on this.

WEB DESIGN 101 101

CHAPTER II DESIGNING FOR THE WEB DESIGNING FOR MOBILE

Keep your content consistent

There’s little more aggravating than starting an article on

your laptop then switching to your phone … only to discover
the content’s not accessible there.

And seriously — don’t worry about this whole “people don’t

read on mobile” meme. If no one’s reading your content on
mobile, you should probably blame your content before you
blame your audience or the device they’re using.

Don’t believe me? BuzzFeed has found that readers actually

spend more time reading long-form stories on their mobile
devices than on desktops. And a UNESCO study of mobile
reading in developing countries found that “whether in North
America or rural Ethiopia, people appear to like mobile reading
because their device is ‘always there’” — i.e., it’s convenient.

A seven-year-long UNESCO study of mobile reading found that most people

read on mobile because it’s convenient — i.e., always there.

WEB DESIGN 101 102

CHAPTER II DESIGNING FOR THE WEB DESIGNING FOR MOBILE

Now, on a marketing page, you obviously don’t want to go on

forever about any one feature or product. That just risks losing
a potential customer. Instead, quickly and clearly explain
what each product or feature enables, then offer a link to
learn more. Those who are interested will tap — and others
will keep scrolling.

And before you object that all these studies are about reading
books and other long-form content: point taken. But the more
comfortable we grow with reading long text on our phones,
the more comfortable we’ll become with all sorts of reading
on our phones. And what’s a marketing page but multimedia
long-form content with a reputation for being boring?

Check out The Wall Street Journal’s “The Rise of Phone Reading”
for more on this fascinating change in reading habits.

Take advantage of mobile features

Even though we can’t make hard-and-fast assumptions about

what people are doing or where they are when they use their
smartphone’s browsers, we can make their lives a little easier
when they’re out and about.

If you’re building a site for a company with brick-and-mortar

storefronts (i.e., visitable locations), you can use the phone’s
location awareness to highlight:

WEB DESIGN 101 103

CHAPTER II DESIGNING FOR THE WEB DESIGNING FOR MOBILE

1. The closest location

2. Open hours (specifically, whether it’s currently open or not)

3. Current offers/specials/coupons

Cut the cruft

Popups. The overwhelming majority of us loathe them. Yet

marketing teams everywhere love them because — perhaps
only because of how insanely annoying they are — they continue
to perform.

But it’s time for us all to make a choice for our user experience
over our more easily measured goals:

Kill the popups.

If you’ve ever encountered one on your phone … and then

tried to slide over to close out of it, only to have it follow you …
you know what an experience-breaker popups are on mobile.
I’ve killed tabs containing articles I very much wanted to read
because of these things.

That’s why you don’t see any popups here on the Webflow
blog. We actually want you to read our articles.

WEB DESIGN 101 104

CHAPTER II DESIGNING FOR THE WEB INTERACTION AND ANIMATION DESIGN

DESIGNING FOR THE WEB

How to design
interactions
effectively
Get 5 tips on building better interactions
and animations for your websites.

WEB DESIGN 101 105

CHAPTER II DESIGNING FOR THE WEB INTERACTION AND ANIMATION DESIGN

A website is not a static brochure. It offers

all kinds of opportunities for animation and
interactivity. But just because you can
animate everything, doesn’t mean you should.

The internet constitutes a completely different form of

media, the fastest-evolving form we’ve ever built. Just load
up a 90s-era website like Space Jam, and compare it to the
site you’re on right now.

Big difference, right?

You’ll probably notice that the use of white space, typography,

color, and imagery has drastically improved over time. Thankfully.

What you might not notice at first glance is the addition

of motion. Page elements animate into place. Links change
colors. And buttons grow, glow, and move to-and-fro as you
hover over them.

The power of dynamism

Unlike graphic designers' work, your designs aren’t static —
they’re dynamic, shaped by how people use interact with them.
That’s what sets web design apart.

WEB DESIGN 101 106

CHAPTER II DESIGNING FOR THE WEB INTERACTION AND ANIMATION DESIGN

So now that we have this dynamic power, should we start

making everything spin, twirl, bounce, and change color?
Absolutely not. That’s like adding a new sound and transition
effect to each slide and bullet point in Powerpoint. Nobody
likes that guy.

The real question is: how can we effectively add animations

and interactions to our designs? Let's find out.

Effective website animations and interactions possess

5 qualities. They’re:

1. Subtle – animations should enhance, not dominate.

Visitors should barely even realize they’re happening.

2. Natural – animations should look and feel natural and

organic, not robotic and jarring.

3. Informative – although you should always strive to make

your designs self-evident, when you’re trying something
new, animations can provide subtle cues to provide context.

4. Rare – if everything’s moving around and demanding

attention, nothing will effectively attract attention.

5. Fast – slow animations can make people think a site’s

broken or non-responsive, leading them to bounce.

Let’s explore each of these points in more detail so you can

make the most of y`our animations and interactions.

WEB DESIGN 101 107

CHAPTER II DESIGNING FOR THE WEB INTERACTION AND ANIMATION DESIGN

Animate subtly

“Good design is obvious. Great design is transparent”

—Joe Sparano

It always astonishes me that something that takes countless

hours of tweaking to get just right can be digested in seconds.

“This is great. When can we launch?”

They just glanced at it, and they liked it. It didn’t require thought.

But that’s the ideal end result with design. A fantastic design is
subtle. People shouldn’t even notice your animations consciously.

So why add animations if people aren’t even supposed to

notice them? The key word is consciously. Because your
visitors' subconscious minds definitely notice animations.
Effective, subtle animations make your site feel better and more
sensible. Animations should enhance the interaction without
overpowering the content.

The best designs get out of the way and let people do what
they need to do as easily as possible.

WEB DESIGN 101 108

CHAPTER II DESIGNING FOR THE WEB INTERACTION AND ANIMATION DESIGN

Interactions should match the tone

of the site
Your animations should always match the aesthetic and tone
of the site you’re building. If you’re building a site for kids,
you can be more showy and bouncy. If it's for a luxury watch
brand, be subtle and elegant.

Animations should be au natural

Animations should never be linear. Linear animations are
jerky and awkward. They remind people of robots and
machines, and are anything but natural. They’re actually a
bit uncomfortable to watch.

Instead, make your animations and interactions smooth, and

their easing (their speed over time) natural. For example, an
easing of “ease-in” starts slowly, and accelerates until its end.
An easing of “ease-out” starts abruptly, but slows down near
the end. Linear easings have a uniformly increasing speed
throughout the animation.

Keep it natural by using more natural easings like “ease,”

“ease-in-out,” and more complicated ones like “ease-in-sine.”

WEB DESIGN 101 109

CHAPTER II DESIGNING FOR THE WEB INTERACTION AND ANIMATION DESIGN

‍Here's how you set the easing in Webflow.

Interactions and animations should be

informative — not just special effects
Your site isn’t a Transformers movie where explosions, giant
robots, and Megan Fox cover up a simplistic, rehashed plotline.

WEB DESIGN 101 110

CHAPTER II DESIGNING FOR THE WEB INTERACTION AND ANIMATION DESIGN

Your sites serve a purpose: either to convey information or

enable a transaction. So your animations should help your
visitors’ with these tasks, and not just be overt flourishes
designed to wow them.

Sites full of whiz-bang animations exist, and they can be really

cool, but clients rarely pay for them. Instead, they’re built by
designers and developers playing around on a Tuesday night.
If the site's for a client, stick to informative animations.

But what’s an informative interaction? An informative animation

enhances the user experience (UX). For example, buttons and
links should should let people know they’re clickable. It helps
remove the guesswork.

Motion draws the eye. That means animations can also be

used to guide visitors to the next step or inform them of
something potentially tricky.

In a perfect world, your sites will be clear as day on every page.

But if you’re doing something a little different, like horizontal
scrolling, then some sort of visual cue — like a subtle arrow
bouncing on the bottom of the page — can be extremely helpful.

WEB DESIGN 101 111

CHAPTER II DESIGNING FOR THE WEB INTERACTION AND ANIMATION DESIGN

The best animations provide purposeful guidance.

Animate sparingly
You can’t be subtle or informative if everything has some
sort of animation. This is especially true if you make each
animation unique.

For example, if you animate page elements into place as you

scroll down a page, then don’t make the first one fade, the
second slide, the third one spin, the fourth one checkerboard.

Just make them all the same. If you must add variety, have
page elements on the left of the page slide in from the left,
and those on the right slide in from the right. Animate similar
elements in a similar fashion.

WEB DESIGN 101 112

CHAPTER II DESIGNING FOR THE WEB INTERACTION AND ANIMATION DESIGN

And only add a hover interaction on an element when people

can actually do something with that element. On-hover
animations are just confusing if you can't actually click, drag,
or do anything with that element.

In other words, only add an animation when it actually helps

your visitors.

Don’t keep people waiting

People have no patience on the internet. Every second of delay
on page load decreases customer satisfaction by 16% and
reduces sales by 7%. Making people wait can wreak havoc on a
site’s profitability.

And people don’t get any more patient after the site’s loaded.

Note: Want to keep visitors on your site? Learn how to boost

your site’s performance.

What does this mean for your animations and interactions?

They should be fast.

After all, no one’s going to hover over a button for even half a
second, no matter how dramatic your rollover effect looks.

Okay, maybe some will — the first time. But what about the
third time? Or the twentieth? Think they’ll still have the ap-
preciation and patience for a slow animation then?

WEB DESIGN 101 113

CHAPTER II DESIGNING FOR THE WEB INTERACTION AND ANIMATION DESIGN

Same goes for the complex, multi-stage loading animations

and introductions we used to build in the days of Flash. Nobody
wants to sit through those. People use the web to find the
information they need, or the product they want, and then
move on with their lives.

TL;DR: Keep your animations below 500ms in duration to

keep them snappy.

Now go forth and animate!

Open up one of your current projects and start using these tips to
improve your animations and interactions. It’ll make a difference.

Interactions done right truly take a site from good to great.

They take advantage of the unique power that websites have
over print media by making it more real and engaging. And
clients and visitors alike really love them.

Note: To learn more about adding animations to your page

using Webflow's visual web design tool, check out our course
on Webflow interactions.

Have some great examples of animations and interactions

done right? Tweet 'em at us!

WEB DESIGN 101 114

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

DESIGNING FOR THE WEB

Building high-
performing
websites
The easy guide for designers

WEB DESIGN 101 115

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

Ever stop to think that maybe your site isn’t

signing up users like you hoped because
it’s not loading fast enough?

47% of your visitors expect your site to load within two seconds,
and 40% of them will leave if it takes more than three seconds.
Each second of delay decreases customer satisfaction by around
16%, and reduces your sales by 7%.

To put it bluntly, performance can make or break a website.

There are two foolproof ways to increase the speed of your

site, and thereby improve customer satisfaction, retention,
and conversion:

1. Decrease the size of your site — a larger site takes longer

to download

2. Use faster hosting — a faster, more responsive server

decreases the total time between a visitor pressing enter
(or clicking a link) and the page loading

The focus of this article is learning how to decrease your site’s

total file size plus learning how to increase its scrolling
performance. There are many potential techniques we could
cover when it comes to web performance, but we're going to
focus on the ones with the largest impact for designers. Luckily,
these improvements can all be made in under 30 minutes.

WEB DESIGN 101 116

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

Regardless of your existing technical expertise, reading this

simple guide will help you increase your site’s loading speed
and visitor retention by a meaningful amount. Let’s get started.

Reducing the size of your site

The single most important technique to speeding up a web
page is to make it smaller. I’m not talking about having less
content, but rather about reducing the number of kilobytes
that your site’s content consumes.

To view a web page, your computer has to download all of the

related files from the server to display them in the browser.
The more kilobytes a user needs to download, the longer it
takes to load the site.

How do you reduce the size of your site’s files? By optimizing

images, minimizing text files, and by using smaller images
when your site is viewed on smaller screen sizes. It’s time to
put your site on a cleansing diet.

Images
Images are the vast majority of your site’s file size consumption,
and optimizing images to reduce their size can make your site
load several times faster. This is where you should focus the
majority of your performance optimization efforts.

WEB DESIGN 101 117

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

I know you want to keep your photos at maximum quality and

at 5000px wide, because that’s how you see the individual
pores on Obama’s face—but that file is over 10MB and is
causing your site to slow to a crawl. Even for a full-page
background image, you could get the image down to one or two
percent of that type of file size, and it would still look great.

Tip: The banner image consumes so few kilobytes because it’s

visually simplistic. Visual complexity increases image file size.
Therefore, consider using illustrations and graphics rather
than detailed photographs. To learn how to find and manage
beautiful design resources, check out our previous article.

So how can I reduce the size of my images?

Step one is to open your images in Photoshop then hit File >
Save for Web. This opens a special panel with everything
needed to optimize your images for reduced file sizes. (See
an example photo in the JPEG section below.)

Start by matching up the image’s resolution to the size that it

will display on the site. If you display the image at only 600px
wide, then why keep it at 1600px? Chop it down and reap the
size benefits — an image with half the width will be even less
than half the size. You can double the size (from 600px to
1200px) to make your images look sharp on high-definition

WEB DESIGN 101 118

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

displays (Retina, 4K, etc.), but there’s no need to go any

higher. Repeat after me: The larger the resolution, the larger
the file size!

Aside from reducing the image’s resolution, how else can we

reduce its file size? The primary way is to change the image
to the best file format for the job then reduce the image’s
quality without significantly sacrificing image clarity. It’s fairly
easy to do with just a few mouse clicks.

JPEG, GIF, PNG, and SVG are the four main image file formats
used on the web, and each have their specific use cases. Let’s
go through them and learn how to optimize them.

JPEG

JPEG is the main file type that digital cameras use. It’s a “lossy”
image format, which means that simplifications are made to the
image data in order to drastically reduce the image’s file size. In
the process, image quality decreases (although by how much
is up to your settings). To balance between size and clarity, you
have the ability to set the image’s quality on a scale from 1-100.

WEB DESIGN 101 119

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

‍Photoshop’s Save for Web panel (for a JPEG). Set the file format, quality,
resolution, and blur — then preview how it will look after optimization.

Due to their cleverly-implemented lossiness, JPEGs have

significant file size advantages over the other formats, which
is why you should use JPEGs for 90% of your site’s images.
PNGs and GIFs are smaller only when you severely limit
color count (more on this shortly).

Remember, however, that you still want beautiful, acceptable

resolution images — so don’t go too wild with your quality
slashing. I generally find that a JPEG quality percentage
between 30 and 60 nicely balances image clarity and file size.
Play around and see what works best for your own images.

WEB DESIGN 101 120

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

Pro tip: You can get sharper images at lower file sizes by using
a larger resolution with an even lower JPEG image quality.
For example:

The image on top is 500px wide with a quality of 60% and is 53KB.
The image below that is 1000px wide with a quality of 30% and is
also 53KB, and it's notably sharper when displayed at 1000px!

WEB DESIGN 101 121

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

JPEGs, unfortunately, do not allow for transparency. What

does this mean? Say, for example, you want an image’s
background to be transparent so that the color of the area
behind it shines through. This wouldn’t be possible with a
JPEG. Instead, the blank space behind the logo would default
to white. To have a transparent background, you must use a
PNG or a GIF. This is why company logos are often saved in
the PNG and GIF file formats.

Below are two images against a grey background:

WEB DESIGN 101 122

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

The top image is a PNG with a transparent background, so

the grey background visible around the logo. The image on
the right is a JPEG without transparency. Notice that its
background defaults to white.

GIF

GIF is also a lossless format (no image information is lost in its

creation) and it is ubiquitous across forums and throughout
Internet memes. GIFs allow for transparency, but their greatest
advantage is that they allow animations (of short durations).
GIFs are most commonly used as “mini-videos” for comedic or
illustrative purposes:

‍An example of an animated GIF, and a kung-fu master.

I feel kind of weird using the term “mini-videos," but I don't

know how else to best describe it.

WEB DESIGN 101 123

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

GIFs often look grainy and oddly colored because designers

generally limit the number of total GIF colors to between
2 and 256. Reducing the color count can lead to huge file size
savings. So, when creating GIFs, if the clarity of the image
doesn’t matter too much, decrease the color count as much
as possible to reduce its file size!

PNG

PNG is a lossless format, and it boasts the highest image quality

of all the web image formats (it’s the best to use if Obama’s
pores are that important to you). As mentioned earlier, PNGs
support transparencies — and that is the primary reason to
use them on your site.

PNGs come in two sub-formats: PNG-24 and PNG-8. PNG-24

is the highest quality version, while PNG-8s allow for smaller
sizes by reducing the image’s color count, just as with GIFs.
Therefore, if an image only has a few colors to begin with
(e.g. a simple company logo as opposed to a detailed photo
of a flower), use PNG-8.

Instead of spending the time tweaking the color count by eye,

you can use simple drag-and-drop tools like TinyPNG. TinyPNG
automatically converts your PNG into a PNG-8 and removes
any colors the image doesn’t actually use. This process can

WEB DESIGN 101 124

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

reduce the size of your PNGs by up to 80% without sacrificing

transparency or image quality. Your visitors will still see the
same beautiful images, but they’ll download much faster.

SVG

SVG is in a completely different category from the other three

formats, as they are actually vector graphics — the file type
designers often work with in Adobe Illustrator or Sketch. How
does that make them different than the others? Well, you can
expand an SVG to several times its original size, and it will be
just as sharp as it originally was. They’re also incredibly small
in file size, render perfectly on high-resolution (e.g. Retina
or 4K) displays, and you can even customize them using CSS!
Learn more about how to use them here.

How is all this possible? Unlike other images that are made up
of specifically-defined pixels, vector graphics (SVGs) are made
up of a set of shapes created in XML (an HTML-like markup
language). Scaling a typical image reveals the underlying pixels
in their full ugly glory, but scaling an SVG preserves the base
shapes perfectly.

WEB DESIGN 101 125

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

Examples of what you can make with SVGs

But they aren’t the perfect solution for every image. SVGs are
generally visually simplistic with just a few colors, suiting such
use cases as a company logo, a UI icon, or a simplistic illustration.
Hence, you can’t use SVG for photos, but you can make pretty
cool animated interface elements with them because they can
be programmatically controlled via CSS and JavaScript!

Note: You can check out Creative Market to peruse high-quality

vector graphics.

WEB DESIGN 101 126

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

To create an SVG, you need to use a vector graphics design

program like Adobe Illustrator or Sketch. To reduce the file
size of an SVG image above and beyond what Illustrator can
do by itself, use a clever tool like SVG-Optimizer.

Using different image sizes for

different devices

Do you think that a 3” phone needs to have an image as large

as a 32” monitor to look sharp? Nope! Definitely not. You
could probably significantly decrease the resolution of the
image being served to the phone yet still have it look razor
sharp, and the file size savings will be massive.

Mobile devices often rely on relatively slow 3G/4G connections,

so your file size saving efforts become even more crucial for
the roughly 50% of people visiting your site on mobile devices.
And don’t forget, these visitors are probably also working with
limited data plans — don’t eat through their 500Mb limit with
a 10Mb photo of a dog wearing a suit!

Using CSS media queries, you can actually deliver a different

background image for the various device screen sizes that
your site is accessed with. This means that you must save your
images in a few different sizes. This process only takes a few
extra seconds per photo.

WEB DESIGN 101 127

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

With Webflow in particular, it’s very simple to preview a

different device view in real time then change the background
image to a smaller version (to one that’s lower resolution and
hence lower file size). Image changes intelligently propagate
down to smaller devices in Webflow, so a background image
that’s been set for a tablet-sized device will also automatically
be set for phones as well.

Image wrap-up
Here are the key points for optimizing images on your site:

• If you want transparency in an image, use a PNG

• For images with animations, use a GIF

• For simple icons, logos, and illustrations, use SVGs

• If the image has very few colors, use a PNG-8 or a GIF

with a reduced color count

• When appropriate, choose simple illustrations over highly

detailed photographs

• For colorful images, use a JPEG at a lower image quality (30-60)

• Resize the image closer to the size it will be displayed on

your site. Don’t use a 5000px image if it will render at 50px

• Display smaller background images on smaller devices.

This is part of the concept of responsive design

WEB DESIGN 101 128

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

Third-party services: Instead of doing image optimization work

yourself, you can use image-resizing services built on top of
CDNs, such as imgix. A service like imgix does on-the-fly image
resizing and compression then serves the optimized images
over a CDN. It also works great when dropping photos into
Photoshop isn't an option, such as when you have a library of
user-uploaded content.

Minify CSS and JavaScript

Images aren’t the only type of design asset that can be put
on a diet — you can also significantly reduce the size of your
site’s text files through minifying.

Minifying is the process of reducing the number of characters in

a file (this applies to CSS and JS files only). Internally, minifying
engines work by removing whitespace (spaces and line breaks),
and by replacing longer words with shorter words. It does this
in a way that doesn’t change the final behavior of your code. It’s
pretty neat. Minifiers often lead to over 60% file size reductions.

You can use simple copy-paste tools like CSSminifier and

JSminifier to minify your CSS and JavaScript. If you’re using
Webflow, it automatically minifies all your files whenever you
publish the site live, so there’s no need to worry about it.

WEB DESIGN 101 129

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

Faster hosting
Beyond making a site smaller, there are two other ways to
increase a site’s load speed:

1. Visit the site with a faster Internet connection

2. Host the site with a faster hosting provider

Since you’re not about to go upgrade all of your site

visitors’ Internet connections, you’re left with finding a
faster hosting provider.

To save you from a technical discourse, here's the summary:

You want fast servers that are strategically distributed across
the areas where your visitors live. Why? Because the closer the
server is to your visitors, the faster your site will load. Therefore,
if your customers are worldwide, so should your servers be.

One of the best hosting providers for these purposes is

Amazon AWS, which offers high performance servers
distributed across 11 regions around the world. (Webflow’s
own one-click hosting is built on top of Amazon AWS’s
CDN servers. Check out this performance test for Overton
Graphics, a site designed and hosted with Webflow by
designer, Josh Overton; it scores 96/100.) A fantastic
competitor of AWS is DigitalOcean (although they have
fewer regions). Both Amazon and DigitalOcean are much

WEB DESIGN 101 130

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

faster and better distributed than smaller boutique web

hosts, but much more technical expertise is required to
setup websites on them.

Bonus: On-site optimizations

There’s one final piece of the performance puzzle that has
less to do with page download speed, and more to do with
on-site page performance — and it's just as important. It
doesn't matter if your site loads instantly if it jitters and
chugs whenever someone tries to use it. In fact, that’s even
worse. Load speed is only annoying at first, but a laggy page
is annoying throughout the entire browsing experience.

How can you keep your page snappy even after it’s been
loaded? It’s all about limiting the amount of processing work
the computer needs to do. Primarily, this means limiting
animations and UI flourishes:

Don’t go heavy on animations. Animations require a lot of

processing and graphics power, and can cause serious lag.

Avoid animating images as much as possible. You can sprinkle

them in there, but don't go overboard. Animations require
a lot of power, and animating images requires exponentially
more power! Browsers have a hard time doing this type of
work in bulk — especially on mobile devices.

WEB DESIGN 101 131

CHAPTER II VISUAL DESIGN BUILDING HIGH-PERFORMING WEBSITES

Be careful about adding too many background gradients, box

shadows, and text shadows. These are forms of “pseudo-images”
that are equally as intensive for the browser to animate.

And, let's not forget: One of the biggest on-site performance

culprits is triggering animations during page scrolling, such
as moving page elements around or fading them in and out.
Not only does the browser have to process the visual
changes associated with scrolling a dynamic page, but it also
has to process all your animations at the same time. That's a
lot of work. Be mindful of what you're asking the browser to
move around.

Don't get me wrong — I’m not saying to not use animations,

but to be wary about incorporating too many of them.

Now go forth, and may speed

be with you
I’ve now equipped you with the best methods for quickly
improving the speed of your websites, but it’s all for naught
unless you go forth and put them in action... so get to it!

Before you go, I want to recommend that you use Pingdom’s

Website Speed Test to determine your site’s performance score,
which is helpfully accompanied by tips for further improving
your site.

WEB DESIGN 101 132

CHAPTER II DESIGNING FOR THE WEB LANDING PAGE DESIGN

DESIGNING FOR THE WEB

How to design
landing pages
that convert
You’ve got a killer product or service. But
without a great landing page, no one will
ever know it.

WEB DESIGN 101 133

CHAPTER II DESIGNING FOR THE WEB LANDING PAGE DESIGN

You’ve finally done it.

Months of back-breaking design work spent

hunched in front of the computer have finally
culminated in a finished product. Phew. Time
to unleash it on the world.

You launch the site, and fire up the marketing machine. You
tweet. You share. You email “influencers.” You set up ads for
Facebook, Twitter, LinkedIn, and Adwords.

And nothing. Crickets. Your analytics app shows a dismal

conversion rate: 5 new users from 10,000 visitors.

What happened!? People could definitely benefit from your

product, but they aren’t signing up.

The answer’s in your landing page. Maybe it’s confusing, or

boring, or downright scary. Whatever the cause, it’s broken.
Let’s see how you can fix it.

7 elements of successful landing pages

If no one’s signing up for your killer product, the problem lies
in your landing page. Thankfully, millions of landing pages built
by thousands of companies — paired with careful analysis —
have led to something of a formula for success.

WEB DESIGN 101 134

CHAPTER II DESIGNING FOR THE WEB LANDING PAGE DESIGN

Here are the elements of high-converting landing pages:

1. Detailed, but concise copy – be specific about what your

product is, does, why it matters, and how it will help your
visitors. People won't pay for something they don't under-
stand. But they don’t want to have to read an essay first.

2. Clear calls to action (CTAs) – your calls to action (buttons

and links) should be both visually prominent and clear in
meaning, so people know what you expect them to do.

3. Genuine tone – sounding like a keyword-spewing robot

can scare people away and make your product sound
cheap. Write as you would normally speak.

4. Engaging content – people get bored and intimidated by

large blocks of text. Keep their attention with engaging and
easy-to-read copy, lists, imagery, and data visualizations.

5. Social proof – have big-name or really happy customers?

Show them off. Nobody wants to use an app nobody else is.

6. Carefully considered pricing – the right pricing display

can sway people’s decision-making.

7. Logical progression – the most convincing arguments

rely on precise timing. If you dive into price before cov-
ering the benefits, you could intimidate people. That said,
if you have a free trial or price is a big differentiator from
your competition, it’s worth mentioning early.

WEB DESIGN 101 135

CHAPTER II DESIGNING FOR THE WEB LANDING PAGE DESIGN

It doesn’t matter how many visitors hit your landing pages

if they don’t convert. So let’s dive deeper into each of these
elements of a killer landing page so you can start capitalizing
on all the traffic you’re breaking the bank to get.

1. Tell people what you offer

‍I just love how I know exactly what Acorn does after reading one sentence.

Too many landing pages make it impossible to figure out

exactly what the product does. They’re filled with pithy,
generic statements that emphasize emotion over clarity.

How many times have you seen a headline like, “Fakia will
revolutionize how you do business!” and thought:

Cool. How?

WEB DESIGN 101 136

CHAPTER II DESIGNING FOR THE WEB LANDING PAGE DESIGN

You never want visitors to ask that question. You know what
your business is and does, but your customers have no idea.
So explain:

1. What your product/service is: is it a desktop app, a mobile

app, a social network?

2. What it does: and be specific, even if it is revolutionary.

3. Who it’s for: designers, lawyers, hungry people, CPAs?

4. Why it matters: what sets it apart from similar products?

Be clear, descriptive, and concise. Write as if you’re speaking to

someone who has no idea what your product does — because
99% of the time, you are.

A word on jargon
In most cases, you want to explain your product as simply
as possible, using everyday language. But it’s okay to use
industry-specific terms if you’re selling to a niche audience.
Just don’t assume every person who visits your page will
know what you’re talking about.

For example, rather than saying you offer a “natural language

search-optimization platform,” you could say, “Bring more
people to your website by using the search terms they’re
actually using.”

WEB DESIGN 101 137

CHAPTER II DESIGNING FOR THE WEB LANDING PAGE DESIGN

2. Use prominent and clear calls to

action. Often.

‍One screen, two ways to sign up.

Whether you want people to sign up for your newsletter or to

buy your product, you need to give them a clear path to that
next step.

So make sure your calls to action (CTAs) stand out from the
rest of the page. Instead of a plain text link, use a button.
Then make it pop with a strong, high-contrast color.

And be sure to spread your calls to action throughout the

page. After all, some people will want to dive right in, while
others might need to scroll through the entire page. Some
will even check out your page, then leave to look for reviews
or social media chatter, only to return and convert later. So
feature at least two calls to action — one “above the fold” and

WEB DESIGN 101 138

CHAPTER II DESIGNING FOR THE WEB LANDING PAGE DESIGN

another at the bottom of the page. You could also try making
a “sticky” CTA that follows people as they scroll down the
page, so they’re never without an easy way to convert.

3. Don’t be an infomercial

‍Dollar Shave Club may not be winning any design awards, but they sure sound like a regular guy.

Avoid being spammy, or you’ll scare people off and make your
brand and product look cheap. What’s “spammy?” Sounding
like a used car salesman. Or an infomercial.

So don’t shout at people. Don’t randomly all-caps copy (especially

the word “free”) or promise things you can’t deliver. Be real.
Talk like a person. Write as if you were explaining your product
to your mother, significant other, or best friend. If you’re real
with people, they’ll be much more likely to trust you and what
you’re telling them.

WEB DESIGN 101 139

CHAPTER II DESIGNING FOR THE WEB LANDING PAGE DESIGN

And please, no pop-ups, takeovers, or strobe lights. Those just

infuriate people. And angry people don’t become customers.

4. Keep people engaged

‍KissMetrics effectively pairs nicely visualized stats with social proof,

so their page isn't just a wall of text.

If people get bored or lost, they’ll bounce, off to check out

cute kitten GIFs. Here’s a few ways to keep your audience
engaged from page load to conversion:

1. Be clear. Make sure your content is clear and easy to read

or people will get frustrated.

2. Use visual content. Long blocks of text can turn reading

your page into a chore. So break up your copy into digestible
chunks with bullet lists, images, and data visualizations like

WEB DESIGN 101 140

CHAPTER II DESIGNING FOR THE WEB LANDING PAGE DESIGN

charts, graphs, and infographics. This will not only help

keep people reading, but also engage those who learn better
through visuals.

3. Be entertaining. People are more likely to keep reading if you

make them smile. Throw out the odd joke. But not too odd.

4. Touch close to home. Speak to your audience’s challenges

and goals. They’ll keep reading if it sounds like you’re not
only aware of their problems, but aiming to solve them.

5. Don’t forget the social proof

HelpScout brings out the big gun — I mean, names — for its social proof.

Ever avoid a nice-looking restaurant just because it was empty?

Or wander into a crowd just to see what they’re gawking at?
We all have.

If other people have decided that something is entertaining

or useful, we’re more likely to give it a try. Saves us having to
do the homework ourselves.

WEB DESIGN 101 141

CHAPTER II DESIGNING FOR THE WEB LANDING PAGE DESIGN

So make use of the people already enjoying your product by

featuring their quotes, testimonials, Facebook likes, and even
case studies. Show the real people behind the quotes to make
them more impactful and credible. Include names, faces,
and company logos (if you’re selling a business product). And
choose testimonials that match your message so it’s not just
you saying your product’s amazing.

Just make sure you get these people’s approval first. There’s
little weirder than stumbling across your face or words on a
website when you never approved it.

Lastly, if you have high-profile clients, such as Fortune 500

companies or celebrities, ask if you can highlight them. If
Facebook or Barack Obama use your product, people will be
more inclined to trust it.

WEB DESIGN 101 142

CHAPTER II DESIGNING FOR THE WEB LANDING PAGE DESIGN

6. Play with pricing

‍I wonder if UberConference has played with setting their price

in a smaller font size than the other guys.

Pricing is key not only to the health of your business, but also
your conversion rate. And it’s not just about what your prices
are — how you display them matters too.

For example, you’re probably well aware of the $19.99 trick

(it sounds smaller than $20!). But what about a price with
fewer syllables? Believe it or not, a price you can say faster
sounds cheaper.

Even the relative size and position of a price can influence

people. A smaller font size makes the price seem smaller
(PDF). Putting the price at the bottom left of a box rather than
the top right affects perception too.

WEB DESIGN 101 143

CHAPTER II DESIGNING FOR THE WEB LANDING PAGE DESIGN

The psychology of pricing deserves an article in itself, and

luckily, it’s already been written: check it out and craft your
perfect pricing strategy.

Give people options

Ever head to a store because you saw an extremely low price

on a product you’ve been itching for, then learn that for just a
little more money, you could get so much more? Sometimes
you end up spending twice what you meant to, but feel okay
about it because you saved on the extras.That’s exactly why
so many startups and software-as-a-service (SaaS) companies
offer free tiers and trials, but restrict the power features to
premium tiers. The cheap option gets people in the door —
and it’s a lot easier to upsell them when they’re already
half-invested.

Plus, some people just like to have the best of the best. Offer
a premium version and they’ll jump at the opportunity. Just
don’t provide too many options, or you’ll leave people stuck
with analysis paralysis (the inability to make a choice that
stems from having too many things to choose from).

WEB DESIGN 101 144

CHAPTER II DESIGNING FOR THE WEB LANDING PAGE DESIGN

7. Do it all in the right order

If someone walked up to you right now and asked you to sign
up for something called “Fakia,” and started with, “it only
costs $5 per month,” would you do it?

No. Which is why your landing page not only needs to be

informative, but also needs to do it in the right order. Selling
something requires a well-crafted and perfectly timed plan
of attack:

1. Set up the problem. People bounce if a page is slow to

explain itself, just like they do if it’s slow to load. So hook
them with an interesting headline and image combo that
makes it clear what problem your product solves, and
offers a solution.

2. Detail the solution. Explain exactly how your product or

service fixes addresses the problem you set up.

3. Use your social proof. Sway the unsure with a few words
from happy or famous customers.

4. Introduce pricing. Make people want your product be-

fore you involve money in the process.

5. Leave them thinking. If readers aren’t convinced yet, end

on a point that’ll stick so they come back later.

WEB DESIGN 101 145

CHAPTER II DESIGNING FOR THE WEB LANDING PAGE DESIGN

Now go forth and convert

Now it’s time to put that knowledge to work. Fire up one of
your landing pages and make just one change right now —
don’t close the tab and tell yourself you’ll do it later.

To make the most of your landing pages, start running A/B

tests to find the combination of words, images, colors, and
layout that converts people best. I recommend Optimizely
and Visual Website Optimizer. They’re both powerful, easy to
use, and don’t even require coding. Kinda like Webflow.

Finally, use Google Analytics and/or other analytics software

to help you track your conversion rate and identify areas for
improvement. I’d also recommend tracking the performance of
each call to action to determine exactly where people convert.

Need inspiration? Check out Land Book for great examples of

beautiful and effective landing pages.

Do you have a landing-page success story, or a great trick

you’d love to share? Tweet 'em at us!

WEB DESIGN 101 146

CHAPTER II DESIGNING FOR THE WEB HOW ELEMENT SPACING WORKS

DESIGNING FOR THE WEB

How element
spacing works
The key to understanding web design
is understanding how spacing works
on the web.

WEB DESIGN 101 147

CHAPTER II DESIGNING FOR THE WEB HOW ELEMENT SPACING WORKS

In this beginner’s guide, you’ll learn how

element spacing works on the web. If you’re
trying to wrap your head around the nuances
of web design, grasping this one concept
will take you far.

The box model determines the structure, layout, and dimensions

of all the elements on a page. Since Webflow is built on coding
best practices, understanding the box model — even if you're
not planning on fully mastering HTML and CSS — greatly
deepens your understanding of Webflow.

The benefits are many: Better-structured Webflow sites

result in better-structured code. Better code, in turn, makes
it easier to design responsively because elements will behave
more expectedly and naturally at the various “breakpoints”
corresponding to mobile device screen sizes.

But, more than anything, if you’re a design professional, don’t

you want to have a true understanding of your craft?

Designers who don’t use Webflow will also get a lot of value from
learning about the box model, as it’ll give a strong foundation for
learning the entirety of HTML and CSS, if you want to. All this
and more is why we’re exploring nothing but the box model in
this post. You’re going to learn it in plain English, and you’re
going to walk away feeling more empowered as a designer.

WEB DESIGN 101 148

CHAPTER II DESIGNING FOR THE WEB HOW ELEMENT SPACING WORKS

Let’s do this.

The box model

So, what exactly is the “box model?” In a sense, it’s easiest
to understand through its impact: which is that everything
you see on a web page is composed of a series of boxes. Yes,
absolutely everything. Even buttons with round corners (are
just boxes with a border radius)!

Here is the official definition from the W3C standards body

(which oversees the HTML and CSS specifications):

The CSS box model describes the rectangular boxes that are
generated for elements in the document tree and laid out
according to the visual formatting model.

Technical-sounding, we know. So let’s break it down in plain

English:

1. Every element on a web page (document tree) is a

rectangular box‍

2. Each one of these rectangular boxes has a height

and a width‍

3. There are rules (the visual formatting model) that

govern how these boxes are laid out on a web page

WEB DESIGN 101 149

CHAPTER II DESIGNING FOR THE WEB HOW ELEMENT SPACING WORKS

The navigation bar on your homepage? That’s a box. The

individual links within the navigation bar? Those are also boxes
that are nested within a parent box (the navigation element).
The hero image in your header? That’s a box. The caption
underneath the image? That’s also a box, though in their case
you don’t see the corners of the box — you just see the box’s
content (the caption’s text). But if you were to position another
element next to the caption box and give it a solid background
color, you’d see how both of these elements have their shapes
defined by invisible boxes.

Anyway, you get it: Everything is a box. Let’s explore what

that means!

The box model areas

margin
border
padding

content

WEB DESIGN 101 150

CHAPTER II DESIGNING FOR THE WEB HOW ELEMENT SPACING WORKS

Every box consists of four areas that layer atop one another.
Below, they’re defined beginning from their innermost area to
their outermost area:

1. ‍Content area
This is the area naturally occupied by the element’s
contents, that is: the words in a sentence, an image, or
the child elements contained within a parent element. In
other words, the content area is the meat of an element.

2. Padding area
Every box can optionally have padding that surrounds the
content area. This padding forces a distance between the
content area and the invisible boundary of the box that
dictates the element’s shape. To see this area, you could
add a solid background color to an element, and increase
the element's padding. You’d then see more color-filled
space at the edges of your content area. In other words,
more of the background color would spill outside the con-
tent area.‍

3. Border area
The size of the outline/border that surrounds the box. You
know how buttons sometimes have thick outlines? Those
outlines are the element's border area. In other words,
borders take up their own space that adds onto the core
content’s area — borders expand the overall dimensions of
an element.

WEB DESIGN 101 151

CHAPTER II DESIGNING FOR THE WEB HOW ELEMENT SPACING WORKS

4. Margin area
This is the transparent white space outside the box that
distances the box from its neighboring elements. Since
margin determines the space between an element and its
surroundings, you can think of margin as being responsible
for pushing elements away from each other. For example,
an element with a bottom margin of 20px will be spaced
20px away from the element below it. Negative margins
can also be used, and they act just as you’d expect: they
pull surrounding elements closer to the element that
contains the negative margin.

Below is a visualization of each area. Imagine that this series

of nested boxes is like a normal button element you'd see on
a webpage:

margin
border
padding Check our services
content

Notice how the padding area is still within the element. The
background of the element will extend to include the padding
area. In contrast, the border area and margin area extend past
the point that the background color is defined. That’s a special
behavior of the box model.

WEB DESIGN 101 152

CHAPTER II DESIGNING FOR THE WEB HOW ELEMENT SPACING WORKS

Display
In addition to the dimensions of a box, the browser must also
know how to display each element in relation to its nearby
elements. There are four popular display types that an element
can be set to using CSS (or within the Webflow Designer if
you're not coding by hand).

Webflow gives you all the display options CSS has to offer:
from block to flexbox, none to grid.

Here they are:

1. ‍Block
An element with a display value of block begins on a new
line and takes up all the available width of that line.
By default, the content area of an element with a block
display value will be 100% of its parent element.‍

2. Flex
Like block, flex can lay out elements vertically, so that each
element starts on a new line and takes up the available

WEB DESIGN 101 153

CHAPTER II DESIGNING FOR THE WEB HOW ELEMENT SPACING WORKS

width — but it can also lay out elements horizontally, and, if

you want, wrap children to create a series of rows. But the
real power of flex is that it gives you the ability to adjust
the size of elements within a flex parent, so that they grow
to fill available space, or shrink to fit tighter environments.
It’s best used for individual layout components, rather than
entire page layouts.

3. Grid
If you have experience in graphic design, the meaning of
grid display is probably pretty obvious: it arranges child
elements both horizontally and vertically, giving you all
the control you could want to build entire page layouts.

4. Inline
The element appears on the same line as its surrounding
elements, and only takes up as much space as its content,
padding, and border areas need.

5. Inline-block
Same as above, but the element now has the ability to
be given arbitrarily defined box area values, which is not
possible with the plain inline display property. The value
of this added ability is in being able to define the padding
and margin for elements that you don’t want to be forced
onto their own line. ‍

WEB DESIGN 101 154

CHAPTER II DESIGNING FOR THE WEB HOW ELEMENT SPACING WORKS

6. None
The element is not visible and takes up no space on the
page — regardless of what dimensions you set it to. Note
that this only makes the page invisible: it doesn’t remove
it from the page’s code.

Let’s reiterate these key points to ensure we fully grasp the

underlying concepts:

Elements with display: block are always laid out on their own
line, regardless of what their width is set to. Block elements are
generally large structural/content pieces such as containers,
paragraphs, lists, and headings.

You can think of display: inline elements as if they were words

in a paragraph. They flow inline with other inline elements.
Inline elements have their width and height automatically
calculated by the browser based on their inner content, so
you cannot set the width or the height of an inline element.
Inline elements are generally smaller pieces of content that
fit inside a block element — alongside other inline elements
and text. Examples include links, images, and spans of text.

Elements with display: inline-block also appear inline, but you

can define their width, height, margins, and padding. In general,
there’s no reason to opt for inline instead of inline-block, but
inline is the default behavior of many elements on the web, so

WEB DESIGN 101 155

CHAPTER II DESIGNING FOR THE WEB HOW ELEMENT SPACING WORKS

most designers stick with it unless they specifically need the

ability to further define box areas.

Width and height

Sizing elements for the web is not the same as sizing elements
in a static design environment, such as Photoshop or Illustrator.
Not only do the elements on a web page vary in dimensions
depending on the size of the user’s browser window, but the
position of one element can actually affect the position of
nearby elements! Let’s explore this concept a bit further.

WEB DESIGN 101 156

CHAPTER II DESIGNING FOR THE WEB HOW ELEMENT SPACING WORKS

On the web, an element’s dimensions can either be sized relative

to its parent element or explicitly. Here’s the difference:

A relative sizing is based on the width of the parent. That is,

an element with a width of 50% would take up 50% of the
width of its parent element. If the parent width changes, the
child’s width will automatically change as well!

An explicit sizing (such as a pixel value you define) is not

based on the width of the parent and is completely static. It
will never change — even if its parent element's dimensions
change or if the browser window is resized.

It is also possible to set constraints for these two types of

sizings. To do this, you specify the minimum and/or maxi-
mum width and/or height of an element. This is most com-
monly combined with relative dimensions as a way of ensur-
ing an element doesn’t get too tall or too wide. For example,
you can dictate that a box takes up 50% of its parent’s size,
but not if that value exceeds 500 pixels. Thus, when a size of
500 pixels is reached, do not continue to expand.

If you do not set the width or height values of an element, its

values will be automatically computed based on the element’s
contents (the content area). Just remember that block-level
elements default to 100% of the parent’s box.

WEB DESIGN 101 157

CHAPTER II DESIGNING FOR THE WEB HOW ELEMENT SPACING WORKS

The box model in code

CSS is the language used for defining the box model properties
of web page elements. Everything we've discussed so far is
defined using CSS. The actual elements themselves are
defined using HTML, but that’s a topic for another time.

As mentioned earlier, these are the display properties you can

use on the web:

.element {
display: none;
display: block;
display: inline;
display: inline-block;
display: flex;
display: grid;
}

You can use all of the web's display values in the Webflow Designer.

(In CSS, we first state the class name associated with the HTML
element that we’re defining CSS properties for. Then, within
brackets, we enumerate the box model styling properties we're
interested in alongside their respective values. If this looks
like complete gibberish to you, don’t worry — Webflow doesn’t
require you to understand this. If you are in fact looking to
fully learn CSS and web coding in general, then I highly suggest
taking a look at this fantastic book.)

WEB DESIGN 101 158

CHAPTER II DESIGNING FOR THE WEB HOW ELEMENT SPACING WORKS

Let’s continue with our code examples. Below are examples

of how the width and height dimensions would be set for
an element:

// Explicit dimensions
.element {
width: 250px;
height: 100px;
}

// Relative dimensions
.element {
width: 50%;
height: 25%;
}

// Constrained dimensions
.element {
width: 50%;
min-width: 10px;
height: 100%;
max-height: 50px;
}

// The padding and margin properties are set likewise:

.element {
padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

// Shorthand
padding: 10px 20px 30px 40px; // top right bottom left

// All sides equal padding

padding: 20px;
}

.element {
margin-top: 10px; // similar to padding
}

WEB DESIGN 101 159

CHAPTER II DESIGNING FOR THE WEB HOW ELEMENT SPACING WORKS

Wrapping up
Having a deeper understanding of the box model allows you to
improve your design skills both in the browser and in your web
mockup tool of choice (whether it’s Figma, Sketch, or
Webflow) because it gives you a better understanding of how to
design for how the web actually works. The closer to that reality
you are, the fewer compromises will have to be made when
transitioning your design work to the live production work
that your customers ultimately see!

WEB DESIGN 101 160

CHAPTER III VISUAL DESIGN WHY DESIGN SHOULD START WITH CONTENT

DESIGN PROCESS

Why your design

process should
start with content
Discover how the human brain interprets
visual information — and how you can use
that in your web designs.

WEB DESIGN 101 161

CHAPTER III VISUAL DESIGN WHY DESIGN SHOULD START WITH CONTENT

If you’ve been around the world of web

design for a while, you’ve heard of the
concept of “content first.” In this article,
we explore what it is, why it’s so helpful
when you’re designing with Webflow CMS,
and provide an example of content-first
design in action.

What is content-first design?

Content-first represents one of the major philosophical
viewpoints on the design process. First advocated (in the world
of web design) by A List Apart founder Jeff Zeldman back in
2008, it states that, in order to build the right design for any
given project, you have to know what the content is before you
start designing.

Makes sense, doesn’t it? After all, an editorial designer doesn’t

start laying out a book before the book’s been written. And an
architect doesn’t start drawing blueprints until they know what
the building’s supposed to be for. For both of these professions,
form has to follow function, and for most websites, function is
achieved via content.

WEB DESIGN 101 162

CHAPTER III VISUAL DESIGN WHY DESIGN SHOULD START WITH CONTENT

For example: A marketing site gets people to use a product or

service with persuasive copy and visuals that illustrate what
the product or service is and who it’s for. A restaurant site
gets people in the door by providing info on the cooking style,
types of food, and location information. Ecommerce stores
offer product details and ways of ordering.

As should be obvious, content is not just copy. Content

encompasses a variety of media, including graphics, videos,
audio, and, yes, plain-old, super-sexy words.

In short, content-first design is all about knowing what your

design’s purpose is, and how it’ll achieve that purpose, before
you start designing.

Ideally, you’ll actually have content in hand before you design

anything. But you don’t have to — even planning what types of
content you’ll need (i.e., designing a content strategy) is better
than skipping this step entirely. Plus, I’ll show you some handy
tips on how to do it all better (and easier) with Webflow.

WEB DESIGN 101 163

CHAPTER III VISUAL DESIGN WHY DESIGN SHOULD START WITH CONTENT

The tweet heard around the industry.

Benefits of content-first design

Taking a content-first approach offers several benefits that
range from enabling a better overall design vision to catching
problems in the design before they become problems.

Content-first design makes it easier to:

1. Build out a sensible information architecture

When you know what content you have and/or need, it’s easier
to define your overall sitemap and build out a logical hierarchy.

2. Design in a way that optimizes the content

If you know your client’s bloggers use quotes a lot, you can
design beautiful ways to showcase blockquotes and callouts. If
they’re fans of listicles, maybe a card or gallery-based design
would work better than a long list of numbered headings?

WEB DESIGN 101 164

CHAPTER III VISUAL DESIGN WHY DESIGN SHOULD START WITH CONTENT

3. Create consistency across the site (and lighten

your code)

If you know your site will have a blog, help center, and marketing
pages, you can design your type hierarchy to work across all
three areas. That’ll help create a more consistent (and thus, easy
to learn) interface and keep you from having to create a bunch
of messy combo classes.

More importantly, you can identify more opportunities to store

content in your CMS — rather than writing a description of the
same feature dozens and dozens of times, why not just reference
a canonical description?

4. Avoid endless rounds of iteration

All too often, when design kicks off without content, the
development process devolves into an endless back-and-forth
between designer and stakeholders. Which usually means
lots of tiny, frustrating text changes that the designer has to
update mocks with, then save. (Granted, with Webflow, those
changes are much less laborious, but still.)

Plus, if you’re designing with content first in Webflow CMS,

you’ll find the process that much faster and easier.

Let’s see how.

WEB DESIGN 101 165

CHAPTER III VISUAL DESIGN WHY DESIGN SHOULD START WITH CONTENT

Content-first design with Webflow CMS

Webflow CMS's field types.

The first step you’ll take in building a site powered by Webflow

CMS is to create a Collection. A Collection is essentially a content
type that you’ll define by selecting Fields from the following list:

1. Plain text 9. Video

2. Rich tex 10. Link
3. Image 11. Number
4. Multi-image 12. Date/Time
5. Email 13. Switch
6. Phone 14. Color
7. Option 15. Reference
8. File 17. Multi-item reference

WEB DESIGN 101 166

CHAPTER III VISUAL DESIGN WHY DESIGN SHOULD START WITH CONTENT

Most of these fields are independent — you just input whatever

content matches the field, and you’re good to go.

But as soon as you create a Reference or Multi-item Reference,

you’ll see why content planning is the real first step in designing
with Webflow CMS. Because you can’t reference another
Collection until you’ve created it.

Confused? I can’t blame you. So let’s ground this discussion

with an example, shall we?

Example: Creating a food magazine with

Webflow CMS

Let’s say you want to launch your very own food magazine
powered by Webflow CMS. You know that recipes will be a key
feature, because you’ve got your Grandma Cordello’s family
recipe book to mine.

Now, you might be tempted to kick off your design by creating a

“Recipe” Collection. So you create a Collection, title it Recipes,
and start selecting fields. Naturally, you start thinking through
the fields in terms of the visual design of an individual blog post:

2. Image: a big, bold closeup of the dish for the hero image.

3. Image: for the thumbnail version of the hero image that’ll

display in the blog index.

WEB DESIGN 101 167

CHAPTER III VISUAL DESIGN WHY DESIGN SHOULD START WITH CONTENT

4. Plain text: for the article title. You choose plain text for
this field because you want titles to display consistently,
without styling options on the CMS end.

5. Plain text: for the cuisine, which will link to a page listing
all the recipes for a particular cuisine (and double as a
category page)...

… And here’s where you realize you’ll have to create a Cuisines

Collection before you can finish up your Recipes Collection.
That’s totally fine — you can always tweak a Collection after
you create it.

This might seem like a pain. But the benefit is that you’ll start
thinking of your sites in terms of their small components —
often called “modules” or “atoms” — and in terms of the
relationships between those elements.

In other words, you’ll start thinking of your website design

work less in terms of pages, and more in terms of systems — a
collection of parts that you can combine, recombine, and remix
as needed. That’s a useful mode of thinking in the context of the
modern web, where content appears in atomic forms across the
internet, from various locations on your site to mobile apps to
cards on Facebook, Twitter, Pinterest, LinkedIn, and elsewhere.

This is also where the concept of content modelling becomes

very powerful.

WEB DESIGN 101 168

CHAPTER III VISUAL DESIGN WHY DESIGN SHOULD START WITH CONTENT

Content modelling for designers

Creating a content model for your site is like creating a site-
map, but focuses not on pages, but content types and their
characteristics. It’s incredibly useful in helping you map out
content types, their relationships, and requirements, but will also
help you develop your site’s overall information architecture.

Content models come in two forms: one macro, and one

micro. For your food magazine website, your macro-level
content model might look like:

Cuisine

Index Recipe Author

Ingredients

A macro-level content model for a food magazine website.

All you’re doing here is defining the content elements you

want your site to feature, and indicating how they might link
together. With Webflow CMS, you’ll create the links with a
Reference or Multi-Reference field.

For the next step, you’ll zoom in to map the content of each
of the content types above. The good news is that your map,

WEB DESIGN 101 169

CHAPTER III VISUAL DESIGN WHY DESIGN SHOULD START WITH CONTENT

along with the connections you drew between each, will help
determine the content requirements of each block.

To zoom in on the individual content blocks, you might do

something like:

Hero Image
History
Recipes
{index grid}

Cuisine

Hero Image
Thumbnail Profile Photo
Recipe Name
Recipe Name Biography
Cuisine
Cuisine Recipes
Ingredients
Author Favorite Ingredient
Preparation

Index Author
Recipe

Hero Image
Preparation
Dietary Info
Recipes

Ingredients

A micro-level content model starts digging into individual

page requirements, defining the content for each.

In many cases, simply defining the relationships between

Collections will define the content of individual pages within
Collections. For example, the bulk of the content for each
Cuisine page will consist of a Dynamic List of recipes.

WEB DESIGN 101 170

CHAPTER III VISUAL DESIGN WHY DESIGN SHOULD START WITH CONTENT

Now, as you go back to creating the Collections for your food

magazine, it’ll be easy to translate your content model into
fields for each Collection. Personally, my favorite thing about
content modelling is the way it generates ideas. Just looking
at the ways different content types might relate helped me
get more creative about what those types might showcase. (It
also made me realize there are more links between content
types than I originally thought.)

For instance, in adding a history section to cuisines, I’m

suddenly struck by the idea of creating an interactive timeline
for each cuisine. And that could feature links to ingredients,
recipes, and chefs.

Oooh. Chefs. Time to create another Collection!

Of course, that’s just one example: you’ll find this method

useful for designing with any kind of content.

Building empathy by designing with

real content
The unique thing about designing with a CMS is that you’re
designing for two user groups:

1. The content creators who will use the content

management systems you set up, and

WEB DESIGN 101 171

CHAPTER III VISUAL DESIGN WHY DESIGN SHOULD START WITH CONTENT

2. The website’s end users, the people who will consume

the content that creators publish

By taking a content-first design approach, you’ll develop a

deep understanding of the types of content your creators
publish. You’ll learn how they write headlines, how long they
like their blogs to be, the types of content that show up
regularly, and the outliers and edge cases.

Regular work with the most common content types will help
you shape both how you customize the CMS and how you
design its output--i.e., how that content appears on the page.

How you customize Webflow CMS

In terms of CMS customization, you’ll rapidly learn what fields
your Collections will most often need, how to write the field
labels, and how to provide stylistic and technical guidance on
input types with help text.

Help text offers a great opportunity to get a content style

guide in front of content creators, ensuring that they upload
images of the right size, use consistent character counts
for headlines and teaser copy, and otherwise encourage
high-quality content. This is especially useful for users who
haven’t spent years learning the ins-and-outs of the web (e.g.,
that baker you built a site for last year).

WEB DESIGN 101 172

CHAPTER III VISUAL DESIGN WHY DESIGN SHOULD START WITH CONTENT

Visually designing dynamic (CMS) content

As Josh Pucketts points out in “Modern Design Tools: Using

Real Data,” designing with real content also helps you
recognize potential flaws in a site’s visual design. Long article
titles might wrap, messing with the heights in your gridded
blog index design. Headlines overlaid on photos with light
backgrounds might become illegible. Button text might make
those tidy CSS buttons you created huge.

Each of these challenges offers you an opportunity to do one

or both of the following:

1. Make the design and/or layout more flexible: a list view

might be better for those long headlines, while a text shadow
or image overlay might improve legibility for text on photos.

2. Add an entry to the content style guide, and back that

up with CMS functionality: using the character count
limit, you could enforce a 3-words-for-button-copy rule,
and you could add help text explaining the limitation.
Adding explanation will help content creators understand
not only the constraints, but the design thinking behind
those constraints.

WEB DESIGN 101 173

CHAPTER III DESIGN PROCESS ALWAYS CHOOSE PROTOTYPES OVER MOCKUPS

DESIGN PROCESS

Always choose
prototypes
over mockups
Discover the key to a more effective design
workflow and review process: responsive,
interactive prototypes designs.

WEB DESIGN 101 174

CHAPTER III DESIGN PROCESS ALWAYS CHOOSE PROTOTYPES OVER MOCKUPS

Finding effective design workflows can be

a bit of a challenge and often requires
significant back-and-forth communication
between clients, designers, and developers.
But it doesn't have to.

Mockups aren't the best solution

Before I tell you about the awesome solution, let me paint a
picture of the not-so-cool problem.

Designers generally create site designs using Photoshop or

Illustrator — using multiple layers and files to show different
pages, hover states, and screen sizes. Then, after repeated
discussion between stakeholders (and awaiting approval),
designs are either implemented by the designer, or passed
off to an unrelated developer.

Back-and-forth is required when they ask for clarification on

your design details, when they ultimately point out technical
limitations, and simply when they deviate from the design as
prescribed. Depending on the extent of the changes, the client
might have to get involved again, leading to a sometimes annoying
three-way push-and-pull.

WEB DESIGN 101 175

CHAPTER III DESIGN PROCESS ALWAYS CHOOSE PROTOTYPES OVER MOCKUPS

This is inefficient. Repetitious back-and-forth can easily

increase development time several-fold. The remedy, as you may
have guessed, is to replace mockups with a fully-functioning
prototype — in this case, an actual interactive website. This is
tremendously powerful because working prototypes are:

1. Closer to the final product, making it faster to go from

approved design to final site.

2. In the same medium as the final product. So everything

you build into your prototype can be achieved with HTML
and CSS, unlike Photoshop.

3. Visual and interactive. Clients, and people in general,

find it difficult to visualize a final product based off static
images alone.

4. Better for implementing responsiveness. You can open

the prototype on various devices and show/test them
directly without blindly assuming your design breakpoints
are reasonable in real-world environments.

5. More interesting and exciting for the client. You can add
engaging animations and UI flourishes to liven up the
design. Given Webflow's powerful Interactions features,
this is oftentimes a really fun, no-brainer add-on.

WEB DESIGN 101 176

CHAPTER III DESIGN PROCESS ALWAYS CHOOSE PROTOTYPES OVER MOCKUPS

Let’s dive into these benefits and explain why they’re so valuable
to you, your client, and your general sanity as a designer. The
more you can appreciate live prototypes, the more you’ll get
into the habit of efficiently using them, and the much happier

your clients will be.

Prototypes are closer to the final product

When a prototype is approved by the client, it’s incredibly

fast to wrap up the site and have a final deliverable because
the prototype was nearly deliverable to begin with. This is
significantly faster than having to then either contract a
developer to implement your designs in code, or doing it
yourself. Avoid making the site twice, once in Photoshop,
and once in code.

Consider how, when using Photoshop, you can create design

elements that aren’t actually feasible using HTML and CSS —
potentially forcing you to redesign them when you begin
building the real site. Depending on how big the change is, this
could even require getting approval from the client again —
which not only could increase development time, but could
also make them lose confidence in you. Using HTML and CSS
to create a prototype ensures that everything you design is
possible in the final product.

WEB DESIGN 101 177

CHAPTER III DESIGN PROCESS ALWAYS CHOOSE PROTOTYPES OVER MOCKUPS

There also won’t be any surprise for the client when things look
the same between the design and the final product, which
static mockups usually don’t completely articulate. Fonts are
particularly notorious for rendering differently in Photoshop
and the web, which oftentimes leads to last-minute font
changes that might not “feel right" to the client. This leads us to:

Prototypes are easier to visualize

Visualizing a final product can be extremely difficult. Sure,
designers and artists, who have trained their eyes throughout
years of client work, are generally able to visualize a final
product from a mockup. The average person, however, has
trouble seeing beyond a simple representation in order to
appreciate potential for beauty and functionality.

This is where working prototypes really shine. Instead of

handing your clients a series of PSDs, images, or drawings —
where everything is static and lifeless — give them a living
example they can play with.

It’s important to let your clients click on buttons and links so

they can see how they change and where they link to — rather
than handing them a folder of PSDs they need to navigate to
get the whole story. The easier it is for clients to appreciate
your design work, the happier they are, and the more agreeable
they’ll generally be to work with.

WEB DESIGN 101 178

CHAPTER III DESIGN PROCESS ALWAYS CHOOSE PROTOTYPES OVER MOCKUPS

Prototypes make designing for

responsiveness easier

Gone are the days where we opened up Netscape to view web

pages 990px wide and laid out a site using a series of tables.
It’s now 2015, and the web is digested on screen sizes ranging
from 3" to 30", in various aspect ratios, orientations, pixel
densities, and resolutions. It’s cray cray. Just look at some of
the possible devices that might be accessing your site:

‍A partial range of devices that can access your site.

As you can see, we simply cannot create a single fixed-width

design and expect that to meet the demands of our clients
anymore. Without mobile-friendliness, user experience

WEB DESIGN 101 179

CHAPTER III DESIGN PROCESS ALWAYS CHOOSE PROTOTYPES OVER MOCKUPS

will suffer for 50% or more of the visitors coming to your

site. In fact, Google has even begun penalizing sites for not
being responsive.

But you know that. That’s why you create a minimum of two
PSDs, one for mobile, and one for desktop, and maybe a couple
more for tablets, and landscape vs. portrait orientations.
That’s a huge improvement, but also a lot of work.

In contrast, building a prototype using a mobile-friendly

framework like

(a free collection of front-end tools for rapid website creation)

makes it simple to create a site that’s responsive from the start.
But, you're a designer, and you might not like to code. Not to
worry, we’ll address that momentarily.

‍Example of a responsive site: Webflow Gallio Template

WEB DESIGN 101 180

CHAPTER III DESIGN PROCESS ALWAYS CHOOSE PROTOTYPES OVER MOCKUPS

How to create functional, high-fidelity prototypes

Perhaps you don’t currently use working prototypes because a)

they generally take longer to make, b) you aren’t very savvy or
confident with HTML and CSS, and c) it’s slower for you to iterate
on. Unfortunately, however, more of b) also leads to more of a).

You’re a designer. You know how to design things using tools

like Photoshop, yet the actual coding of your websites often
ends up in the hands of a developer. On the surface, that
sounds kinda crazy. And you might think your hands are tied.

But that’s actually not the case. There’s no complex logic or

mathematics involved in learning HTML and CSS, like there
is in true programming with languages like Javascript, C++, or
Ruby. The basics of HTML and CSS can be learned in a day.
HTML is a simple way to structure page content, and CSS is
a series of property-value pairs (color: red, display: none).
Not overly complicated. Mastering them, however, does take
some time thanks to some of its peculiarities. But, considering
the benefits of a working prototype, it’s well worth the effort.
Check out Codecademy’s HTML and CSS course to get the
basics down for free.

Remember, only you appreciate the nuances. Small details are

what take a design from good to great. Don’t let those ever get
lost in translation.

WEB DESIGN 101 181

CHAPTER III DESIGN PROCESS ALWAYS CHOOSE PROTOTYPES OVER MOCKUPS

The zero-coding route

If you’re not looking to code (understandable), or simply want

to drastically improve the client/designer back-and-forth,
the best alternative is a WYSIWYG (what you see is what you
get) site builder. There are several out there, such as tools
that convert Photoshop designs into HTML and CSS (or at
least try to) and the tool I love to use for my freelance work,
Webflow. A pro tool like Webflow allows you to design and
distribute a website using a graphical interface, rather than
lines of code in a text-editor — an experience much closer to
what you’re already used to in Photoshop!

‍Webflow’s visual development interface.

WEB DESIGN 101 182

CHAPTER III DESIGN PROCESS ALWAYS CHOOSE PROTOTYPES OVER MOCKUPS

I use Webflow to fully design and build functioning websites.

As a designer, it has an interface that's easy for me to quickly
master: You can drag and drop elements onto the page
(including fully customizable widgets such as contact forms)
and alter spacing, colors, fonts, positioning, and more.

Webflow’s site builder uses the mobile-friendly, front-end

framework Bootstrap at its core — making basic responsiveness
nearly automatic for me. I only have to perform a tiny bit of
visual customization. I can also quickly swap between four
standard mobile device sizes to preview, test, and customize
responsiveness far above and beyond what coding with
Bootstrap provides.

Animations and transitions that work across all modern

browsers and mobile devices are also a snap using Webflow
Interactions — allowing you to add spice to your site in
seconds. No coding required.

When you have your working prototype ready, you can easily
send your client a preview link to interact with in real-time.
This doesn’t push the site live — only you and whoever you
share the private link with will have access. This lets you work
with privacy, and receive feedback from any clients you choose.

Lastly, once you’re ready to go public, you can push the site
live through our hosting platform, or export pristine HTML

WEB DESIGN 101 183

CHAPTER III DESIGN PROCESS ALWAYS CHOOSE PROTOTYPES OVER MOCKUPS

and CSS code to use anywhere. You’re not locked into using
our platform if you don’t want to be. Create the design, export
the code, modify/customize it as you wish, and host the site
anywhere. This is true professional web design from scratch.

‍Export your designed site directly to HTML and CSS.

Wrapping up
Working prototypes offer huge benefits over mockups, and
can significantly improve the designer workflow. With designs
that work from day one, you can reduce back-and-forth and
recapture what it is you love about design.

To create these prototypes, you’ll need to learn how to create

basic, functioning websites, which leaves you with the options
of either learning to code or using a visual site builder. Coding

WEB DESIGN 101 184

CHAPTER III DESIGN PROCESS ALWAYS CHOOSE PROTOTYPES OVER MOCKUPS

offers complete customization, and requires no tools other

than a text-editor, but learning it takes time.

Professional-quality site builders, like Webflow, offer a more

designer-optimized interface similar to Photoshop. Webflow
also has mobile-friendly templates that you can work off of if
you want to get a headstart on projects.

Taking either route will allow you to reap the benefits of

working prototypes, and will remove expensive developers
(Sorry, developers! We still love you!) as much as possible from
the equation — maximizing your own freelancing revenue and
ensuring your designs are exactly the way you want them.

We’d love to hear from you: Do you give your clients working
prototypes? Tweet ‘em at us and tell us about your experiences.

WEB DESIGN 101 185

CHAPTER III VISUAL DESIGN THE PRE-LAUNCH CHECKLIST

DESIGN PROCESS

The essential
pre-launch
checklist for
your website
We know you’re excited to launch.
But before you go live, make sure
you’ve covered all your bases.

WEB DESIGN 101 186

CHAPTER III VISUAL DESIGN THE PRE-LAUNCH CHECKLIST

You’ve done it! You’ve finally finished that

website you’ve been working on for days/
weeks/months and you’re ready to share
it with the world. But don’t hit that publish
button yet.

Even though nothing would make you happier than to get your
site out there, you owe it to yourself (and your site) to check
(and maybe double check) this 4-part new website checklist.

Website design checklist

It’s all too easy to miss (or break) something during the many
back-and-forths, client feedback sessions, and other design
iterations you go through. That's why we created the design
checklist below will help you go back and check for any
design mistakes.

To start, be sure to check your:

1. Spacing: Is spacing consistent across the site (i.e., did you

stick to that 8px grid, or let a rogue 18px in there)? Do all
elements have enough breathing room?

2. Colors: Have you stuck to a consistent, harmonious color

palette? Are all instances of the brand blue actually the
brand blue? Did you use global swatches?

WEB DESIGN 101 187

CHAPTER III VISUAL DESIGN THE PRE-LAUNCH CHECKLIST

3. Shadows: If you used drop shadows, is the light source

consistent for each and every one? Did you use the same
blur, opacity, and spread values?

4. Typography: Is your font stack logical and consistent (i.e.,

is there a reason that element is set in a sans)? Are your
heading sizes consistent? Have you used proper (not faux)
italics and bolding? Do all text links look right? Is all text
both legible and readable?

5. Imagery: Do any images look blurry, pixelated, or otherwise

funky? Are any images broken or crazily heavy in terms of
file size? Do all non-decorative images have alt tags?

6. Logo: It’s (usually) just another image, but it’s so important

it warrants its own step. Is it the latest version? Is it crisp
(not blurry or pixelated)?

Once you’ve made these initial visual checks, you’ll want to

ensure that your site’s appearance is consistent and functional
on any screen.

Cross-browser appearance

Different browsers may render your website in different

ways, so it’s important to test your site in different browsers.
Take a look at W3’s browser stats to see where you should

WEB DESIGN 101 188

CHAPTER III VISUAL DESIGN THE PRE-LAUNCH CHECKLIST

focus your testing. (Though if you’re working on a redesign,

browser-usage stats will be more useful.)

During this process (and the next, in multi-device testing)

you’ll want to make sure your layouts, typography, navigation,
and other design elements are displaying properly.

The elements that tend to vary most across browsers, and

therefore are most important to check, are:

• Fonts

• Colors/gradients

• Images

• Logo

Cross-device appearance

Make sure your site looks and performs beautifully on any device.

WEB DESIGN 101 189

CHAPTER III VISUAL DESIGN THE PRE-LAUNCH CHECKLIST

There have never been more web-capable devices around,

and with that comes a staggering array of screen sizes. Done
right, your site should perform well on any screen size, but be
sure to double check. (You are a perfectionist after all, right?)

This is also where mobile navigation is crucial. Be sure to test out

the user’s ability to navigate around the website on a touchscreen
device, and make sure nothing gets lost in device transition.

In Webflow, we make it easy for you to test the most popular

devices and preview your website on almost any size,
streamlining the process of cross-device testing all in one
place. Of course, nothing replaces real-world testing on a
variety of devices as small details may differ on the real device.

Image optimization

Images and graphics are an important element of many

websites, so you’ll want to make sure they display properly,
especially on all those ultra-high-definition devices (like
Apple’s Retina screens) out there.

The rule of thumb is to upload your image at twice the size

it’ll display on your site. In some cases, you can upload two
images: an actual-size version for lower-res devices, and
another that’s twice the size for high-res devices.

WEB DESIGN 101 190

CHAPTER III VISUAL DESIGN THE PRE-LAUNCH CHECKLIST

Why? Because the heavier the image, the slower your page
will load, and the worse your user experience will be (which
also negatively affects SEO, which we’ll cover later on).

In Webflow, we automatically scale, compress, and optimize

images for every device. Learn more about our responsive
images feature or check out our more detailed article on
image optimization.

Website functionality testing

Design and functionality go hand in hand, but I like to isolate
the two to make sure the website both looks the way it was
designed to and that it performs as intended.

Integration testing

This one is super important, and can range from a quick task
to a giant one, depending on how many integrations you have.
Typically, I’ll create a list of integrations as I add them so I
don’t forget later on.

WEB DESIGN 101 191

CHAPTER III VISUAL DESIGN THE PRE-LAUNCH CHECKLIST

Some common integrations to test might be:

• Web forms (check that the forms work and that submitted
information goes to the right place)

• Marketing emails (MailChimp, Constant Contact, HubSpot,

drip campaigns, etc.)

• Autoresponders

• RSS feeds

• Ecommerce

• CRM

• CMS

Link testing
This one can be a doozy, simply because most sites have doz-
ens (if not hundreds) of links. More often than not, there’s a
link or two that goes nowhere, and it’s important to find them
before your end-users do.

Some of the most important links to check are:

• Top navigation links

• Footer links

• Social media links (Facebook, Twitter, etc.)

• Logo (typically links to the home page)

WEB DESIGN 101 192

CHAPTER III VISUAL DESIGN THE PRE-LAUNCH CHECKLIST

Rather than doing all this manually, I’d suggest trying a

link crawler like the W3C Link Checker, the Chrome plugin
Check My Links, or Screaming Frog (which is excellent for
SEO audits, too).

Content editing

Give the king its due.

Content is king, and the testing process should be fit for one.
Typically this involves making sure that all content has been
updated and approved. I can’t tell you how many websites I’ve
found that still have a lorem ipsum paragraph somewhere.

Now, if you practice content-first design, you should have final

content already in place, so you can focus on more fine-toothed-
comb review, like proofing for spelling and grammatical errors.

WEB DESIGN 101 193

CHAPTER III VISUAL DESIGN THE PRE-LAUNCH CHECKLIST

It’s also important to note here that it’s okay for content to be
changed later on. Clients, team members, or you can always
adjust text through a CMS. The main goal here is to ensure
that your website content isn’t complete gibberish.

Search engine optimization (SEO)

Analyzing and optimizing your website after publishing is a

never-ending process. And you need to consider semantic
site structure from the get-go. But that doesn’t mean you
won't benefit from an SEO review before you hit publish.

There are multiple things that can be done to optimize your

website for search engines.

WEB DESIGN 101 194

CHAPTER III VISUAL DESIGN THE PRE-LAUNCH CHECKLIST

1. Use proper semantic structure

Web crawlers (like Google’s bots) read through your website

to get an understanding of your content, so that search
engines know to display your website when people search
for it. To help them crawl your site, you need to use language
they’ll understand.

Historically, this has meant using the following semantic tags:

• h1–h6 (heading tags)

• p (paragraph tags)

• ul/ol (unordered and ordered Lists)

You can also go above and beyond with some new HTML5
semantic tags:

• <article> • <footer> • <nav>

• <aside> • <header> • <section>
• <details> • <main> • <summary>
• <figcaption> • <mark> • <time>
• <figure>

These tags are important because they let you identify the
content that’s most relevant to users. In short: making it easy
for search engines makes it easier for users to find you.

WEB DESIGN 101 195

CHAPTER III VISUAL DESIGN THE PRE-LAUNCH CHECKLIST

2. Meta SEO tags

Aside from on-page structure, you can also help web crawlers
understand your site by titling and describing your pages as
a whole. We outline 13 tips on website SEO on our blog, and
three main considerations below.

Meta title

Your page’s meta title translates to the linked text people will
see on search engine result pages (SERPs). It also displays
on the browser tab when people click through to your page.
Some best practices include:

• Define the page’s central topic

• Keep it under 70 characters in length (including spaces)

• Use relevant keywords

• Put important keywords in the front of the title

Meta description

The meta description is a short sentence (or two) that describes

what your website has to offer. It will (sometimes) show up below
your meta title in search results.

WEB DESIGN 101 196

CHAPTER III VISUAL DESIGN THE PRE-LAUNCH CHECKLIST

Some best practices include:

• Include keywords that describe the page

• Don’t go over 160 characters

• Write your description for people, not robots. (Google

doesn’t use descriptions in web rankings).

3. Open Graph settings

Social media has become a key element of SEO, so it’s crucial
that you amplify this process by providing effective Open
Graph information. Open Graph settings include three pieces
of content: title, description, and an image.

The title and description follow the same rules as their SEO
counterparts, but instead of showing up in search results,
they appear as the default title and description on social me-
dia platforms when shared.

This is hugely beneficial because it lets you determine what

the messaging (and image) will be when others share your
website, helping you keep control of your brand.

WEB DESIGN 101 197

CHAPTER III VISUAL DESIGN THE PRE-LAUNCH CHECKLIST

Analytics

Always be analyzing.

Website analytics are another crucial piece to set up before

you launch. It’s free to set up a Google Analytics account, and
incredibly easy to integrate Google Analytics with Webflow.

Once set up, you’ll be able to track visitors and user engagement
on your website almost instantly!

WEB DESIGN 101 198