Web Design Tips

1
Web Design Tips

• Aimee Janusz
• EDIT 6150

2
Purpose of Good Web Design

• Allow users to quickly and easily find what they
  are looking for
• Unite individual web pages into a coherent web
  site
• Minimize confusion and distraction
• Entice users to stay and look around
• Reach the largest audience, regardless of which
  browser, platform, or device they use

3
Web Design Tip 1Create a Navigation Scheme

• Road map of the site
• Type of navigation determines style of
  navigation
• Hierarchical gt bread-crumb trail
  (http//www.toysrus.com)
• Global gt top/left navigation bar
  (http//www.uga.edu)
• Local gt tab navigation (http//www.ebay.com)
• Other styles site map, image map, embedded links

4
Web Design Tip 1Create a Navigation Scheme
(contd)

• Mix and Match styles based on your needs and
  optimal usability
• Clear and prominent placement, usually on top or
  left
• Be direct in your labels
• Be consistent from page to page

5
Web Design Tip 2Layout Design Tips

• Split information into logical sections
• Intuitive user interface
• Be consistent from page to page
• Ensure that content is easy to read
• Use optimal color contrast (dark lettering on
  light background)
• Use common, professional fonts (Arial, Verdana)
  and appropriate font size/style

6
Web Design Tip 3Get to the Point

• Get to the point on the first page
• Make it easy to find what your visitor is looking
  for
• Offer a way of searching your site, a site map,
  or contact information

7
Web Design Tip 4Keep it Simple

• Use embellishments to enhance and complement your
  message
• Use white space to give sense of spaciousness and
  overall neatness
• Less is more cluttered presentations can be
  distracting

8
Web Design Tip 5Optimize Load Time

• Minimize total page size, preferably less than
  50K and 15-second load time
• Minimize graphics, Flash, scripts
• Optimize graphics
• Follow HTML standards

9
Web Design Tip 6Cross-Browser/Platform
Compatibility

• Web page appearance can vary due to different
• Web browsers
• Operating systems
• Devices (computer vs. mobile phone/handheld)
• Follow HTML XHTML Standards
• Complicated HTML or scripts and extended,
  browser-specific features contribute to these
  differences

10
Web Design Tip 7Design for all Screen
Resolutions

• Web page appearance can vary due to different
  screen resolutions
• Majority use 800 X 600 or higher
• Stay within the width limitations of the screen
• Keep important content or navigation above the
  scroll

11
So Where Do I Start?Analysis Design Phase

• Browse through other web sites, noting what you
  like and dont like
• Determine sections and pages draw out the
  navigation scheme
• Create a style guide to define and keep track of
  design elements and layout
• Think through creative elements that would
  differentiate your site
• Define content for each page

12
So Where Do I Start? Development
Implementation Phase

• Create a template to establish navigation,
  layout, and design elements ask for opinions
• Use this template for all your pages, just change
  content for each page
• If any common element changes, update the rest of
  the web pages
• Test web site across browsers, platforms, and
  screen resolutions check load time
• W3 Schools Web Development Tutorials Reference
  http//www.w3schools.com

13
Credits

• Colin Mackenzies Web Design Tips
• http//www.colin.mackenzie.org/webdesign/
• Entheos
• http//www.entheosweb.com/website_design/webdesign
  _tips.asp
• Smart Webby
• http//www.smartwebby.com/web_site_design/webdesig
  n_tips.asp
• Grantastic Designs
• http//www.grantasticdesigns.com/5rules.html
• eFuse
• http//www.efuse.com/Design/navigation.html
• W3 Schools
• http//www.w3schools.com