designing for the web
Post on 31-Dec-2015
14 Views
Preview:
DESCRIPTION
TRANSCRIPT
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 withgenerations 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/)
top related