The document outlines principles and strategies for effective data visualization design, emphasizing the importance of clarity and functionality in visual communication. It provides a step-by-step guide on the visual design process, including the collection of references, analysis of design elements, and the creation of basic design rules. Additional tips cover layout, typography, use of images, and resources for enhancing design quality.

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

21. USEFUL RESOURCES
ICONS: www.thenounproject.com
FONTS: www.google.com/fonts
CSS3 GENERATOR: www.css3maker.com
OPTIMISE & RESIZE IMAGES: www.imageoptimizer.net
COLOUR PALLETTE FROM IMAGE: www.degraeve.com/color-palette
COLOUR IDENTIFIER: www.nattyware.com/pixie.php
CREATIVES COMMONS IMAGES: www.photopin.com
SCREENGRABS: http://www.screenpresso.com/
https://chrome.google.com/webstore/search-extensions/screenshot
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