Visual design

Submitted by sylvia.wong@up… on Thu, 06/08/2023 - 19:13

Visual design is an important part of UX design. The usability of a product is dependent on the user’s eye being drawn to the correct information and functionality.

The primary purpose of graphic design is to:

  • Create a clear visual hierarchy of contrast, so you can see at a glance what is important and what is peripheral.
  • Define functional regions of the page.
  • Group page elements that are related to see structure in the content.1

In this topic, we will cover:

  • Design fundamentals
  • Creating a design portfolio.
Sub Topics
A diagram showing the fundamentals of design

Design fundamentals impact the success of the UX design. Below are some of the fundamentals of design.

Consistency
  • Establish a layout grid and a style for handling your text and graphics.
  • This will build rhythm and unity across the pages.
  • Repetition is not monotonous. It creates an identity and makes the UI intuitive.
Contrast
  • Create a strong, consistent visual hierarchy.
  • Emphasise important elements.
  • Lead the user’s eye through the page.
  • Overuse will lead to a “clown’s pants” effect.
White space
  • Is the ground field behind the figure elements on the page.
  • All graphic design is the management of white space.
  • Use areas of nothing to expose something.
Style

Should be:

  1. Evolving through a natural consequence of consistent handling of content and layout.
  2. Conventional.
  3. Logical.
  4. Comfortable.

Should NOT be:

  1. A mixture of imported elements.
  2. Overpowering.
  3. Eccentric.
Simplicity
  • Reduce the number of graphic elements.
  • Provides clarity.
  • Imperative for vision-impaired users and cognitively disabled users.
  • Simple language and navigation.

Watch the video below that explains the importance of the visual aspect in UX design.

The visual design aspect is an important part of presenting a UX solution to your client. A portfolio is a clean way to show your client your ideas.

What can we include in a portfolio?

1. Wireframes/prototypes

It is good to include what the UX solution will look like, or at least how it is taking shape. Include you basic low-fi prototypes to give the client an idea of how you will meet the users' needs.

2. Moodboards

Moodboards are a collection of:

  • Colour palette
  • Fonts
  • Images
  • Icons
  • Features.

The mood board is created from the persona. A great way to start a mood board is by making a mood statement.

Mood Statement gif, © Medium

You can connect colours, fonts, images and features with the emotions you would want the user to feel.

Here are examples of what to include in the mood board:

  • The colour palette is from coolors.co
  • The mood boards are from milanote.com and JustinMind.

Color Palettes, © Coolors by Fabrizio Bianchi

1 of 12
 

'Moodboard. Terracotta.' moodboard template designed by Noémie. Shared via Behance.net.

Interior Design Moodboard Template. Shared via Milanote.com.

Fashion Moodboard Template. Shared via Milanote.com.

Style Tile moodboard template designed by Mat from Denver. Shared via Webflow.com.

3. Style Guide

The visual elements are presented in the portfolio in the form of a style guide. The style guide includes the details that sit out of the mood board. These include the font, icons, logo, heading hierarchy etc.

Here are some examples of style guides provided by Bashooka.

UI style guide designed by Cupi Wong for AfterShip, © AfterShip

Branding WIP designed by Thanh for Salesforce Design, © Salesforce.com, inc.

Deskmetrics UI Style Guide designed by Mateusz Dembek for Redbrick, © Redbrick Technologies Inc.

Duolingo Design Guidelines designed by Jenny Cha for Duolingo, © Duolingo, Inc.

1 of 12
 

Like with every aspect of the UX design process, you will need to test your visual design.

Testing a visual design varies. If you ask users for the description of a website as a whole, showing users a page for a few seconds and taking it away can be a good test. Whereas if you are testing an icon or font, that process will gather the users' feedback.

Dreamstate Poster Moodboard Template. Shared via Milanote.com.

A dual monitor setup on a desk, in a dimly-lit office

Portfolio

Instructions

Create a portfolio to show the client using your Grove restaurant solution prototypes.

Your task is to:

  1. Choose a mood board program.
  2. Create a portfolio including:
    • Typography
    • Images
    • Colours
    • Style guides
    • Moodboards.
Module Linking
Main Topic Image
Over-the-shoulder view of a person using an app on a phone
Is Study Guide?
Off
Is Assessment Consultation?
Off