Download 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/)