1 / 46

Design Concepts

Design Concepts. Using Text & Graphics Effectively. Underlying Principles of Design. Subjective Communication Visual Appeal Objective Utility Engagement. Underlying Principles of Design. Communication User Interaction First Seconds Site Must Clearly Communicate Why it is Useful

gates
Download Presentation

Design Concepts

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. Design Concepts Using Text & Graphics Effectively

  2. Underlying Principles of Design • Subjective • Communication • Visual Appeal • Objective • Utility • Engagement

  3. Underlying Principles of Design • Communication • User Interaction • First Seconds • Site Must Clearly Communicate Why it is Useful • 10 Seconds • Convince User Site can be Navigated Easily • 1 Minute • Content is of Real Interest & Value

  4. Underlying Principles of Design • Communication • Clarity • Logical Organization • Opening Content that can be Scanned v. Read • Concisely Stated, Without Extraneous Material • Benefit to User • Clear v. Obscure • Error Free • Spelling & Grammar • Accurate & Current • Link Rot, Link Quality, & Link Descriptions

  5. Underlying Principles of Design • Communication • Legibility • High Contrast • Color • Text Size • Typeface • Density • Use Headings & Lists • Images • Meaningful Relationship to Content • White Space

  6. Underlying Principles of Design • Communication • Readability • Understanding • Familiar Terms & Phrases • Language • Vivid • Active • Personable • Images • Meaningful Relationship to Content • White Space

  7. Underlying Principles of Design • Visual Appeal • Richness • Uncluttered • White Space • Balance • Images Complement Content & Each Other • Images • Meaningful Relationship to Content • White Space • High Quality

  8. Underlying Principles of Design • Visual Appeal • Style • Suitable for Purpose • Convey Mood or Tone • Formal/Informal, Youthful/Mature, Playful/Serious • Stylistic Elements Fit Together • Color Combinations • Typefaces • Images

  9. Underlying Principles of Design • Visual Appeal • Unity • Organization • Consistency & Repetition • Color, Navigational Elements, Logo • Makes Each Page Appear to be Part of the Whole • Creates a Sense of Order • Immediately Obvious Which Elements Relate to Each Other

  10. Underlying Principles of Design • Utility • Intuitive Interface • Easy to Use • Clear as to How to Perform Tasks • Predictable • Lack of Frustration • Successful Accomplishment of Tasks

  11. Underlying Principles of Design • Utility • Navigability • Clearly Identified Links • Describes Link Destination • Should NOT Have to Backtrack to Home • Where You Are, Where You Can Go, Where You’ve Been • Logical Organization of Content

  12. Underlying Principles of Design • Utility • Value • What is Benefit for User? • Remember Site • Return Visitors

  13. Underlying Principles of Design • Engagement • User Awareness • Types of Visitors Site Hopes to Engage • Anticipate What Users Want & Expect • Clearly Recognize Benefits

  14. Underlying Principles of Design • Engagement • User-Centered Purpose • Does the Site Have a Purpose? • Knowledge • Decision Support • Accomplishing Tasks • Interconnectedness • Enjoyment • Is Purpose Immediately Apparent?

  15. Underlying Principles of Design • Engagement • Interpersonal Rapport • Visitors Feel • Comfort • Trust • Understanding • Duration • Return to Site?

  16. Heading (Sans Serif) v. Body (Serif) LoremIpsum Loremipsum dolor sit amet, consectetueradipiscingelit. Nuncplacerat ante in libero. Vivamussedenim. Nuncmalesuada. Sedfacilisis. Pellentesque et odio. Crastortor. Etiamconsequatdiam at ligula. Sedvestibulumdiamsedpede. In hendreritnulla et justo. Donecullamcorpermattispede. Doneclectuspede, aliquet et, nonummyeu, sagittis sit amet, est. Nam faucibusnullanecnulla. Praesentporttitorultricieseros. Nam mauris. Proinauguelibero, convallis non, hendreritsed, condimentum at, magna. In convallis, ligula ac interdumadipiscing, loremleoultrices dolor, id tinciduntodio dolor at nibh. Aliquamnisl ante, vestibulumsed, ultricies a, ullamcorper id, turpis. Pellentesque quam lacus, dapibus vitae, interdum at, viverra non, orci. Suspendisseorcineque, mattisvenenatis, semper at, lobortis at, mauris. Nuncconvallis, quam non scelerisquerutrum, elitnunceuismodneque, ac euismodrisusauguequisturpis.

  17. Heading / Body Size Contrast LoremIpsum Loremipsum dolor sit amet, consectetueradipiscingelit. Nuncplacerat ante in libero. Vivamussedenim. Nuncmalesuada. Sedfacilisis. Pellentesque et odio. Crastortor. Etiamconsequatdiam at ligula. Sedvestibulumdiamsedpede. In hendreritnulla et justo. Donecullamcorpermattispede. Doneclectuspede, aliquet et, nonummyeu, sagittis sit amet, est. Nam faucibusnullanecnulla. LoremIpsum Loremipsum dolor sit amet, consectetueradipiscingelit. Nuncplacerat ante in libero. Vivamussedenim. Nuncmalesuada. Sedfacilisis. Pellentesque et odio. Crastortor. Etiamconsequatdiam at ligula.Sedvestibulumdiamsedpede. In hendreritnulla et justo. Donecullamcorpermattispede. Doneclectuspede, aliquet et, nonummyeu, sagittis sit amet, est. Nam faucibusnullanecnulla.

  18. Headings (Fewer & Larger) LoremIpsum Loremipsum dolor sit amet, consectetueradipiscingelit. Nuncplacerat ante in libero. Vivamussedenim. Nuncmalesuada. Sedfacilisis. Pellentesque et odio. Crastortor. Etiamconsequatdiam at ligula. Sedvestibulumdiamsedpede. In hendreritnulla et justo. Donecullamcorpermattispede. Doneclectuspede, aliquet et, nonummyeu, sagittis sit amet, est. Nam faucibusnullanecnulla. LoremIpsum Dolor Sit Amet Loremipsum dolor sit amet, consectetueradipiscingelit. Nuncplacerat ante in libero. Vivamussedenim. Nuncmalesuada. Sedfacilisis. Pellentesque et odio. Crastortor. Etiamconsequatdiam at ligula.Sedvestibulumdiamsedpede. In hendreritnulla et justo. Donecullamcorpermattispede. Doneclectuspede, aliquet et, nonummyeu, sagittis sit amet, est.

  19. Subheads As Named Anchors LoremIpsum Loremipsum dolor sit amet, consectetueradipiscingelit. Nuncplacerat ante in libero. Vivamussedenim. Nuncmalesuada. Sedfacilisis. Pellentesque et odio. Crastortor. Etiamconsequatdiam at ligula. Sedvestibulumdiamsedpede. In hendreritnulla et justo. Donecullamcorpermattispede. Doneclectuspede, aliquet et, nonummyeu, sagittis sit amet, est. Dolor Sit Amet Nam faucibusnullanecnulla. Praesentporttitorultricieseros. Nam mauris. Proinauguelibero, convallis non, hendreritsed, condimentum at, magna. In convallis, ligula ac interdumadipiscing, loremleoultrices dolor, id tinciduntodio dolor at nibh. Aliquamnisl ante, vestibulumsed, ultricies a, ullamcorper id, turpis. Pellentesque quam lacus, dapibus vitae, interdum at, viverra non, orci. Suspendisseorcineque, mattisvenenatis, semper at, lobortis at, mauris.

  20. Leading Loremipsum Loremipsum dolor sit amet, consectetueradipiscingelit. Nuncplacerat ante in libero. Vivamussedenim. Nuncmalesuada. Sedfacilisis. Pellentesque et odio. Crastortor. Etiamconsequatdiam at ligula. Sedvestibulumdiamsedpede. In hendreritnulla et justo. Donecullamcorpermattispede. Doneclectuspede, aliquet et, nonummyeu, sagittis sit amet, est. Loremipsum Loremipsum dolor sit amet, consectetueradipiscingelit. Nuncplacerat ante in libero. Vivamussedenim. Nuncmalesuada. Sedfacilisis. Pellentesque et odio. Crastortor. Etiamconsequatdiam at ligula. Sedvestibulumdiamsedpede. In hendreritnulla et justo. Donecullamcorpermattispede. Doneclectuspede, aliquet et, nonummyeu, sagittis sit amet, est. http://typetester.maratz.com/

  21. White Space • Space Between Visual Elements • The Part of the Design that “Isn't" There • Just as Important as the Elements that are There

  22. White Space Testing

  23. White Space Testing Wichita State University 2006

  24. Typographic Contrast - Typeface Chicago Power Chicago Power

  25. Typographic Contrast - Size Chicago Power Chicago Power

  26. Typographic Contrast - Style Chicago Power Chicago Power

  27. Typographic Contrast - Weight Chicago Power Chicago Power

  28. Typographic Contrast - Spacing Chicago Power Chicago P o w e r

  29. Typographic Contrast - Background Chicago Power ChicagoPower Chicago <span style="background-color:yellow; color:green">Power</span>

  30. Typographic Contrast - Color Code Red Blue Moon CodeRed BlueMoon

  31. Layout (Conservative / Dynamic) Well-defined, rectangular areas on the page Warm greens accompanied by cool blues Balance intimacy with professionalism Overlapping panels Imagery evokes customer service & technology Entertain the eye & communicate innovation

  32. Balance (Symmetrical / Asymmetrical ) • Provide Sense of / Lack of Equilibrium • Create Tension & Visual Weight • Use of Approximate Horizontal Symmetry • Imagery Incorporates Good Amount of White • Graphic Text is Thin & Unobtrusive • Elements Blend into Background • Not Dominant in Any One Place • Subtle Greens Used Sparingly

  33. Dominance • Emphasis & Visual Weight in a Composition • Where Eye is First Led When Looking at a Design • Right-most Column is Dominant • Largest Area of Color • Uses Big, Reversed Text for Major Headings • Center Column is Subdominant • Uses Less Color & Smaller Text in Less Space • Left-most Column is Subordinate

  34. Color • Eye’s Response to Wavelengths of Radiation • Hue, Value, Saturation • All Hues Brought Down to a Mid-range Value • Surrounded by Red & Orange • Plays Off of Natural Complements • Very Warm, Very Rich Set of Tones • Feel Full & Vibrant

  35. Color • Psychological Response • Red • Power, Energy, Warmth, Passion, Aggression, Danger • Green • Nature, Health, Renewal, Good Luck, Jealousy • Problems in Global Market • Blue • Trust, Conservative, Security, Order

  36. Color • Psychological Response • Yellow • Optimism, Hope, Cowardice, Betrayal • Sacred Color to Hindus • Purple • Spiritual, Mystery, Royalty, Arrogance • Orange • Energy, Balance, Warmth • Signifies a Product is Inexpensive in the US

  37. Color • Psychological Response • Brown • Earth, Reliability, Comfort, Endurance • Successful Food Packaging in US • Poor Sales in Columbia • Gray • Intellect, Future, Modest, Sadness, Decay

  38. Color • Psychological Response • White • Purity, Cleanliness, Precision, Innocence, Death • Signifies Marriage in the US • Signifies Death in India, Other Eastern Cultures • Black • Death, Mystery, Fear, Unhappiness • Packaging • Power, Sexuality, Sophistication, Elegance

  39. Shape • Psychological Response • Rectangle • Order, Logic, Containment • Circle • Connection, Community, Wholeness • Female • Warmth, Comfort, Sensuality, Love • Triangle • Energy, Power, Law, Science, Religion • Male • Strength, Aggression, Dynamic

  40. Graphic Placement Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc placerat ante in libero. Vivamus sed enim. Nunc malesuada. Sed facilisis. Pellentesque et odio. Cras tortor. Etiam consequat diam at ligula. Sed vestibulum diam sed pede. In hendrerit nulla et justo. Donec ullamcorper mattis pede. Donec lectus pede, aliquet et, nonummy eu, sagittis sit amet, est.

  41. Graphic Cropping (Visual Impact)

  42. Branding • Signifies Goods/Services • Name • Slogan • Logo • Something That Won’t Come Off in the Wash

  43. Branding • Functional — Objective, Logical, Practical • Communicate • Recognition & Recall • Differentiate • Emotional — Subjective, Emotive, Creative • Personality • Add Value • Attractive

  44. Branding • General • Leo Burnett • Nike v. Adidas • Logitech • Michelin v. Firestone • FedEx

  45. Branding • Web Principles • Consistency • Logo • Tagline • Navigation • Color Scheme • www.lattice.com • www.YOURSITE.com

  46. Branding • Industry Examples • Implementing Color Scheme • Rolex v. Barnes & Noble • Shopping Experience • Old Navy v. Eddie Bauer

More Related