What is web design?

Web design is about all the choices you make about what shows up on the page, and how it looks and behaves. All of these parts are interconnected - what elements you choose is closely tied to how they look! What an element does is connected to how it should feel to use it. For instance, it's really helpful to the user if a link looks different when you tap it or hover over it with the cursor.

Learning web design means learning both what a good site or feature looks like, and how to actually make it happen in code. It's about both the skills and about judgement.

You won't become a master web designer in just this week, but you'll learn to control key properties that determine the appearance of web pages, and you'll start to develop your eye for spotting what makes a design good or bad.

Noticing

Getting a site to look good starts with noticing what doesn’t look right. Then, you can make large or small changes to the design to fix it.

You’ve visited tons of websites in your life, and you’ve noticed that some sites look good, and others look bad. Now, you’ll need to hone this skill. You need to learn to tell why some sites look good and others look bad.

Practice: Noticing

What makes a site look good?

Everyone has different taste, so there’s no universal “best” style. All the same, some sites look good and others don’t. Usually, what makes sites look good is a combination of just a few characteristics:

  • Text Styling
  • Spacing
  • Colors
  • Box model
  • Layout

CSS has tools for styling each of these. We’ll focus on some of these in the next few lessons.

Try it: Web Design in 4 Minutes

What you’ll learn this week

Text Styling

  • Font size, line spacing, line length
  • Font families, font weights, and how to use web fonts
  • Styling lists, links, and emphasized text

Colors

  • Contrast and readability
  • Choosing a palette
  • CSS Color values

Box Model

  • The CSS Box Model
  • Margin, padding, and borders

Reflection: Sites with Good Design

Practice: CSS Diner

You're going to be using CSS Selectors a ton this week.

If you skipped it in Week 1 (or if you just want to practice selectors more), CSS Diner is a great place to practice selectors.

There are 30 short exercises to practice selecting the plates, the food, or the table.

Try to get 5 levels beyond where you got last time!

Further Exploration

If you want to read more about visual design, see Clean Up Your Mess: A Guide to Visual Design For Everyone (10 min).

It discusses what makes a design “clean” and how to communicate what’s important. In particular, it focuses on how to use spacing, size, proximity, and alignment to create contrast and a visual hierarchy.