Introduction to

Web Page Design

General Design Tips

General Design Tips• Use a meaningful title

<TITLE> Title of my Work </TITLE>

• Sign your work

• Indicate the date the page was created or last updated

• Use common fonts

General Design Tips

Use standard HTML Device independence

Use “safe” image formats GIF (hard “G”) JPEG

General Design Tips

Different browsers Netscape Internet Explorer

Different monitors Size Quality

• Different systems– PC

– Mac

Test Your Document

General Design Tips

Choose hyperlink wording carefully Use links instead of talking about them

The Beginners Guide to HTML is a great way to

get started!

Click here to access the Beginners Guide to HTML.

General Design Tips

Think about the document size

Printing? Accessing? Scrolling through?

Keep a storyboard (site structure)

General Design Tips

K. I. S. S.

Know your audience Use attractive images Provide interesting information

General Design Tips

Frequently update site Make site

Friendly Easy to use

Interface and Navigation

Interface and Navigation

• Interface – How page looks

• Navigation– How easily user finds his/her way around

site and back to home page

Interface and Navigation

• Start with a simple plan

– Rough storyboard

– Written list of general topics

Interface and Navigation

• Page orientation

– Horizontal

– Monitors smaller and wider than print media

– Full impact of page (entry/home) visible on screen

Interface and Navigation

• Navigation design– Organization

– Repetition

– Consistency

– Visual theme

– Selective linking

Interface and Navigation

• Navigation design– Clear and simple

• Text

• Icons

– Navigation items grouped together

– Frames

Basic Design Principles

Basic Design Principles

• Alignment

• Proximity

• Repetition

• Contrast

Alignment

• Items on page are lined up with each other

• Choose one alignment

Left (default)

Right <align=“right”>

Center <align=“center”>

Alignment

• Keep text away from left edge

<blockquote> </blockquote>

<table> </table>

• Use table borders wisely

<border=“0”>

Alignment

• Align text on same baseline (table data)

<valign=“top”>

<valign=“middle”>

<valign=“bottom”>

• Avoid use of all upper case

Proximity

• Relationship of items that are close together

• Group related items together

Proximity

• Conscious use of space

<p> </p>

<p>&nbsp;</p>

<br>

other tricks

Repetition

• Repeat elements throughout site

• Create a theme

Repetition

• Navigation scheme

• Colors

• Graphics

• Format

• Layout

• Fonts

Contrast

• Create a visual hierarchy

• One focal point

Contrast

• How to create contrast– Font size and face

– Color

– Graphics

– Proximity

– Hyperlinks