Basic Principles of

DESIGN

Bristol Community CollegeBristol Community CollegePaula Mailloux

Sources: The Non-Designers Design Book The Non-Designers Web Book

Ron Woolley, www.dtp-aus.com

Basic Principles of DESIGN

Type Color Shapes Lines Graphics

Looking at Design“Elements” on the Web Page

Basic Principles of DESIGN

The FOUR Basic Principles

1 Alignment

2 Proximity

3 Repetition

4 Contrast

Basic Principles of DESIGN

Alignment gives the layout a clean and organized feeling

Centered Text

Left justified Right justified

And Justified are all examples of Alignment Never combine Centered with any other

Alignment It’s best to choose one alignment and

use it for the entire page

Basic Principles of DESIGN

Alignment All elements should be visually

connected Avoid arbitrary placement Turn off borders Organization is the key

Basic Principles of DESIGN

Proximity Items that are related to each other

should be intellectually grouped together

Organizes information Provides a clear structure and brings

balance to the layout

Basic Principles of DESIGN

Proximity Use Heads, Sub heads, Type Faces

(light, bold, semibold, etc.) as tools to help group items

Keep visual space between elements Unity and Organization are the key Do not be afraid to use “White Space,”

but do not use too much

Basic Principles of DESIGN

Repetition Select a constant aspect and repeat it

throughout the web site to tie disparate parts together

A few elements of Repetition are:

Fonts, Color, Bullets, Texture, Graphics, and Format

Basic Principles of DESIGN

Repetition A layout without Repetition feels and

looks bland Consistency, or developing a unified

theme, is the key

Basic Principles of DESIGN

Creates a Focal Point to pull the viewer in

Avoid elements that are similar - if everything has equal priority, then

nothing has priority

What is not the same - make different

Contrast

Basic Principles of DESIGN

Contrast creates INTEREST

emphasize TYPEEMPHASIZE typeemphasize typeEMPHASIZE typeemphasize typeemphasize TYPE

Contrast in weight:BOLDBOLD ITALICITALICNORMAL

Basic Principles of DESIGN

LOOK HERE

Contrast by Emphasizing TypeBlahbity blah blah blah. Blah blah blah blahbity blah. Blah blah blah blahbity blah blah blah. Blahbity blah blah blah. Blahbity blah blah blah. Blah blah blah blahbity blah blah blah. Blah blah blah blahbity blah. Blahbity blah blah blahbity blah blah. Blahbity blah blah blah. Blah blah blahbity blah blah blahbity blah.

Basic Principles of DESIGN

Contrast by Emphasizing

a GraphicBlahbity blah blah blah. Blah blah blah blahbity blah. Blah

blah blah blahbity blah blah blah. Blahbity blah blah blah. Blahbity

blah blah blah. Blah blah blah blahbity blah blah blah.

Basic Principles of DESIGN

… and still more CONTRAST in Shape, Position, or Color

The silver fox

jumped into the blue lake

Po

siti

on

Po

sition

try some

COLORCOLORCOLORCOLOR

Basic Principles of DESIGN

Two elements on a web page should be displayed differently

Balance, or arrangement of items,

is the key

Contrast TIPS

Basic Principles of DESIGN

Sans Serif type works better than Serif (opposite from Print)

Background should not interrupt the text Text should be big enough to read, but

not too big Columns of text should be narrower than

in a book to make reading easier on the screen

Give “breathing room” around text

A Word about TEXT

Basic Principles of DESIGN

A Word about COLOR Color creates contrast Warm colors (reds, oranges) come

forward - command attention

Cool colors (blues, greens) recede

Warm COLORS

Cool COLORS

Basic Principles of DESIGN

Please…no big, dorky buttons

A Word about BUTTONS

Basic Principles of DESIGN

Primary goal is to make it easy for visitors to get the information they need - the key is Organization

Whatever style you choose, make it clear and simple to follow

Beware! Do not sacrifice clear communication for unclear

cleverness.

A Word about NAVIGATION

Basic Principles of DESIGN

Visualize Look at the work of others - What catches your eye?

Criticize Separate good from bad - What style do you like?

Analyze Study the world around you - What looks good?

LOOK at the WorldLike a DESIGNER

Basic Principles of DESIGN

Busy distracting backgrounds that make text hard to read

No blinking anything, especially text; it’s annoying!

Avoid animations that never stop Unclear or complex navigation No focal point OR too many focal points

on a page Avoid side scrolling

Some Web Design Tips:The Don’ts

Basic Principles of DESIGN

All Principles of Design apply Link colors coordinate with page colors Create clear and consistent Navigation

throughout the site Use repetitive elements to make each

page look like it belongs to the same site

Check Spelling!

Some Web Design Tips:The Dos

Basic Principles of DESIGN

What is the ULTIMATE Goal

when designing? Good Communication

Basic Principles of DESIGN

Some Web Design ResourcesFor More TIPS: virtuallastchapter.com

go to Examples

urlsinternetcafe.com/classroom go to Robin’s Web Design Tips for tips

from Robin Williams on Good and Bad

Web Design features

Basic Principles of DESIGN

Some Web Design ResourcesBooks: The Non-Designer’s Web Book

Robin Williams & John Tollet

Robin William’s Web Design Workbook Robin Williams, John Tollet & David Rohr