+ All Categories
Home > Documents > Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour...

Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour...

Date post: 02-Aug-2020
Category:
Upload: others
View: 0 times
Download: 0 times
Share this document with a friend
26
Info Design 101 A PRIMER + PRACTICAL TIPS Iffat Jokhio RGD Sr. UX, Pivot Design Group @hererighthere
Transcript
Page 1: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

Info Design 101A PRIMER + PRACTICAL TIPS

Iffat Jokhio RGD Sr. UX, Pivot Design Group

@hererighthere

Page 2: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

2 / 26

What to Expect?

Understanding the Essentials - Audience - Context - Perception

Tips for Success - Checklist

Questions & Answers

Page 3: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

3 / 26

Understanding the Essentials

Page 4: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

4 / 26

AudienceUNDERSTANDING THE HUMAN

WHO WHAT

Page 5: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

5 / 26

ContextUNDERSTANDING THE ENVIRONMENT

WHERE

WHY

WHEN

HOW

Page 6: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

6 / 26

PerceptionTHE EYES SEE, THE BRAIN INTERPRETS

Page 7: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

7 / 26

PerceptionPLAY VIDEO

Page 8: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

8 / 26

Influencing PerceptionSETTING EXPECTATIONS

Page 9: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

9 / 26

Tips for Information Design

Success

Page 10: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

1. Typography SCANNABLE HEADERS & TEXT

Page 11: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

2. Whitespace GRID & MARGINS

Page 12: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

12 / 26

PUSH ME PUSH ME

3. Colour & Accessibility ACCESSIBILITY STANDARDS & CONTRAST RATIOS

PUSH ME PUSH MEvs.

vs.

Buttons:

Typography: How do I know what to do next? I might scan for indicators in the text.

How do I know what to do next? I might scan for indicators in the text.

Page 13: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

13 / 26

4. Chartjunk EDWARD TUFTE

“The interior decoration of graphics generates a lot of ink which does not tell the viewer anything new. The purpose of the decoration varies — to make the graphic appear more scientific, to enliven the display, to give the designer an opportunity to exercise artistic skill. Regardless of the cause, it is all non-data-ink or redundant data-ink, and it is often chartjunk.”

Page 14: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

14 / 26

0  

1  

2  

3  

4  

5  

6  

7  

1   2   3   4  

Series1  

Series2  

EXCEL GRAPH

Page 15: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

15 / 26

ILLUSTRATOR GRAPH

0

1

2

3

4

5

6

Page 16: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

16 / 26

“TUFTE-APPROVED” GRAPH

0

1

2

3

4

5

6

Page 17: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

17 / 26

5. Numbers have power APPLES TO APPLES; MISLEADING THE VIEWER

vs.

3 out of 4 75%

Page 18: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

18 / 26

6. Relationships DATA VISUALIZATION IS ABOUT COMPARISONS

0

1

2

3

4

5

6

Page 19: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

19 / 26

TO DO OR ‘DONUT’ GRAPHS

Pie chartDonut chart

vs.

Page 20: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

20 / 26

DO OR ‘DONUT’ GRAPHS

Pie chartDonut chart

vs. vs.

Page 21: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

21 / 26

7. Wayfinding NAVIGATING THROUGH THE INFORMATION

Page 22: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

22 / 26

8. It’s all about storytelling WANTING TO NAVIGATE THROUGH THE INFO

UNDERSTANDAUDIENCE

UNDERSTANDCONTEXT

Page 23: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

9. Call to action

Page 24: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

9. Call to action

Page 25: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

25 / 26

Checklist

1. Typography for scanability

2. Embrace whitespace3. Use colour effectively;

understand accessibility4. Avoid chart junk5. Don’t distort the data

6. Build better relationships

7. Establish a pattern of wayfinding

8. Build a narrative9. Have a clear call

to action

Page 26: Info Design 101 - RGD · 1. Typography for scanability 2. Embrace whitespace 3. Use colour effectively; understand accessibility 4. Avoid chart junk 5. Don’t distort the data 6.

26 / 26

Thanks!

Iffat Jokhio RGD Sr. UX, Pivot Design Group

@hererighthere


Recommended