This is my project about the business of web designing

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