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 and will 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.
Now try imagining it in the context of the Web.
What is art direction?
Layout matters, so choosing a wrong typography by accident, such as the inappropriate use of the Comics Sans font, might backfire on you. A recent article entitled “Art Directing for the Web for CSS Grid Template Areas”, suggests that all 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”. 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.
Whether you still think that art direction is not really relevant to the Web, think about the last time you wrote a blog article or or 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 the message in the form of a story. This same approach can be applied to blog articles, since they 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, with some of these images inserted into the web page using the <picture> tag in HTML. However, there is much more to art direction then just art direction tools, which 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 the correct way, no matter what screen it is being displayed on. As a part of web design, you have probably already heard of CSS grids.
Grid-template areas is 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. Yes, when we design for the web, we tend to use templates with little consideration for the relationship between layout design 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.
If you find this topic interesting and relevant to your skills and job, have a look at the article : Art Directing For The Web With CSS Grid Template Areas where the author walks you through the detailed development of a layout using columns and rows in a CSS grid.
I hope you enjoyed this article and that grid-template areas will help you in your future endeavours!
For more on web design, have a look at an earlier article entitled Mobile Development: The Right Tools for Getting Started.
Source :
https://www.smashingmagazine.com/2018/04/art-directing-web-css-grid/#telling-stories-through-art-direction