2.3 Visual Hierarchy - XMPRO UI Design Basics

To get access to the full course and resource links mentioned in the video, sign up at https://courses.xmpro.com.

Need help with creating your XMPRO apps? Send an email to [e-mail]

Go to https://xmpro.com if you want to learn more about how you can build real-time applications with our Event Intelligence Platform.

Transcript

it's important to create

visual hierarchy in your designs to help

your users

understand what's most important nobody

likes to interact with a monotonous wall

of text on a screen

with ui design it's important not to

miss the forest for the trees

it's so easy to get bogged down in

choosing colors and font sizes

and to forget that there are really

important questions that you actually

need to ask

to ensure that your interface serves the

people that it's meant for

here are a few questions to ask yourself

when creating a visual hierarchy

firstly what is the story that your page

needs to tell

are you designing an app to help detect

equipment failure for something like

slurry pumps

then your page needs to tell the story

of the pump's real-time health

next you should ask what does the user

need to know first

if you're designing a screen for pump

health the user might want to see a

health score

which is an easy metric for them to

gauge the pump's current condition

then you should ask yourself which

elements will give the user a general

overview

and which are more detailed the user

might also want to see the work order

history for the pump

but that can be lowered down on the page

let's take a look at this design on the

right for rocket invoicing

you'll see that they have cards with key

metrics at the top of the screen

it's important to organize elements from

most important to least

important when you're designing an

interface

overview elements like health scores and

kpis

should generally be placed above the

fold

above the fold is an old term that comes

from the newspaper world

and describes printing something above

where the newspaper was folded

when designing for digital applications

this generally means

before the user needs to scroll now

depending on your geography

users read from either left to right or

right to left

and it's important to understand this

when designing your interface

if your users read from left to right

you want to put the most important

information in the top left of the

screen since that's what they're going

to read first

now let's look at how to reinforce

visual hierarchy in your designs

first we're going to look at contrast

then repetition

then alignment and then proximity or

crap

for short the mobile app design on the

right

is a great example of how you can use

contrast

to direct the user's eye to what is most

important

there are various ways to add contrast

to a design

in this example the designer used color

to make

elements that are important stand out

you can also add contrast to the size of

an element

using outlines fills or different font

families and weights

one way to see whether you have enough

contrast in your interface

is to do the squint test if you squint

and try and look at the design

you'll see that something clearly stands

out and that's the orange button that

says subscribe now

while this test is quite a rudimentary

way of evaluating your interface

it will help you get an idea of whether

there's enough contrast for the

important elements to truly stand out

now let's look at repetition why would

you want to use repetition in an

interface

well it helps the user know what to

expect it also creates consistency

and it groups related elements together

because they're styled in a similar way

the online learning platform design on

the right is a great example

of how you can use repetition to create

an

interface that is really well organized

and easy to use

next we're going to cover vertical and

horizontal alignment

in your interfaces so a common mistake

that i see

untrained designers make is more often

than not

center aligning text many people think

this creates

balance because there's equal space to

the left and to the right of text

but if you consider that most users

either read from left to right

or right to left aligning your text to

the left or right

is probably a more practical way of

doing things

so let's look at vertical alignment

you'll see that there are some bright

teal lines that i've added to the design

on the right

the words light startup growth and mega

are all aligned

at the bottom of the text or what is

called the baseline

the paragraphs just under those titles

which say

for those just starting out and best for

growing businesses

those are aligned at the top or what is

called the ascender

you'll also see that the cards align at

the top

and at the bottom and they're all

exactly the same height

this is called vertical alignment it's

when the center

top or bottom of the elements align on

an invisible

horizontal line if the elements happen

to be different sizes

you'll need to decide how to best align

them vertically

now let's look at horizontal alignment

this is when the center

left or right side of an element aligns

on an invisible vertical line in most

cases you'll use

left align for text if your user reads

from left

to right let's discuss proximity

so when you group elements closely

together they visually tell the user

that they're related in the examples on

the right

the teal circles form one group and next

to them we have the same number of

circles

but these are blue and there's a gap

between two groups of blue circles

this just demonstrates how your eye

groups elements together based on their

proximity

and how effectively grouping elements

can help a user understand

and navigate information faster

now it's time to get your pen and papers

ready because in the next video

we're going to start drawing wireframes