Previous
¶ Art Direction
¶ What it is
Art direction is where a brand or product’s identity and personality are defined, and using artefacts to illustrate the moods and feelings of the personality traits. Then use typography, colours, icons, visual effects, and the tonality of the copywriting to reflect those moods. Art direction will be used as a foundational guideline during graphic design.
¶ Why it is useful
Jumping straight into the visual design without having an art direction usually causes the look and feel of the design to be bland, lacking in personality, and generic. Moreover, the UI may lack a connection with the brand. They are creating an art director before moving on to visual design to fix the issues listed above and align expectations within the design team and stakeholders.
¶ When to use it
Most companies have brand guidelines when the product or brand does not have a UI / visual style guide or design system. Still, they were designed without consideration of digital product visual style; in this case, creating a digital product art direction with a connection to the brand guideline is strongly recommended.
¶ How is it done
-
Define the mood and feeling.
- Understand the brand and target audience
- Define brand traits and personality
- Create mood boards by using visual references to reflect brand personality
- Express the mood & feeling with design elements such as typography, colours, icons, illustration, shape, and shadow.
- Use the design elements as a foundation, and build UI components.
- Use the components and styles to create mock-up screens.
- Present the art direction
¶ Do's & Don't
Do's
- Build a strong connection between art direction and the brand.
- Use story-telling to present the brand connection.
- Motion is a more expressive design element, defining and using motion in art direction is important.
Don't
- Don’t start working on the design until the mood and feelings are defined.
- Don't only consider the preferences of the target audience in the design.
¶ Tools needed
- Figma
- Adobe Creative Suit
- Powerpoint / Keynote
¶ GenAI Tool Use Case
¶ Empowering Artistic Moodboard Creation
Designers can simply input the brand's identity and initial design into the Moodboard. Firefly will then analyze the Moodboard and generate a template that includes color schemes, layout, and other design elements. Describe the desired effect, input it into Adobe Firefly, generate an image, and the generated emotional version can be used to help generate it in the future
Key Steps Tutorial:
- Provide a description of the required images
- Adjust the image, select, and download the image after completion
- Put it into your own Moodboard
- Drag the Moodboard into the Generate template to generate a template. Get template
Read More:
How Adobe’s new Firefly will change design
Other Inspirational Tool:
¶ Useful Tips
¶ Defining the mood & feeling
The first step in creating an art direction is defining the mood and feeling of the brand or product. This includes understanding the brand and target audience, identifying the brand personality traits, and creating a mood board for visual alignment across the stakeholders.
Art direction should build based on the brand value, purpose, and target audiences of that brand. A set of personality traits should also be defined, so they are less abstract and easy for designers to use as briefly. This information can be defined during a brand workshop.
After the brand workshop, the designer should create mood boards to use more concrete references to visualise the mood and feeling. This will help align the stakeholders on how the mood and feeling will be translated into visual elements.
¶ Express the mood & feeling with design
Using the Information from the brand workshop and the mood boards as brief, the designer then has to express the mood and feeling with visual elements.
Those elements include:
- Colours
- Typography
- Graphic design (Illustration, icons)
- Shapes
- Spacing & layout
- Motion design
- Photography
- Visual effects (Shadow, blur)
Using these elements to create UI components, concepts, screen mockups, and UI animations.
¶ Presenting the art direction
The final step is to build a coherent presentation to present the art direction. Storytelling is a great way to present a convincing art direction.
Art direction presentation should start with a recap of the brand workshop, demonstrate how the mood and feeling are decided, also include the mood boards.
The next section should be the introduction of a theme of your art direction. The theme is used to build the connection between your design and the previous section. From there, introducing the visual elements such as colours, typography, graphic design, etc.
Finally, reveal the components, UI concepts, and mock-ups built with the visual elements you presented.