The first sentence of a story has a single, unswerving purpose. It exists solely to make you read on to sentence no. 2.
Each element of a story serves to make the reader ask, “what’s next?” This is as true in novels as it is in blog posts or advertising copy. The technique will vary by the nature of the story; we may read on for the punch line, or to see who’s about to be punched, but the mark of successful prose is that we read on.
This pull on the reader is known as a ‘Hook’, and is an essential element of storytelling. Currently there’s an interesting development in web design that nicely illustrates the power of the Hook, and I wanted to take a quick look at it today.
Single Page Design
For years, the common wisdom was to treat a website like a physical newspaper. A growing trend in web design is to create a long, flowing vertical design that pulls the eyes (and scroll buttons) of viewers downward, thereby engaging with more of the page than a typical browser might. This vertical structuring is known as “single page design”.
Single page design is often marked by arresting initial images and subtle animations that keep the reader wondering what’s coming next, even as their eyes are drawn ever downward.
A Tall Man; A Short Case Study
Let’s look briefly at the personal website of NBA star Matt Barnes.
The website (http://mattbarnesenterprises.com/) begins with an arresting image. Note the choice of imagery and the accompanying text. While his jersey number is the background, the key image is not of Barnes on the court, but in a suit. The tagline “Father, Mentor, NBA Player” reinforces that this site is about Barnes’ life beyond basketball, while not ignoring his profession.
The small downward animation of the arrow lets us know that there is more information below. As we scroll, the page becomes an informational for Barnes’ Athletes Vs. Cancer charity. Again, the designers have black and white photos of Barnes in athletic settings, but only as tied to his charity. I think this is a sound decision. Barnes’ fans will keep scrolling to find the info on his hoops career, but for a non-fan the emphasis on his charitable work makes for a much more interesting read.
The section on his career, when it does appear, is small. So small in fact, that the next section, labeled “Off the Court” is immediately visible. Why? Because it’s predictable for an NBA star to have a highlight reel on his website. By bringing in the other elements the reader is kept off-balance, and pulled in with the design. Note that the amount of prose increases as you go further down the page. The designers decided to wait to hit us with denser text until we’ve committed to reading more of the page.
The hooks on this site are based on playing against expectation. Combined with effective visual design and sparse, evocative prose, Barnes’ site tells the story of a man with a presence in more places than just the court. It serves as a positioning device to help prepare for opportunities after his playing career is over, and it works because it hooks the readers’ interest and uses their curiosity to propel them through the site.
More examples of strong single page design can be found at Awwwards. Keep an eye on this blog for more examinations of the Hook, as well as other techniques of storytelling.