Published on

1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide


  1. 1. Good CRAP Bad CRAP
  2. 2. Anatomy of a Page Layout Typography Vector logo Raster photo VCT 103
  3. 3. Successful WebPages <ul><li>High quality images and graphics </li></ul><ul><li>Effective design </li></ul><ul><li>Good use of typography </li></ul>
  4. 4. But I’m NOT a designer!!!! Should still at least recognize and be conscious of the following principles for all visual communication…
  5. 5. 4 Principles of Design <ul><li>1. C ontrast </li></ul><ul><li>2. R epetition </li></ul><ul><li>3. A lignment </li></ul><ul><li>4. P roximity </li></ul>VCT 103
  6. 6. <ul><li>If not same, make REALLY different </li></ul><ul><li>Strive for contrast not conflict </li></ul><ul><ul><li>Black and white </li></ul></ul><ul><ul><li>Not light gray and medium gray </li></ul></ul>Contrast VCT 103
  7. 7. Contrast <ul><li>Can be size as well as color </li></ul><ul><ul><li>Vary image sizes, drawing attention to most important elements </li></ul></ul>
  8. 8. Repetition <ul><li>An applied form of consistency </li></ul><ul><li>Repeat one or more elements of design throughout entire piece </li></ul><ul><li>Don’t overwhelm, distracting from design </li></ul>VCT 103
  9. 9. Repetition
  10. 10. Repetition <ul><li>Multiple pages in print or web require repetition to give sense of direction </li></ul>
  11. 11. Alignment <ul><li>Unifies and organizes info </li></ul><ul><li>Every element should consciously have visual connection with another element on page </li></ul>VCT 103
  12. 12. Alignment
  13. 13. Proximity (Placement) <ul><li>Items related to each other should be grouped close together, becoming one visual unit </li></ul><ul><li>Organizes </li></ul><ul><li>Reduces clutter </li></ul>VCT 103
  14. 14. Proximity (Placement) • Not too many individual elements • Grouped similar elements provide clean navigation
  15. 15. What is Typography? <ul><li>Design and use of typefaces as a means of visual communication </li></ul>
  16. 16. Type Styles <ul><li>Serif —fonts with serifs or “feet” </li></ul><ul><li>San Serif —fonts without serifs </li></ul><ul><li>Script —fonts that look like cursive or handwriting </li></ul><ul><li>Deco —fonts with decorative elements or graphics </li></ul>VCT 103
  17. 17. Type Styles <ul><li>Serif </li></ul><ul><ul><li>Times New Roman </li></ul></ul><ul><ul><li>Garamond </li></ul></ul><ul><li>San Serif </li></ul><ul><ul><li>Arial </li></ul></ul><ul><ul><li>Century Gothic </li></ul></ul>VCT 103
  18. 18. Type Styles <ul><li>Script </li></ul><ul><ul><li>Monotype Corsiva </li></ul></ul><ul><li>Deco </li></ul><ul><ul><li> (Webdings) </li></ul></ul>VCT 103
  19. 19. Anatomy of Type Anatomy Of Type capline meanline baseline descender line 3 ascender line 2 line 1 leading x-height VCT 103
  20. 20. Typography Basics <ul><li>Leading—the space between lines of type </li></ul>tight loose VCT 103
  21. 21. Typography Basics <ul><li>Kerning—the space between individual characters </li></ul>tight loose VCT 103
  22. 22. Typography Basics <ul><li>Tracking—the space between all characters in a line of text </li></ul>tight loose normal VCT 103
  23. 23. General Typography Rules <ul><li>Do not use more than three different fonts at any time </li></ul><ul><li>Make sure your fonts contrast with each other </li></ul><ul><li>Make sure your fonts do not conflict with each other </li></ul>VCT 103
  24. 24. If Unsure, Use One Font
  25. 25. Reverse Engineering <ul><li>What does this mean to you? </li></ul>VCT 103
  26. 26. Reverse Engineering <ul><li>“The process of analyzing an existing system to identify its components and their interrelationships and create representations of the system in another form or at a higher level of abstraction.” </li></ul>VCT 103
  27. 27. Reverse Engineering <ul><li>In other words… </li></ul><ul><li>Study the pros! </li></ul>VCT 103
  28. 28. Reverse Engineering <ul><li>Look at examples </li></ul><ul><li>Dissect them </li></ul><ul><li>Learn the process and technique </li></ul><ul><li>Do it yourself, incorporating new found knowledge with your ideas, style and approach to even improve on the example you used </li></ul>VCT 103
  29. 29. Pros Even Study Other Pros <ul><li>This is a very common practice </li></ul><ul><li>GM dissects Fords cars, Sony looks at Panasonic’s new cameras </li></ul><ul><li>Don’t be afraid to use reverse engineering to learn! </li></ul>
  30. 30. We will use this today to learn page layout and design basics, but first let’s look at the production process… VCT 103
  31. 31. Project Planning <ul><li>Thumbnails </li></ul><ul><ul><li>Brainstorming </li></ul></ul><ul><ul><li>Quick, “rough” ideas </li></ul></ul><ul><ul><li>Quantity NOT quality </li></ul></ul><ul><li>Sketches </li></ul><ul><ul><li>Detailed ideas or layouts </li></ul></ul><ul><ul><li>Still “rough”, not fine details </li></ul></ul>VCT 103
  32. 32. Thumbnail Examples <ul><li>Quick </li></ul><ul><li>Rough </li></ul><ul><li>Quantity NOT quality </li></ul><ul><li>Variations </li></ul><ul><li>Simple representations of balance, alignment, etc </li></ul>Samples from: The Visual Design Primer by Susan G. Wheeler
  33. 33. Layout Sketches Samples from: Graphic Arts Fundamentals by John R. Walker <ul><li>Rough ideas </li></ul><ul><li>Variations (3 to 4) </li></ul><ul><li>More detailed graphics representation </li></ul><ul><li>Lines or scribbles to show text placement </li></ul>
  34. 34. Move to Computer Comp Samples from: Graphic Arts Fundamentals by John R. Walker <ul><li>Narrowed down to a one or two final designs </li></ul><ul><li>Final fonts for text </li></ul><ul><li>Vector versions of logos/graphics </li></ul><ul><li>Scans of photos </li></ul>
  35. 35. One Final Rule… <ul><li>Never use a word processor for page layout!!!!!! </li></ul>