1. CIS 1300 – Web Design SoftwareMichael J. Losacco Design Concepts Using Text & Graphics Effectively

2. CIS 1300 – Web Design Software Underlying Principles of Design Subjective –Communication –Visual Appeal Objective –Utility –Engagement

3. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software Underlying Principles of Design Communication –Legibility High Contrast –Color Text Size –Typeface –Density »Use Headings & Lists Images –Meaningful Relationship to Content –White Space

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

7. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software Underlying Principles of Design Utility –Value What is Benefit for User? Remember Site Return Visitors

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

14. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software Underlying Principles of Design Engagement –Interpersonal Rapport Visitors Feel –Comfort –Trust –Understanding Duration Return to Site?

16. Heading (Sans Serif) v. Body (Serif) Lorem Ipsum 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. Nam faucibus nulla nec nulla. Praesent porttitor ultricies eros. Nam mauris. Proin augue libero, convallis non, hendrerit sed, condimentum at, magna. In convallis, ligula ac interdum adipiscing, lorem leo ultrices dolor, id tincidunt odio dolor at nibh. Aliquam nisl ante, vestibulum sed, ultricies a, ullamcorper id, turpis. Pellentesque quam lacus, dapibus vitae, interdum at, viverra non, orci. Suspendisse orci neque, mattis venenatis, semper at, lobortis at, mauris. Nunc convallis, quam non scelerisque rutrum, elit nunc euismod neque, ac euismod risus augue quis turpis.

17. Heading / Body Size Contrast Lorem Ipsum 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. Nam faucibus nulla nec nulla. Lorem Ipsum 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. Nam faucibus nulla nec nulla.

18. Headings (Fewer & Larger) Lorem Ipsum Dolor Sit Amet 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. Lorem Ipsum 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. Nam faucibus nulla nec nulla.

19. Subheads As Named Anchors Lorem Ipsum 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. Dolor Sit Amet Nam faucibus nulla nec nulla. Praesent porttitor ultricies eros. Nam mauris. Proin augue libero, convallis non, hendrerit sed, condimentum at, magna. In convallis, ligula ac interdum adipiscing, lorem leo ultrices dolor, id tincidunt odio dolor at nibh. Aliquam nisl ante, vestibulum sed, ultricies a, ullamcorper id, turpis. Pellentesque quam lacus, dapibus vitae, interdum at, viverra non, orci. Suspendisse orci neque, mattis venenatis, semper at, lobortis at, mauris.

20. Leading Lorem ipsum 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. Lorem ipsum 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. http://typetester.maratz.com/

21. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software White Space Testing

23. CIS 1300 – Web Design Software White Space Testing Wichita State University 2006

24. CIS 1300 – Web Design Software Typographic Contrast - Typeface Chicago Power

25. CIS 1300 – Web Design Software Typographic Contrast - Size Chicago Power Chicago Power

26. CIS 1300 – Web Design Software Typographic Contrast - Style Chicago Power

27. CIS 1300 – Web Design Software Typographic Contrast - Weight Chicago Power

28. CIS 1300 – Web Design Software Typographic Contrast - Spacing Chicago P o w e r

29. CIS 1300 – Web Design Software Typographic Contrast - Background Chicago Power

30. CIS 1300 – Web Design Software Typographic Contrast - Color Code Red Blue Moon Code Red Blue Moon

31. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software Color Psychological Response –Brown Earth, Reliability, Comfort, Endurance –Successful Food Packaging in US –Poor Sales in Columbia –Gray Intellect, Future, Modest, Sadness, Decay

38. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software 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. CIS 1300 – Web Design Software Graphic Cropping (Visual Impact)

42. CIS 1300 – Web Design Software Branding Signifies Goods/Services –Name –Slogan –Logo Something That Won’t Come Off in the Wash

43. CIS 1300 – Web Design Software Branding Functional — Objective, Logical, Practical –Communicate –Recognition & Recall –Differentiate Emotional — Subjective, Emotive, Creative –Personality –Add Value –Attractive

44. CIS 1300 – Web Design Software Branding General –Leo Burnett –Nike v. Adidas –Logitech –Michelin v. Firestone –FedEx

45. CIS 1300 – Web Design Software Branding Web Principles –Consistency Logo Tagline Navigation Color Scheme –www.lattice.com –www.YOURSITE.com

46. CIS 1300 – Web Design Software Branding Industry Examples –Implementing Color Scheme Rolex v. Barnes & Noble –Shopping Experience Old Navy v. Eddie Bauer