1. What is Web Design?

2. Definition of Web Design  What is Web Design?  Wikipedia: “Web Design is a skill of creating presentations of content (usually hypertext or hypermedia that is delivered to an end-user through the World Wide Web, by way of a Web browser or either Web- enabled software like Internet television clients, microblogging clients and RSS feeders.”

3. Confused? !!&!*!???****???!

4. Definition of Web Design  Web Design is difficult to define because it covers so much ground: Clients Types of contents Functionalities

5. What is Web Design?

6. Where Should I Start?  Intimidating  Web Design Basics/Principles

7. Importance of Web Design Basics

8. Web Design Basics What is a good Web site from a design standpoint?

9. Introduction  Think of something anyone can do? Answer: Make an ugly Web page.  To avoid making an ugly Web page, we need to learn the basic design principles.  Four basic concepts: alignment, proximity, rhythm/repetition, and contrast + one additional: spelling  Results: From dorky to professional looking pages

10. How do users think?  In order to use the principles properly we first need to understand: How users interact with Web sites. How they think What are the basic patterns of users’ behavior

11. How do users think?  Users don’t read, they scan.  Web users are impatient and insist on instant gratification.  Users don’t make optimal choices.  Users follow their intuition.  Users want to have control. http://www.youtube.com/watch?v=lo_a2cfBUGc

12. Alignment  Alignment: Items on the page are lined up with each other  Two types of alignment: Horizontal alignment Vertical alignment.  Choose one horizontal alignment and one vertical alignment. Use them on the entire site. Don’t mix alignments.  Get the text away from the left edge. This means indent your text so the text doesn’t appear in long, dorky, difficult-to-read lines.  Type sits on an invisible line called the “baseline”.

13. Example 1

14. Example 2

16. Example 3

18. Example 4

20. Example 5

21. Proximity  Proximity: Relationships that items develop when they are close together, in close proximity.  Be conscious of the space between elements. Group together Space them apart  Difference between a paragraph and a break: and

22. Proximity  Three tools of proximity: Grouping Containment Whitespace

23. Example 1

24. Example 2

25. Example 3

26. Example 4

27. Example 5

29. Rythms & Repetition  Rhythm: Associate elements by repeating a common stylistic feature or arrangement  Repetition: Throughout a project you repeat certain elements that tie all the disparate parts together.  Repetition elements that unify the entire site: Navigation buttons Colors Style Illustrations Format Layout Typography

30. Example 1

32. Example 2

33. Contrast  Contrast: What draws your eyes onto the page.  Contrasting elements guide your eyes into the page, create a hierarchy of information, and enable you to skim through the vast array of information and pick out what you need

34. Contrast  Contrast elements: Style Colors Graphic signposts Spatial arrangement  Exception: If you want people to sit and read through an entire piece, avoid contrast so the page can be bland and uninterrupted.

35. Example 1

38. Example 2

39. Squint Test  Easy way to assess the overall contrast of your page  Technique: Close your eyelids so your eyes are about three quarters closed, so that normal text becomes blurred and unreadable.

40. Example 3

41. Contrast  Create a focal point: Something must be the dominating force, and the other elements follow a hierarchy from that point down. The focus is created through contrast.

42. Example 4

45. Spell it Right!  Bad spelling and bad grammar can destroy the professional effect of your web site  Use spell checker  http://www.thefreelibrary.com/spellr.us+Surv ey+Reveals%3A+13+of+the+World's+Top+2 0+Universities...-a0203643295 http://www.thefreelibrary.com/spellr.us+Surv ey+Reveals%3A+13+of+the+World's+Top+2 0+Universities...-a0203643295

46. Combine the principles  Applying any one of these principles will radically improve the design of your web pages, you will generally find yourself applying more than one principle, and probably all four.  Summary of the principles: Spelling Contrast Repetition Alignment Proximity  http://www.youtube.com/watch?v=mF_mWi6r-9I http://www.youtube.com/watch?v=mF_mWi6r-9I