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 Basics What 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.

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

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  ey+Reveals%3A+13+of+the+World's+Top+2 0+Universities...-a ey+Reveals%3A+13+of+the+World's+Top+2 0+Universities...-a

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 