Art Direction for the Web: Not Just Relevant for Print Media

Are you someone who thinks that art direction is only relevant to print media? This article will help you discover the link between art and web design. It will also give you some tips on where to look to get deeper understanding and apply it in your work.

Before diving into solutions, ask yourself what the term “art direction” means to you. And try imagining it in the context of the Web.

What is art direction?

Layouts matter. And choosing a wrong typography by accident, such as the inappropriate use of the Comics Sans font, might backfire.

In an article called  “Art Directing for the Web for CSS Grid Template Areas”, the author suggests that layout, images, and typography are just the result of art direction,  but not the purpose of it. So, what is art direction really?

According to Andy Clarke, well-known digital designer, it is “the art of distilling the essential, precise meaning or purpose from a piece of content”. More precisely, it is the intention behind the design that will allow us to transfer the message and keep the artistic aspect at the same time. In other words, you adapt the content for different layouts without losing the exact and original sense of it.

How is it useful?

If you still think art direction is not relevant to the Web, think about the last time you wrote a blog article. Or the last time you drew a comic out of boredom in your little sketchbook. This is where art direction becomes useful. When you create a comic book, your goal is to convey a message in the form of a story. This same approach can be applied to blog articles. Indeed, these can also be structured for the Web, according to the needs of the publisher.

In web adaptation, you need to think about responsive images, image size and the use of the HTML <picture> tag. However, there is much more to art direction then just art direction tools. And this brings us back to the idea of designing web pages in a way that would not distort the original message.

That is right. Art direction does not just help you tell a story. It can also help you promote your product!

So how do we represent art direction on the Web?

Indeed, it is important to tell the story in a correct way, no matter what screen it is being displayed on. When dealing with web design, you have probably already heard of CSS grids.

Grid-template areas are a type of CSS grid. More specifically, it is a method for arranging your elements in the layout. You may have seen the use of grids on magazine pages. Such layouts are easy to produce and can demonstrate how easily CSS grids can be compared to other methods.

The problem encountered in this topic comes from the relationship between the layout and content. Indeed, when designing for the web, we tend to use templates with little consideration for the relationship between layout and content. Even though your content is responsive, it might not be in line with the overall message as it could be using different approaches to grid-template areas.

I hope you enjoyed this article and that grid-template areas will help you in your future endeavours!

Article written by Adriana Vrablova, CAWEB Master’s student.