We all know data presentation (visualization) plays a large part in our School of Data workshops as a fundamental aspect of the data pipeline. But how do you know that, beyond using D3 or the latest dataviz app, you are helping people actually communicate visually?
The guest of this skillshare was Code for South Africa/School of Data Fellow, Hannah Williams
Schoolofdata.org
Okfn.org
http://code4sa.org/
Date: Thursday (Sept. 25, 2014)
www.hannahwilliams.co.za
hello@hannahwilliams.co.za
1. www.schoolofdata.org
DATA VISUALISATION & DESIGN
SKILLSHARE
Hannah Williams
Code for South Africa School of Data Fellow
www.hannahwilliams.co.za
hello@hannahwilliams.co.za
@LittleMsNimbus
2. WHAT IS DESIGN?
DESIGN IS THE INTERFACE WE’VE CREATED FOR OUR WORLD
IT PERFORMS A FUNCTION
SO, WHAT ARE YOU TRYING TO ACHIEVE IN THE BIGGER PICTURE?
www.schoolofdata.org
3. WHAT DOES YOUR DATA VIZ AIM TO DO?
DATA VISUALISATION IN ISOLATION IS MEANINGLESS
THE WAY INFORMATION IS PRESENTED CHANGES THE WAY WE
INTERACT WITH IT
PERSON X SEES YOUR VISUALISATION AND THEN WHAT?
www.schoolofdata.org
4. WHAT DOES YOUR DATA VIZ AIM TO DO?
KEEP THINGS SIMPLE, FOCUSSED AND RELEVANT
WHO AM I TRYING TO REACH?
WHAT DO I WANT THEM TO DO?
HOW CAN I MAKE IT AS EASY AS POSSIBLE FOR THEM TO DO THIS?
www.schoolofdata.org
5. WHAT DOES YOUR DATA VIZ AIM TO DO?
HELP
Team by Ahmed Trochilidae from The Noun Project | Bar Graph by Oriol Carbonell from The Noun Project
ACTION X
YOUR
DESIGN
‘TO DO’
LIST
CREATE A PATH OF LEAST RESISTANCE
HELP
HELP
www.schoolofdata.org
6. FUNCTIONAL DESIGN REQUIREMENTS
Team by Ahmed Trochilidae from The Noun Project | Bar Graph by Oriol Carbonell from The Noun Project
?
www.schoolofdata.org
7. FUNCTIONAL DESIGN REQUIREMENTS
ASK A QUESTION
GIVE CONTEXT: WHAT
DOES THIS INFORMATION
MEAN TO YOU?
TAKE ACTION NOW...
...USING THESE AWESOME
TOOLS / RESOURCES, ETC
a
b
c
Team by Ahmed Trochilidae from The Noun Project | Bar Graph by Oriol Carbonell from The Noun Project
!
www.schoolofdata.org
8. THE VISUAL DESIGN PROCESS SIMPLIFIED
GRAPHIC / VISUAL DESIGN IS
99% OBSERVATION AND 1% INSPIRATION
IT’S NOT ABOUT YOU
YOUR AESTHETIC (THE WAY THINGS LOOK) IS FUNCTIONAL, IT
CREATES CONCEPTUAL LINKS, CONTEXT AND CUES FOR PEOPLE
www.schoolofdata.org
9. THE VISUAL DESIGN PROCESS SIMPLIFIED
1. COLLECT REFERENCE / NICE EXAMPLES
- OF OTHER DESIGNS THAT ACHIEVE SIMILAR THINGS
- OF VISUALS FROM THE CONTEXT YOU’RE WORKING IN / THAT YOUR
TARGET AUDIENCE ALREADY RESPONDS TO
www.schoolofdata.org
10. THE VISUAL DESIGN PROCESS SIMPLIFIED
1. COLLECT REFERENCE / EXAMPLES
EG. THE PHARMACEATICAL INDUSTRY
www.schoolofdata.org
11. THE VISUAL DESIGN PROCESS SIMPLIFIED
2. ANALYSE WHAT MAKES THEM VISUALLY DISTINCT
EXAMPLE:
ROUNDED CORNERS
AREAS OF SOLID COLOUR WITH GRADIENTS
AND HIGHLIGHTS
SHADOW & 3-D DEPTH
www.schoolofdata.org
12. 3. MAKE A BASIC SET OF DESIGN RULES
KEEP IT AS SIMPLE AS POSSIBLE & STICK TO THEM
ROUNDED CORNERS
THE VISUAL DESIGN PROCESS SIMPLIFIED
AREAS OF SOLID COLOUR WITH GRADIENTS
AND HIGHLIGHTS
SHADOW & 3-D DEPTH
PHARMACEUTICAL INDUSTRY
65%
35%
www.schoolofdata.org
13. THE VISUAL DESIGN PROCESS SIMPLIFIED
3. MAKE A BASIC SET OF DESIGN RULES
KEEP IT AS SIMPLE AS POSSIBLE & STICK TO THEM
VS
PHARMACEUTICAL INDUSTRY
PHARMACEUTICAL INDUSTRY
65%
35%
65%
35%
www.schoolofdata.org
14. DESIGN TIPS & TRICKS
LAYOUT
CREATE AN INFORMATION HIEARCHY - THE ORDER YOU WANT
PEOPLE TO TAKE IN THE INFO. IF PEOPLE ONLY TAKE IN 2 OR 3
THINGS WHAT SHOULD THEY BE?
IF YOU CAN SAY SOMETHING IN LESS WORDS, DO IT.
TEST THE ORDER YOU READ THINGS ON YOURSELF
MAIN POINT
ESSENTIAL IMPORTANT INFO
Important info that is not as critical
More detail that is useful but not essential to get your point
across. They read this once they are interested by your
primary info.
www.schoolofdata.org
15. DESIGN TIPS & TRICKS
LAYOUT
DON’T BE AFRAID OF ‘WHITE SPACE’
DON’T TRY AND FIT EVERYTHING ON A SINGLE PAGE / LIMITED AREA
IF IT’S A PRESENTATION USE MORE SLIDES - IT MAKES NO
DIFFERENCE TO HOW LONG YOU’LL BE TALKING
IF IT’S A WEBSITE ALLOW PEOPLE TO NAVIGATE BETWEEN MANY
SIMPLE VISUALISATIONS RATHER THAN ONE HUGE ONE WITH
OVERWHELMING AMOUNTS OF INFO
www.schoolofdata.org
16. DESIGN TIPS & TRICKS
TYPOGRAPHY
COPY TYPOGRAPHY FROM EXAMPLES THAT WORK WELL & LEARN
FROM THEM. NOT ONLY FONTS, ALSO LETTER SPACING, LINE HEIGHT,
ETC
INSPECT ELEMENT
(BROWSER)
www.schoolofdata.org
17. DESIGN TIPS & TRICKS
TYPOGRAPHY
USE ONLINE RESOURCES & ADVICE ON DESIGN BLOGS TO SAVE TIME
EG. GOOGLE FONTS COMBINATIONS
www.schoolofdata.org
18. DESIGN TIPS & TRICKS
TYPOGRAPHY
STICK TO BRAND STYLE GUIDES & COLOURS AS MUCH AS POSSIBLE
DON’T TRY AND ‘GET CREATIVE’, EVEN IF YOU THINK IT LOOKS
BETTER.
35
30
25
20
15
10
5
0
HEADING
35
30
25
20
15
10
0 5
HEADING
VS
www.schoolofdata.org
19. IMAGES
BETTER TO USE NO IMAGES THAN BAD IMAGES - IT’S WORTH
INVESTING IN QUALITY STOCK IMAGES
PEOPLE ARE NATURAL IMITATORS - IF YOU’RE TRYING TO DRIVE
ACTION TRY AND USE IMAGES OF PEOPLE DOING WHAT YOU WANT
THEM TO DO - KEEP IT ASPIRATIONAL (HOW PEOPLE WISH THEY
COULD BE)
FOR WEB SAVE IMAGES AT THE SIZE THEY WILL BE USED
www.schoolofdata.org
20. IMAGES
IMAGE TYPES
RASTER
JPG/JPEG
SVG
PDF
ADOBE ILLUSTRATOR,
CORELDRAW ETC
GIF
PNG
PHOTOS,
GRADIENTS
FLAT COLOURS /
TRANSPARENCY
MAKE ANY SIZE,
FLAT COLOURS &
SHAPES,
TRANSPARENCY
VECTOR
www.schoolofdata.org
22. www.schoolofdata.org
THANK YOU
COME AGAIN
Hannah Williams
Code for South Africa School of Data Fellow
www.hannahwilliams.co.za
hello@hannahwilliams.co.za
@LittleMsNimbus