1 / 95

Web-Based Graphic Design

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?.

tana
Download Presentation

Web-Based Graphic Design

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web-Based Graphic Design • Douglas 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. Holy Communion, 1896 (Age 15) Les Demoiselles d'Avignon, 1907 (Age 27) Learning thenBreaking the Rules

  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. Primary • Red, Blue, and Yellow • Traditional, Stable, Familiar • Relatively recessive in relation to other design elements • What website do you know that uses these colors?

  24. Secondary • Purple, 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

  32. Monochromatic • A 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

  34. Web Color Wheel www.visibone.com

  35. http://kuler.adobe.com/ http://colorschemedesigner.com/ http://www.delicious.com/dwfvcc/color Color Calculator

  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 Fonts Times New Roman 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. Adobe Minion 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.

  45. Let’s Look Closer ee RR aa AA gg SS

  46. Type Can Take a Back Seat

  47. Or It Can Be In Your Face

  48. The Web Limits Type • That’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

  49. But 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.

More Related