What is Web Design?

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: <P> and <BR>

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. 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. Squint Test

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+Survey+Reveals%3A+13+of+the+World's+Top+20+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