What is Web Design?. Definition of Web Design What is Web Design? Wikipedia: “Web Design is a...

What is Web Design?

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.”

Confused? !!&!*!???****???!

Definition of Web Design Web Design is difficult to define because it

covers so much ground: Clients Types of contents Functionalities

What is Web Design?

Where Should I Start? Intimidating Web Design Basics/Principles

Importance of Web Design Basics

Web Design BasicsWhat is a good Web site from a design standpoint?

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

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

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

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”.

Example 1

Example 2

Example 3

Example 4

Example 5

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>

Proximity Three tools of proximity:

Grouping Containment Whitespace

Example 1

Example 2

Example 3

Example 4

Example 5

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

Example 1

Example 2

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

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.

Example 1

Example 2

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.

Example 3

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.

Example 4

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+20+Universities...-a0203643295

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