Web-Based Graphic Design

1

Web-Based Graphic DesignDouglas R. Holschuh

2

Lesson Outline

The Design Process

The Hierarchy of Design

Basic Color Theory

Online Typography

Layout Techniques

3

01 The Design Process

4

What is Graphic Design?

The process of artistic composition for the presentation, communication, and organization of information.

5

How Can We Learn Graphic Design?

Sadly, you’re not going to learn it here.

Practice/Experimention/Play

Observation

6

Independence/Dependence

Graphic design is:

Technology independent (and yet it’s not)

Media independent (and yet it’s not)

7

More Definitions

“Thoughtful exercises in exclusion”(Lloyd Rieber, Designing Learning Environments That Excite Serious Play, 2001)

Making and defending choices

8

Choices∞

0

9

Much to Consider

10

The Computer Screen

Color

Varies greatly from screen to screen

Type

Low resolution makes reading difficult

Layout

Screen sizes vary.

Television or magazine?

11

Screen Sizes

12

HTML

Color

Traditionally limited to 216 “web-safe” colors

Type

Traditionally, very little control over type

Layout

Traditionally, limits designer to a very “boxy” design

13

Learning thenBreaking the Rules

Holy Communion, 1896 (Age 15)

Les Demoiselles d'Avignon, 1907 (Age 27)

14

Design: More Details

15

03 Color

16

Color Has Meaning

17

The Color Wheel

18

Primary Colors

19

Secondary Colors

20

Tertiary Colors

21

Infinite Colors

22

The Color Harmonies

There are 4 basic ways colors on the wheel are combined into harmonies:

Primary/Secondary

Analogous

Complementary

Monochromatic

23

PrimaryRed, Blue, and Yellow

Traditional, Stable, Familiar

Relatively recessive in relation to other design elements

What website do you know that uses these colors?

24

SecondaryPurple, Orange, and Green

Because of “odd” nature and the fact that they are not as common, they to foster feelings of newness, uniqueness, difference, fun, and playfulness.

Using these colors tends make the color of the design stand out.

Website?

25

Analogous:Blue, Green, Yellow

Compared to other color harmonies, it is easy to make a layout feel unified with analogous color harmonies because the colors in the groups are next to each other on the color wheel. This, in itself, gives the feeling of being more stable, less dynamic.

This particular harmony: Natural, stable, full of life. This combination usually neither advances nor recedes relative to other design elements.

Website?

26

Analogous:Red, Orange, Yellow

Conveys excitement, is “in your face,” charged with energy.

This combination is very loud and will take over the layout, so other design elements must be design accordingly.

Website?

27

Analogous:Red, Purple, Blue

Feeling varies depending on which of the colors in the group is dominant, but typically moody, mysterious, deep.

Again, it depends on which of the colors in the group is dominant, but this combination typically recedes relative to other design elements.

Website?

28

Complementary: Blue, Orange

Complementary colors are opposite from each other on the wheel. This makes each group feel dynamic and exciting.

This harmony is contemporary (at least for now). Stable, but innovative.

The orange will advance in relation to other design elements, that’s why people usually use it as an accent when using this harmony.

Website?

29

Complementary:Purple, Yellow

Typical feeling is daring, playful, something fun to say.

This combination is fairly loud, depending on the saturation of the purple. But the yellow will advance.

Website?

30

Complementary: Red, Green

Typical feeling is “Christmas.” Christmas has sort of ruined this color harmony because you can’t design with it without people thinking of Jolly ol’ St. Nick.

In relation to other Design Elements, I just can’t stop thinking of sleigh bells. Think of a JCPenny’s Christmas ad and think of what advanced/receded.

Website?

31

Complementary: Red, Green

QuickTime™ and aTIFF (LZW) decompressor

are needed to see this picture.

32

MonochromaticA red monochromatic scheme will feel different than a blue scheme, but in general, monochromatic schemes feel calm, organized.

Again, a red monochromatic scheme will act differently than a blue scheme, but in general, they tend to be less intrusive than other harmonies, leaving the stage available for other elements to take over.

Website?

33

Saturation

HIGH vs. LOW

34

Web Color Wheel

www.visibone.com

35

Color Calculator• http://kuler.adobe.com/

• http://colorschemedesigner.com/

• http://www.delicious.com/dwfvcc/color

36

04 Type

37

Fonts Have Meaning

•The Middle Ages

•The Coffee Klatch

•The Elegant Bride

•Pong

38

My Bad!

•The Middle Ages

•The Coffee Klatch

•The Elegant Bride

•Pong

39

Fonts Have Meaning

•Classic: Adobe Jenson

•Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

40

Fonts Have Meaning

•Modern: Century Gothic


41

Fonts Have Meaning

•Fun: Marker Felt


42

Fonts Have Meaning

•Retro: Century Schoolbook


43

What Makes Fonts Different?

44

Two FontsTimes New RomanLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Adobe MinionLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

45

Let’s Look Closer

eeaagg

RRAASS

46

Type Can Take a Back Seat

47

Or It Can Be In Your Face

48

The Web Limits TypeThat’s why we have to stick with

Arial/Helvetica/sans-serif

Courier New/Courier/monospace

Times New Roman/Times/serif

But thanks to Microsoft’s monopoly

Comic Sans MS

Trebuchet MS

Georgia

Verdana

49But I Wanna Use[fill in with your favorite font]!

Fonts as graphics (heading and logos only) are key to distinguishing your site.

Some other online technology:

Flash

Streaming Video

50

Which Font Is Better?

Traditionally for print publications, a serif font like Times New Roman, published by Monotype and Microsoft, is considered easier to read.

On the screen, it is generally believed that a sans-serif font like Arial, published Monotype and Microsoft, is easier to read.

51

Font CombinationsHeading: HelveticaText: Times

Heading: Gill SansText: Adobe Caslon

Heading: Adobe MyriadText: Adobe Minion

Heading: Big CaslonText: Lucida Grande

Heading: VerdanaText: Verdana

Heading: Curlz MTText: Verdana

http://www.will-harris.com/esperfonto/

52

Problems/Solutions

Fonts too small or too large (10–12 pt is about right)

Lines too long (~60 characters per line)

Font and background color without high contrast (think black & white)

Overuse of Times New Roman (use Georgia or sans-serif)

General lack of control (Cascading Style Sheets)

53

Line Length•Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nisl. Vivamus elementum libero eu risus. Vestibulum semper. Phasellus scelerisque, wisi nec ultricies malesuada, est enim molestie eros, eget aliquam ante dolor in magna. Cras lacinia. Duis felis eros, commodo in, venenatis sed, rhoncus nec, lectus. Sed euismod, pede eu gravida eleifend, turpis tellus vestibulum odio, non sollicitudin libero mi congue dui. Curabitur metus arcu, consectetuer vitae, tincidunt eu, convallis at, est. Vestibulum justo eros, consequat non, feugiat quis, lobortis sit amet, purus. Praesent mollis tortor eu est.• Quisque adipiscing posuere diam. Aenean ornare, sapien a condimentum porta, pede est fermentum risus, ut semper eros diam eu libero. Nunc nec felis vel felis condimentum volutpat. Nam wisi. Etiam mauris tortor, scelerisque sed, gravida quis, tristique ac, dui. Nullam aliquet, elit sed elementum aliquam, eros est ornare ante, et euismod orci odio dictum justo. In vitae nunc. Etiam rhoncus sagittis risus. Sed id leo euismod sem convallis viverra. Morbi tortor diam, venenatis quis, venenatis eget, pharetra sit amet, erat.• Nunc ultricies. Praesent id justo. Sed sagittis risus nonummy leo ornare scelerisque. Phasellus vitae libero nec risus hendrerit vehicula. Mauris bibendum nunc eget eros. Ut felis justo, sagittis vitae, elementum et, egestas quis, mauris. Nullam a tellus ut libero posuere gravida. Nullam eu nulla at dui hendrerit dictum. In at velit. Vestibulum et tellus et lacus bibendum varius. Praesent hendrerit volutpat ipsum.• Donec fringilla euismod felis. Proin porta rhoncus nunc. Maecenas dapibus, lacus eu convallis scelerisque, nibh lacus vulputate nunc, a mollis wisi ligula sed justo. In ac orci a enim scelerisque tempus. Quisque risus mauris, pulvinar in, dapibus et, imperdiet eget, orci. Nam sed pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla pharetra, ante ut egestas dignissim, mauris nulla semper turpis, pharetra scelerisque enim nulla sed purus. Morbi consectetuer cursus neque. Curabitur eu metus eget orci sagittis laoreet. Duis vulputate posuere dui. Integer id tellus. Nulla quis enim. Nulla semper urna quis neque. Donec quis mi at mauris sagittis tempus. Ut felis lectus, luctus in, consequat tempus, aliquam vel, libero. Fusce non arcu. Suspendisse a lorem id leo facilisis venenatis.

54

Line Length•Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nisl. Vivamus elementum libero eu risus. Vestibulum semper. Phasellus scelerisque, wisi nec ultricies malesuada, est enim molestie eros, eget aliquam ante dolor in magna. Cras lacinia. Duis felis eros, commodo in, venenatis sed, rhoncus nec, lectus. Sed euismod, pede eu gravida eleifend, turpis tellus vestibulum odio, non sollicitudin libero mi congue dui. Curabitur metus arcu, consectetuer vitae, tincidunt eu, convallis at, est. Vestibulum justo eros, consequat non, feugiat quis, lobortis sit amet, purus. Praesent mollis tortor eu est.• Quisque adipiscing posuere diam. Aenean ornare, sapien a condimentum porta, pede est fermentum risus, ut semper eros diam eu libero. Nunc nec felis vel felis condimentum volutpat. Nam wisi. Etiam mauris tortor, scelerisque sed, gravida quis, tristique ac, dui. Nullam aliquet, elit sed elementum aliquam, eros est ornare ante, et euismod orci odio dictum justo. In vitae nunc. Etiam rhoncus sagittis risus. Sed id leo euismod sem convallis viverra. Morbi tortor diam, venenatis quis, venenatis eget, pharetra sit amet, erat.• Nunc ultricies. Praesent id justo. Sed sagittis risus nonummy leo ornare scelerisque. Phasellus vitae libero nec risus hendrerit vehicula. Mauris bibendum nunc eget eros. Ut felis justo, sagittis vitae, elementum et, egestas quis, mauris. Nullam a tellus ut libero posuere gravida. Nullam eu nulla at dui hendrerit dictum. In at velit. Vestibulum et tellus et lacus bibendum varius. Praesent hendrerit volutpat ipsum.

•Donec fringilla euismod felis. Proin porta rhoncus nunc. Maecenas dapibus, lacus eu convallis scelerisque, nibh lacus vulputate nunc, a mollis wisi ligula sed justo. In ac orci a enim scelerisque tempus. Quisque risus mauris, pulvinar in, dapibus et, imperdiet eget, orci. Nam sed pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla pharetra, ante ut egestas dignissim, mauris nulla semper turpis, pharetra scelerisque enim nulla sed purus. Morbi consectetuer cursus neque. Curabitur eu metus eget orci sagittis laoreet. Duis vulputate posuere dui. Integer id tellus. Nulla quis enim. Nulla semper urna quis neque. Donec quis mi at mauris sagittis tempus. Ut felis lectus, luctus in, consequat tempus, aliquam vel, libero. Fusce non arcu. Suspendisse a lorem id leo facilisis venenatis.

55

Other Things•Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer nisl. Vivamus elementum libero eu risus. Vestibulum semper. Phasellus scelerisque, wisi nec ultricies malesuada, est enim molestie eros, eget aliquam ante dolor in magna. Cras lacinia. Duis felis eros, commodo in, venenatis sed, rhoncus nec, lectus. Sed euismod, pede eu gravida eleifend, turpis tellus vestibulum odio, non sollicitudin libero mi congue dui. Curabitur metus arcu, consectetuer vitae, tincidunt eu, convallis at, est. Vestibulum justo eros, consequat non, feugiat quis, lobortis sit amet, purus. Praesent mollis tortor eu est.• Quisque adipiscing posuere diam. Aenean ornare, sapien a condimentum porta, pede est fermentum risus, ut semper eros diam eu libero. Nunc nec felis vel felis condimentum volutpat. Nam wisi. Etiam mauris tortor, scelerisque sed, gravida quis, tristique ac, dui. Nullam aliquet, elit sed elementum aliquam, eros est ornare ante, et euismod orci odio dictum justo. In vitae nunc. Etiam rhoncus sagittis risus. Sed id leo euismod sem convallis viverra. Morbi tortor diam, venenatis quis, venenatis eget, pharetra sit amet, erat.• Nunc ultricies. Praesent id justo. Sed sagittis risus nonummy leo ornare scelerisque. Phasellus vitae libero nec risus hendrerit vehicula. Mauris bibendum nunc eget eros. Ut felis justo, sagittis vitae, elementum et, egestas quis, mauris. Nullam a tellus ut libero posuere gravida. Nullam eu nulla at dui hendrerit dictum. In at velit. Vestibulum et tellus et lacus bibendum varius. Praesent hendrerit volutpat ipsum.

•Donec fringilla euismod felis. Proin porta rhoncus nunc. Maecenas dapibus, lacus eu convallis scelerisque, nibh lacus vulputate nunc, a mollis wisi ligula sed justo. In ac orci a enim scelerisque tempus. Quisque risus mauris, pulvinar in, dapibus et, imperdiet eget, orci. Nam sed pede. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nulla pharetra, ante ut egestas dignissim, mauris nulla semper turpis, pharetra scelerisque enim nulla sed purus. Morbi consectetuer cursus neque. Curabitur eu metus eget orci sagittis laoreet. Duis vulputate posuere dui. Integer id tellus. Nulla quis enim. Nulla semper urna quis neque. Donec quis mi at mauris sagittis tempus. Ut felis lectus, luctus in, consequat tempus, aliquam vel, libero. Fusce non arcu. Suspendisse a lorem id leo facilisis venenatis.

56

Fun & Games

Try to stump Identifont(http://www.identifont.com/index.html)

57

05 Layout

58

Designing an interesting page is a battle between

Saliency: the interesting, eye-catching parts of a design

Unity: the grounding, unifying parts of a design

The dynamic (the tension) between them makes it ART.

Unity vs. Saliency

59

Complete Unity = Complete Boredom

60

Tweak Time: Size

61

Where Does Your Eye Go?

62

Size Example

63

Tweak Time: Shape

64


65

Shape Example

66

Tweak Time: Color

67


68

Color Example

69

Tweak Time: Texture (Busy vs. Calm)

70


71

Tweak Time: Texture (Busy vs. Calm)

Lorem ipsum Lorem ipsum dolor sit amet, dolor sit amet, consect-consect-etur adipisicing etur adipisicing elit, sed do elit, sed do eiusmod tempor eiusmod tempor incididunt ut incididunt ut labore et dolore labore et dolore magna aliqua. magna aliqua. Ut enim ad Ut enim ad minim ven-minim ven-iam, quis iam, quis nostrud nostrud exercitation exercitation ullamco laboris ullamco laboris nisi ut aliquip ex nisi ut aliquip ex ea commodo ea commodo consequat. consequat.

72

Texture Example

73

Tweak Time: Combinations

74


Lorem ipsum Lorem ipsum dolor sit amet, dolor sit amet, consect-consect-etur adipisicing etur adipisicing elit, sed do elit, sed do eiusmod tempor eiusmod tempor incididunt ut incididunt ut labore et dolore labore et dolore magna aliqua. magna aliqua. Ut enim ad Ut enim ad minim ven-minim ven-iam, quis iam, quis nostrud nostrud exercitation exercitation ullamco laboris ullamco laboris nisi ut aliquip ex nisi ut aliquip ex ea commodo ea commodo consequat. consequat.

75

Combo Example

76

Combo Example

77

Layout: The Grid

78

Newspaper Grid

79

New Newspaper Grid

80

Unity

81

82

83

84

Grids on the Web

85

6-Column Grid

86

6-Column to 2/2/2-Column

87

6-Column to 2/4 Column

88

6-Column to 1/4/1-Column

89

Symmetrical vs. Asymmetrical

90


91


92


93


94

Good Example

95

More

Internet Wayback Machine (http://www.archive.org/)

Documents

Web-Based Graphic Design