There’s Less Than Meets the Eye
The narrative style of webpage, with vertically stacked panels telling a brand story, is incredibly common these days. Frequently this pattern is used in homepage design, but it’s also in use elsewhere – in special one-off pages, section indexes, or even web features.
How do you think about structuring content for one of these pages? Here’s a few dissections so we can think about how to reverse engineer.
I also call this style of webpage design ‘visual bullet points’ because frequently, that is a fairly accurate representation of how little text content there actually is on the page. And for the user to get the effect of scrolling down and flowing fluidly from one block of content to the next, there really can’t be too much content – anything too dense would slow them down.
There is one exception, of course, and that’s the variation of this design pattern for web features. In that case, you aren’t really trying to build that narrative with the design, you’re trying to build it with the text, and rather than leading the user to a quick brand or message takeaway, you simply want to entice them to keep reading until they get to the end of the article.
OneNYC
Word Count: ~850
Sections: 8
Images / graphics: 10
This webpage is divided into eight horizontal blocks, and comes in at well under 1,000 words. Even less is visible at one time; the top section is a slideshow with eight panels. Later on, there’s a section with a slider of content that also tucks away some of the word length. So, only about 500 words are visible on the page at a given moment. Perhaps more important for the flow of the page, all text content is broken up into blocks of no more than 50 words and usually around half that – short sentences of about 25 words, or roughly the length of a tweet. Tallying up visual assets, there are two large photo-backgrounds, four smaller ones, three photo-heavy graphics featuring art mixed with photographic imagery, and one infographic-style block with mixed graphics and words.
Weathervane Music
Word Count: ~250
Sections: 11
Images / graphics: 10 photos and 1 graphic
The Weathervane Music site is a clear example of this design trend in homepages, with stacked panels serving as both an at-a-glance introduction to the organization’s work and as bits of navigation to sections of the website. The Podcasts block links to the podcast page on the website, the donate section to a donate page, and so on. The page feels “full” but it the content is actually extremely spare: only 250 words, broken into short declarative sentences. On the Weathervane site, I’m sure that great care was taken in selecting the images: they are really what drive the story, showing human faces, musicians in action, warm interiors, analog materials, all conveying a comfortable, accessible, and creative mood, accented by the bright and utilitarian yellow of the branding colors. The design here is doing its job by not getting in the way, and the text by being extremely concise and clear.
Organize For
Word Count: ~550
Sections: 6
Images / graphics: 11
The Organize For site features bold design and a vibrant, advocacy feel. It runs a bit longer on word length than many similar designs, but leaves that for lower on the page after you’ve got the top-line stuff loud and clear. Photos and graphics are used separately and then together, in photo-based graphics which use extracted forms that are absorbed into the page’s color palette. Among other things, this design shows how some Photoshop magic can make up for what may be a lack of strong photos – only two are used unmanipulated, the others all transformed. The designer did a lot of heavy lifting, probably working with low-res images of photos of figures like Trayvon Martin; the folder of source material was probably very light. Strong typography and color, and slashes of diagonal lines bring a lot of dynamism to what at some points could be fairly dry content (i.e. the statement about the partnership program).
Snow Fall, by the New York Times
Word Count: Long
Sections: ~5 on first section
Images / interactive graphics: 8 (+)
So, Snow Fall was a big deal back in 2012 and had people talking about whether it was the future of online journalism. I really include it here largely to illustrate that you don’t want to set out trying to create one of the above pages, and wind up with content that looks more like Snow Fall. First: Snow Fall is long. Really long, like 10,000 words or more (full disclosure: I still haven’t read the whole thing). On the first page, it’s got over 3,000 words, broken up by several stunning interactive features as well as some videos, an image gallery, and a handful of thumbnails.
The problem with a page like this is that unless you’re sitting back in your easy chair at home with a cup of coffee and an iPad, you’re unlikely to actually read it. What you’ll probably do is go “oh, what a gorgeous web feature” scan the text a little, check out the interactive graphics, and bookmark intending to come back later. This is quite likely not the desired effect, and if you don’t want your site visitors to do the same, take note of what to avoid here: huge, dense blocks of text. Yes, it may be important, yes it may be content you truly want the user to imbibe. But it must be structured in a way that works for the web.
So, what are the takeaways?
As a general rule, if you’re crafting content you want to give to a designer to assemble in a visually rich, narrative-style treatment on the web, you may want to follow these guidelines. Generalized from the examples above, they aren’t by any means absolute, but should give a basic idea whether or not how you’re structuring your content will lend itself to the kind of design you may be envisioning.
- Keep word length well under 1k
- Break text into blocks of no more than 50 words
- Think of it as a collection of sentences, not paragraphs
- Tuck away extra-long content in interactive elements
- Break the content up conceptually into blocks
- You’ll need twice as many images as blocks of content
- Plan to include / invest in / curate lots of graphics and photos
And: don’t make a Snow Fall-style page unless that’s really what you’re setting out to do!
