Web design involves creating web page presentations delivered via the internet. It covers a wide range including clients, content types, and functionality. The document discusses basic web design principles including alignment, proximity, rhythm/repetition, and contrast. These principles help make pages look more professional by guiding the user's eye through the page and creating visual hierarchy. The principles should be combined for best results.

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. Choose one alignment and use it on
the entire page. Don’t mix alignment.
 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. 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://spellr.us/files/university-release.html

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