How art direction in web design creates more engaging experiences

Profile picture of oliver lindberg

4/12/2021

Illustration by Anita Goldstein

Unlike print, web design doesn’t usually receive art direction. Leading designers discuss why, and what we’re missing as a result.

8 min read

A mood board for a fashion eCommerce website, showing various screens and silver, metallic elements

Stay informed on all things design.

Thanks for submitting!

Shaping Design is created on Editor X, the advanced web design platform for professionals. Create your next project on Editor X. 

Get our latest stories delivered straight to your inbox →

Advertising and print design have a long tradition of art direction. On the web, however, a lot of websites still look very similar and lack the kind of consideration that we got accustomed to in graphic design.


By applying art direction to our web design projects, we can create powerful works that are striking, memorable and stand out in today’s busy digital landscape.


Designer Andy Clarke, author of Art Direction for the Web, describes it like this: “[Art direction] uses design techniques to intentionally evoke an emotional response from someone when they read an article, use a product, or visit a website.”


We chatted to leading designers to find out how art direction is evolving and how modern front-end techniques are now making it possible to create innovative and inspiring layouts that until recently were unthinkable.



Combine function with feelings


Back in the day when Flash ruled the web, we’d see a lot of playful and expressive digital experiences. Since then, the web has evolved to be more rational – dominated by systems and consistent design languages, data, and best practices.


“It’s true that digital went too far during those early days,” believes David Navarro, executive creative director at full-service creative agency Ueno (recently acquired by Twitter). “Fortunately, we started to build structures to make experiences more centered on what users need than what brands have to say. It guarantees the solidness of the medium, but in some cases it leaves the expressiveness of art direction aside.”


David finds that we’re often too focused on following web design trends and best practices, while there’s actually a huge opportunity to go back to a more emotional digital space and combine function with feelings. Art direction can play a massive role in that.


“Long-term memories are formed through an emotional response,” David explains. “Usually, people come to websites, use digital products, and interact with digital experiences with a purpose in mind. It can be very transactional and functional – checking the news or looking for information about a product or service – and with art direction we can help them do that in a way that makes them feel better, entertained, or engaged. It provokes an emotion that lasts.”





"Story should always be given priority over format and since every format has its strengths and weaknesses, for me, the best experiences utilise a variety of mediums."

- Graham McDonnell, senior director of brand creative at TIME.



Find out what sets your project’s brand apart


Before jumping into design, it’s crucial to take the time to understand what brand and business values your visual palette needs to convey, advises designer Paul Woods, CEO and chief creative officer at global design consultancy Edenspiekermann.


“Typically, I will never lay down a single pixel before we have aligned with the client on three design principles – no more, no less – and we have done a workshop to define a visual compass of dos and don’ts using reference material,” he reveals.


Meanwhile, for Pascal Deville, co-founder and creative director of full-service creative agency Freundliche Grüsse, art direction on the web means respecting the purpose of a website and getting the user into the right mood.


When you develop your concept, Pascal suggests creating freely – without grids, limitations or best practices in mind. Try to set the overall look and feel first. Find the right ‘rhythm’, and only then dive into the details and look for repeating patterns like hierarchies, colors and typefaces.





Figure out the best way to communicate your message


“Think about what audience you’re designing for first,” Pascal recommends. “Are they visiting a website to get information quickly, or do they want to get entertained?”


Pascal, who founded the Brutalist Websites directory, firmly believes that less is more.


“Take away stuff until it gets bland or broken,” he advises. “Don’t hide too much – users won’t experience websites as a whole. Make things obvious, unless you want them to explore it by themselves. Set the tone of your language right: if you’re polite elsewhere, you should be polite on the website too.”


Paul Woods favours a similar approach and warns against getting bogged down with functionality from the start.


“It sounds like a cliché, but original visual concepts come from tinkering around, trying out unexpected combinations, and thinking blue sky,” he points out. “They do not come from out-of-the-box UI kits, looking for inspiration in the web design echo chamber, and certainly not from looking at Dribbble, sorry! For initial visual concepts, I would encourage designers to think in style boards rather than interfaces to avoid getting stuck in details.”





Create clarity and emotional connections


A few years ago, creative director and advisor Dan Mall worked with media company Dotdash, formerly known as About.com. The site had been around since the late 1990s and – at the start of 2016 – was still the 40th-largest site on the web in page views. It was a big portal where you could find information about everything, but it was starting to show its age and traffic started to plummet.


“CEO Neil Vogel described it like this: ‘No one wants to read about symptoms of colitis on the same site you’re learning how to make beer-battered chicken’,” Dan recalls. “The site was generic; there was no brand equity or affinity.”


Dan’s design collaborative SuperFriendly helped the company break the large portal out into smaller subject-matter-specific sites, each with its own art direction. As a result, Dotdash nearly doubled revenue in 2019 and became the fastest-growing publisher online.


“Good art direction lets you know you’re in the right place and draws people to it,” Dan explains. In 2010, he wrote a seminal article about art direction for A List Apart and defined it as combining art and design to evoke a cultural and emotional reaction. In the same year, Ethan Marcotte debuted the idea of responsive design.


“Ethan gave us all a very different – and better – way to experience the web on many different kinds of devices,” Dan comments. “Because the ways to access the web have grown, art direction on the web has to exist within a system. More than ever, good art direction means communicating the same emotion, agnostic of form factor.”





Employ storytelling techniques


Graham McDonnell, senior director of brand creative at TIME, believes it’s all about storytelling.


“Ideas are worth nothing unless they are communicated effectively,” he says. “Digital design is just the latest vehicle we use to share information, and storytelling is the secret sauce that’s necessary to separate the signal from the noise. Story should always be given priority over format and since every format has its strengths and weaknesses, for me, the best experiences utilise a variety of mediums. Content may be king, but what it's housed in is its castle.”


David Navarro agrees. His approach to art direction comes from his background in film and storytelling.


“People are wired to like stories,” he explains. “That’s why I come at design like a movie and apply storytelling parameters: structure the perfect hero journey, set the stages your user or hero will go through, and then add the dramatic, emotional components that make the story engaging, appealing and memorable.”


The elements to build empathy with the user are the same that you use in art direction: typography, color, illustration, photography, as well as website animation (which plays a prominent role) and sound, a critical part of art directing a website or app, which David says is usually forgotten.


Paul Woods recommends thinking in motion from the start. The web isn’t static, so our visual explorations shouldn’t be either.


Micro-interactions, animations and transitions are fundamental to creating the experience,” he believes. “At least half of the time we put into early visual explorations is spent in After Effects, rather than off-the-shelf prototyping tools, to define an interaction palette that is unique to the predefined design principles.”





“Even though the web seems ubiquitous today, it’s just past three decades old. It does feel like the web is still trying to establish itself and find its own path.”

- Chen Hui Jing, a UX developer at Shopify



Treat the web as a unique medium


The reason art direction on the web is only now getting the attention it deserves is not so much that it hasn’t been valued as much as in print (although that’s true as well). It’s because print as a medium has had over 100 years to mature and develop while the web is still quite young.


“Even though the web seems ubiquitous today, it’s just past three decades old, which makes it one of the youngest mediums we can design for,” reminds us Chen Hui Jing, a UX developer at Shopify. “It does feel like the web is still trying to establish itself and find its own path.”


On the web, designers and developers are also faced with a unique set of challenges and constraints.


“The web provides a canvas that is unpredictable and fluid, not only in terms of physical dimensions, but also in terms of data transmission,” Hui Jing explains. “There is no guarantee that our designs will be presented to the end observer in exactly the same context as we planned for. The design may be viewed on a 60-inch smart TV or an inch-wide smartwatch. Connection issues may result in some things not loading. To me, this is simply the nature of how the web behaves.”


Rather than spending all our effort trying to force our designs to appear in a certain way, Hui Jing recommends focusing on making them as robust as possible. Layer on additional features for those who can afford them, but ensure that even the most basic experience is well-thought out. For Hui Jing, that is the true hallmark of good web design.





Art direct layouts with modern web technologies


In recent years, the possibilities of art direction on the web have changed significantly. We now have the tools to create amazing layouts that previously could only be designed in print. Specifically, new CSS technologies like Grid Layout and Flexbox have given designers very specific control over how layouts behave in ways that did not exist before.


“Web designers can now do what graphic designers have done for decades,” explains freelance front-end developer Hidde de Vries. “They can size content areas based on proportions, place content in predefined grids, use whitespace intentionally and align different bits of content with each other.”


While we can now leverage the tradition of graphic design on the web, it’s important to realize, however, that there are major differences. Art directors in print could make decisions based on fixed canvases, standardised colors, and nearly fixed word counts. On the web, things are a lot more fluid.


“This is the exciting bit!” Hidde exclaims. “It makes art direction more dynamic. And the creators of CSS have our back, as they continuously consider flexibility. With CSS, we have the tools to create layouts that work in that wide range of circumstances. In Grid Layout and Flexbox, sizes can be set in flexible units, precisely so that we can optimise for knowns and unknowns.”



Hidde de Vries recreated a poster originally designed by Dutch graphic designer and grid pioneer Wim Crouwel in 1962. Because we don’t need to fill every single one of the 24 cells when we use CSS Grid, we can play with leaving some empty, which results in a more striking design.



Make truly considered design choices


Art direction is so much more than just visuals. It’s about having a sense of how all the elements work together to create a cohesive experience that engages and connects with our users. Art direction – along with great copywriting – can help us create something unique that stands out from the noise.


We therefore need to design with intent and be fully aware of all the choices we’re making, keeping the target audience in mind at all times. Modern web technologies have finally given us the tools necessary to create amazing, inspirational web design.


For advertising agencies, storytelling and expressiveness is at the heart of the way they create. It’s now up to digital agencies and in-house teams in particular to follow suit and understand the needs of the functional and emotional mind in order to design for both.