4.2 Chart Styling - 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

in this lesson

i'm going to share some best practices

and useful tools

to help you style your charts for the

best user experience

let's look at chart text so when adding

a chart to your interface it's important

to use chart text

to give your users more context about

the data that they're looking at

you do this by adding descriptive

headings labeling both your x

and y axes adding labels to your data

and using legends now while this seems

like an extra tedious step when you're

creating your charts

it might mean the difference between a

user understanding the data

or not so in my view that makes it worth

it

when adding text to your chart you also

want to use bold sparingly

to emphasize key elements

and remember from the color palette

video where we discussed using

patterns to help users with restricted

vision differentiate between series

so how do you actually choose colors for

your charts well

i recommend another handy tool from the

team at learnui.design

it's called the data visualization color

palette generator

now depending on the data that you have

and what it is that you want to show

you're either going to generate a

palette that is

a series of colors that are visually

equidistant

like we had in our examples or you're

going to do variations of a single hue

or divergent colors

so as i mentioned visually equidistant

means

colors that are equally different to

your eyes

or colors that are easily

distinguishable from one another

think red and blue yellow and green

purple and orange this is ideal when

you're trying to do things like pie

charts or

grouped bar charts or multi-line charts

to use the palette generator choose how

many colors you want to generate

select whether you want to use a light

or a dark background

and then you can also add in colors on

both ends of the scale

if there's a specific primary color that

you would like to include

now let's look at the single hue scale

so this is useful

when you want visualizations where you

represent a single variable

but you show a darker variation as the

higher value

and a lighter variation as the lower

value

and finally we have a divergent scale so

think of creating a map of the usa with

republican and democratic voters by

state

on one end of the spectrum it's going to

be blue

and the other end of the spectrum is

going to be red and the palette

generator will create a range of colors

between those two

to show how the data transitions from

one extreme

through a neutral middle and then to an

opposite extreme

so by using the data color picker tool

you'll be able to generate color

palettes that work for a variety of data

types

congratulations on completing this ui

design basics course from xm pro

it's been such a pleasure to share tips

and best practices with you

to help you design apps that wow your

team and your users

now i would really love to get your

feedback on this course so that we can

keep on improving it

please click the link below to complete

the survey on your experience of the

course

and tell us what you think where we fall

short how we can improve going forward

i appreciate you taking the time to

watch all of the videos and i look

forward to your questions