To be used, digital interfaces need to be designed.

This is true on both a graphic level — colour; layout; interactions — as well as on a system level — flow; navigation; outcomes. The explosion in digital product design for mobile apps and web applications has been the key growth area of the last 10-15 years, but it doesn’t operate in a vacuum.

To be enjoyed, digital interfaces need to be art directed.

Art Direction may not be as common a phrase, but it’s every bit as important as Design, because it adds something that graphic and UX design alone, in all of their pursuits on clarity and usability, miss as a guiding light: emotion.

In 2010, Dan Mall updated the classic “art direction vs design” battle of definitions for the web in an article on A List Apart ( https://alistapart.com/article/art-direction-and-design/):

“Art direction brings clarity and definition to our work; it helps our work convey a specific message to a particular group of people. Art direction combines art and design to evoke a cultural and emotional reaction. It influences movies, music, websites, magazines—just about anything we interact with. Without art direction, we’re left with dry, sterile experiences that are easily forgotten….Art direction is about evoking the right emotion, it’s about creating that connection to what you’re seeing and experiencing.

By contrast, design is the technical execution of that connection. Do these colors match? Is the line-length comfortable for long periods of reading? Is this photo in focus? Does the typographic hierarchy work? Is this composition balanced?”

Even though Dan’s examples are now 11 years old, the principles are as true as ever, and the below table is also a handy rubric of clarifying the difference:

Within business or corporate contexts, the term “Art Direction” can feel more weighted towards, well, art than commerce. But nothing can be further than the truth.

Much as how a solid brand identity can give your team years of runway to work with in communications and marketing, a well-art directed website, landing page, or e-commerce experience goes well beyond the building blocks of brand elements, digital experience best practices, and imagery, and brings them together into a more effective and persuasive whole.

While it is a term far more used in the advertising industry, art direction on the web is a blossoming discipline in its own right.

In a nutshell, well-art directed websites:

  • Make a compelling use of white space to focus user attention
  • Stitches together aspects of graphic design, photography or illustration, iconography, animation, video, and copy
  • Expresses the brand in an intriguing, compelling way beyond just the literal brass tacks of the guideline
  • Considers user flows, nudges, and impressions alongside desired actions or conversions
  • Aims to evoke a feeling in the user, as much as an action or behaviour

And here are some great examples, sourced from Awwwards.

Bad Boys

Why It’s Great

  • Stark, bold, black and white colour palette
  • Breaks the expected conventions of columns, widths, and scale for an e-commerce site
  • Ties in the familiar Bad Boys brand, while also feeling 2020/21 contemporary

Links

https://www.awwwards.com/sites/bad-boys
https://bad-boys.vercel.app

International Days

Why It’s Great

  • A joyous example of animation
  • Breaks from conventional layouts without sacrificing meaning or understanding
  • Strikes a balance of “cursor controlling” while still allowing the user to navigate

Links

https://www.awwwards.com/sites/international-days
https://days.epic.net

Royal Chapel – Versailles

Why It’s Great

  • Pixel-perfect layout and copious use of white space
  • Smart integration of illustration, audio, and different interactions (top-to-bottom; left-to-right; click-and-zoom)
  • Excellent typography choices and scale

Links

https://www.awwwards.com/sites/expodcast-versailles
https://expodcast.cmbv.fr/en

Aplos

Why It’s Great

  • Unique use of video to immediately evoke the brand and demonstrate the product
  • Gorgeous typography, and a dynamic use of colour
  • Still keeps some of the essential navigation fundamentals while pushing the boundaries of scale and use of photography

Links

https://www.awwwards.com/sites/aplos
https://aplos.world

Goodfight

Why it’s Great

  • Unique, engaging use of side-scrolling “squishiness” to show photos in the lookbook without requiring the user to scroll
  • Full-screen images immediately tells the user this is related to fashion or lifestyle in the same way that full-bleed photography and either high-gloss or high-end textured paper would in the print world
  • Great, varied photography

Links

https://www.awwwards.com/sites/goodfight-shop
https://www.goodfight.shop

Proto Homes

Why It’s Great

  • Great use of animation on scroll to demonstrate the product, without distracting from navigation or usability
  • Varied layouts for headlines, captions, and body copy that break from convention, add elegance to the brand, and makes a website feel like a high-end magazine
  • Keeps the fundamental navigation structure that follows best practices

Links

https://www.awwwards.com/sites/proto-homes
https://www.protohomes.com