data visualization & design with school of data
DESCRIPTION
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 [email protected]TRANSCRIPT
DATA VISUALISATION & DESIGNSKILLSHARE
Hannah WilliamsCode for South Africa School of Data Fellow
@LittleMsNimbus
www.schoolofdata.org
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
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
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?
WHAT DOES YOUR DATA VIZ AIM TO DO?
www.schoolofdata.org
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
HELP
WHAT DOES YOUR DATA VIZ AIM TO DO?
www.schoolofdata.org
Team by Ahmed Trochilidae from The Noun Project | Bar Graph by Oriol Carbonell from The Noun Project
FUNCTIONAL DESIGN REQUIREMENTS
?
www.schoolofdata.org
ASK A QUESTION
TAKE ACTION NOW...
GIVE CONTEXT: WHAT DOES THIS INFORMATION MEAN TO YOU?
...USING THESE AWESOME TOOLS / RESOURCES, ETC
Team by Ahmed Trochilidae from The Noun Project | Bar Graph by Oriol Carbonell from The Noun Project
a
b
c
!
FUNCTIONAL DESIGN REQUIREMENTS
www.schoolofdata.org
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
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
THE VISUAL DESIGN PROCESS SIMPLIFIED
1. COLLECT REFERENCE / EXAMPLES
EG. THE PHARMACEATICAL INDUSTRY
www.schoolofdata.org
ROUNDED CORNERS
AREAS OF SOLID COLOUR WITH GRADIENTS AND HIGHLIGHTS
SHADOW & 3-D DEPTH
THE VISUAL DESIGN PROCESS SIMPLIFIED
2. ANALYSE WHAT MAKES THEM VISUALLY DISTINCTEXAMPLE:
www.schoolofdata.org
ROUNDED CORNERS
AREAS OF SOLID COLOUR WITH GRADIENTS AND HIGHLIGHTS
SHADOW & 3-D DEPTH
THE VISUAL DESIGN PROCESS SIMPLIFIED
3. MAKE A BASIC SET OF DESIGN RULESKEEP IT AS SIMPLE AS POSSIBLE & STICK TO THEM
PHARMACEUTICAL INDUSTRY
65%35%
www.schoolofdata.org
THE VISUAL DESIGN PROCESS SIMPLIFIED
3. MAKE A BASIC SET OF DESIGN RULESKEEP IT AS SIMPLE AS POSSIBLE & STICK TO THEM
VS
PHARMACEUTICAL INDUSTRY
PHARMACEUTICAL INDUSTRY
65%35%
65%35%
www.schoolofdata.org
DESIGN TIPS & TRICKS
LAYOUTCREATE 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 POINTESSENTIAL IMPORTANT INFO
Important info that is not as criticalMore 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
DESIGN TIPS & TRICKS
LAYOUTDON’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
DESIGN TIPS & TRICKS
TYPOGRAPHYCOPY TYPOGRAPHY FROM EXAMPLES THAT WORK WELL & LEARN FROM THEM. NOT ONLY FONTS, ALSO LETTER SPACING, LINE HEIGHT, ETC
INSPECT ELEMENT (BROWSER)
www.schoolofdata.org
DESIGN TIPS & TRICKS
TYPOGRAPHYUSE ONLINE RESOURCES & ADVICE ON DESIGN BLOGS TO SAVE TIMEEG. GOOGLE FONTS COMBINATIONS
www.schoolofdata.org
DESIGN TIPS & TRICKS
TYPOGRAPHYSTICK TO BRAND STYLE GUIDES & COLOURS AS MUCH AS POSSIBLEDON’T TRY AND ‘GET CREATIVE’, EVEN IF YOU THINK IT LOOKS BETTER.
0
5
10
15
20
25
30
35
HEADING
05
101520253035
HEADING
VS
www.schoolofdata.org
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
IMAGES
IMAGE TYPES
RASTER
JPG/JPEGSVG
ADOBE ILLUSTRATOR, CORELDRAW ETC
GIF
PNG
FLAT COLOURS / TRANSPARENCY
PHOTOS, GRADIENTS
MAKE ANY SIZE,FLAT COLOURS &
SHAPES, TRANSPARENCY
VECTOR
www.schoolofdata.org
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.orgwww.schoolofdata.org
THANK YOUCOME AGAIN
Hannah WilliamsCode for South Africa School of Data Fellow
@LittleMsNimbus
www.schoolofdata.org