behavior & presentation - university of hawaiibehavior & presentation communication 437...

7
BEHAVIOR & PRESENTATION Communication 437 Behavior & Presentation Jeffrey Veen: Art & Science of Web Design What is Design? “Bad Design… is decoration” “Good design is problem solving” What Needs Solving? Integrating good traditional design with the possibilities and limitations of the web Traditional Paper-Based Design Involves controlling many variables Paper stock & size Typefaces & Size Ink colors and density Viewing mechanism Image display is immediate & accurate 1 2 3 4 5

Upload: others

Post on 17-Apr-2020

11 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: BEHAVIOR & PRESENTATION - University of HawaiiBEHAVIOR & PRESENTATION Communication 437 Behavior & Presentation Jeffrey Veen: Art & Science of Web Design What is Design? “Bad Design…

BEHAVIOR & PRESENTATIONCommunication 437

Behavior & Presentation

Jeffrey Veen: Art & Science of Web Design

What is Design?

“Bad Design… is decoration”

“Good design is problem solving”

What Needs Solving?

Integrating good traditional design with

the possibilities and limitations of the web

Traditional Paper-Based Design

Involves controlling many variables– Paper stock & size– Typefaces & Size– Ink colors and density– Viewing mechanism– Image display is immediate & accurate

1

2

3

4

5

Page 2: BEHAVIOR & PRESENTATION - University of HawaiiBEHAVIOR & PRESENTATION Communication 437 Behavior & Presentation Jeffrey Veen: Art & Science of Web Design What is Design? “Bad Design…

Web-Based Design

Involves dealing with largely unknown variables– Screen size and resolution– Number of colors & how rendered– Typefaces on system & platform used– Type size individually configurable– Download speed for images– Plug-ins available– Platform, browser brand, and browser version

What is the Solution?

• Ignoring the user or• Ignoring the web’s possibilities and limitations

Liquid, Elastic, & FixedLayouts

Creating Liquid Layout

• Layout uses percentages, not absolute widths, which are relative to the viewport (browser) width

Liquid Page Layout

6

7

8

9

10

Page 3: BEHAVIOR & PRESENTATION - University of HawaiiBEHAVIOR & PRESENTATION Communication 437 Behavior & Presentation Jeffrey Veen: Art & Science of Web Design What is Design? “Bad Design…

Liquid Page Layout

Liquid Layout

Liquid Layout

Creating an Elastic Layout

•Layout uses relative measurements (ems), and resizes content based on the font size

Creating a Jello Layout

•Layout depends the viewport size but uses min-width and max-width CSS properties to constrain both the minimum and maximum size of the content

11

12

13

14

15

Page 4: BEHAVIOR & PRESENTATION - University of HawaiiBEHAVIOR & PRESENTATION Communication 437 Behavior & Presentation Jeffrey Veen: Art & Science of Web Design What is Design? “Bad Design…

Creating a Solid Layout

•Use absolute measurements (e.g., pixels)

Fixed / Solid Page Layout

Solid Design

Solid Design

HYBRID =LIQUID + SOLID

16

17

18

19

20

Page 5: BEHAVIOR & PRESENTATION - University of HawaiiBEHAVIOR & PRESENTATION Communication 437 Behavior & Presentation Jeffrey Veen: Art & Science of Web Design What is Design? “Bad Design…

Creating a Hybrid Layout

• Use percentages, or other relative measures, for some elements

• Use absolute measure for other elements

Hybrid Layout

Hybrid Layout

Hybrid Layout

Hybrid Layout

21

22

23

24

25

Page 6: BEHAVIOR & PRESENTATION - University of HawaiiBEHAVIOR & PRESENTATION Communication 437 Behavior & Presentation Jeffrey Veen: Art & Science of Web Design What is Design? “Bad Design…

GRACEFUL DEGRADATION

“Correct” Display

No CSS Display

Text-Only Display

POOR DEGRADATION

26

27

28

29

30

Page 7: BEHAVIOR & PRESENTATION - University of HawaiiBEHAVIOR & PRESENTATION Communication 437 Behavior & Presentation Jeffrey Veen: Art & Science of Web Design What is Design? “Bad Design…

“Correct” Display

No CSS Display

Screen Reader Display

Text-Only Display

31

32

33

34