3.1 Color Palette - 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

i want to bust some myths about creating

color palettes

you might think that you need to have an

artistic flair or an eye for design to

create a good color palette but that's

not true

there are very specific rules and

guidelines that you can learn to help

you create

great color palettes every time even if

you don't consider yourself an autistic

person

you might have noticed a change in

interface design over the last year or

two

many applications now come with a dark

and a light theme so which one's better

at the moment even the experts disagree

so according to nielsen norman

for users with normal vision light mode

actually leads to better performance

most of the time

but when we look at google's material

guidelines

they say that dark themes help to

improve visual ergonomics

by reducing eye strain adjusting

brightness to current lighting

conditions

and facilitating screen use in dark

environments

dark themes also tend to conserve

battery power because devices with oled

screens

can turn off black pixels on the right

you'll see an example of both light

and dark themes for the xmpro mobile app

so how do you actually create a color

palette

i'm going to take you through two

examples one for a light theme

and one for a dark theme first you want

to start off with a primary color

this color can be your brand color or

any particular color that you would like

to include across the interface

one way that you can use this color is

to include it as an accent

to emphasize elements like buttons and

links

now let's look at semantic colors these

colors are used to show

warnings errors success messages and

more information

typically you have green red yellow and

blue

but this can be anything you want just

remember that green

is typically associated with success red

with an

arrow yellow with a warning and blue

with more information

but this can really vary based on your

preferences

then we have neutrals i recommend having

at least

three options to work with for

backgrounds borders and text

finally we have data visualization

colors these represent data in various

formats

we've actually done an entire video

dedicated to just this topic coming up

in the next module

what you'll notice here is that the

colors we've chosen are what is called

visually equidistant from one another

this means

that they are easy for you to

distinguish between the various colors

another thing to note is that the colors

for the light palette can actually be

quite saturated

there aren't a whole lot of constraints

around saturation

on a light theme but that's very

different when you create a dark theme

now let's take a look at a dark color

palette

similar to the light theme you'll choose

a primary color

semantic colors neutrals and data

visualization colors

and as i mentioned if i flick between

the light and dark palettes

you'll see that the dark palette is a

lot less saturated

according to google's material

guidelines using

highly saturated colors on a dark

background can actually create

optical vibrations that make it

difficult for users to read

one important thing that i haven't

mentioned yet is that it's really

important

to consider accessibility when choosing

a color palette

a good ui design is accessible to as

many people as possible

and this includes low vision users

one way to help improve readability for

users with vision restrictions

is to use a contrast ratio as

recommended by the web content

accessibility guidelines

so in this example on the right you'll

see the top card is much harder to read

than the one beneath it

the typeface font size and font color

are exactly the same

the only difference is the contrast

between the background and foreground

colors

so what are the contrast ratio

guidelines

while for normal text which is around 18

pixels in size

the guidelines recommend a contrast

ratio of at least 4.5 to 1.

for larger graphics and other interface

components like icons

you need a contrast ratio of at least

three to one

this is especially important for dark

themes

now let's look at how we can improve

usability

for color blind users

an important thing to do is to not rely

on color alone when showing important

messages like alerts or warnings

it's best practice to combine the use of

a color with an

icon as you can see in the mailchimp

example on the top right of the screen

where possible avoid using either red

green or blue purple color combinations

this is quite difficult when you want to

show green messages for success and read

for warnings

but if you do decide to use those colors

it is important to add

icons to those messages to help

colorblind users understand what they

mean

another way that you can help these

users with data visualizations

is to use patterns and textures in your

charts versus just

solid colors this will help them

differentiate the various series in your

data

now let's take a look at what charts

look like to colorblind users

there are many types of color blindness

and this is just one example

but as you can see the blue and purple

become pretty much the same color in the

color blind version on the right

this was actually done using a color

blindness simulator that i've shared in

the resources below

and i'll take you through in a second

before we look at all the helpful color

padded resources i've gathered for you

there are a few important considerations

when it comes to creating

dark uis firstly you want to use a dark

gray

rather than black as the primary

background color for your dark ui

the background should also be dark

enough to display white text

which means that it needs a good enough

contrast ratio

ideally 4.5 to 1. you also need to add

ample white space or negative space in

this case

between elements to give the design some

breathing room

and as i mentioned earlier you want to

avoid using highly saturated colors

because they can cause optical

vibrations and you need to be careful of

over using your accent colors on a dark

theme

now let's look at a few tools that you

can use to help you generate color

palettes

even if you're not a designer the first

one is called

palex it's an automatic ui color palette

generator

and what's great about this is you can

add a base color

so let's say we have teal as our base

color

we can update it and it'll give us a

full spectrum color palette with various

shades

this gives you a whole lot of options to

work with

the next tool is called eva deep

learning color generator

so let's say i choose the same teal as

my primary color

this will give me semantic colors based

on the primary color that i used

i can even choose between a light or a

dark theme

this is a really great free tool if

you're looking for semantic colors that

fit your primary color

then we have the material design color

tool from google

let's use that same teal again and then

choose a secondary color

google will generate light and dark

shades for each of them

you can also export your palette and see

whether the colors adhere to

accessibility standards

then we have the color blindness

simulator that i mentioned before

so if you don't have a color vision

deficiency it can be very difficult to

imagine what it's like for someone who

does

what you can do here is take a

screenshot of your color palette

and upload it to this area over here you

can then choose from different types of

color deficiencies

and this will show you whether it's

still accessible for users

then we have a handy tool called the

color contrast checker

at adasitecompliance.com you enter a

color into the foreground

and another into the background and it

will show you whether this actually

passes the 4.5 to 1 or 3 to 1

recommendation ratios

so what do you do when the colors you

have don't actually meet the

requirements

well then you can use this last two on

the list which is called the accessible

color generator by learn ui.design

enter the closest variation of the color

you want to use

and the color you want it to contrast

against this will give you a compliant

color combination

by generating the closest variation to

the colors that you've given

now in the next video i'm going to teach

you the basics of typography