Opens in a new tab

Learn Web Design Through Simple Design Lessons

Every lesson teaches you a principle of web design in under two minutes. See all the design lessons below.

Three short lessons every Monday. Unsubscribe anytime.
A split section where the heading, text lines and button share one left edge and the image starts on a second edge, with dotted guide lines labeled two edges only.

Align elements to the same edges

When visitors look at a section, their eyes follow invisible lines along the edges of…
View Lesson
Layout
A hero wireframe with one line under the button that reads Used by 3,000 dental clinics, with an arrow to the number labeled one-line proof.

Show how many people already use it

Building trust, especially close to CTAs, is super important for increasing your conversion rate on…
View Lesson
Conversion
The same headline shown twice. The top version leaves the word customers alone on the second line, labeled lonely word. The bottom version splits into two even lines, labeled text-wrap: balance.

Balance headlines with text-wrap

Headlines that wrap onto a second line often leave a single short word hanging out…
View Lesson
Typography
Two identical sets of spacing bars. The left set is named space-sm to space-xl, labeled memorable. The right set is named space-4 to space-32, labeled extends easily.

Choose numbered or t-shirt size names

Tokens are the reusable values in your design system, and each one needs a name.…
View Lesson
Design Systems
A strip of eleven shades of one blue, numbered 50 to 950, with an arrow to the 500 step labeled your brand color. The light end is labeled backgrounds and the dark end text.

Build a palette from one brand color

A single brand color rarely covers everything a website needs. You'll usually want a very…
View Lesson
Color
A card in its final position with two faint dashed outlines just below it, showing it moved up 16px as it faded in.

Animate short distances

When an element slides in from far away, like a card flying up from the…
View Lesson
Interaction
Two cards. On the left, a large dark image overpowers a small, pale Our story headline, labeled headline lost. On the right, a small light image sits beside a large, dark headline, labeled headline leads.

Balance big images against text

Images carry a lot of visual weight. A large, high-contrast image pulls the eye even…
View Lesson
Hierarchy
A call to action with the heading Try it free for 14 days and a Start free trial button. A small line under the button reads No credit card needed, labeled eases worries.

Add reassurance next to the button

Right before they click, people often hesitate. They might wonder whether they'll be charged, whether…
View Lesson
Copy
A testimonial card with the quote We cut onboarding from two weeks to three days, a small headshot, a name and a role. Labels point out the specific quote, the real face and the name and role.

Build a testimonial card

A testimonial is only as believable as the details it contains. A quote with no…
View Lesson
Components

Become A Professional Freelance Web Designer

Join Community
A focused Skip to content link above a site header. An arrow curves around the header to the Main content heading, labeled skip ahead.

Add a skip link for keyboard users

People who use a keyboard move through a page by pressing Tab, one link at…
View Lesson
Navigation
A long article with a table of contents on the left. An arrow runs from one highlighted link to its matching section further down the page, labeled skip ahead.

Add a table of contents to long pages

Long pages, like guides, documentation and policies, are hard to move around by scrolling alone.…
View Lesson
Page Flow
Two split sections with the same text. In the top one, labeled lopsided, the image is shorter than the text. In the bottom one, labeled balanced, the image matches the height of the text.

Balance image and text in split sections

A split section puts text on one side and an image on the other and…
View Lesson
Layout
Load more lessons

Get Free Design Lessons Every Monday Morning

Three short lessons each Monday on a single design topic. They're written in plain language and give you ideas to use on your next site.

You're in!

Check your inbox for your first email.
Close