Great Web Art Direction

Full blog post: https://stackcreative.co/great-web-art-direction/

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

Continue Reading: https://stackcreative.co/great-web-art-direction/

Founder & Creative Director, Stack Creative in Toronto. Find us online at www.stackcreative.co.