Web Site Design

644 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
644
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • 05/29/11 www.scoreworks.org
  • Web Site Design

    1. 1. <ul><li>Key Elements </li></ul><ul><li>of </li></ul><ul><li>Web Site Design </li></ul>
    2. 2. Design Issues <ul><li>1. Essentials </li></ul><ul><li>2. Look [graphic composition] </li></ul><ul><li>3. Feel [navigation issues] </li></ul>
    3. 3. Basic Design <ul><li>For any design, the following should apply: </li></ul><ul><li>Professional appearance </li></ul><ul><li>Meaningful Domain Name </li></ul><ul><ul><li>As close to company name as possible </li></ul></ul><ul><li>Responsive Web Hosting </li></ul><ul><li>Clear and consistent Navigation </li></ul><ul><li>Professional Logo (top left of each page) ‏ </li></ul><ul><ul><li>Takes user to Home Page </li></ul></ul>
    4. 4. Appearance <ul><li>Artwork without “jaggies” </li></ul><ul><li>Colors that work together and don't clash </li></ul><ul><li>Appropriately sized text for easy reading </li></ul><ul><li>Quality photography: Hire a pro or purchase images from stock photography sites such as gettyimages.com </li></ul><ul><li>Clean structure and not so busy as to be difficult to understand </li></ul><ul><li>Avoid sound unless that is your business </li></ul>
    5. 5. Rules for Images <ul><li>Artwork needs to be created using tools that support cleanly scalable image output </li></ul><ul><li>Images should be pre-sized for the web page in which they'll be seen </li></ul><ul><li>Avoid “Clip Art,” leave that for the hobbyist and for non-commercial sites </li></ul>
    6. 6. Have your products professionally photographed. for example: www.victoriasecret.com or … buy professional stock photos: www.istockphoto.com www.photodisc.com www.corbis.com www.gettyimages.com Professional Images
    7. 7. Content Makes the Difference <ul><li>Text content is key. </li></ul><ul><li>Use images where they really count. </li></ul><ul><li>Concentrate on your message and your story presented in plain text. </li></ul><ul><li>This hugely improves search engine performance as well. Nothing else will get you to page one of Google. </li></ul>
    8. 8. Use of Color <ul><li>There is a psychology to the way different colors convey different meanings to the viewer </li></ul><ul><li>There are various tools on the web to assist you with colors and color schemes: </li></ul>Color Schemes: http://www.wellstyled.com/tools/colorscheme2/index-en.html Browser Safe: http://www.sketch.com/Non-dithering-colors.htm Combinations: http://dev.sessions.edu/ilu/ilu_1.html
    9. 9. Examples of Color Schemes <ul><li>General Color References: </li></ul><ul><li>http://cloford.com/resources/colours/index.htm </li></ul><ul><li>http://www.colorschemer.com/online.html </li></ul><ul><li>http://primeshop.com/html/216colrs.htm </li></ul><ul><li>http://www.clearink.com/dynakewb/ </li></ul>
    10. 10. What slows load times: Extraneous music, video, pictures and graphics. Use of FLASH. If your site has lots of images: Make them as small as possible. Most of your pictures can be on secondary pages. Enlarge thumbnails by click or mouseover . Use Cascading Style Sheets (CSS): Template insures consistency and a professional look while maintaining search engine friendliness. Load Speed
    11. 11. Printer-Friendly Pages Many sites provide a link to a separate printer friendly web page. Such a page would leave out navigation bars and sidebar information. Creating a PDF document is the best solution for this need. Documents created in Word Processing programs can easily be converted to PDFs.
    12. 12. Navigation Elements
    13. 13. Navigation Practices <ul><li>Top navigation bar should be constant across all web pages. </li></ul><ul><li>All logos should also be a link to the home page of your website. </li></ul><ul><li>Side bars are optional. </li></ul><ul><li>Bottom bar should consist of simple text links to your site, and is important for search engine ranking. </li></ul><ul><li>Page body is where you put that page’s relevant information. </li></ul>
    14. 14. Navigation Considerations <ul><li>Top menu bar selection should be highlighted depending on the page the user has selected. It always should be clear where the user is within the nest of web pages, e.g., </li></ul><ul><li>Home>Resources>Presentations> Basics </li></ul><ul><li>Clarity is everything when it comes to navigation. If your potential customer becomes lost trying to navigate your site, they are GONE! </li></ul>
    15. 15. Bottom Text Menu On sites that rely on graphical images for their navigation bar, you will often find a bottom bar using only text. This is to improve search engine results. For example: Home | Library | Small Business Center | Entrepreneurship University | Entrepreneur's Fieldbook | Raising Entrepreneurial Capital About Us | Privacy Policy | Site Map
    16. 16. Example of a Complete Text Menu <ul><li> jasperengines.com </li></ul><ul><li>has mastered the text menu. Theirs is complete, and very well organized. </li></ul><ul><li>Not only is it effective, it is one of their main tools for improving their SEO performance. </li></ul>
    17. 17. Example Sites <ul><li>www.score-sandiego.org </li></ul><ul><li>Site is tight and focused. Easy to figure out how to interact with it. Clean design. Excellent use of rollover within menu system. Partners page should have links with every logo. </li></ul><ul><li>www.martyandpats.com Pretty, but is it effective? It is not clear on the entry page as to how to proceed. Information is out of date. See their “In the News” page, where everything is dated 2001 or earlier! </li></ul><ul><li>This site relies on graphics for the navigation bar (notice rollover effect), but a text navigation bar is at the bottom; it is the only menu with the home page link. </li></ul>
    18. 18. Keep it Simple <ul><li>Keep the page simple, clean, and effective . </li></ul><ul><li>Viewers should &quot;get it&quot; in 10 seconds or less . </li></ul><ul><li>Deliver a value proposition or branding statement in a prominent position. </li></ul><ul><li>Select an attractive, comfortable color palette. </li></ul><ul><li>You can u se Cascading Style Sheets ( CSS) as a way to control web page look and feel without affecting the coding of web page content. For more information, see www.csszengarden.com and www.stonetemple.com/articles/css-and-seo.shtml </li></ul>
    19. 19. HTML <ul><li>HTML – HyperText Markup Language </li></ul><ul><li>The computer code/language used to create your web pages </li></ul><ul><li>2. You don’t need to know how to use it but, you do need to know its importance in making your site “ findable ” by clients </li></ul><ul><li>3. Discussions with your web developer will be greatly improved with a just a wee bit of knowledge. </li></ul>

    ×