+ All Categories
Home > Documents > Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr...

Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr...

Date post: 14-Jun-2020
Category:
Upload: others
View: 1 times
Download: 0 times
Share this document with a friend
26
Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology
Transcript
Page 1: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Display of Information:Design, Fonts, Graphs

Dr Hugh CrumleyCenter for Instructional Technology

Page 2: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.
Page 3: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Original

Page 4: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Proximity

Page 5: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Alignment

Page 6: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Contrast

Page 7: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Repetition

Page 8: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Design Principles

• Contrast make different• Repetition parallel elements• Alignment strong lines, don’t center• Proximity use whitespace

Williams, R. Non-designer’s Design Book

Page 9: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Fonts

Serif Sans serif

Page 10: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

UPPER CASE

• Use sparingly for short phrases• NOT READABLE; LIKE SHOUTING• Titles: Capitalize the Content Words

Page 11: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Graphs: Data to Ink Ratio

• Show max data: erase non-data ink• Show min furniture & chartjunk• Use whitespace

Page 12: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Graph: Inches of Rainfall

• Pie• Radar• Bar• Line

Jan Feb Mar Apr May June July Aug…

1 5 3 6 5 6 10 9…

Page 13: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Excel Bar Graph

Janu

ary

Mar

ch

May

July

Sep

tem

ber

Nov

embe

r S102468

1012

Month

Inches of Rain

Rainfall in 2001

Page 14: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Excel Pie Graph

Rainfall in 2001

1 53

6

5

6

109

11

62 2

JanuaryFebruaryMarchAprilMayJuneJulyAugustSeptemberOctoberNovemberDecember

Page 15: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Excel Radar Graph

Rainfall in 2001

0

5

10

15January

February

March

April

May

JuneJuly

August

September

October

November

December

Series1

Page 16: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Excel Line Graph

Rainfall in 2001

02468

1012

Janu

aryFeb

ruary

March

April

MayJu

ne July

Augus

tSep

tembe

rOcto

ber

Novembe

rDece

mber

Month

Inch

es o

f rai

n

Page 17: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Improved BarInches of Rainfall in 2001

1

5

3

65

6

109

11

6

2 2

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

Page 18: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

New & Improved BarInches of Rainfall in 2001

1

5

3

65

6

109

11

6

2 2

Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec

Page 19: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Tasks in Perception

• Angle (or slope)• Area• Color hue/saturation• Length• Position along a common scale• Position along identical, nonaligned scales• Volume

Page 20: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

Tasks in Perception

• Position along a common scale • Position along identical, nonaligned scales • Length• Angle (or slope)• Area• Volume• Color hue/saturation

Distance!

Page 21: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.
Page 22: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.
Page 23: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.
Page 24: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.
Page 25: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

ReferencesDickison, M. (2008.) Goose & swan graphics from

http://www.numberpix.com/Becker R. and Cleveland, W. (1996). S-Plus Trellis

Graphic User’s Manual. Mathsoft , Inc., Seattle, WA and Bell Labs, Murray Hill, NJ.

Robbins, Naomi B. 2005. Creating More Effective Graphs. John Wiley and Sons, Hoboken, NJ.

Tufte, Edward R. [1983] (2001). The Visual Display of Quantitative Information, 2nd Edition. Graphics Press, Cheshire, CT.

Page 26: Display of Information: Design, Fonts, Graphs · Display of Information: Design, Fonts, Graphs Dr Hugh Crumley Center for Instructional Technology. Original. Proximity. Alignment.

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 License.


Recommended