Chapter 9

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.

Neal O’Grady
Neal O’Grady
? Reading time
You’ve done it. Months spent hunched in front of the computer have finally culminated in a minimum viable 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, you wonder. 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.

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 understand. 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 like you 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 covering 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.

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?

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

- What your product/service is: is it a desktop app, a mobile app, a social network?

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

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

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

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

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:

Be clear. Make sure your content is clear and easy to read or people will get frustrated.

Use visual content. Long blocks of text can turn reading into a chore. So break up your copy into digestible chunks with bullet lists, images, and data visualizations like charts, graphs, and infographics. This will not only help keep people reading, but also engage those who learn better through visuals.

Be entertaining. People are more likely to keep reading if you make them smile. Throw out the odd joke. But not too odd.

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.

So highlight people already enjoying your product with 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.

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 (opens PDF). Putting the price at the bottom left of a box rather than the top right affects perception too.

The psychology of pricing deserves a gigantic list, and luckily, someone else already put it together: 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).

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 inform 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 before 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.

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 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 some beautiful examples.

Do you have a landing-page success story, or a great trick you’d love to share? Let us know in the comments!

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, you wonder. 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.

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 understand. 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 like you 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 covering 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.

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?

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

- What your product/service is: is it a desktop app, a mobile app, a social network?

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

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

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

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

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:

Be clear. Make sure your content is clear and easy to read or people will get frustrated.

Use visual content. Long blocks of text can turn reading into a chore. So break up your copy into digestible chunks with bullet lists, images, and data visualizations like charts, graphs, and infographics. This will not only help keep people reading, but also engage those who learn better through visuals.

Be entertaining. People are more likely to keep reading if you make them smile. Throw out the odd joke. But not too odd.

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.

So highlight people already enjoying your product with 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.

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 (opens PDF). Putting the price at the bottom left of a box rather than the top right affects perception too.

The psychology of pricing deserves a gigantic list, and luckily, someone else already put it together: 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).

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 inform 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 before 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.

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 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 some beautiful examples.

Do you have a landing-page success story, or a great trick you’d love to share? Let us know in the comments!

Chapter

Title of next chapter

Intro of next chapter

Author name
? Reading time
Read chapter
Chapter 1

Essential visual design principles for web designers

Discover how the human brain interprets visual information — and how you can use that in your web designs.

John Moore Williams
John Moore Williams
? Reading time
w-current trigger

Thankfully, there are a few simple but powerful guidelines for creating — and disrupting — unified designs. And we have the Gestalt psychologists to thank for that.

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.

These 4 fundamental principles expand into 13 specific rules of thumb about visual experiences, which 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 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:

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.

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.  

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), it’s pretty hard to un-see 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.

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 our 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?

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 websites' 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.

Applying the Gestalt principles to web design

In general, the Gestalt principles help us understand how we process visual information by either: 

  1. Starting with the whole and then working our way to the parts, or 
  2. 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).

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.

Closure

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

We’re always trying to bring meaning and order to meaningless 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.

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, used for an older Webflow landing page.

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

We also tend to be pretty creative in interpreting such relationships, using past experiences to instill visual content with a narrative. For example, in the image above, I can’t help but see the little rectangle as a person, looking out toward a view of a darkening 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.

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.

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 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 the short-lived project Google Now), the designer used 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.

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 another example from 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.

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 the 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.
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.
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.)

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

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.

Chapter 2

Color theory

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

Neal O’Grady
Neal O’Grady
? Reading time
w-current trigger

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

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

Magenta, cyan, and yellow — three primary colors used to create other colors.

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:

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

Colors also have a “warmth” and can be classified as either a warm or cool.

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

Tints and shades

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.

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.

The color wheel

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

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.

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.

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.

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 it, 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 we think 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.

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.

COLOURCODE

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

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.

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

COLOURLovers hosts a community of color fanatics sharing colors, palettes, patterns, and color-related articles.

Design Seeds

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.

Color usage inspiration

Need inspiration from fellow designers? Look no further than:

Awwwards

Awwwards – curated examples of some of the best designs on the web.

Webflow on Dribbble
Oh, hey. Webflow's on Dribbble.

Dribbble and Behance – design portfolio sites ranging from typography, illustrations, product design, architecture, and web design.

Ladies and gentleman, start your coloring

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.

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!

Chapter 3

Web typography 101

Your quick and easy intro to typography in web design.

Neal O’Grady
Neal O’Grady
? Reading time
w-current trigger

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:

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

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.

The many types of fonts

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

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

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

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

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

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.

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

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

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

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.

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

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

‍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).

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.

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.

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'll make your Instagram feed 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 to all-caps in tall, bold letters spanning the page can make a more powerful statement than one set to lowercase, italicized, and small.

TL;DR: If you want to draw eyes to an element, make it noticeably 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 grandparent with 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. 

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.

Chapter 4

How element spacing works

The most important aspect of web design comes from understanding spacing.

David Khourshid
David Khourshid
? Reading time
w-current trigger

The box model is what 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 aplenty: Better-structured Webflow sites results in better-structured Webflow code. Better code, in turn, makes it easier to design responsively because elements will behave more expectedly and more naturally at the various “break points” 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 do not use Webflow will also get a lot of value from learning about the box model. It's a concept that sets up a foundation for (optionally) learning the entirety of HTML and CSS if desired! 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.

Let’s do this.

The box model

So, what exactly is the “box model?” In short, the box model's impact is that everything you see on a web page is composed of a series of boxes. Yes, absolutely everything. Even buttons with round corners (these 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.

Don’t let that intimidate you. They’re just trying to sound cool. Let’s break it down in plain English:

  • Every element on a web page (document tree) is a rectangular box
  • Each one of these rectangular boxes has a height and a width
  • There are rules (the visual formatting model) that govern how these boxes are laid out next to one another on a web page

The navigation bar on your homepage? That’s a box. The individual links within the navigation bar? Those are also boxes that exist 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, although 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 caption box and give it a solid background color, you’d see how both of these elements have their shapes defined by invisible boxes.

Alright, you get the point: Everything is a box. Let’s explore what that means!

The box model areas

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

  • Content area: (Refer to the image below.) This is the area naturally consumed by the content that constitutes an element, e.g. 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.
  • 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. If, for example, you had a solid background color on your element and you increased the element's padding, you’d see more color-filled space at the edges of your content area. In other words, more of the background color would spill outside the content area.
  • 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.
  • 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 areaBorder areaPadding areaContent area

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.

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

All the possible display values (block, inline-block, inline, and none) in the Webflow design tool.

Here they are:

  • Block: An element with a display value of block begins on a new line and takes up all the available width of that line. In other words, the content area of an element with a block display value will be 100% of its parent element.
  • 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.
  • 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. 
  • None: The element is not visible and takes up no space on the page — regardless of what dimensions you set it to. This is, in effect, removing an element (visually) from a page despite its existence in the page’s code.

Let’s re-iterate 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.

This is content inside of a block-level element.

Elements with display: inline can be thought of 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; 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; however, the distinction is that you can define the width, height, margins, and padding areas of an inline-block element. In general, there is no reason to opt for inline instead of inline-block, but inline is the default behavior of many elements on the web, so 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 thing 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.

On the web, an element’s dimensions can either be sized relative to its parent element or explicitly. Here’s the difference:

relative sizing is based on the width of the parent, e.g. 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 min and max width and/or height of an element. This is most commonly combined with relative dimensions as a way of ensuring 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.

This element is set to 50% width of its parent element.This element is set to 300px width.This element is set to 50% width of its parent element. It also has a min-width of 300px. Try resizing your browser window!

If you don’t set the width or height values of an element, its values will automatically be computed based on the content inside the element (the content area). However, remember that for block-level elements, the width defaults to 100% of the parent’s box.

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 a different article.

As previously mentioned, these are the four most common display properties:

All the possible display values (block, inline-block, inline, and none) in the Webflow design tool.

(Above, 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; the implementation details of CSS are not something Webflow requires you to know. 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.)

Let’s continue with our code examples. Below are examples of how the width and height dimensions would be set for an element:

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 Photoshop, Illustrator, 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!

How can we help?

Have any questions about the technical aspects of the box model? Let us know in the comments below, and I’ll be sure to respond! Thanks for reading this far into this dry (but powerful) topic :)

Chapter 5

UI design essentials

Memorize these 9 guidelines if you want to build elegant, easy to use, and human-centered user interfaces.

John Moore Williams
John Moore Williams
? Reading time
w-current trigger

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.

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.

2. Define how people use your interface

Before you design your interface, you need to define how people 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 an element of the product) and indirectly (by interacting with an element 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
  • 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.

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.

InVision asks for confirmation before you delete a screen
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 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.”

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

MailChimp offers encouragement as feedback
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 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 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 UI design, 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 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.

Place navigation (and other common interactive 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:

Microsoft Word's menu bar
Microsoft Word's menu bar before Vista.
Google Docs' menu bar
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. 

Pocket changed their archive button to an up button on Android
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.

That tiny change "increased the likelihood [new users] would continue using Pocket from this point onwards by 23%."

8. Make your interfaces 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 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.

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

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.

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

Circular website 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.

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.

Uniqlo redesign

Uniqlo redesign by Tim Noah

Designer Tim Noah was shopping on the Uniqlo website one day when he realized how complex and unique their navigational 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.

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.

Chapter 6

Designing for mobile

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

John Moore Williams
John Moore Williams
? Reading time
w-current trigger
  • 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.

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

Photo courtesy of Flickr user 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.

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.

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

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

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

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.  

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:

  • The closest location
  • Open hours (specifically, whether it’s currently open or not)
  • 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.

What do you prioritize when designing for mobile?

Want to add something we missed? Let us know on Twitter, Facebook, or wherever you prefer to chat with us.

Chapter 7

How to design interactions effectively

Get 5 tips on building better interactions and animations for your websites.

Neal O’Grady
Neal O’Grady
? Reading time
w-current trigger

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.

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, 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 get it.
  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 your animations and interactions.

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.

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.

‍Which animation do you think is better for an ecommerce site or consulting business?

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

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.

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 a full-height hero section, then some sort of visual cue — like a subtle arrow bouncing on the bottom of the page — can be extremely helpful.

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.

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 2 seconds, 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 appreciation and patience for a slow animation then?

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.

Chapter 8

Building high-performing websites

The easy guide for designers to build the most effective websites possible

Neal O’Grady
Neal O’Grady
? Reading time
w-current trigger

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:

Decrease the size of your site – a larger site takes longer to download

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.

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.

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. For example, the banner image for this post (at the top) is only 15Kb.

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

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.

Ninja trick: 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!

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:

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 allowanimations (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.

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

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 beprogrammatically controlled via CSS and JavaScript!

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

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.

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.

 

Responsive design in Webflow.

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.

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.

Faster hosting

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

- Visit the site with a faster Internet connection

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

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’sperformance score, which is helpfully accompanied by tips for further improving your site.

Chapter 9

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.

Neal O’Grady
Neal O’Grady
? Reading time
w-current trigger

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, you wonder. 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.

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 understand. 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 like you 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 covering 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.

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?

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

- What your product/service is: is it a desktop app, a mobile app, a social network?

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

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

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

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

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:

Be clear. Make sure your content is clear and easy to read or people will get frustrated.

Use visual content. Long blocks of text can turn reading into a chore. So break up your copy into digestible chunks with bullet lists, images, and data visualizations like charts, graphs, and infographics. This will not only help keep people reading, but also engage those who learn better through visuals.

Be entertaining. People are more likely to keep reading if you make them smile. Throw out the odd joke. But not too odd.

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.

So highlight people already enjoying your product with 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.

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 (opens PDF). Putting the price at the bottom left of a box rather than the top right affects perception too.

The psychology of pricing deserves a gigantic list, and luckily, someone else already put it together: 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).

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 inform 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 before 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.

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 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 some beautiful examples.

Do you have a landing-page success story, or a great trick you’d love to share? Let us know in the comments!

Chapter 10

Why your design process should start with content

Find out why you should start your designs with content, or at least a little content planning.

John Moore Williams
John Moore Williams
? Reading time
w-current trigger

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.

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.

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:

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.

Design to optimize 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?

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.

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.

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
  2. Rich text
  3. Image
  4. Video
  5. Link
  6. Number
  7. Date/Time
  8. Switch
  9. Color
  10. Reference
  11. Multi-item reference

Most of these fields work independently — 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:

Image: a big, bold closeup of the dish for the hero image.

Image: for the thumbnail version of the hero image that’ll display in the blog index.

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.

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.

Content modelling for designers

Creating a content model for your site is like creating a sitemap, 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:

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

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

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

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

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:

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.

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.

Do you practice content-first design?

If you’re an advocate for designing with content first, we’d love to hear your thoughts, experiences, and especially, your techniques. And if you’ve ever found content-first a challenge, we’d love to hear about that too.

And if your immediate thought on content-first is, “Sounds great. Good luck getting content from clients,” we’ll be following up soon with a post on ways to overcome that problem.

In the meantime, happy designing!

Chapter 11

Always choose prototypes over mockups

Discover the key to a more effective design workflow and review process: responsive, interactive prototypes.

Neal O’Grady
Neal O’Grady
? Reading time
w-current trigger

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.

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. (In contrast, Photoshop allows designers to create designs that aren’t feasible with HTML and CSS, potentially leading to redesigns.)
  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.

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—minus a few shiny coats of polish, perhaps. 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.

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.

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 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 Bootstrap (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

How to create these prototypes

Perhaps you don’t currently use working prototypes because: 

  1. They generally take longer to make
  2. You aren’t very savvy or confident with HTML and CSS, and/or 
  3. It’s slower for you to iterate on. 

Unfortunately, however, more of 2 also leads to more of 1. 

You’re a designer. You know how to design things using tools like Photoshop, yet the actual coding of a site you sweated to perfection is then left in the hands of a design-unaware developer. On the surface, that sounds kinda crazy. Am I right? You do this because you think integration is not worth your time or that it’s too complicated.

That’s actually not the case; it’s much simpler than it sounds. There’s no complex logic or mathematics involved 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.

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 with lines of code in text-editor—an experience much closer to what you’re already used to in Photoshop!

‍Webflow’s website builder interface.

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 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 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? Tell us about your experiences in the comments section below.

Chapter 12

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.

Mat Vogels
Mat Vogels
? Reading time
w-current trigger

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 pre-launch checklist.

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. So going back to check for any design mistakes is vital.

This first checklist is completely visual—focused on whether the site looks good. We’ll go into functionality testing in the next step.

Cross-browser functionality

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

I always check:

  • Fonts 
  • Colors/gradients
  • Images
  • Logo

Cross-device functionality

Make sure your site looks and performs beautifully on any device.

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.

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.

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

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.

Some common integrations to test might be:

  • Web forms (check that the forms work and that submitted information goes to the right place)
  • Autoresponders
  • Marketing emails (MailChimp, Constant Contact, HubSpot, drip campaigns, etc.)
  • RSS feeds
  • eCommerce
  • CRM
  • CMS

Link testing

This one can be a doozy, simply because most sites have dozens (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)

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.

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.

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>
  • <aside>
  • <details>
  • <figcaption>
  • <figure>
  • <footer>
  • <header>
  • <main>
  • <mark>
  • <nav>
  • <section>
  • <summary>
  • <time>

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.

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.

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.

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

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!