1 / 13

Web Design Tips

Web Design Tips. Aimee Janusz EDIT 6150. 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

alberta
Télécharger la présentation

Web Design Tips

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. 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 #1:Create a Navigation Scheme • Road map of the site • Type of navigation determines style of navigation: • Hierarchical > bread-crumb trail (http://www.toysrus.com) • Global > top/left navigation bar (http://www.uga.edu) • Local > tab navigation (http://www.ebay.com) • Other styles: site map, image map, embedded links

  4. Web Design Tip #1:Create a Navigation Scheme (cont’d) • 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 #2:Layout & 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 #3:Get 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 #4:Keep 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 #5:Optimize 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 #6:Cross-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 #7:Design 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 don’t 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 Mackenzie’s 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/webdesign_tips.asp • Grantastic Designs http://www.grantasticdesigns.com/5rules.html • eFuse http://www.efuse.com/Design/navigation.html • W3 Schools http://www.w3schools.com

More Related