• Save
 

Like this? Share it with your network

Share

Web design etiquette

on

  • 1,786 views

Presentation delivered at the 2012 #MANS conference in Grand Rapids, Michigan. ...

Presentation delivered at the 2012 #MANS conference in Grand Rapids, Michigan.

Additional Resources
- http://www.w3schools.com
- http://webdesign.tutsplus.com
- http://webdosanddonts.com
- http://www.bestedsites.com/
- http://sixrevisions.com/
- http://mashable.com/2010/07/23/web-design-resources-beginners/
- http://www.onextrapixel.com/category/design/
- http://uxmovement.com/

Statistics

Views

Total Views
1,786
Views on SlideShare
1,775
Embed Views
11

Actions

Likes
0
Downloads
0
Comments
0

2 Embeds 11

http://www.pinterest.com 7
https://twitter.com 4

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Web design etiquette Presentation Transcript

  • 1. Web Design Etiquette @sethhinz
  • 2. Agenda What it is Why it’s important Clean & Simple Design Common Mistakes Tools & Resources
  • 3. A Recognition Game What do they offer?
  • 4. http://www.petersbuss.se/
  • 5. http://www.gatesnfences.com/
  • 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. 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. http://www.petersbuss.se/
  • 9. http://www.gatesnfences.com/
  • 10. http://www.edgebrook.cps.k12.il
  • 11. http://www.stmichaelguardians.org/
  • 12. Why is It Important Credibility is easy to lose  Spelling & Grammar  Relevant Information  Overall Design
  • 13. The Web Design Process
  • 14. Web Design in 6 Steps Learn Plan Design Code Launch Maintain
  • 15. Web Design in 6 Steps Learn Plan Design Code Launch Maintain
  • 16. Clean & Simple Design
  • 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. Font HierarchyClean & Simple Design
  • 19. Six Revisions | http://bit.ly/RHgc2O
  • 20. Six Revisions | http://bit.ly/RHgc2O
  • 21. http://www.stmichaelguardians.org/
  • 22. Typography Resources Font Combinator  http://font-combinator.com/
  • 23. Cohesive Colors Clean & Simple Design
  • 24. www.bestbuy.com
  • 25. Whitehouse.gov
  • 26. Wholefoods.com
  • 27. Find Color Cohesion Eye Dropper Tool  Google Chrome
  • 28. Find Color Cohesion Search Palettes on Colour Lovers  http://www.colourlovers.com Choose/Create a Color Palette
  • 29. Ease of Navigation Clean & Simple Design
  • 30. http://www.edgebrook.cps.k12.il
  • 31. http://www.stmichaelguardians.org/
  • 32. Clear Calls to Action Clean & Simple Design
  • 33. http://www.edgebrook.cps.k12.il
  • 34. http://www.stmichaelguardians.org/
  • 35. Relevant Information Clean & Simple Design
  • 36. The only St. Michael thattells me where it is Check your <title></title> tags
  • 37. smikes? Really?Check <title> tags
  • 38. City? State? Acadia Parish? Where’s that?http://www.stmike.net
  • 39. It’s in Chicago, I think. http://www.edgebrook.cps.k12.il
  • 40. HTTP://XKCD.COM/773/
  • 41. How to apply Contact InformationNews & Events School Calendar Right up frontGreat for current parents | Helps show an active No searching for itcommunity http://www.stmichaelguardians .org/
  • 42. Common Mistakes
  • 43. Common Mistakes to Avoid MISTAKE #1 Spelling & Grammar Errors FIX Team of Proofers, Weekly
  • 44. Harvard University misspells Professors -http://www.law.harvard.edu/its/Found on: http://www.prlog.org
  • 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. Not an active linkhttp://www.carrollk12.org/ces/
  • 47. Common Mistakes to Avoid MISTAKE #3 Underlining Non-Links
  • 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. Common Mistakes to Avoid MISTAKE #4 Centering All Web Text
  • 50. http://www.carrollk12.org/ces/
  • 51. OK NOT OKOK NOT OKhttp://uxmovement.com/content/why-you-should-never-center-align-paragraph-
  • 52. Common Mistakes to Avoid MISTAKE #4 Centering All Web Text QUICK FIX Left align most text. Utilize Font Hierarchy to differentiate.
  • 53. Common Mistakes to Avoid MISTAKE #5 Too Many Fonts, Colors (and any Comic Sans)
  • 54. JUST SAY NO TO COMIC SANS
  • 55. Source: http://www.bestedsites.com/
  • 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. Common Mistakes to Avoid MISTAKE #6 Large Blocks of Text/Paragraphs QUICK FIX Every 2-3 paragraphs, break up with Subheader
  • 58. http://www.stmichaelguardians.org/
  • 59. Common Mistakes to Avoid MISTAKE #7 Long List of Links
  • 60. Can these be categorized at all?
  • 61. Categories for a Resource PageIt’s a start!Bonus Tip: Label PDF files with a(pdf) so users know what’scoming
  • 62. Common Mistakes to Avoid MISTAKE #7 Long List of Links QUICK FIX Go through all links – start to development categories.
  • 63. Common Mistakes to Avoid MISTAKE #Final Believing people care about the website as much as you do
  • 64. 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.
  • 65. Relevant Content for each usergroup is separated out from them, Tip:rather than us providing one long list • Put each piece of content fromfor them to hunt through. 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.
  • 66. 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.
  • 67. 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
  • 68. 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
  • 69. Q&A
  • 70. Advanced Topic: Grids Clean & Simple Design
  • 71. Simplicity T H I N K G R I D S Grid images from Six Revisions and 960.g
  • 72. Grid images from Six Revisions and 960.g
  • 73. Grid images from Six Revisions and 960.g
  • 74. Grid images from Six Revisions and 960.g
  • 75. Grid images from Six Revisions and 960.g
  • 76. Grid images from Six Revisions and 960.g
  • 77. Grid images from Six Revisions and 960.g
  • 78. Grid images from Six Revisions and 960.g
  • 79. Grid images from Six Revisions and 960.g
  • 80. Grid images from Six Revisions and 960.g
  • 81. https://chrome.google.com/webstore/detail/gridyo/hgiogamnenmgeeaemjebknmlbleeedjl?hl=es-419
  • 82. GRIDYO in action