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 colors Explanation of what the first page is about that appears in the first pane without scrolling Link to the home page

8 things every page must have... ALT text for every image on the page HTML comments for every graphic documenting the source link Date 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 page And 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 address Last modified dates Meaningful page names

Splash pages are a no-no! Welcome to my page! Click here to enter Or your back button to leave as quickly as possible Or click your back button to leave as quickly as possible Every page should have some unique piece of information...

Web page design 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

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 clutter Don’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 expand Your design should be flexible enough to allow for changes and updates.

Layout Organize behind the scenes Create 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

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 text Poor: For more info about our graduate school click here Better: Want more info about our graduate school?

Web Page Design 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) backgroundsbackgrounds

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 pageNot-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 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 WidgetsWonderful 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?

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 ( 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