1 / 16

Designing for the Web

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

vivien-wade
Download Presentation

Designing for the Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Designing for the Web

  2. 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

  3. 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.

  4. 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

  5. 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

  6. 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

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

  8. 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.

  9. 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

  10. 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”

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

  12. 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

  13. 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

  14. 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

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

  16. 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/) Some Resources

More Related