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
![Page 1: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/1.jpg)
1
Web-Based Graphic DesignDouglas R. Holschuh
![Page 2: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/2.jpg)
2
Lesson Outline
The Design Process
The Hierarchy of Design
Basic Color Theory
Online Typography
Layout Techniques
![Page 3: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/3.jpg)
3
01 The Design Process
![Page 4: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/4.jpg)
4
What is Graphic Design?
The process of artistic composition for the presentation, communication, and organization of information.
![Page 5: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/5.jpg)
5
How Can We Learn Graphic Design?
Sadly, you’re not going to learn it here.
Practice/Experimention/Play
Observation
![Page 6: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/6.jpg)
6
Independence/Dependence
Graphic design is:
Technology independent (and yet it’s not)
Media independent (and yet it’s not)
![Page 7: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/7.jpg)
7
More Definitions
“Thoughtful exercises in exclusion”(Lloyd Rieber, Designing Learning Environments That Excite Serious Play, 2001)
Making and defending choices
![Page 8: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/8.jpg)
8
Choices∞
0
![Page 9: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/9.jpg)
9
Much to Consider
![Page 10: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/10.jpg)
10
The Computer Screen
Color
Varies greatly from screen to screen
Type
Low resolution makes reading difficult
Layout
Screen sizes vary.
Television or magazine?
![Page 11: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/11.jpg)
11
Screen Sizes
![Page 12: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/12.jpg)
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
![Page 13: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/13.jpg)
13
Learning thenBreaking the Rules
Holy Communion, 1896 (Age 15)
Les Demoiselles d'Avignon, 1907 (Age 27)
![Page 14: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/14.jpg)
14
Design: More Details
![Page 15: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/15.jpg)
15
03 Color
![Page 16: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/16.jpg)
16
Color Has Meaning
![Page 17: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/17.jpg)
17
The Color Wheel
![Page 18: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/18.jpg)
18
Primary Colors
![Page 19: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/19.jpg)
19
Secondary Colors
![Page 20: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/20.jpg)
20
Tertiary Colors
![Page 21: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/21.jpg)
21
Infinite Colors
![Page 22: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/22.jpg)
22
The Color Harmonies
There are 4 basic ways colors on the wheel are combined into harmonies:
Primary/Secondary
Analogous
Complementary
Monochromatic
![Page 23: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/23.jpg)
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?
![Page 24: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/24.jpg)
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?
![Page 25: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/25.jpg)
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?
![Page 26: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/26.jpg)
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?
![Page 27: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/27.jpg)
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?
![Page 28: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/28.jpg)
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?
![Page 29: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/29.jpg)
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?
![Page 30: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/30.jpg)
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?
![Page 31: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/31.jpg)
31
Complementary: Red, Green
QuickTime™ and aTIFF (LZW) decompressor
are needed to see this picture.
![Page 32: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/32.jpg)
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?
![Page 33: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/33.jpg)
33
Saturation
HIGH vs. LOW
![Page 34: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/34.jpg)
34
Web Color Wheel
www.visibone.com
![Page 35: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/35.jpg)
35
Color Calculator• http://kuler.adobe.com/
• http://colorschemedesigner.com/
• http://www.delicious.com/dwfvcc/color
![Page 36: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/36.jpg)
36
04 Type
![Page 37: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/37.jpg)
37
Fonts Have Meaning
•The Middle Ages
•The Coffee Klatch
•The Elegant Bride
•Pong
![Page 38: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/38.jpg)
38
My Bad!
•The Middle Ages
•The Coffee Klatch
•The Elegant Bride
•Pong
![Page 39: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/39.jpg)
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.
![Page 40: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/40.jpg)
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.
![Page 41: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/41.jpg)
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.
![Page 42: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/42.jpg)
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.
![Page 43: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/43.jpg)
43
What Makes Fonts Different?
![Page 44: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/44.jpg)
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.
![Page 45: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/45.jpg)
45
Let’s Look Closer
eeaagg
RRAASS
![Page 46: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/46.jpg)
46
Type Can Take a Back Seat
![Page 47: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/47.jpg)
47
Or It Can Be In Your Face
![Page 48: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/48.jpg)
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
![Page 49: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/49.jpg)
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
![Page 50: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/50.jpg)
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.
![Page 51: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/51.jpg)
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/
![Page 52: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/52.jpg)
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)
![Page 53: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/53.jpg)
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.
![Page 54: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/54.jpg)
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.
![Page 55: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/55.jpg)
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.
![Page 56: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/56.jpg)
56
Fun & Games
Try to stump Identifont(http://www.identifont.com/index.html)
![Page 57: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/57.jpg)
57
05 Layout
![Page 58: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/58.jpg)
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
![Page 59: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/59.jpg)
59
Complete Unity = Complete Boredom
![Page 60: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/60.jpg)
60
Tweak Time: Size
![Page 61: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/61.jpg)
61
Where Does Your Eye Go?
![Page 62: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/62.jpg)
62
Size Example
![Page 63: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/63.jpg)
63
Tweak Time: Shape
![Page 64: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/64.jpg)
64
Where Does Your Eye Go?
![Page 65: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/65.jpg)
65
Shape Example
![Page 66: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/66.jpg)
66
Tweak Time: Color
![Page 67: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/67.jpg)
67
Where Does Your Eye Go?
![Page 68: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/68.jpg)
68
Color Example
![Page 69: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/69.jpg)
69
Tweak Time: Texture (Busy vs. Calm)
![Page 70: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/70.jpg)
70
Where Does Your Eye Go?
![Page 71: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/71.jpg)
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.
![Page 72: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/72.jpg)
72
Texture Example
![Page 73: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/73.jpg)
73
Tweak Time: Combinations
![Page 74: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/74.jpg)
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.
![Page 75: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/75.jpg)
75
Combo Example
![Page 76: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/76.jpg)
76
Combo Example
![Page 77: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/77.jpg)
77
Layout: The Grid
![Page 78: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/78.jpg)
78
Newspaper Grid
![Page 79: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/79.jpg)
79
New Newspaper Grid
![Page 80: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/80.jpg)
80
Unity
![Page 81: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/81.jpg)
81
![Page 82: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/82.jpg)
82
![Page 83: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/83.jpg)
83
![Page 84: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/84.jpg)
84
Grids on the Web
![Page 85: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/85.jpg)
85
6-Column Grid
![Page 86: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/86.jpg)
86
6-Column to 2/2/2-Column
![Page 87: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/87.jpg)
87
6-Column to 2/4 Column
![Page 88: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/88.jpg)
88
6-Column to 1/4/1-Column
![Page 89: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/89.jpg)
89
Symmetrical vs. Asymmetrical
![Page 90: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/90.jpg)
90
Symmetrical vs. Asymmetrical
![Page 91: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/91.jpg)
91
Symmetrical vs. Asymmetrical
![Page 92: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/92.jpg)
92
Symmetrical vs. Asymmetrical
![Page 93: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/93.jpg)
93
Symmetrical vs. Asymmetrical
![Page 94: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/94.jpg)
94
Good Example
![Page 95: Web-Based Graphic Design](https://reader036.vdocuments.net/reader036/viewer/2022081514/56814da2550346895dbafc6e/html5/thumbnails/95.jpg)
95
More
Internet Wayback Machine (http://www.archive.org/)