Vertical Web Design

Every new medium mimics what came before. Early cars looked like motorised carriages, and early cinema was filmed like a stage play from the audience’s perspective—it took decades for early filmmakers to understand the power of editing, camera angles, lighting and more. It takes time for a medium’s unique characteristics—the strengths & weaknesses that set… Continue reading Vertical Web Design

Published
Categorized as Grids

Patterns & Transitions

Web layout has a lot of untapped potential, but if we’re to explore it (and ultimately master it) we first need to be able to talk about it. To do that, we’re going to need a better vocabulary. Cinematography has such a well-established vocabulary that when I say “wide shot of deserted street, slow pan… Continue reading Patterns & Transitions

Published
Categorized as Grids

Vertical Pacing

We can’t control the speed at which a reader scrolls through content, but we can control the pace. Let’s try an experiment. Try scrolling through these lines… Simples. Now scroll through these lines… Now, I can’t say for sure that you scrolled through the ‘thick’ version slower… but I bet it felt slower. That’s an… Continue reading Vertical Pacing

Published
Categorized as Grids

Reading momentum

In most western printed media (books, magazines, etc), the reading momentum is horizontal. A composition’s primary goal is usually to guide the reader’s eye from the top left of the layout to the bottom right—at which point they turn the page, bringing their eye back to the top left, ready to go again. One of… Continue reading Reading momentum

Published
Categorized as Grids

Margins

Margins help define the relationship between content and its canvas. They can play a key role in making a composition feel like it fits snugly into the space available… not too big, not too small. There are two main kinds of margins: passive and active. Passive margins Passive margins are everywhere. They’re what you get… Continue reading Margins

Published
Categorized as Grids

Digital Gardening

This site is a digital garden. Hopefully someday that term will need as little explanation as ‘blog’ does today, but at time of writing it’s still a relatively unfamiliar concept to most, so here are my thoughts on it. Digital gardens are websites that treat content like a constantly-expanding network of knowledge, rather than a… Continue reading Digital Gardening

Affordance

the term affordance refers to the perceived and actual properties of the thing, primarily those fundamental properties that determine just how the thing could possibly be used. […] Affordances provide strong clues to the operations of things. Plates are for pushing. Knobs are for turning. Slots are for inserting things into. Balls are for throwing… Continue reading Affordance

The Design of Everyday Things

Don Norman’s seminal work introduced me to the concept of affordance, and changed how I think about design (and especially doors). After reading this book I stopped blaming myself when I couldn’t understand how to use something, and started blaming the designers who created it.

Content types

This is a list of all the content types on this site, used for reference and styling purposes. Heading Subheading This is a paragraph with a drop cap. This text is bold. This text is italic. If you can keep your head when all about you are losing theirs and blaming it on you, if… Continue reading Content types