The Art of Web Page Design

A little goes a long way . . .

J. Langston, FBISD

Web page design

Eight things every page must have . . .

8 things every page must have . . .

A title (in the title bar)Contrasting text and background colorsExplanation of what the first page is about that appears in the first pane without scrollingLink to the home page

8 things every page must have . . .

ALT text for every image on the pageHTML comments for every graphic documenting the sourceE-mail linkDate last modified

Tips for Effective Design

Overall Design

A little goes a long way The design of a website can either help the

cause or hinder it People prefer boring sites to those that are

too confusing or disruptive

Great Design

Poor Design

Plain

Web page design

Getting Started

Overall Design

Make a good first impression

Look at your home page as if you were seeing it for the first time . . .

Overall Design

Place important information at the top of the first pageAnd every page! Don’t make people hunt for information

Overall Design

Simpler is better

Use no more than:

• 2 to 4 main colors.

• No more than 3 fonts (including graphics)

•AVOID WRITING IN ALL CAPS

Overall Design

Give them important info

•Contact e-mail address

•Last modified dates

•Meaningful page names

Splash pages are a no-no!

Welcome to my page!Click here to enter

Or Or click your back button your back button to leave as quickly as to leave as quickly as possiblepossible

Every page should have some unique piece of information . . .

Web page design

Content

Content

Content, Content, Content

Don’t waste people’s time. Personal web pages may have whatever interests you. Professional web pages should interest your reader.

Content

Never, ever, ever, ever be redundant

Every page in your website should have at least one unique piece of information.

Content Encourage return visits

Does this information interest anyone but me?

Is there anything here which would encourage someone to return a second time?

Do I have a plan to update the content?

Content

Separate the Design from the Content!Ask yourself:•Does this page make sense outside the context of the design?•Without the colors and the fonts is the meaning of the page still clear?

Web page design

Layout

Layout

Be consistent Every page on a website should look like it

belongs to the same website Colors Fonts Navigation Graphics

Layout

Repetition of elements is good . . .Reuse

•Images•Logos•Banners•Backgrounds

Layout

Be Accessible•Use common fonts

•Avoid plug-ins (if you must use them, tell people where to download them)

•Give users choices (don’t force long download times)

Layout

Avoid clutterDon’t overload pages with text or graphics. Keep it short and simple. Most users will not scroll more than one page.

Layout

Check your page on different machines.•Different Browsers (IE and Firefox, different versions)

•Different Resolutions (640 vs. 1024)

•Different Platforms (Mac vs. Windows)

Layout

Plan to expandYour design should be flexible enough to allow for changes and updates.

Layout

Organize behind the scenesCreate folders for each section and

a folder for images. Keep pages organized so you can see what goes where.

Layout Use tables to organize layout. “Invisible” tables help keep page

elements organized and will resize depending on screen size and resolution.

Web Page Design

Navigation

Navigation

Don’t hide your hyperlinks•Don’t use underlined text except as a

hyperlink•Buttons should look like buttons•Avoid buttons that appear and disappear•Use the standard link colors whenever

possible

Navigation

Consistency is Key Use the same navigation links on each page Put them in the same location on each page Don’t make users guess where the link

leads Put a link to the homepage on every page

Navigation

There’s no place like home . . .

Every page should link back to the home page of the website

Lower-level pages should also link back to first-level pages

Navigation

Give links names that are meaningful . . .

Don’t expect people to guess where your links lead . . .

Navigation

Give text-based options . . .

Navigation

Research and include external links to related topics

Verify links frequently Be sure all links are educationally

appropriate (at least 2 levels)

Navigation

Make the link significant textPoor:

For more info about our graduate school click here

Better:

Want more info about our graduate school?

Web Page Design

Images/Multimedia

Images/Multimedia

•Create images the same size they will display on the page

•Specify HEIGHT and WIDTH attributes

Get the size right

Images/Multimedia

Use the correct file format

•GIF – line art, logos, cartoons

•JPEG – pictures, paintings, images with lots of shading and/or colors

Images/Multimedia

•Make image files as small as possible

•Minimize number of colors in image

•Crop out unnecessary elements

•See how small you can get your file without sacrificing quality

Optimize Images

Images/Multimedia

Use thumbnails for scanned photographs

Users can choose to download larger version if they want.

Images/Multimedia

•Clean edges

•Transparency should be completely transparent

•Text should be easy to read

Use good-quality images

Images/Multimedia

•Never use a song as a background sound

•Brief sounds may be ok, but best to give users choices

When it comes to sound, less is best . . .

Images/Multimedia

Be careful with backgrounds•Background colors/images should fit your

design scheme

•Make sure your text can be read easily

•Avoid busy (or yucky) backgrounds

Images/Multimedia

Keep it legal!

•Follow copyright guidelines on every page

•Get permission before using anyone’s elses stuff

Images/Multimedia

Always include ALT text with every image

•No exceptions.

Web Page Design

12 things to avoid at all costs . . .

12 things to avoid . . .

Bad Links!! Links that go nowhere Broken links Links to blank pages

#1

12 things to avoid The Not-quite-finished page Web pages are always under construction Never ask readers to wait for a page to load

to tell them it doesn’t exist

#2

12 things to avoid

Welcome to my page!Click here to enter

Splash PagesSplash Pages

Of course they are welcome . . . Duh!

#3

12 things to avoid Click here text links

#4

12 things to avoid

Don’t be the Wonderful World of Widgets

Frames

#5

12 things to avoid

Sketch your layout before beginning Keep your design as flexible as

possible Have a purpose in mind for using

frames (for example - to display externally linked pages)

Offer a no-frames version of your page

If you must use frames

12 things to avoid . . .

Whee! Animated Gifs are Fun (Not) The Hamster Dance**

Large, numerous or animated graphics

#6

12 things to avoid . . .

Can you read this?

Full color background images

#7

Can you read this?

Can you read this?

12 things to avoid . . .

Background sounds

#8

12 things to avoid . . .

If you must use plug-ins, stick to those most people might already have (acrobat reader, flash, shockwave).

Obscure plug ins . . .

#9

12 things to avoid . . .

Remember, you are designing pages to convey information not to impress other web designers.

12 things to avoid . . .

Most people hate them and close them as soon as possible without reading anything in them. Put any important information in the text of the page.

Pop up windows

#10

12 things to avoid . . .

Status bar text . . .

#11

12 things to avoid . . .

Hit counters

#12

Great Design

Poor Design

Plain

Sound

Confusing Navigation

Animated Graphics

Quality Graphics

Clear Navigation

Broken Links

Updated Information

Poor content

Useful Content

Lots of Useful Links

Bottom Line . . .

Keep it simple!

Be Accessible Use browser-safe colors Use common fonts (if you want to use

unusual fonts, make a graphic) Avoid plug-ins (flash, shockwave), or Java

applets or at least offer a non-plugin version.

Make sure your website is ADA compliant!

Minimize Download times Re-use the same graphics on each page so

they don’t need to be downloaded each time Warn users of large files, images, or

downloads Offer choices – don’t force long download

times Specify WIDTH and HEIGHT attributes for

images (causes text to fill in more quickly)

Tell them what they want to know Put the most important information in the

first window to appear

• Give users a way to contact you (e-mail address)

• Post revision dates (so users can gage accuracy of information)

• Give pages meaningful names (in case readers bookmark them)

We Love Tables! Use tables to organize layout if

possible (even if they are not visible they will provide structure)

Images/Multimedia

•Make image files as small as possible

•Minimize number of colors in image

•Crop out unnecessary elements

•See how small you can get your file without sacrificing quality

Optimize Images