DESIGN. Basic Principles of

Transcription

1 Basic Principles of DESIGN Bristol Community College Paula Mailloux Sources: The Non-Designers Design Book The Non-Designers Web Book Ron Woolley,

2 Looking at Design Elements on the Web Page Type Color Shapes Lines Graphics

3 The FOUR Basic Principles 1 Alignment 2 Proximity 3 Repetition 4 Contrast

4 Alignment gives the layout a clean and organized feeling Left justified Centered Text 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

5 Alignment All elements should be visually connected Avoid arbitrary placement Turn off borders Organization is the key

6 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

7 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

8 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

9 Repetition A layout without Repetition feels and looks bland Consistency, or developing a unified theme, is the key

10 Contrast 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

11 Contrast creates INTEREST emphasize TYPE EMPHASIZE type emphasize type EMPHASIZE type emphasize type emphasize TYPE Contrast in weight: BOLD BOLD ITALIC ITALIC NORMAL

12 LOOK HERE Contrast by Emphasizing Type Blahbity 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.

13 Contrast by Emphasizing a Graphic Blahbity 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.

14 and still more CONTRAST in Shape, Position, or Color The silver fox jumped into the blue lake Position Position try some COLOR COLOR COLOR COLOR

15 Contrast TIPS Two elements on a web page should be displayed differently Balance, or arrangement of items, is the key

16 A Word about TEXT 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

17 A Word about COLOR Color creates contrast Warm colors (reds, oranges) come forward - command attention Cool colors (blues, greens) recede Warm COLORS Cool COLORS

18 A Word about BUTTONS Please no big, dorky buttons

19 A Word about NAVIGATION 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.

20 LOOK at the World Like a DESIGNER 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?

21 Some Web Design Tips: The Don ts 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

22 Some Web Design Tips: The Dos 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!

23 What is the ULTIMATE Goal when designing? Good Communication

24 Some Web Design Resources For 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

25 Some Web Design Resources Books: The Non-Designer s Web Book Robin Williams & John Tollet Robin William s Web Design Workbook Robin Williams, John Tollet & David Rohr