Transcript Web Design
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 (http://www.webstyleguide.com/) • Jacob Nielsen’s Use It (http://www.useit.com/) • HTML Writers Guild (http://www.hwg.org/) • Vincent Flander’s Web Pages That Suck (http://www.webpagesthatsuck.com/) • Cool HomePages.com (http://www.coolhomepages.com/) • Web Design: The Complete Reference (http://www.webdesignref.com/) • Web Design Examples: (http://www.webdesignref.com/examples/design_examples.htm) • Web Accessibility Initiative (http://www.w3.org/WAI/) • Bobby 3.2 Accessibility Validator (http://www.cast.org/bobby/) • HTML Validator (http://validator.w3.org/)