Effective Website Design PowerPoint tutorial

For the MTT program at the University of Texas at Brownsville

Effective Website Design

EDTC 6340

Janice Wilson Butler

University of Texas at Brownsville

What is the single most common

reason individuals visit a website?

According to a survey from Stanford,

an overwhelming majority of the

people use the Internet to gather

INFORMATION.

So, what do you have

to do to meet the

needs of these people?

Make the

information

accessible!

• Optimize your graphics so they load fast– 5 seconds MAX before you lose

your audience (they click off your site or call you obscene names)

– You can use Photofiltre to optimize– Click here for program

Easy to download

Avoid the bells and whistles

• They only look cute for a few seconds

• If you MUST use them, place on a separate page and link to that page

• Warn your audience that s-l-o-o-o-w is coming

• Even if you CAN use bleeding edge technology – RESIST the temptation

• To play or not to play – that is the choice you need to give your audience if adding music to your pages

• HORIZONTAL scrolling is a NO-NO-NO.

Once your page loads (quickly)…

• Readability

• Readability

• Readability

• Readability

• Readability

• Readability

• Readability is critical

What do these sites have in common?

You can always use menu bars and graphics to add interest and color to your page…

But, black print on white background is still the easiest to read.

All CAPS are not good either

FONTS CAN MAKE OR BREAK YOU. ALTHOUGH DECORATIVE FONTS ARE PRETTY AND IT SEEMS LIKE IT MIGHT BE FUN TO PLACE THEM ON YOUR WEBSITE, IF YOU USE THEM FOR THE MAIN TEXT YOUR READER WILL GET FRUSTRATED AND GIVE UP AND LEAVE THE PAGE. IF NOTHING ELSE, THEY WILL CALL YOU NAMES AS THEY STRUGGLE THROUGH TRYING TO READ THE TEXT.

Use no more than 2 font faces

• For body text use a San Serif

• Arial is the first choice

Serif fonts for headlines

• Decorative fonts are considered Serif

• NEVER mix a Serif with a Serif OR• A San Serif with a San Serif (If

you use decorative font for headings – use San Serif for body text)

• Using only one font and changing it by using bold, italics, size and color to offer variety can be a very classy look.

• BTW – Body text should be no larger than 12 pt. as a rule

Some additional points

• Align to the left – NOT centered.

• Web surfers skim – they don’t read

• Important points can get lost in long paragraphs

• Use headings to guide readers

When you have lots of text on the page and are providing information to the reader, it is important to include white space so that the eye has a chance to rest before moving on. Especially for digital natives, it is tiring reading long passages on the Internet. So if you want readers to get what you are saying, use bullets and use headlines to guide them. When readers see headlines, they know whether they want to continue reading or whether they are ready to click off that page.

White space is your friend

• It is important to include white space

• White space allows the eye to rest before moving on

• Bullets, headlines and white space guide readers

• When readers see headlines, they can quickly decide to read – or not

White space is your friend

And then…

• Pour grammer and speling looks unprofesional – use spell check

• This is especually importent for techers

• Have sumone chek and recheck and rechek agin

Agreement of the experts

• Check online to see what experts have to say

• Look in Non-Designers Web Book– Not so good checklist– So much better checklist

• Go forth and be good design missionaries

Words to ponder…

“This ‘telephone’ has too many shortcomings to be seriously considered as a means of communication. The device is inherently of no value to us.”

-- Western Union internal memo, 1875

H-m-m-m-m-m. Stay on the cutting edge.

Power Spots tutorials are provided for the MTT program at University of Texas at Brownsville.

 © 2006 Janice Wilson Butler

                         

                   This work is licensed under a

Creative Commons Attribution 2.5 License.