Design Workshop II @ Cornell Tech

DESIGN WORKSHOP IISlide Deck/Info Design/Adobe Creative Cloud 17 Nov 2015, Cornell Tech at Cornell University #designworkshops on Slack

Zaid Haque, @zaidhaque

1

ABOUT ME

Graduate of Carnegie Mellon

Red Dot Award: Bilingual Flight Info Display SystemMy Website 2

http://red-dot.de/cd/en/online-exhibition/work/?code=12-00172&y=2015&c=210&a=0

http://zaidhaque.com

DESIGNERS ARE CURSED.They hate everything.

3

DESIGN IS SUBJECTIVE.Taste varies from person to person

4

OUTLINE

- Recap!

- Slide Deck Design

- Visualizing Information

- Adobe Creative Cloud

5

CORNELL TECH DESIGN WORKSHOP II

WORKSHOP IWe had a great first workshop!Typography Colors

Visual Hierarchy

Vectors & Raster

6

SLIDE DECK DESIGNExpress your ideas in the most effective way.

7

I LOVE KEYNOTE.No to PowerPoint*, no to Prezi. Definitely no to Google Slides. Or anything else.

*PowerPoint is getting better than it used to be though.8

TYPOGRAPHY

Use flair sparingly.

Have one style for headings, one style for body.

Sans-serif fonts work better.

ALL CAPS HEADINGS ARE IN.

9

COLORHigh contrast is good

Dark backgrounds and bright text

Use color for emphasis

10

VISUAL HIERARCHY

notice this

firstYou will

11

VISUAL HIERARCHY

Don’t let your headings overpower your slides.

Don’t let images overpower your text.

Don’t use bold/italics for emphasis - use color instead.

12

LAYOUTDivide your slides into columns

Left align rather than center

Vertically-middle alignment

13

USE YOUR SLIDES AS CUE CARDSThey should quickly tell you what to say, rather than say it for you.

14

ANIMATIONS

BLUR

EVERY ANIMATION IMPLIES SOMETHING.

FIREWORKS

CONFETTI FADE

TRACE ANVIL15

ANVILresist the urge to use these animations everywhere!

16

10/20/30 RULE GUY KAWASAKI

10 slides

20 minutes

30 pt. font

17

WHEN LIFE GIVES YOU LEMONS

Work with what you have. Look at where you’re presenting, look at what you’re presenting on.

18

DISPLAY TECHNOLOGY

Make sure your slide deck works well on the hardware used to display it.

19

PROJECTOR DISPLAY MUCH MORE COMMON

Lower resolution and contrast, so images/slides look different than they would on your screen. Use high contrast on your slides to offset this.

20


Note whether you would be blocking the monitor while presenting. If you will, use bright colors sparingly.

21


Note whether you would be blocking the monitor while presenting. If you will, use bright colors sparingly.

Brightly lit foreheads during a presentation annoy me.

22

LED SCREENS/ MONITORS MORE EXPENSIVE

Higher resolution and contrast means things look like they do on your computer.

-> More flexibility

23


Generally these screens tend to be smaller in comparison, so design accordingly.

24


Try to stay away from white here as well, you don’t want to blind your audience.

25

PAPER HANDOUTS ?!

Try not to use slide decks as printouts or documents to send to someone. The best slide decks need a presenter; and you won’t be there to present them.

If you have to, make sure you have a white background so as to not waste ink.

26

THINGS TO KEEP IN CONSIDERATION

Visibility/legibility

How wide/narrow is your room?

How attentive is your audience?

27

DO’SGive your text breathing space

28

INFORMATION DESIGNExpress your numbers so they convey your ideas.

29

THE VISUAL DISPLAY OF QUANTITATIVE INFORMATION EDWARD TUFTE

30

31


PIE CHARTSTo display parts of a whole. Use these to show relative proportions rather than volume.

http://www.hiphopshelter.com/forum/index.php?threads/the-lol-thread.35/page-4

32


STACKED PIE CHARTSTo display parts of a whole, over time or another parameter.

http://www.michaelvandaniker.com/labs/browserVisualization/

33


BAR CHARTS/HISTOGRAMS

Used to show volume of discontinuous data.

Histograms are bar charts that show frequency of occurrences of an event.

Hours I slept last week

0

2.25

4.5

6.75

9

Monday Tuesday WednesdayThursday Friday Saturday Sunday

34


LINE GRAPHSUsed to show volume of continuous data.

Line graphs and bar charts are mistakenly used interchangeably.

Steps I walked last week

0

5000

10000

15000

20000

Monday Tuesday Wednesday Thursday Friday Saturday Sunday

35


QUALITATIVE CHARTSBest used to describe abstract values for different categories in a visual manner. Rank them according to two arbitrary metrics, and viola!

complexity

impact

36


PLAIN NUMBERSSingle data points, usually representing totals or averages.

26members on

#designworkshops

52attendees

71survey

responses

0people did

the homework

132total number of slides presented

37

Hamad International Airport: EVIDS Redesign

Key Statistics

The EVIDS project was a large scale project affecting every single passenger going through Hamad International Airport. These numbers help show the sheer scale of work that was involved in the project, from start to finish.

38

1,500screens

150graphical

assets

350screen

renderings

47pages of

documentation

21months

1,400emails


TIMELINEUsed to show progress over time of a project. Similar to a “Journey” but better for people who have a stake in what you built; it has more details.

task 1task 2

task 3

39


TIMELINE

40

Q4 2012 Q1 2013 Q2 2103 Q3 2013 Q4 2013 Q1 2014 Q2 2014

October 2012

Project Begins

December 2012

Department Approval

February 2013

GCEO Approval

September 2013

Branding Introduction

February 2014

CP31 Workshop

May 2014

Brand Refresh

May 2013

Concept Finalization

July 2013

Asset Completion

February 2014

Branding Completion

June 2014

Core Completion

Ideation Phase

Creation Phase

Graphical Assets

Business Rules

Branding

Implementation Phase

Hamad International Airport: EVIDS Redesign 41

Q4 2012 Q1 2013 Q2 2103 Q3 2013 Q4 2013 Q1 2014 Q2 2014

October 2012

Project Begins

December 2012

Department Approval

February 2013

GCEO Approval

September 2013


February 2014

CP31 Workshop

May 2014

Brand Refresh

May 2013


July 2013

Asset Completion

February 2014

Branding Completion

June 2014

Core Completion

Ideation Phase

Creation Phase

Graphical Assets

Business Rules

Branding



TIMELINE

42

Q4 2012 Q1 2013 Q2 2103 Q3 2013 Q4 2013 Q1 2014 Q2 2014

October 2012

Project Begins

December 2012

Department Approval

February 2013

GCEO Approval

September 2013


February 2014

CP31 Workshop

May 2014

Brand Refresh

May 2013


July 2013

Asset Completion

February 2014

Branding Completion

June 2014

Core Completion

Ideation Phase

Creation Phase

Graphical Assets

Business Rules

Branding



WORD CLUSTERSUsed to show concepts pertaining to a certain topic.

Opportunities!Attracting attention

FreelancingJob-hunting

Clients

Bloggers

Sales

Standing outProfits Hits

VisitorsReputationCustomers

why think about personal branding CMU-Q + UAEU 2013

43

HOMEWORK (?!)Write a critique of something (anything) from a design perspective. Post on #designworkshops

http://critique.zaidhaque.com

44

http://critique.zaidhaque.com

DESIGN WORKSHOP IISlide Deck/Info Design/Adobe Creative Cloud 17 Nov 2015, Cornell Tech at Cornell University

Zaid Haque, @zaidhaque

https://zaidhaque.typeform.com/to/olqrP0

45

https://zaidhaque.typeform.com/to/olqrP0