What The Greatest Rock Song Ever Teaches us About Landing Page Design
They say the greatest rock song of all time is Stairway to Heaven, by none other than Led Zeppelin.
http://www.youtube.com/watch?v=w9TGj2jrJk8
Why? What is it about Stairway that makes it great?
The lyrics? They’re truly inspired. But lots of songs have poetic and heartfelt lyrics. That alone can’t be what makes it the greatest song ever.
The melody? It’s a true original. I’m left humming Robert Plant’s tune for days. But lots of songs have that effect.
How about the fact that Stairway just plain ROCKS? Jimmy Page’s guitar solo is epic. But just cranking the guitar amps to 11 doesn’t make the song a classic.
The reason Stairway to Heaven is such an incredible rock and roll song is for all of the reasons above, plus one crucial ingredient:
Dynamics
Led Zeppelin takes us on an 8 minute roller coaster ride, and we’re thrilled for every second.
The first two minutes draw us in close with light acoustic guitar and vocal. Nothing else.
In the 3rd minute, we’re introduced to the crystal clean, but crisp, 12-string electric guitar. This ship has lifted off. We’re going somewhere.
At the 4:18 mark, we all know what happens. The beat kicks in and we’ve got a pulsing rock tune. (This is usually the point where my car veers out of it’s lane because I’m banging that drum fill on my steering wheel).
Midway through the 5th minute… Everything stops.
What’s this? Some odd-timed 3-chord progression? Energy level is building… What’s happening? Before we know it, we’re knee-deep in perhaps the greatest guitar solo of all time.
A minute after that, it’s balls-to-the-wall, head-banging rock ‘n roll. “And as we wind on down the road…”
Finally, the engines shift down, and bring the song to it’s memorable conclusion, leaving us with nothing but the vocal melody. Soft. Then silent.
You see? It’s all about the dynamics. Soft / Loud. Low energy / High energy. Lots of instruments / Just one voice.
As the listener, you’re drawn in for a close, intimate experience, but then you’re transported and surrounded by more sounds and colors than you can process in one sitting. That’s why you re-play it again and again.
So what do dynamics in a rock ‘n roll song have anything to do with landing page design?
Dynamics teach us about hierarchy
One of the foundational principals of design is the concept of creating a clear visual hierarchy on the page.
By crafting a strong visual hierarchy, we’re able communicate lots of information in an way that is easy for a new visitor to process without getting overwhelmed or confused.
I like to think of it as if I’m speaking to a first-time visitor. How would I explain what they need to know? It would go something like this:
“First, understand this. Then move on to this idea. Now let’s fill in this missing detail. And now that one. And now that you understand all of that, here is the action I want you to take.”
It’s all about communicating your message in the right sequence.
Take it one step at a time. When you’re explaining a new concept to a friend, you can’t possibly tell them everything they need to know in just 20 seconds. Even if you had the super-human ability to speak 100 words per second, there’s no way your friend would comprehend and process everything you’re saying. Instead, you unpack your message slowly, one concept at a time, bringing your friend along so they remain engaged and come away with a complete understanding.
Nathan Barry’s homepage for his email marketing service, ConvertKit, does a great job of communicating what his product is and why you will benefit from using it. He does that by walking you step by step through his message, illustrating each point along the way.
When we view the ConvertKit homepage, our eye is naturally guided through the page in a very deliberate sequence:
What would happen if Stairway to Heaven started off with that rocking guitar solo right from the get-go? What if they decided to stick the light acoustic section somewhere in the middle of the song, rather than in the intro?
The song wouldn’t work. Most listeners would probably listen to a few minutes, then skip to the next song. If the sequence is off, the song would fail to capture and keep our attention the whole way through.
How to design a visual hierarchy
So we understand that we must break our landing page message into a sequence of smaller messages, delivered piece by piece.
But how do we actually do that when designing the page? How do we guide the visitor’s eyes to where we want them go, in the sequence that we want?
We use differentiation.
Differentiation is how we create visual separation between two elements, and give more weight to one or the other. The one with more visual weight will attract the eye first.
There are many tools we can use to differentiate two things on a page. Here are a few that I like to use when designing a landing page:
Size
This is the most commonly used differentiator. Font size, image size, paragraph size, container size, etc.
The top of your landing page hierarchy is almost always your first headline, followed by a sub-headline or short paragraph of text. Since this is the very first thing we want to draw the visitor’s eye towards, we can be heavy-handed when it comes to differentiation.
In my recent redesign of the Restaurant Engine homepage, I chose a very big font size for the top headline, and a significantly smaller size for the sub-headline just below it:
When a visitor hits the page, the first thing they see is the big bright white headline. That copy should be intriguing enough for them to want to continue reading and move onto the sub-headline.
So I use differentiation to grab the visitor’s eye and define their starting point. Then it’s up to my copywriting to get them to keep reading and move onto the next line, or next element I want them to see.
The intro section of Stairway to Heaven is soft and sweet. It has a low-energy, intimate feel. But the guitar solo and ending section are characterized by the high-energy, BIG sound, reverberating from the amps and drums. This dynamic differentiates each section from the next.
Contrast
Another way we can differentiate and promote a certain element to a higher priority for our visitor’s attention is to use contrast.
A common way to use contrast is with color. We can give an element it’s own unique color, which is used almost nowhere else on the page. It might be a dark element on a light background or vice versa. Or a button color reserved only for the primary call-to-action, nothing else.
Check out the Buffer Blog. One of their primary goals is to build up their email newsletter list. So they’ve decided to promote their email signup box in the visual hierarchy of the page. It’s the only element on the page with a dark background, which draws our eyes to it almost immediately as we scan the page for the first time.
See the red “Sign Up” button on the newly redesigned site for MailChimp? It’s the only interactive element on the page with that color. While there are a few attention-grabbing elements, like the headline and central image, our eyes are ultimately pulled toward the direction of that “Sign Up” button, because of it’s contrasting color.
Robert Plant’s voice cuts like a knife through all of the instrumentation that surrounds it. It’s intended to stand out, above and in-front of all else going on. The same rings true of Jimmy Page’s lead guitar during his solo. The tone of his Les Paul is dialed at just the right frequency and overdrive to cut through the sounds behind it.
Rhythm
As we move through the design of our landing page, we must continue to differentiate every step of the way. Every element should be differentiated from the next, always mixing things up.
Formatting of text can be varied in many different ways. Big headlines, sub-headlines, paragraphs, bullet lists, linked text, quotes…
Images help to break up the mental load on the reader, by letting them shift between reading copy and examining images and illustrations that also serve to communicate parts of the message.
Taken together, the ways in which you differentiate between the elements on your pages, help you build rhythm. There are high volume elements, low volume elements, transitional elements, and white space.
See the tour page for Trello. There are bold colored headlines followed by short bursts of copy. One section uses handwritten labels pointing to screenshots. Another is a series of blurbs accompanied by thumbnail images. The call-to-action at the bottom uses a unique brightly colored background and button color. We’re enchanted every step of the way.
Again, I come back to what it’s like to have a conversation with someone. You wouldn’t scream at the top of your lungs for the duration of your chat. And you wouldn’t whisper everything you say. You would increase and decrease in volume and energy as you place emphasis and importance on certain key points.
Play back that drum beat in the 4th and 5th minutes of Stairway to Heaven. The loud kick and snare hits give us the pulse. But in between those are the softer high-hats tying it all together.
So the next time you’re designing a landing page, think about how you can make those dynamics more pronounced. It can help make sure your message gets across from beginning to end.