Week 13
Presenting Art Direction (concept, mood board, style tile and application)


Visual System

A custom set of guidelines to be used as a framework to ensure the brand image is cohesive and consistent across all assets – print and web.

Visual System
Historically, the corporate brand guidelines included specifications regarding typography, logo clearance, colors etc. While they still do this, many digital companies add specifications regarding interactions and publicly present their rules online.



The branding for your app should feel specific and memorable – all visual components (art direction, photography, illustration, color, logo, animations) need to work together to create one coherent story.


Case studies:

To help ensure your creative direction is part of one story, always start with a concept and iterate on that, rather than replicating designs you come across. Then, develop a system that supports your concept. Always check your work against your goals and ask yourself, “is this being communicated?”



Here is a process for how you might start this project. There are multiple ways of doing anything, and you should figure out what works best for you, but if you’ve never done this before, this could be a helpful way to get going.


Step 1 – Ask questions

What is your app doing? How does it differ from other services that exist in the space? Come up with one clear sentence that highlights the key concept of your brand as well as a few informative words. Avoid using subjective words like “cool” and “beautiful” and instead focus on clarity and words that are more telling. As you’re working on this, consider if there are any visual languages that correspond with some of your key terms, these tend to work better.

Example:
Abracadabra is a mystical goods shop and venue that has been around since the 1970s. Located in the Lower East Side, we wanted to capture the heritage of the shop while updating it for a contemporary audience. We explored the idea of  the occult through historic imagery and paired it with 1970s inspired typefaces reimagined for a modern audience.

Key words: austere, mysterious, classic, community events

Step 2 – What does it look like? (Mood board)

Begin researching your concept and phrases and see if you can collect informational references that highlight your idea. Create a mood board that visually communicates your concept. Avoid using images of existing graphic design and instead challenge yourself to communicate your concept independently. If you’re using found photography, make sure to keep track of who the photographer and illustrator is. It’s very helpful to be able to suggest artists to work with for the project.


Step 3 – Introduce the system (Style Tile)

With your concept laid out in words and with images, begin thinking about how it will translate into a graphic system in your site. Create a style tile that introduces the visual language. The style tile is not indicative of the actual design layout, but introduces different a system and reusable elements that can be used throughout the experience.