Website Planning 201 by Jen McKibben


Published on

Website Planning 201 by Jen McKibben presented at CMS Expo in Denver, December 2008.

Published in: Technology, Business
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Website Planning 201 by Jen McKibben

  1. 1. Website Planning 201 Jen Kramer McKibben 4Web, Inc. CMS Expo, Denver, CO December 2008
  2. 2. Agenda <ul><li>Introduce Jen </li></ul><ul><li>Introduce Jesse James Garrett and the Five Planes of User Experience </li></ul><ul><li>Structure, Skeleton and Surface </li></ul>
  3. 3. Jen Kramer McKibben <ul><li>Building websites since 2000, Joomla sites since 2005, Joomla 1.5 since RC1 </li></ul><ul><li>Program Director, MSIT, Marlboro College Graduate Center </li></ul><ul><li>Manager, New England Adobe User Group and Joomla! User Group New England </li></ul><ul><li> author: Joomla! Creating and Editing Custom Templates and Joomla! Advanced CSS </li></ul><ul><li>Not really a PHP/MySQL kind of gal! </li></ul>
  4. 4. “ I need a site and I want it blue. How much will that cost?” “I need a house, and I’d like blue paint and beige carpet. How much will that cost?”
  5. 5. The Elements of User Experience <ul><li>Developed by Jesse James Garrett, </li></ul>
  6. 6. Structure Plane <ul><li>Questions: </li></ul><ul><li>How should the content be organized? </li></ul><ul><li>What are the navigation button names? </li></ul>
  7. 7. How should the content be organized? <ul><li>In Joomla, there are two considerations: </li></ul><ul><ul><li>What does the site map look like? </li></ul></ul><ul><ul><li>How are sections and categories organized? </li></ul></ul>
  8. 8. What is a site map? <ul><li>Think of this as an org chart. </li></ul><ul><li>This is the hierarchy of your pages in your website. </li></ul><ul><li>It can be displayed as an org chart, or as a bulleted list. </li></ul>
  9. 9. What is a site map? Home About Location & Directions Photos Physician Directory Physician Profiles Testimonials Primary Care Surgery Area Resources Cultural Attractions Schools Recreation Real Estate Newspapers Links C of C Visitors Bureau FAQ Career Opportunities
  10. 10. What is a site map? <ul><li>Home </li></ul><ul><li>FAQ </li></ul><ul><li>About </li></ul><ul><ul><li>Location & Directions </li></ul></ul><ul><ul><li>Photos </li></ul></ul><ul><li>Area Resources </li></ul><ul><ul><li>Recreation </li></ul></ul><ul><ul><li>Links </li></ul></ul><ul><ul><ul><li>Chamber of Commerce </li></ul></ul></ul><ul><ul><ul><li>Visitor’s Bureau </li></ul></ul></ul>
  11. 11. How to develop a site map? <ul><li>Card sorting </li></ul>
  12. 12. Sections and Categories in Joomla <ul><li>Everyone has their own theory and philosophy. </li></ul>
  13. 13. “Sections and Categories Don’t Matter” <ul><li>Positives </li></ul><ul><li>Set all articles to “uncategorized” – no thought required </li></ul><ul><li>Client doesn’t need to worry about assigning correct section/category </li></ul><ul><li>Negatives </li></ul><ul><li>Possible in Joomla 1.5 only </li></ul><ul><li>Can the client find an article to edit in the article manager? </li></ul><ul><li>Can’t use section/category blogs or other features </li></ul>
  14. 14. “Sections and Categories Follow the Site Map” <ul><li>Positives </li></ul><ul><li>Easier to find content in the manager </li></ul><ul><li>Savvy clients find categories more intuitive </li></ul><ul><li>Negatives </li></ul><ul><li>Client may get confused with too many categories </li></ul><ul><li>Potentially too much slicing and dicing </li></ul>
  15. 15. Sections and Categories Work for Your Content <ul><li>Organize them so you can find what you need, and so can your client. </li></ul><ul><li>Thoughtfully make use of section/category blogs, and other section and category based organization. </li></ul>
  16. 16. Flow charts <ul><li>Helpful for thinking about tasks and the order they need to be completed </li></ul><ul><li>Makes you think about error handling </li></ul><ul><li>Helpful for developing modules and components </li></ul>
  17. 17. Flow charts
  18. 18. Structure Plane <ul><li>Any Questions? </li></ul>
  19. 19. Skeleton Plane <ul><li>Questions </li></ul><ul><li>How should forms and other interactive screens look? </li></ul><ul><li>Where should important information be located? </li></ul>
  20. 20. Skeleton Plane <ul><li>Wireframe diagrams </li></ul><ul><li>Low-fidelity usability testing </li></ul><ul><li>HTML sketches </li></ul>
  21. 21. Wireframe Diagram
  22. 22. Low-fidelity usability testing? <ul><li>Make a paper diagram of how the site will work. </li></ul><ul><li>Test the site with users, next-door neighbors, anyone you can </li></ul><ul><li>“Paper Prototyping” by Carolyn Snyder </li></ul>
  23. 23. HTML Sketches <ul><li>Most practical in Joomla </li></ul><ul><li>Build the website out with sections, categories, articles, menu items (SCAM) </li></ul><ul><li>Let the client look at it. </li></ul><ul><li>Test with users. </li></ul><ul><li>Wireframe template available! </li></ul>
  24. 24. Skeleton Plane <ul><li>Any questions? </li></ul>
  25. 25. Surface Plane <ul><li>Questions: </li></ul><ul><li>What will the finished product look like? </li></ul><ul><li>What colors, fonts, and logo will we use? </li></ul><ul><li>Sanity checks on layout, user understanding of the site, etc. </li></ul>
  26. 26. Where does the design come from? <ul><li>Two choices with Joomla: </li></ul><ul><ul><li>Canned template (JoomlaShack, SiteGround, others) </li></ul></ul><ul><ul><li>Build your own template based on a graphic design </li></ul></ul>
  27. 27. Which is better? <ul><li>It Depends. </li></ul>
  28. 28. Canned template positives <ul><li>Cheap to develop with a free or low-cost canned template </li></ul><ul><li>Template almost always works correctly. </li></ul><ul><li>Generally reasonable graphic designs. </li></ul>
  29. 29. Canned template negatives <ul><li>Not a unique look </li></ul><ul><li>Limited in regions for adding modules </li></ul><ul><li>Helps to know HTML and CSS for modifying the template </li></ul><ul><li>Can be tricky to understand what the template designer did and why </li></ul>
  30. 30. Custom template positives <ul><li>Unique, perfect look for the client </li></ul><ul><li>Changeable and moldable to the content </li></ul><ul><li>No extra code – does only what it needs to do </li></ul><ul><li>You can charge more  </li></ul>
  31. 31. Custom template negatives <ul><li>Expen$$$ive </li></ul><ul><li>How good are your graphic design skills? (Or do you know a graphic designer who can design for Joomla?) </li></ul><ul><li>Can you convert the design to Joomla templates? (Or know someone who can?) </li></ul>
  32. 32. Absolutely shameless plug <ul><li>Be sure to check out </li></ul><ul><li>“ Joomla!: Creating and Editing Custom Templates” </li></ul><ul><li>With Jen Kramer McKibben </li></ul><ul><li> </li></ul><ul><li>(released December 2, 2008) </li></ul><ul><li>(Releasing soon: Joomla! Advanced CSS) </li></ul>
  33. 33. Not so shameless plug <ul><li>And attend Barrie North’s talk on template development </li></ul><ul><li>(at 2:30 immediately following this talk) </li></ul>
  34. 34. Exercise <ul><li> </li></ul><ul><li>Take a look at structure, skeleton, and surface for this site. Discuss. </li></ul>
  35. 35. If you liked this talk, you may also like… <ul><li>Graphics for Non-Designers </li></ul><ul><ul><li>1-2:30 PM 12/5 </li></ul></ul>
  36. 36. Questions? <ul><li>Jen Kramer McKibben </li></ul><ul><li>4Web, Inc. </li></ul><ul><li> </li></ul><ul><li> </li></ul><ul><li>[email_address] </li></ul><ul><li>Twitter: jen4web </li></ul>