23 Principles of Attention-Driven Design on Album Covers

Within the age of digital distractions, how will you get folks to take a seat up and concentrate?

You possibly can shock folks. You possibly can tease folks. Or, as Oli Gardner breaks down in his e book in regards to the 23 Principles of Attention-Driven Design, you’ll be able to embrace visible cues and clues to assist information folks towards the objective of your web page.

These visible cues are so deeply engrained in our on a regular basis lives that they’re actually in all places round us.

They are often present in probably the most unlikely locations — take my document assortment, for instance.

Significantly. After the launch of his e book, Oli and I begin digging by way of my information searching for the 23 design rules. Only for enjoyable.

So what are these 23 rules of Consideration-Pushed Design?

You possibly can read about them in the 68-page book — or you’ll be able to learn the abbreviated model proper right here, with examples from the duvet art work of information from my private assortment.

1. Course: Saturday Evening Fever – The Unique Film Soundtrack

This was one of many first information I purchased – it’s a type of albums that’s in each discount bin and each Goodwill retailer. Nevertheless it’s additionally an excellent album with a number of the finest music ever recorded, in my humble opinion.

The picture of John Travolta pointing straight on the Bee Gees is likely one of the most iconic poses in film historical past, and will no more completely show the idea of Course.

Directional cues are visible parts used to draw consideration to vital areas of your touchdown web page, significantly your call to action. This might take the type of an arrow or an individual gazing at your CTA, directing your customer’s gaze there as properly.

Course generally is a highly effective technique of, properly, directing folks to look in the fitting… course.

Movement: The Civil Wars – Self-Titled

This Civil Wars album, launched the 12 months earlier than they break up, is a splendidly crafted piece of labor. The duo mixes a few of their very own compositions in amongst just a few well-known cowl songs like “Disarm,” the 1992 Smashing Pumpkins hit.

As we cycled by way of my information, the idea of Movement on this album cowl jumped proper out at Oli. You possibly can’t assist however be drawn to the highly effective plume of smoke because it strikes its manner throughout the duvet:

Supply: rollingstone.com

Like Course, Movement on a touchdown web page generally is a precious instrument for drawing consideration to vital parts. Apple makes use of Movement on this page for the iPhone 6s to nice impact. It makes the product look fascinating, and even show just a few of the product’s superior options.

3. Affordance: Led Zeppelin – III

Led Zeppelin stepped again a bit from the out-of-control-train-headed-straight-at-you arduous rock sound that had permeated their first two albums with this providing. There are just a few straight forward rockers on this album, however the group discovered a brand new sound by embracing the Welsh countryside through which a lot of this album was recorded.

The cool factor about this album design is the wheel inside the duvet which, when spun, rotates background photographs displayed in holes within the jacket. The little cutout on the right-hand aspect of the duvet makes it apparent that this may be performed, which is a tremendous instance of Affordance.

Affordances are visible cues that show how one thing is meant for use. The basic instance of this, shared by Steve Krug in Don’t Make Me Think, is a 3D-style button that makes it clear that it’s meant to be clicked.

We use Affordance in net design to point out our customers what they need to be doing and the place they need to be clicking – which is precisely why many UX consultants warning in opposition to utilizing ghost buttons.

4. Distinction: Joe Jackson – Look Sharp

When Joe Jackson launched his first album, he needed to make a daring assertion along with his album cowl – which makes use of Distinction to emphasise his slick-as-hell sneakers.

Supply: fanart.television

Contrast is used on touchdown pages to make a component of the web page stand out from all the things else, similar to Joe’s sneakers right here. You’ll typically see this idea in observe on touchdown pages the place the CTA button coloration contrasts with the remainder of the colours on the web page.

Individuals don’t click on on a button as a result of it’s pink or inexperienced — they click on due to it contrasts with the remainder of the web page.

5. Highlighting: U2 – The Unforgettable Hearth EP

U2’s Unforgettable Hearth EP comprises two tracks from the The Unforgettable Hearth LP together with three bonus songs (my favourite is Love Comes Tumbling). After I pulled this document off my shelf, it was instantly clear to me that this was going to work completely for instance of Highlighting:

See how the title of the album is highlighted in gold? That pulls the attention and offers it visible significance.

Highlighting can be utilized to related impact on touchdown pages to attract consideration to significance parts. Need prospects to pay attention to a reduction or get them to concentrate to your UVP? Chances are you’ll need to take a look at Highlighting.

6. Whitespace: Wilco – Sky Blue Sky

Ha! Thought it was going to be the well-known white album by the Beatles, didn’t you?

That is Sky Blue Sky, Wilco’s sixth studio album, that includes a proprietary mix of Southern-California folks rock, alt nation and straight-ahead rock ’n’ roll.

Once you have a look at this cowl artwork, the chook off to the fitting might be the very first thing you discover. Your eye is straight away drawn to it and the query instantly turns into, “What’s so particular about that chook?”

Similar to the lonely little chook on the album cowl, you’ll be able to draw consideration to one thing in your touchdown web page with Whitespace: a design method that makes use of areas of clean area to emphasise a touchdown web page factor of your alternative.

Word that Whitespace doesn’t must be white. In case your background is blue, you’ll be able to apply the identical precept and get the identical impact.

7. Anomaly: Sharon, Lois & Bram – Smorgasbord

Why is that this document in my assortment? As a result of it’s genius, plain and easy.

With hits like “Peanut Butter,” “Dan, Dan the Soiled Previous Man,” and “Did You Feed My Cow?” this album was an on the spot basic.

Nevertheless it’s additionally a basic instance of the Consideration-Pushed Design precept of Anomaly.

An Anomaly can finest be described with the lyrics from the previous Sesame Avenue music: “One of These Things is Not Like the Others!”

And the place’s the Anomaly on this album cowl? Effectively, if I’ll deal with the elephant within the room, it’s the elephant on the duvet!

When one thing doesn’t match it, we discover — use Anomaly to make issues stand out in your web page.

8. Proximity: The Jackson 5 – Future

For this album, the Jackson boys someway managed to take management of the recording room to provide an album that delivered hits like “Blame It On the Boogie” and “Shake Your Physique (All the way down to the Floor).”

The way in which the Jacksons are grouped on this album cowl – in shut Proximity – reveals us that they’re collectively; one group united to unfold funk and love all through the galaxy.

In your touchdown pages, Proximity offers guests the sense that gadgets are associated. This could work each in your favor and in opposition to you.

Take into account the basic instance of writing “We’ll by no means spam you” close to your CTA button. Whereas that is sometimes included to reassure prospects, it might additionally function a stop word, planting a seed of doubt in prospects’ minds.

The takeaway right here? If you happen to’re using Proximity in your web page, take a look at to make certain it has the supposed impact.

9. Distraction: Gord Downie, The Sadies, and the Conquering Solar

It is a document by one in every of Canada’s seminal rock stars and lead singer of the Tragically Hip, Gord Downie, backed by rockabilly band the Sadies.

Each on the album and on the duvet, there’s a heck of lots happening:

Supply: killbeatmusic.com

You might in all probability stare at this album cowl for a couple of minutes and by no means actually select one factor that actually issues most. Your eyes would maintain travelling from one face to the subsequent, aimlessly.

In your touchdown pages, that is the precept that you simply need to keep away from in any respect prices: Distraction. Once you putting too many gadgets shut collectively, you make it arduous for folks to discern one from the opposite and decide which is most vital.

And that makes it tough for folks to take motion.

10. Interruption: Pink Floyd – The Darkish Aspect of the Moon

The Darkish Aspect of the Moon is likely one of the finest promoting albums of all time. With greater than 50 million copies bought since its launch, the music from this album is as ubiquitous as sizzling canine stands in New York.

On this album, the sunshine is interrupted, inflicting it to refract and break off into a number of totally different rays of coloration. The change causes you to cease and focus in on the prism and query what happened there.

Equally, utilizing Interruption as an Consideration-Pushed Design method is all about utilizing a break to trigger thought.

Take a look at this instance from a Fast Company post:

The way in which the textual content is disrupted by the pullquote forces you to decelerate and pay nearer consideration. It additionally gives some reduction from an in any other case overwhelming wall of textual content.

On touchdown pages, Interruption can take the type of a visible factor dividing the web page, or one thing so simple as bolded textual content.

11. Dominance: Iron Maiden – The Variety of the Beast

The album cowl for the Variety of the Beast caught the attention of many a metallic document shopper when it was launched in 1982, and the album rapidly achieved platinum standing within the US. It was remarkably controversial on the time because of the spiritual overtones, nevertheless it has since change into an vital piece of heavy metallic historical past.

The duvet does a tremendous job of demonstrating the precept of Dominance. Iron Maiden’s mascot Eddie is towering over the pink satan fellow in a quite dominant place. His measurement and proximity to the little man assist create this impact.

On a touchdown web page, you’d use Dominance to show the significance of 1 object over one other, and present folks the place to take motion.

Whether or not you’re utilizing massive font in your headlines, a huuuge hero shot picture or a loopy huge CTA button, Dominance might help you present guests which touchdown web page parts are vital.

12. Consistency – The Swing Period

Right here’s one the place we needed to get slightly artistic. We took just a few packing containers from my spouse’s assortment of Time/Life’s The Swing Period information and put them collectively to show the subsequent precept, Consistency:

The design precept of Consistency is a shelter within the digital storm of visible stimuli that we’re confronted with each day. If you happen to create a constant visible expertise for touchdown web page guests, you place them comfortable.

This relates carefully to the rules of design match and message match, which entail matching the headline and model colours/photographs out of your advert with that of your touchdown web page.

Establishing Consistency between your advert and touchdown web page (in each your messaging and visible branding) units folks comfortable as a result of it reassures them that they’ve arrived in a spot that pertains to the advert they simply clicked.

13. Repetition: The Rolling Stones – Metal Wheels

I’ll attempt to chorus from making any jokes about how repetitive the Stones had change into by the point they recorded this album…

Let’s give them some credit score. They have been all hovering someplace round 50 years previous when this album got here out, and had been by way of extra good and dangerous occasions than everybody who reads this put up mixed. It’s a superb effort, all issues thought-about.

Plus, the duvet is a chief instance of the design precept of Repetition:

Metal wheelchairs, amirite? Supply: hymiesrecords.com

Repetition as a design precept helps you draw consideration to parts in your web page that you simply need to emphasize.

Take into account a long-form touchdown web page that has a number of CTA buttons. By advantage of them being repeated on the web page, they stand out as being vital.

Repetition breeds familiarity, which, in flip, drives consciousness.

14. Symmetry: The Nice Gatsby – Official Film Soundtrack

Film producer Baz Luhrmann made his model of the Nice Gatsby into an expensive visible feast. And when it got here time to place collectively an album cowl for the film soundtrack, that feeling of luxurious and extra was translated splendidly.

Supply: Ozmusiconline.com

The crisp gold and silver traces on the black background are organized in a symmetrical sample, which permits your eyes to relaxation simple. Whether or not on an album cowl, somebody’s face or a touchdown web page, Symmetry is strongly correlated with magnificence.

Acquired a high-end merchandise that it’s good to promote in your touchdown web page? Use Symmetry to present your touchdown web page guests a way of the model and class behind your operation.

15. Overlapping: Nick Drake – Pink Moon

Nick Drake’s Pink Moon album cowl is as surreal as a Dali portray, nevertheless it demonstrates the precept of Overlapping properly.

The way in which every of the weather overlap leads you to consider that they’re associated thematically.

On a touchdown web page, we use the precept of Overlapping to tie parts collectively in an effort to show their relevance to one another. As Oli says in the ebook:

When it comes to advertising and marketing, that is mostly used for price-related data (like pricing occasion starbursts) and graphical highlighting (zooming in on a product screenshot).

In different phrases, Overlapping might help you to focus on sure data on a web page that you simply really feel is perhaps helpful in serving to to persuade your touchdown web page guests to transform.

16. Alignment: The Seeger Household – American Folks Songs Sung by the Seegers

A lot of you’ll know Pete Seeger and his era-defining songs like “We Shall Overcome” and “This Land is Your Land.” He comes from a household of folks singers, and this 1957 launch on 10” vinyl is one in every of my favorites from my assortment.

Pete, nevertheless, just isn’t on this document. Simply the fam.

Supply: rymimg.com

Alignment in design hyperlinks widespread parts collectively visually to point that they’re associated or have the same goal. It’s a easy and fast strategy to flip a busy design into an organized one, and a straightforward strategy to add visible readability.

And whereas Alignment is a visible design precept, it’s additionally an overarching conceptual precept: making your touchdown web page extra congruent by aligning each factor with a single objective.

17. Continuation: My Chemical Romance – Black Parade

Oli introduced this My Chemical Romance album over — it was the one one we might discover that exemplified the visible design precept of Continuation:

Once you open the duvet, discover how the interesting-looking fellows inform a little bit of a narrative from the entrance to the again? That’s precisely the way you’d use Continuation on a touchdown web page.

Your touchdown web page ought to inform the story of the services or products that you simply’re promoting. That story ought to be visually fascinating and may say issues in the fitting order.

Your guests ought to be left with little question as to the order through which they need to devour your content material.

18. Dimension: The Allman Brothers – Eat a Peach

After the dying of Duane Allman simply midway by way of the recording of this album, the Allman Brothers pulled it collectively to create one of many biggest “jam band” albums of all time.

With a number of tracks clocking in at virtually 10 minutes lengthy, they created a soundscape as spectacular as the enormous peach on the album cowl.

Peach. ‘Trigger Georgia. Get it? Supply: sausedo.internet

There’s no manner round it — the larger one thing sounds, the extra we’ll take note of it, as evidenced by this common document. And the larger a picture is when contrasted with these round it, the extra you’ll discover it.

The peach is, clearly, a very powerful factor on the duvet, and its Dimension demonstrates that.

The identical precept applies to touchdown pages. In case you have one thing that you simply need to stand out from the remainder, blow it up, make it large, and it’ll get seen.

19. Perspective: Do Make Say Suppose – Self-Titled

Do Make Say Suppose are a Canadian post-rock band (learn: indie rock that isn’t as accessible as the remainder). They take their time revving up every music, with clear however labored journeys from one place to the subsequent.

It’s not for everybody, however for those who get pleasure from post-rock of any type, it is a band to take a look at.

The duvet artwork for his or her self-titled album is a good instance of the design precept of Perspective:

See how the picture on this album cowl carries your gaze from entrance to again? This form of visible trick can be utilized to direct consideration to one of many parts in your touchdown web page.

In the ebook, Oli gives the instance of this touchdown web page:

The background picture creates a way of Perspective on this touchdown web page, and the shape space actually pops as a result of the depth of subject pushes it to the foreground.

20. Grouping – Numerous

Because it seems, Grouping was not a straightforward precept to search out in my assortment. So with a view to show it, Oli and I pulled out a bunch of information.

Who the heck is Doug Kershaw (backside left)?

Inserting these albums in teams with related visible parts creates the impression that every album in that group is someway associated. You additionally get the sense that they’re separated from the opposite gadgets in different teams. You may additionally get the sense from this picture that Doug Kershaw is about as 70s as they arrive.

That’s what the Consideration-Pushed Design precept of Grouping does: it helps to outline boundaries and offers you a method of extra clearly defining your message. By putting related parts collectively, you create visible simplicity and cut back cognitive load.

21. Encapsulation: Fleetwood Mac – Tusk

This album, to some, completely encapsulates rock star extra. Each the music and the packaging (with sleeves designed by a sleep-deprived Lindsey Buckingham who was turning into obsessive about… no matter was close to sufficient) are examples of ego run rampant.

Don’t get me incorrect, it’s an excellent album. It’s simply bought a sure je ne sais quoi.

Supply: phoenixnewtimes.com

On the Tusk album cowl, a canine biting into some unfortunate fellow’s pants is neatly encapsulated by an summary and considerably sparse background.

Encapsulation on touchdown pages offers guests the concept that one thing is vital by enclosing it inside a container. Within the instance beneath, the shape and CTA button space are encapsulated to change into a focal factor on the web page.

Within the picture on the fitting, Encapsulation helps draw guests to a very powerful space of the touchdown web page — the world the place they’re going to present you their data!

22. Contact: John Lennon & Yoko Ono – Double Fantasy

Double Fantasy was launched simply three weeks after John Lennon was shot exterior his condominium constructing. On the album, John and Yoko maintain a form of dialog between husband and spouse, with each second observe by Yoko. (That is why I favor to take heed to it on CD — it’s a lot simpler to skip each second observe.)

The duvet conveys the sense of intimacy and earnestness behind the music:

That it’s John and Yoko is evident, however what we’re actually drawn to is the Contact being made between them. The kiss is entrance and heart, drawing the attention in direction of it with extra influence than the yellow textual content in both nook.

In design, we use factors of Contact to entice consideration, similar to the kiss between John and Yoko. This picture beneath reveals what Contact may appear like on a touchdown web page.

Your eye is straight away drawn to the Contact level between the 2 telephones, after which to the equally coloured headline.

It’s yet one more weapon in your design arsenal that will help you present your prospects the place to look!

23. Nesting: It’s as much as you!

Generally your pages can have lengthy lists of advantages and options. That is when Nesting could be employed to cut back the cognitive load required on the a part of your guests. As Oli says in the ebook:

You possibly can add some readability, cut back comprehension time and apply emphasis by way of interruption by including some hierarchy by means of indentation.

Mostly, Nesting takes the type of bulleted lists, that are simple to scan.

There’s only one factor: we really weren’t capable of finding an instance of this on a document cowl! If you could find an instance of nesting on an album cowl, present us within the feedback beneath. If we predict it matches, we’ll ship you an Unbounce t-shirt!

Making use of the 23 rules

The rules of Consideration-Pushed Design could be discovered in all places — they’re so ubiquitous that you could be not even discover them. They are often present in nature, structure, city planning, artwork, video video games, motion pictures, work and, as we’ve simply discovered, on album covers.

They seem in all places as a result of they’re efficient visible instruments — and studying how they work brings you one step nearer to guiding your guests towards that all-important conversion.

Psst. Who higher to show you than Oli Gardner, the man who’s seen extra touchdown pages than anybody on the planet? Take a look at his newest e book, Attention-Driven Design: 23 Principles for Designing More Persuasive Landing Pages.