Web Design Etiquette - #POLS2013

576 views

Published on

Presenent

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

  • Be the first to like this

No Downloads
Views
Total views
576
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Web Design Etiquette - #POLS2013

  1. 1. Web Design Etiquette @sethhinz
  2. 2. Agenda What it is Why it’s important Clean & Simple Design Common Mistakes Tools & Resources
  3. 3. A Recognition Game What do they offer?
  4. 4. http://www.petersbuss.se/
  5. 5. http://www.gatesnfences.com/
  6. 6. What is Web Design Etiquette A set of rules that address the expectations of the end users of your website. Users  Current Parents  Prospective Parents  Teachers  Students
  7. 7. Why – Build Trust with Users Building trust is key. If you miss a rule, it violates trust. 29% trust websites that sell services 54% trust charities / nonprofit websites 45% trust the federal government websites Source: Consumerwebwatch.org
  8. 8. http://www.petersbuss.se/
  9. 9. http://www.gatesnfences.com/
  10. 10. http://www.edgebrook.cps.k12.il.us/
  11. 11. http://www.stmichaelguardians.org/
  12. 12. Why is It Important Credibility is easy to lose  Spelling & Grammar  Relevant Information  Overall Design
  13. 13. The Web Design Process
  14. 14. Web Design in 6 Steps Learn Plan Design Code Launch Maintain
  15. 15. Web Design in 6 Steps Learn Plan Design Code Launch Maintain
  16. 16. Clean & Simple Design
  17. 17. Clean & Simple Design Font Hierarchy / Typography  Text & Links Style Cohesive Colors Ease of Navigation Clear Calls to Action Information People Want Advanced Topics: Grids
  18. 18. Font HierarchyClean & Simple Design
  19. 19. Six Revisions | http://bit.ly/RHgc2O
  20. 20. Six Revisions | http://bit.ly/RHgc2O
  21. 21. http://www.stmichaelguardians.org/
  22. 22. Typography Resources Font Combinator  http://font-combinator.com/
  23. 23. Cohesive Colors Clean & Simple Design
  24. 24. www.bestbuy.com
  25. 25. Whitehouse.gov
  26. 26. Wholefoods.com
  27. 27. Find Color Cohesion Eye Dropper Tool  Google Chrome
  28. 28. Find Color Cohesion Search Palettes on Colour Lovers  http://www.colourlovers.com Choose/Create a Color Palette
  29. 29. Ease of Navigation Clean & Simple Design
  30. 30. http://www.edgebrook.cps.k12.il.us/
  31. 31. http://www.stmichaelguardians.org/
  32. 32. Clear Calls to Action Clean & Simple Design
  33. 33. http://www.edgebrook.cps.k12.il.us/
  34. 34. http://www.stmichaelguardians.org/
  35. 35. Relevant Information Clean & Simple Design
  36. 36. The only St. Michael thattells me where it is Check your <title></title> tags
  37. 37. smikes? Really?Check <title> tags
  38. 38. City? State? Acadia Parish? Where’s that?http://www.stmike.net
  39. 39. It’s in Chicago, I think. http://www.edgebrook.cps.k12.il.us/
  40. 40. HTTP://XKCD.COM/773/
  41. 41. How to apply Contact InformationNews & Events School Calendar Right up frontGreat for current parents | Helps show an active community No searching for it http://www.stmichaelguardians.org/
  42. 42. Common Mistakes
  43. 43. Common Mistakes to Avoid MISTAKE #1 Spelling & Grammar Errors FIX Team of Proofers, Weekly
  44. 44. Harvard University misspells Professors -http://www.law.harvard.edu/its/Found on: http://www.prlog.org
  45. 45. Common Mistakes to Avoid MISTAKE #2 Logo Doesn’t Go to Home Page QUICK FIX Wrap the Image in a Link <a href> </a> *Bonus: Logo Should Be Top Left
  46. 46. Not an active linkhttp://www.carrollk12.org/ces/
  47. 47. Common Mistakes to Avoid MISTAKE #3 Underlining Non-Links
  48. 48. Common Mistakes to Avoid MISTAKE #3 Underlining Non-Links QUICK FIX Only Underline Links, if you need to stress something try italics or boldness
  49. 49. Common Mistakes to Avoid MISTAKE #4 Centering All Web Text
  50. 50. http://www.carrollk12.org/ces/
  51. 51. OK NOT OKOK NOT OKhttp://uxmovement.com/content/why-you-should-never-center-align-paragraph-text/
  52. 52. Common Mistakes to Avoid MISTAKE #4 Centering All Web Text QUICK FIX Left align most text. Utilize Font Hierarchy to differentiate.
  53. 53. Common Mistakes to Avoid MISTAKE #5 Too Many Fonts, Colors (and any Comic Sans)
  54. 54. JUST SAY NO TO COMIC SANS
  55. 55. Source: http://www.bestedsites.com/
  56. 56. Common Mistakes to Avoid MISTAKE #5 Too Many Fonts, Colors (and any Comic Sans) QUICK FIX Sans Serif for main text. Get creative for headers.
  57. 57. Common Mistakes to Avoid MISTAKE #6 Large Blocks of Text/Paragraphs QUICK FIX Every 2-3 paragraphs, break up with Subheader
  58. 58. http://www.stmichaelguardians.org/
  59. 59. Common Mistakes to Avoid MISTAKE #7 Long List of Links
  60. 60. Can these be categorized at all?
  61. 61. There must be a way to put theseIn categories…
  62. 62. Categories for a Resource PageIt’s a start!Bonus Tip: Label PDF files with a(pdf) so users know what’s coming
  63. 63. Common Mistakes to Avoid MISTAKE #7 Long List of Links QUICK FIX Go through all links – start to develop categories.
  64. 64. Common Mistakes to Avoid MISTAKE #Final Believing people care about the website as much as you do
  65. 65. What People Use Websites For  They want/need information  They want/need to make a purchase / donation.  They want/need to be entertained.  They want/need to be part of a community.
  66. 66. Relevant Content for each usergroup is separated out from them,rather than us providing one long listfor them to hunt through. Tip: • Put each piece of content from your website on a note card. • Lay them on the table. • Shuffle around. • Start sorting. • Perhaps this is how content should start being arranged. •Not based on internal departments.
  67. 67. Common Mistakes to Avoid MISTAKE #Final Believing people care about the website as much as you do QUICK FIX Relax. Think about the end user.
  68. 68. Tools & Resources Never Stop Learning  http://www.w3schools.com  http://webdesign.tutsplus.com  http://uxmovement.com/ Review the Dos and Don’ts  http://webdosanddonts.com See What Others Are Doing  http://www.bestedsites.com/  http://www.stmichaelguardians.org/  http://www.tripwiremagazine.com/2012/09/education-wordpress-themes.html  Google “(Common Name) Elementary School” etc. & Click
  69. 69. Offer for You Send me a tweet @sethhinz  “I’d Love Some Website Tips” or something clever…  Link to your website  Within 1-2 weeks (I’ll try ASAP)  I’ll get back to you with 5-10 tips specific to your site. Tweet to @sethhinz
  70. 70. Q&A
  71. 71. Advanced Topic: HTML5 & Responsive Design Clean & Simple Design
  72. 72. HTML5 & Responsive DesignDotComInfoway
  73. 73. HTML5 & Responsive DesignDotComInfoway
  74. 74. Responsive to Device Lancaster University | http://www.lancs.ac.uk/
  75. 75. Advanced Topic: Grids Clean & Simple Design
  76. 76. Simplicity T H I N K G R I D S Grid images from Six Revisions and 960.gs
  77. 77. Grid images from Six Revisions and 960.gs
  78. 78. Grid images from Six Revisions and 960.gs
  79. 79. Grid images from Six Revisions and 960.gs
  80. 80. Grid images from Six Revisions and 960.gs
  81. 81. Grid images from Six Revisions and 960.gs
  82. 82. Grid images from Six Revisions and 960.gs
  83. 83. Grid images from Six Revisions and 960.gs
  84. 84. Grid images from Six Revisions and 960.gs
  85. 85. Grid images from Six Revisions and 960.gs
  86. 86. https://chrome.google.com/webstore/detail/gridyo/hgiogamnenmgeeaemjebknmlbleeedjl?hl=es-419
  87. 87. GRIDYO in action

×