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, 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. => The Principles

Alignment  Alignment: Items on the page are lined up with each other  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.  Horizontal alignment is just as important as vertical alignment.  Type sits on an invisible line called the “baseline”.

Alignment  You should be able to state in words why an element is placed where it is.  Turn the borders off.

Proximity  Proximity: Relationships that items develop when they are close together, in close proximity.  Be conscious of the space between elements. Group items together that belong together.

Proximity: Paragraph vs. Break  Difference between a paragraph and a break: and

Repetition  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

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  Contrast must be strong. If two elements, such as type, rules, graphics, color, texture, etc. are not the same, make them very different – don’t make them almost the same.  Exception: If you want people to sit and read through an entire piece, avoid contrast so the page can be bland and uninterrupted.

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.

Spell it Right!  Bad spelling and bad grammar can destroy the professional effect of your web site  Use spell checker

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: Alignment Proximity Repetition Contrast Spelling