web-based graphic design
DESCRIPTION
Web-Based Graphic Design. Douglas R. Holschuh. Lesson Outline. The Design Process The Hierarchy of Design Basic Color Theory Online Typography Layout Techniques. 01 The Design Process. What is Graphic Design?. - PowerPoint PPT PresentationTRANSCRIPT
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
•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.
41
Fonts Have Meaning
•Fun: Marker Felt
•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.
42
Fonts Have Meaning
•Retro: Century Schoolbook
•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.
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
Where Does Your Eye Go?
65
Shape Example
66
Tweak Time: Color
67
Where Does Your Eye Go?
68
Color Example
69
Tweak Time: Texture (Busy vs. Calm)
70
Where Does Your Eye Go?
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
Where Does Your Eye Go?
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
Symmetrical vs. Asymmetrical
91
Symmetrical vs. Asymmetrical
92
Symmetrical vs. Asymmetrical
93
Symmetrical vs. Asymmetrical
94
Good Example
95
More
Internet Wayback Machine (http://www.archive.org/)