This document discusses the basics of web design. It defines web design as the creation of hypertext or hypermedia content delivered via the web. It then outlines several key principles of good web design: alignment, proximity, rhythm/repetition, and contrast. It explains each principle in detail and provides examples. The document also discusses how users interact with websites, noting they scan pages quickly and want control and instant gratification. Good web design follows these principles and understands user behavior.

1. SERVICE

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. We offer the best quality

4. Definition of Web Design

5. What is Web Design?

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

7. Web Design Basics

8. 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. Some of webs we design for our costomers

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

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

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.

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.

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