Designing for the Web

What Makes Good Design Content is important but content alone will not make your site work. Good design is: –understandable –interesting –useful –easily navigated –unified in look and feel

Typical Website Evolution Generation One -- replaces paper information Generation Two -- flashy elements added Generation Three -- bleeding edge, content suffers Generation Four -- integration of content and technology Ideally, you’d try to bypass the problems found with generations one through three.

Pre-Design Work DON’T use “seat of the pants” design! Pre-production concerns –Consider your organization’s mission –Establish audience –Set goals for your website immediate long-term –Think about strategies for meeting goals

Pre-Design Work, cont’d. Pre-production concerns, cont’d. –Gather & organize content –“Chunk” into logical information units –Establish hierarchy of content –Create outline or plan for content –Create flow chart –Build site structure which is the basis for URLs –Establish navigation routes

Pre-Design Work, cont’d. Technology concerns –Browsers –Operating Systems –Connection Speeds –User screen sizes Budget concerns –Staff time for creation and maintenance –In-house vs outsource Establish criteria for measuring success

Page Elements Make page somewhat freestanding –include navigation elements on each page –include logo/home page link –if page will be printed, include URL for home page Brief informative title Contact information Creation/revision dates Create template for each page type you plan to use in your site.

Navigation Strive for balance between appearance and usefulness. Make sure that users can get where they need to go within your site quickly and easily. Make sure the navigational elements will work in a non-graphical browser as well as in a rich format.

Use of Cutting Edge Tools & Content Bad reasons –to look cool –to prove you can Good reasons –to look cool –to draw attention –to maintain attention –to enhance info –to inform or educate

Design Basics Balance Visual uniformity Visual hierarchy Contrast Page dimensions –Scroll 3 screen lengths only (1440 pixels) »include jump to top element –No vertical scroll -- either use a percentage width or keep the width at 700 pixels maximum –Consider layout of material above and below “the fold”

Design Basics, cont’d. Color palette Typography Understand the medium Fixed page elements (Navigation) Maximize prime real estate

Accessibility Provide text equivalents for non-text elements Don’t rely solely on color to indicate links Don’t make the screen flicker in any way Use plain, understandable English Don’t rely completely on high tech solutions As a last resort, make an alternative text page

Approvals/Proofing Design Critiques –Other Web designers Content Critiques –Subject Matter Experts –Any represented parties (i.e., Leads, Chairs, etc.) Proof-reading for grammar, links, etc. –Fresh eyes can usually see things that you’ll miss

Maintenance Set a maintenance schedule for your site –Considerations include: who will do the maintenance what to do if emergency problems come up where backup copies of your Web pages are kept

Improvement Schedule an quarterly review of the site –Considerations: update of content update of design update of use of cutting edge tools

Some Resources Web Style Guide ( Jacob Nielsen’s Use It ( HTML Writers Guild ( Vincent Flander’s Web Pages That Suck ( Cool HomePages.com ( Web Design: The Complete Reference ( Web Design Examples: ( Web Accessibility Initiative ( Bobby 3.2 Accessibility Validator ( HTML Validator (