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 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 Janice Wilson Butler This work is licensed under a Creative Commons Attribution 2.5 License.Creative Commons Attribution 2.5 License