3.1 Color Palette Xmpro Ui Design Basics
Last updated
Last updated
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 support@xmpro.com
Go to https://xmpro.com if you want to learn more about how you can build real-time applications with our Event Intelligence Platform.
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