Art Direction within Product Design…Why is it important?

Florencia Rodriguez
REWRITE TECH by diconium
5 min readJul 8, 2021
by Zach Key on unsplash

My major while in university focused on Art Direction and Design. I have been working as an Art Director on and off throughout my journey. At times, my focus has been on campaigns and online work.

I have noticed how Designers sometimes forget the importance of art direction or neglect it as a whole. This is because their attention goes towards the focus of technicalities. The other way around, Art Directors neglect details as they worry about the whole picture.

The cohesiveness of the design is then not as strong without being able to look at the whole picture. The larger the project is or gets, the more discrepancies there will be without an overview.

What is Art Direction?

Art direction is the supervision of the visual appearance of artistic work. Art Directors work in advertising, marketing, fashion, publishing, television, and film. Their task is to unify the vision of the project they are working on.

“Art Directors are in charge of the visual appearance. They take care of how the project communicates visually. They oversee how visuals stimulate moods. They check on contrasts features and psychologically appeals to a target audience. An Art Director makes decisions about visual elements. For instance, what artistic style(s) to use, and when to use motion. At times, an art director handles solidifying the vision of the collective imagination. They resolve conflicting agendas and inconsistencies between the various individual inputs.” — WebArchives.org

Out of all the challenges Art Directors face, creating final imagery out of their desired moods, concepts, messaged, and draft ideas are quite the hurdle. During the brainstorming process, art directors, the team, and clients explore ways the finished piece could look like. They are responsible for solidifying the vision.

Art Direction vs Design approach

There are differences between how Art Directors and Designers approach their work. Art Directors focus on the type of message, emotion, and what they are doing sends the right message. Designers focus more on technicalities, patterns, and accessibility.

An Art Director will ask whether their visual approach feels good. Or if the colour scheme they are using fits the brand. They check if the typography conveys a message without using actual words. They look if the design is balanced, or if the concept conveys the message of the brand.

A Designer will ask whether their approach looks good. They check if the colours being used work well together for the medium. They check that the typography has the correct hierarchy and the weights are being used according to the context. They will ask themselves if the visual align with the brand guidelines. They will wonder if the layout provides a natural rhythm for the eye.

Why is it important?

The focus of Art Direction versus Design differs on the perspective. Art Direction guarantees a coherent experience to the user across all media. Design guarantees technicality across the design. To find the art direction and your perceptual patterns, do the following techniques to funnel your approach:

Moodboards

A mood board is also known as an inspiration board. It is a collage of ideas that are used in fields like advertising, fashion, and graphic design. They help as an exploration of different visual themes. These help designers find the right direction for their designs. Mood boards provide a solid foundation for the emotional experience.

There are many benefits of creating mood boards before getting into the design part. They will help create a strong foundation and the basics of what the end work will look like. These also help to have an overview while doing a competitor analysis.

Moodboard will allow easier collaboration. They help to involve the client early on in the process and to have a clear vision. Canva has a great post on tips about what to do when creating a mood board if you haven’t done one before. Tools that could help you create mood boards (outside of Adobe Programs) include Mural.co, Niice.co, The Matboard, Style Tiles, Moodboard, & Moodzer.

Style tiles

When the art direction is set, style tiles help to dive in deeper to help find variations. Style tiles lay in the middle between mood boards and comps, while one is too vague, the other one is too literal. Style tiles establish a direct connection with actual interface elements without defining layout. Style tiles open communication with the client or product owner. They help transition already established brands into the web, for instance.

The word “mood” is often associated with brand and identity design. The word “style” was chosen to mirror “cascading stylesheets” and reinforce that Style Tiles are specific to Web design. — styletil.es

Style tiles provide recommendations for solving your client’s challenges. They are not necessarily for giving them exactly what they are looking for.

[Style tiles are] a catalyst for discussions around the preferences and goals of the client.” — Samantha Warren

Example from BLDR on dribbble.com

What can be included in the Style Tile?

The main things that you need to add to your Style Tile are:

  • Colour: Colour Palettes — Focus on the shades.
  • Typography: It should include weights and sizes.
  • Button Styles / CTA: What is the styling of the button and link? Add some examples.
  • Shape and layout: Here you could add some examples of how it fits the grid of your layout
  • Iconography: What kind of style of iconography will you be using
  • Photography / Illustration: If a brand is already defined, add some images or illustrations to your tile to bring it all together.

Element collage

An element collage is a collection of small elements that belong to a larger design puzzle. It is about the visual essence. Within the collage, there is no specific logic or order. The intention is to convey a feeling of the website or product.

“Element Collages are a deliverable I use to communicate design direction while providing some context to the style. They combine elements together, such as typography, color, icons, imagery, and components to display how the style could be implemented.” — Dan Mall

https://dribbble.com/shots/14667116-Dark-Theme-UI-Elements-Design

The distinction between the three methods lies in fidelity. You will be able to decide with your colleagues and clients when using these funneling techniques. as they will open up the conversation.

Sources

Dan Mall
Art Direction and Design
November 02, 2010
https://alistapart.com/article/art-direction-and-design/

Wikipidia
Art Director
https://en.m.wikipedia.org/wiki/Art_director

Marcus&AD
There is a Difference Between Design And Art Direction.
https://medium.com/@MarcusandAD/there-is-a-difference-between-design-and-art-direction-a807b69f819b

Style.es
Style Tiles
http://styletil.es/

Creativebloq.com
The web designer’s guide to style tiles
https://www.creativebloq.com/web-design/style-tiles-4132333

Amazeelabs.com
The Element Collage
https://www.amazeelabs.com/en/journal/element-collage

--

--

Florencia Rodriguez
REWRITE TECH by diconium

I’m Flo, a UI/UX Designer, specialising in Design Systems, Accessibility, and Art Direction. I am based in Berlin, Germany. www.florodriguez.com