Web design essentials

TL;DR - Left to its own devices, AI will make a website that looks impressive and behaves badly. This unit gives you just enough design vocabulary to stay in control - how pages are structured, how layouts work, and how to sketch your ideas before handing them over to an AI.

Estimated time: 45 minutes

Outcomes & What you'll make

By the end of this unit you'll understand:

• The anatomy of a website and the terminology to describe it
• Terminology for describing layout to an AI

What you'll make:

• Sketched layout drawings for your key pages
• A Page Layouts section added to your SITE PLAN.md

Self-check: Basic web page anatomy

Let's break down the pieces that make up most websites. For simplicity's sake, go to bbc.com and open up the main page, plus any news article. (Ideally on a big screen/not your phone.)

See if you can spot the following elements:

• Header: A big strip that spans the top of the site. What's in it?
• Body: Here's where the content of the page lives. How is the Body different on the BBC homepage vs. an article?
• Inside the Body: Hero, Sections (What do you think they are?)
• Footer: At the end of the page. (What's there?)

That wasn't too bad, right? If you've ever touched HTML, you probably knew all about the above. It's just a way of structuring segments on your page.

But what about the style and layout of the page? That belongs to CSS. I thought CSS was all about colors and "themes" (I'm old.) - but it is also responsible for how elements on your page relate to each other.

Try resizing the browser window. See how the content shifts around as the page narrows? Some elements even disappear, or appear at specific breakpoints (screen sizes). This is known as Responsive Design. Why do you think that is?

And Layouts... where do you even begin? How do we describe the position of different elements on the page? This is supposed to work on millions of devices of different sizes, after all. Well, I don't want to mislead you, so go check out this fantastic resource to learn a bit about margin, padding and spacing. (CSS Box Model)

You don't have to differentiate margin, padding and spacing perfectly - often, calling it margin with enough context gets you a pass. But it's worth having a closer look.

HTML and CSS translate your ideas into code - which helps your website look correct and function on all different devices and screen sizes. And look good, of course!

If you thought this segment was fun, I highly recommend playing around with the inspect tool. On many pages, it lets you see a lot of the underlying HTML and CSS.

✏️ Exercise 1: Sketching website layouts

Phew. Enough with the brainy stuff, let's make a layout! We'll make a list (on paper!) of all the pages you need, and create a layout for each.

You'll need:

• Pen and paper. (Alternatively: scissors!)
• Your SITE MAP.md (Page Structure section)
• Your visual references & inspiration

Sketching your page layouts (~20 min)

Go ahead and take out your pen & paper. Try not to spend more than 2 min per page. We'll iterate and re-draw!

✂ Alternative approach: scissors!

Another great way to prototype your layouts is to simply cut out the elements you want - and arrange them on paper. The process below is the same.

1. Start drawing an idea for your home page. Which elements you would like to see?
2. Do you have a blog page on the site? Draw that too, where the Hero image sits, the article body and navigation.
3. Continue sketching a layout for each page, until you're done. (~2 min per page)
4. Don't worry about text for now, you can draw lines or rectangles as placeholders.

Round two: sketching again! Nothing has to be perfect yet. Go get some coffee and take another look at the inspiration references you gathered.

1. Once you've sketched a layout for each page, have a look at each one.
2. Try sketching some of the pages again.
3. Once you're happy with your first drafts, pay attention to the details.
4. What kind of margins do you see? How would you describe the header?

✏️ Exercise 2: Describing your layouts so AI understands

Now that you've worked out how your layouts should look, it's time to describe them in writing. Yay!

Don't think of the page as a painted picture

In code, the elements of your web page are like individual pieces that can be stuck together or moved around. (Like the scissor approach I described above!) You can layer elements, relate them (margin, positioning) to each other - this is how AI can make sense of it.

We're going to do our best to describe all your pages. It's good to specify which elements are reused across your website (e.g. header, footer, navigation elements etc).

🚨 Don't worry about perfectly describing your layouts. The real value is: you did the work of figuring out what you want. Polish comes later.

📄 Go ahead and open up your SITE PLAN.md

First, let's prepare the document.

1. Make a segment called "Page Layouts"
2. Add a title for each page you've created.
3. Make a short note of each page's purpose

For every page, describe each element it contains in text.

1. What kind of element is it?
2. How is the element positioned on the page?
3. What is the shape and size of it?
4. Is it reused on any other pages?
5. Is it always visible?
6. Any other characteristics you can think of?

If you're feeling unsure whether you did a good job describing the pages, try the following:

1. Paste one of your descriptions to an AI
2. Ask if your way of describing this website page layout makes sense, or if there are open questions.
3. Refine the layout description.

The AI might start creating a mockup HTML page for you. Don't get too carried away just yet. I know it's tempting! Make sure it's helping you refine the layout, rather than create a complete design.

Well done on finishing the last exercise for this unit. In the next one, we're going to take a look at some usability features that your visitors will thank you for.

Learning reflections

• You've just translated a visual idea - a layout sketch - into written instructions an AI can follow. What did that process reveal about your design that you hadn't consciously noticed before?
• Describing a page layout in words forces you to think about what each element is actually for, not just where it goes. Does that change anything about your original sketches?
• This approach - getting your ideas out of your head and into a document before involving a tool - isn't specific to web design. Where else in your work could you use a version of it?