Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Basic Web Design Ryan Dinwiddie UCC Spring 2010
Principle #1 Just because you  can  do it,  doesn’t mean you  should  do it.
Principle #2 Know your audience and have a clear goal for your web site.
Principle #3 Inform the user, don’t irritate them!
Principle #4 Don’t post an “under construction” graphic after you’ve published your URL.
Principle #5 Check your spelling!
Principle #6 Test, Test, Test, and Test some more  before  you go live or update!
Steps to a well designed  Web site <ul><li>Have a goal </li></ul><ul><li>Target your audience </li></ul><ul><li>Create a p...
Have a goal for your web site <ul><li>What were you put on earth to accomplish? </li></ul><ul><ul><li>review your mission ...
Identify your target audience <ul><li>Who is the information for?  </li></ul><ul><ul><li>Do you have more than one audienc...
Plan it out <ul><li>Identify information you already provide your audience. </li></ul><ul><li>Identify information that yo...
Plan it out <ul><li>Develop a vision for your web site and storyboard it before construction begins. </li></ul><ul><li>Sha...
Select a Web service provider <ul><li>Coordinate the method for publishing and updating your web pages. </li></ul><ul><ul>...
Try it out: Optimize it for your audience <ul><li>Test it in-house. </li></ul><ul><li>Test it on a sample audience. </li><...
Too many graphics are distracting
Few graphics makes it easy to navigate.
Maintain it <ul><li>Dates need to be correct </li></ul><ul><li>Services need to be up-to-date </li></ul><ul><li>Hours must...
This document is “living” …in the past.
Characteristics of a  Good web site <ul><li>Well-organized </li></ul><ul><li>Easy to navigate </li></ul><ul><li>Attractive...
Make your site well-organized <ul><li>Decide how you want to organize your information based on  your users and what you k...
Organized by department.
Organized by audience type.
Organized by subject.
Make your site  easy to navigate <ul><li>Good organization generally drives the ease of navigation. </li></ul><ul><li>Keep...
No scrolling necessary to start navigating.
Standard tool bars and a brief menu for easy navigation.
Make your site attractive <ul><li>Choose simple colors that compliment each other & work on most web browsers. </li></ul><...
An example of a very unattractive site
Subaru provides a balanced, attractive Web site.
Avoid backgrounds that wash out your text.
Make your site useful <ul><li>If you are unique, you’re already useful! </li></ul><ul><li>If you are not unique, how do yo...
Ways to present information <ul><li>Hierarchical organization </li></ul><ul><li>Image maps </li></ul><ul><li>Tables </li><...
Hierarchical organization <ul><li>Menus in progressive order of most general to more specific </li></ul><ul><li>Pros </li>...
Hierarchical organization.
Image Maps <ul><li>Links are in an image or picture </li></ul><ul><li>Pros </li></ul><ul><ul><li>Allows for greater artist...
Imagemaps can provide easy means of navigation.
Tables <ul><li>Standard text, images or links are arranged in tabular format with or without borders </li></ul><ul><li>Pro...
Tables provide Web designers with control over layout.
Tables also provide simple organization of information.
Frames <ul><li>Divides the browser's window into two or more scrollable areas </li></ul><ul><li>Pros </li></ul><ul><ul><li...
Frames can be used to provide a static navigation window.
Static navigation windows can be along the bottom.
Tips for frames <ul><li>Use in a site that rarely, if ever, goes out to other links on the World Wide Web. </li></ul><ul><...
General Things to  Remember & Consider <ul><li>Emulate a site you like. </li></ul><ul><li>Try your color scheme before you...
Test text colors against background colors.
General Things to  Remember & Consider <ul><li>Avoid requiring users to fill out a form to gain access to your site. </li>...
General Things to  Remember & Consider <ul><li>Avoid having more than one spinning, whirling, clicking, moving icon or gra...
General Things to  Remember & Consider <ul><li>Avoid detracting from the image of your excellent Web site by posting all o...
General Things to  Remember & Consider <ul><li>Limit fonts and headings on each Web page. </li></ul><ul><li>Attempt to use...
Remember Your  Hard-Copy Publishing Rules <ul><li>For example… </li></ul><ul><ul><li>Provide white space for easy readabil...
Clearly and Consistently  Identify your site <ul><li>Banner graphics </li></ul><ul><li>Signature icons </li></ul><ul><li>L...
Essential Elements for  Every Page <ul><li>Organization or institution </li></ul><ul><li>Author or person to contact </li>...
Suggested Page Elements <ul><li>Organization’s logo or seal </li></ul><ul><li>Author’s e-mail address </li></ul><ul><li>Ma...
Upcoming SlideShare
Loading in …5
×

Lecture 3

704 views

Published on

  • Be the first to comment

  • Be the first to like this

Lecture 3

  1. 1. Basic Web Design Ryan Dinwiddie UCC Spring 2010
  2. 2. Principle #1 Just because you can do it, doesn’t mean you should do it.
  3. 3. Principle #2 Know your audience and have a clear goal for your web site.
  4. 4. Principle #3 Inform the user, don’t irritate them!
  5. 5. Principle #4 Don’t post an “under construction” graphic after you’ve published your URL.
  6. 6. Principle #5 Check your spelling!
  7. 7. Principle #6 Test, Test, Test, and Test some more before you go live or update!
  8. 8. Steps to a well designed Web site <ul><li>Have a goal </li></ul><ul><li>Target your audience </li></ul><ul><li>Create a plan </li></ul><ul><li>Select a Web service provider </li></ul><ul><li>Try it out </li></ul><ul><li>Maintain it </li></ul>
  9. 9. Have a goal for your web site <ul><li>What were you put on earth to accomplish? </li></ul><ul><ul><li>review your mission statement </li></ul></ul><ul><li>Do you want your web site to accomplish all or some of those things? </li></ul><ul><ul><li>the more goals, the more difficult the task becomes </li></ul></ul><ul><li>What information do you need or want to provide? </li></ul>
  10. 10. Identify your target audience <ul><li>Who is the information for? </li></ul><ul><ul><li>Do you have more than one audience? </li></ul></ul><ul><ul><li>Can you serve them all with one web site? </li></ul></ul><ul><li>What are the information needs of your audience? </li></ul><ul><li>What are their habits, characteristics, culture, technical capabilities, etc. </li></ul><ul><ul><li>Are they likely to start with the web or another information source? </li></ul></ul>
  11. 11. Plan it out <ul><li>Identify information you already provide your audience. </li></ul><ul><li>Identify information that you haven’t, but would like to provide your audience. </li></ul><ul><li>Identify the sources of information you want to provide through your Web site. </li></ul><ul><ul><li>Prepare that information for the web by collecting it and converting it. </li></ul></ul>
  12. 12. Plan it out <ul><li>Develop a vision for your web site and storyboard it before construction begins. </li></ul><ul><li>Share your vision and storyboard with your colleagues and your bosses. </li></ul><ul><li>Estimate initial times and costs for construction. </li></ul><ul><ul><li>Decide on the software/hardware tools necessary to construct your site. </li></ul></ul>
  13. 13. Select a Web service provider <ul><li>Coordinate the method for publishing and updating your web pages. </li></ul><ul><ul><li>email files </li></ul></ul><ul><ul><li>FTP files </li></ul></ul><ul><li>Know your root address (domain name). </li></ul><ul><li>Will you have a need for scripting and database interaction? </li></ul>
  14. 14. Try it out: Optimize it for your audience <ul><li>Test it in-house. </li></ul><ul><li>Test it on a sample audience. </li></ul><ul><li>Test it on as many different computers and monitors and browsers as possible. </li></ul><ul><li>Test it using various Internet connections. </li></ul><ul><ul><li>Cable </li></ul></ul><ul><ul><li>DSL </li></ul></ul>
  15. 15. Too many graphics are distracting
  16. 16. Few graphics makes it easy to navigate.
  17. 17. Maintain it <ul><li>Dates need to be correct </li></ul><ul><li>Services need to be up-to-date </li></ul><ul><li>Hours must be correct </li></ul><ul><li>People’s names, email addresses & phone numbers need to be correct </li></ul><ul><li>Prices need to be correct </li></ul><ul><li>Explore new technologies & encourage innovation </li></ul>
  18. 18. This document is “living” …in the past.
  19. 19. Characteristics of a Good web site <ul><li>Well-organized </li></ul><ul><li>Easy to navigate </li></ul><ul><li>Attractive </li></ul><ul><li>Useful </li></ul><ul><li>Up-to-date </li></ul>
  20. 20. Make your site well-organized <ul><li>Decide how you want to organize your information based on your users and what you know about them </li></ul><ul><li>Ways to organize your site: </li></ul><ul><ul><li>by department or organizational chart </li></ul></ul><ul><ul><li>by audience type </li></ul></ul><ul><ul><ul><li>marketing </li></ul></ul></ul><ul><ul><li>by subject </li></ul></ul>
  21. 21. Organized by department.
  22. 22. Organized by audience type.
  23. 23. Organized by subject.
  24. 24. Make your site easy to navigate <ul><li>Good organization generally drives the ease of navigation. </li></ul><ul><li>Keep scrolling down to a minimum by keeping individual Web pages short. </li></ul><ul><li>Always have links back to your home or major sections. </li></ul><ul><li>Use color to identify for users where they are in your site. </li></ul>
  25. 25. No scrolling necessary to start navigating.
  26. 26. Standard tool bars and a brief menu for easy navigation.
  27. 27. Make your site attractive <ul><li>Choose simple colors that compliment each other & work on most web browsers. </li></ul><ul><li>Keep graphics less than (150 kilobytes) to make them download at a reasonable speed on a slower connection. </li></ul><ul><li>Keep animated gifs to a minimum . </li></ul><ul><li>Use graphics that compliment your image. </li></ul>
  28. 28. An example of a very unattractive site
  29. 29. Subaru provides a balanced, attractive Web site.
  30. 30. Avoid backgrounds that wash out your text.
  31. 31. Make your site useful <ul><li>If you are unique, you’re already useful! </li></ul><ul><li>If you are not unique, how do you differ from similar Web sites? </li></ul><ul><ul><li>Is your content unique? </li></ul></ul><ul><ul><li>Is your approach unique? </li></ul></ul><ul><ul><li>Is your audience unique? </li></ul></ul><ul><ul><li>Are you more up to date? </li></ul></ul><ul><ul><li>Are you better organized? </li></ul></ul><ul><ul><li>Are you more comprehensive? </li></ul></ul>
  32. 32. Ways to present information <ul><li>Hierarchical organization </li></ul><ul><li>Image maps </li></ul><ul><li>Tables </li></ul><ul><li>Frames </li></ul>
  33. 33. Hierarchical organization <ul><li>Menus in progressive order of most general to more specific </li></ul><ul><li>Pros </li></ul><ul><ul><li>always gives impression of organization </li></ul></ul><ul><li>Cons </li></ul><ul><ul><li>Not really necessary unless you have a collection of something </li></ul></ul><ul><ul><li>Makes user travel through a number of levels to get to their information </li></ul></ul>
  34. 34. Hierarchical organization.
  35. 35. Image Maps <ul><li>Links are in an image or picture </li></ul><ul><li>Pros </li></ul><ul><ul><li>Allows for greater artistic creativity </li></ul></ul><ul><ul><li>Don’t need to use browser-dictated fonts </li></ul></ul><ul><li>Cons </li></ul><ul><ul><li>Takes longer to download </li></ul></ul><ul><ul><li>Can be tricky to set up </li></ul></ul>
  36. 36. Imagemaps can provide easy means of navigation.
  37. 37. Tables <ul><li>Standard text, images or links are arranged in tabular format with or without borders </li></ul><ul><li>Pros </li></ul><ul><ul><li>Allows creator to place items on a page </li></ul></ul><ul><ul><li>Looks neat </li></ul></ul><ul><li>Cons </li></ul><ul><ul><li>Can be tricky, but tables are amazingly useful to the designer. </li></ul></ul>
  38. 38. Tables provide Web designers with control over layout.
  39. 39. Tables also provide simple organization of information.
  40. 40. Frames <ul><li>Divides the browser's window into two or more scrollable areas </li></ul><ul><li>Pros </li></ul><ul><ul><li>Can provide an area that makes updating or changes very simple </li></ul></ul><ul><ul><li>Can help with navigation </li></ul></ul><ul><li>Cons </li></ul><ul><ul><li>Used improperly can make a huge mess! </li></ul></ul>
  41. 41. Frames can be used to provide a static navigation window.
  42. 42. Static navigation windows can be along the bottom.
  43. 43. Tips for frames <ul><li>Use in a site that rarely, if ever, goes out to other links on the World Wide Web. </li></ul><ul><li>Use a frame to hold a static banner at the top or bottom. </li></ul><ul><li>Use a frame to hold a navigation bar at the top, side or bottom of your Web site. </li></ul>
  44. 44. General Things to Remember & Consider <ul><li>Emulate a site you like. </li></ul><ul><li>Try your color scheme before you get too far. </li></ul><ul><li>Keep things simple. </li></ul><ul><li>Use the ALT attribute in the IMAGE tag </li></ul><ul><ul><li>provide alternatives to framed sites and graphic intensive sites </li></ul></ul><ul><li>Provide a search function if possible. </li></ul>
  45. 45. Test text colors against background colors.
  46. 46. General Things to Remember & Consider <ul><li>Avoid requiring users to fill out a form to gain access to your site. </li></ul><ul><li>Avoid a counter unless you know that will enhance your site and that the number will impress whoever it’s supposed to impress. </li></ul><ul><li>Don’t link to something that is not going to exist in the future. </li></ul>
  47. 47. General Things to Remember & Consider <ul><li>Avoid having more than one spinning, whirling, clicking, moving icon or graphic on a page. </li></ul><ul><li>Make hyperlinks intuitive so as to avoid the click here text. </li></ul><ul><li>Don’t advertise other products or companies unless it meets your goal, generates revenue or helps your audience. </li></ul>
  48. 48. General Things to Remember & Consider <ul><li>Avoid detracting from the image of your excellent Web site by posting all of your awards on the front page. </li></ul><ul><li>Provide text toolbars when appropriate. </li></ul><ul><li>Provide templates to multiple Web developers to maintain a consistent look. </li></ul><ul><li>Develop standards for your Web site. </li></ul>
  49. 49. General Things to Remember & Consider <ul><li>Limit fonts and headings on each Web page. </li></ul><ul><li>Attempt to use HTML tags that have layout built-in to ensure a layout, such as a hierarchical listing. </li></ul><ul><li>If you are familiar with hard-copy page layout principles, use them in Web design. </li></ul>
  50. 50. Remember Your Hard-Copy Publishing Rules <ul><li>For example… </li></ul><ul><ul><li>Provide white space for easy readability </li></ul></ul><ul><ul><li>Limit font usage and typeface usage </li></ul></ul><ul><ul><li>Limit text column width </li></ul></ul><ul><ul><li>Balance graphics and text on a page </li></ul></ul><ul><ul><li>Use complimentary colors with contrast </li></ul></ul><ul><ul><li>Standardize on a heading font and text font </li></ul></ul><ul><ul><li>Balance the page layout with top/bottom and right/left margins </li></ul></ul>
  51. 51. Clearly and Consistently Identify your site <ul><li>Banner graphics </li></ul><ul><li>Signature icons </li></ul><ul><li>Links to local home pages </li></ul>
  52. 52. Essential Elements for Every Page <ul><li>Organization or institution </li></ul><ul><li>Author or person to contact </li></ul><ul><li>Link to local home page </li></ul><ul><li>Date created or revised </li></ul><ul><li>Copyright statement </li></ul>
  53. 53. Suggested Page Elements <ul><li>Organization’s logo or seal </li></ul><ul><li>Author’s e-mail address </li></ul><ul><li>Mailing address, phone </li></ul><ul><li>Links to related local pages </li></ul><ul><li>Navigational aids: button/text bars </li></ul>

×