Starvard University · Web Design
Henri designs pages for E2 every day. This course teaches the craft the way he practices it: one idea per page, typography that does the talking, and the courage to delete almost everything.
Your teacher is Henri, a designer at E2. He keeps a design blog, Henri's Blog, where he posts studies and teardowns, and he will be adding lessons to this course as it grows. Tuition is zero. The only homework is real: every lesson ends with something to build or fix on a page of your own.
This is a working course, not a museum tour. You will study the strictest teacher design ever had, walk through a gallery of world class pages with screenshots and take them apart piece by piece, and then learn the three skills everything else stands on: focus, typography, and mobile. Bring one page of your own to work on. By the end of Lesson 4 it will not look like the page you started with, and that is the point.
The whole course in 60 seconds
Read these and you have the map. The lessons walk the territory.
Syllabus
·The Gallery: World Class Pages, Taken Apart
·Field Method: The 30 Second Teardown
5The Thousand No's: A Subtraction WorkshopComing next
6How It Works Is the DesignComing next
7Reading Great Pages: TeardownsComing next
8Ship It and Watch HumansComing next
Lesson 1
Start the course with the strictest teacher web design ever had. Steve Jobs never ran a web design school, but every page Apple shipped under him taught the same lesson: a page is not a container for content. A page is an argument, made in a specific order, with everything that weakens the argument removed.
Henri built a full study of this idea, live on E2: What would Steve Jobs do? This lesson walks through it, principle by principle.
Open an Apple page from the Jobs years and the first thing you meet is the product and its promise. Not the company's history, not a wall of slogans, not a menu of forty destinations. Your page should do the same: the thing itself, front and center, inside the first three seconds.
Jobs liked to say that focus means saying no to a hundred good ideas. On a page, that becomes: one primary action per screen, one story told in order, and the discipline to cut elements that are good on their own but wrong for this page.
His most famous design line was that design is not just what it looks like and feels like, design is how it works. For a web page that means load time, reading order, tap targets, and what happens after the click matter as much as the colors.
Apple controlled the hardware, the software, and the store, end to end. A web designer owns a smaller kingdom, but the principle holds: the arrival, the scroll, the tap, the share, and the reason to return are one experience, and all of it is your job.
When typography, spacing, and restraint are handled with confidence, a page does not need badges, banners, or decoration to prove it is good. Most beginner pages are not underdesigned. They are overdecorated.
Every screen earns its place or gets rebuilt. The question is never just whether the page works. The question is whether it feels inevitable, like it could not possibly be arranged any other way.
He would never ship a shrunken desktop page and call it mobile. On desktop, width buys air: text and product sit side by side, type gets bigger, comparisons open into quiet columns. On mobile, sequence replaces width: one column, the same words in the same order, buttons sized for thumbs, and nothing important hidden inside a menu. Sentences get shorter on the small screen. Words never get smaller.
Before adding anything, walk your page with his red pen. No carousel, because five rotating messages deliver zero messages. No pop up in the first ten seconds. No five buttons fighting for the click. No menu with forty links. No autoplay or motion for its own sake. No footer with ninety links pretending to be a sitemap.
The Gallery
Principles are easy to nod at and hard to use. So before the skills lessons, walk through six of the best designed pages on the public web and look at what they actually do. Each one is world class at a different thing. Screenshots captured October 2026; these sites redesign often, which is itself one of the lessons.
Apple's homepage is Lesson 1 running in production. One product fills the first screen. One short headline says the one new thing about it. Two quiet links, buy and learn more, are the only doors. There is no grid of everything Apple sells, no company news, no mission statement. The page behaves like the products: it assumes you are smart, shows you the best thing it has, and gets out of the way.
Notice the typography doing the heavy lifting. The headline is enormous and set tight, the product photography is lit like sculpture, and the white space is not empty, it is emphasis. Apple can afford any effect on earth. It chooses restraint, every single time, and the restraint is what makes it feel expensive.
Steal this: your first screen gets one message, one image, and one primary action. If you want to add a second message, you have to remove the first.
Google's homepage is the most radical subtraction on the web. A company that could put anything on the most visited page in the world puts a logo, one input box, and two buttons, and refuses, decade after decade, to add more. Every proposal to monetize or decorate that page dies against one question: does it help someone search, one second faster?
The lesson is not that every page should be empty. The lesson is that emptiness is a feature when the job is singular. Google's page loads instantly, works on every device ever made, and has never once made a visitor wonder what to do next. That is what focus looks like when it wins.
Steal this: for every element on your page, ask what breaks if it disappears. If the honest answer is nothing, it goes.
Stripe sells invisible infrastructure to developers, the audience least impressed by marketing on earth. Its answer is craft: a signature gradient, immaculate typography, live product visuals instead of stock photos, and documentation so well designed that developers cite it as the reason they trusted the company with money. The page performs competence. You believe Stripe can handle payments because you can see how carefully it handles pixels.
Study how much information Stripe fits above the fold without clutter: headline, proof line, two actions, product imagery, and a wall of famous customer logos, all breathing. Density is not the enemy. Disorder is. Stripe is dense and calm at the same time, because every element sits on a strict grid and speaks in one voice.
Steal this: treat polish as evidence. On a page that asks for trust, the quality of the page is the first proof of the quality of the product.
Tesla's homepage is a car, wall to wall, with a model name, a price or offer, and an order button. That is nearly the entire design. The navigation is a whisper at the top. There is no paragraph explaining the company's vision before you may look at a vehicle, no dealer maze, no brochure request form. The page assumes the product, shown huge and honestly priced, is the argument.
This is the Jobs principle with the volume turned up: begin with the product. Tesla spends its design budget on photography and on removing steps between wanting and ordering. When your product is genuinely desirable, the best page is the one that shows it biggest and interferes least.
Steal this: show the thing at full size, say the price early, and make the main action reachable in one tap from the first screen.
Airbnb's homepage performs a magic trick: it turns a two sided global marketplace into a single friendly question. Where are you going, when, and who is coming: one search pill, and the rest of the page is photography of real homes and the faces of real hosts. The design understands that its product is not software. Its product is trust between strangers, so the page spends itself on beautiful evidence that strangers can be trusted.
Watch the restraint underneath the warmth. The header is minimal, the categories are simple icons with plain words, and every card is the same calm shape: photo, place, distance, price. A hundred million listings, presented with the discipline of a museum shelf.
Steal this: turn your main action into one friendly question, and let real photography of the real thing carry the persuasion.
Linear sells project management to software teams, and its page is a masterclass in designing for an audience that notices everything. Dark, quiet, and precise: hairline borders, soft glows used sparingly, product screenshots that look like the real tool because they are the real tool, and copy that respects the reader's intelligence. Nothing shouts. The confidence is the pitch: a team this careful about a web page is probably careful about your issue tracker.
Linear also shows the modern end of the speed lesson. The page feels instant, transitions are smooth and brief, and the whole experience suggests the product's core promise, speed, before you read a word about it. The medium demonstrates the message.
Steal this: let the page itself demo the product's best quality. Fast product? The page must fly. Calm product? The page must breathe.
Field Method
Six pages is a start, not a library. The real skill is learning to read any page the way the gallery just read these, fast and in a fixed order, so your taste gets reps every day. Use this protocol on one new site a day. It takes thirty seconds once it is a habit, and it works because the order forces you to judge the argument before the decoration.
Seconds 0 to 5: the sentence. What is this page for, in one sentence? If you cannot say it, the page failed its first job, no matter how beautiful it is. Notice whether you are reading the page's answer or inventing your own excuse for it.
Seconds 5 to 10: the one action. What does the page most want you to do, and how do you know? One clear button earns a point. Several competing buttons, a pop up, and a chat bubble asking if you need help: the page is arguing with itself, and you are watching it lose.
Seconds 10 to 20: the squint. Lean back and blur your eyes. Can you still see the structure: one big thing, a few medium things, a field of small things? If the squint view is uniform gray noise, the typography has no hierarchy, and no amount of color will fix it.
Seconds 20 to 30: the phone in your head. Picture the page at phone width. What survives the collapse into one column, and in what order? Pages designed mobile aware read like a story. Pages that were shrunk read like a ransom note.
Keep a notebook. One line per site: the sentence, the action, one thing worth stealing. After a month you will own something no tutorial can give you: a hundred judged examples and the beginnings of taste, which is only judgment that has had practice. Lesson 7 turns this protocol into full teardowns. For now, thirty seconds a day is enough to change how you see every page, including, soon, your own.
Lesson 2
Every strong page in the gallery survives the same test: a stranger can say what the page is for in one sentence, after five seconds on it. Apple's sentence is "this is the new iPhone, and it is remarkable." Google's is "search the web." Airbnb's is "book a home from a real person." Weak pages fail the test because they were built by adding, every department's priority stacked on the same screen, until the page stood for everything and therefore for nothing.
So the first skill of web design is not layout. It is writing the sentence. Not the headline, the sentence underneath the headline, the one you would say out loud if someone asked what this page does. Get it right and the design almost arranges itself: the hero illustrates the sentence, the sections argue for it in order, and anything that does not serve it has a visible reason to leave.
A working page sentence names three things: who the page serves, what it lets them do or get, and the outcome that makes it worth their time. "For landlords (who) who hate spreadsheets (the itch), rent collected on time without the Sunday admin (outcome)." Most first drafts only name the product: "We are a platform for property management solutions." That is a label, not a sentence. Labels describe. Sentences promise.
Before: "Welcome to our website! We are a full service digital solutions provider offering a wide range of services for businesses of all sizes." After: "We build the website your customers actually finish." The first sentence is about the company and says nothing. The second names an outcome a buyer can picture, and it quietly argues against every competitor whose sites people abandon.
Before: "Quality handmade goods, crafted with passion since 2016, shipped worldwide." After: "A wallet that outlives the trend cycle: full grain leather, guaranteed for a decade." The goods did not change. The sentence went from describing the seller to promising the buyer something specific enough to believe.
Before: "Explore our extensive collection of resources, tools, and community features." After: "Learn piano in ten minutes a day, free." Three numbers and a promise. A visitor can repeat that sentence to a friend, and a sentence a visitor can repeat is the most valuable asset a page can have.
Once the sentence exists, the hero writes itself. The headline is the sentence, said beautifully and cut in half. The subheadline carries the half you cut. The primary button is the sentence turned into a verb: not "Submit" or "Learn more," but the action the sentence promises, like "Start learning" or "See the homes." If you cannot write the button, the sentence is not finished.
Then the discipline: one primary action per screen, everywhere on the page. Secondary actions may exist, but they dress quieter, text links instead of buttons, so the eye always knows what the page most wants. A page with five equal buttons is a committee. A page with one button and four quiet links is a decision.
Lesson 3
Before a visitor reads a single word on your page, the typography has already spoken. It told them whether this page is careful or careless, calm or desperate, worth money or worth closing. Text is almost all of what a web page is, so the design of the text is, for practical purposes, the design of the page. Get typography right and your page looks designed even with no images at all. Get it wrong and no hero photo can save you.
A reader should be able to squint at your page, unable to read a word, and still see its structure: the one big thing, the few medium things, the field of small things. That structure comes from contrast. Headlines are not slightly bigger body text; they are two to four times bigger. Space does as much work as size: a heading with generous air above it and a small gap below it belongs to the text under it, and the reader feels that belonging without knowing why.
The beginner's error is making everything a little bit important: five sizes, three weights, bold sprinkled like seasoning. Professional pages are stingy. Most use one typeface in two or three weights and four sizes total, and they let that restraint create the calm you admired in the gallery.
Here is the scale this very course page is built on, close enough to copy for your first sites. Four sizes do nearly all the work.
Two details separate this scale from amateur pages. First, body text is bigger than you think it should be: 19 to 21 pixels, not 14. Most visitors are on phones, in daylight, in a hurry, and small body text is the number one reason a page feels cheap. Second, the line height is generous. Crowded lines look anxious. A line height around 1.6 lets text read the way calm speech sounds.
Lines of text should run about 45 to 75 characters. Shorter and reading becomes choppy; longer and the eye loses its place returning to the left edge, which is why books are not printed on landscape paper. This page holds its text near 700 pixels wide for exactly that reason. On a wide desktop monitor, the empty margins are not wasted space. They are what makes the text readable, and readable is what makes it read.
Pick one good typeface family and use its weights as your whole palette: regular for body, semibold or bold for headings, and italics rarely. A serif like Georgia gives long reading a bookish calm, which is why this course is set in it. A clean sans like the system fonts Apple uses gives product pages their modern neutrality. What never works is a drawer of five novelty fonts, each shouting a different decade. One family, honestly used, always beats a font collection.
Lesson 4
Most of your visitors will meet your page on a phone, held in one hand, on a network you do not control, in light you would not read a book in. Designing the desktop page first and shrinking it at the end produces the web's most common failure: a page where everything is present and nothing is usable. Mobile is not a smaller version of your design. It is the same argument, restaged for a narrower stage and a shorter attention span.
On desktop, layout is about arrangement: what sits beside what. On mobile, arrangement collapses into order: what comes first, second, third. That makes the mobile version the purest test of your one sentence. The hero carries the sentence alone. The proof comes next. The details follow. Nothing essential may depend on being seen side by side with something else, because on the phone, nothing is beside anything.
This is why the order of your sections matters more than their styling. Read your page top to bottom on a phone and ask at each screenful: does the visitor know more than they did one screen ago, and is the next step obvious? If a screenful only decorates, it costs you readers the desktop version would have kept, because desktop visitors skim sideways and phone visitors only move down or leave.
A mouse pointer is a needle; a thumb is a grape. Anything a visitor must tap needs to be at least 44 pixels tall, with space around it, and the most important action belongs in the lower two thirds of the screen where a one handed thumb actually reaches. Links packed shoulder to shoulder, tiny page numbers, and close buttons the size of a freckle are not minor flaws. On mobile they are the difference between a customer and a story about your annoying website.
Buttons also deserve honest labels at phone size. The button text is all the instruction a hurried visitor reads, so "Download the free guide" beats "Click here" at every size, and on mobile it beats it by more.
The laziest mobile pattern is amputation: hide the comparison table, hide the pricing details, hide the second half of the story, and show phone visitors a pamphlet. Visitors can feel the missing limbs. The rule from Lesson 1 holds at every width: same truth, different scale. If content matters, it appears on mobile too, restaged: the wide table becomes stacked cards, the four columns become four screens in sequence, the sidebar becomes a section further down. Shorter sentences, larger type, same facts.
Before any page ships, run three tests on a real phone, not a simulator window. The one hand test: can everything important be reached and read holding the phone in your weaker hand on a moving bus? The sunlight test: go outside; if the gray text vanishes, it was decoration, not information, and it needs to darken or go. The hurry test: give the phone to someone for five seconds and ask what the page wants them to do. Their answer, or their silence, is your grade.
Keep going
Simple is not empty. Simple is everything unnecessary, removed, and removing things well is a skill you can practice. You now have the foundation: the focus of Lesson 1, the sentence of Lesson 2, the typography of Lesson 3, and the mobile discipline of Lesson 4. Lessons 5 to 8 are in production: a subtraction workshop, the performance lesson, teardowns you perform yourself, and the shipping lesson. Until then, the study that started this course lives at e2.life/stevejobs, his personal site exercise lives at e2.life/stevejobs/personal, and Henri's design writing lives at Henri's Blog.
Keep learning
This course is part of Starvard University, striving for greatness.
