Joomla Day Austin Part 1


Published on

Joomla Day Austin Texas 2011 - Part 1 features Jen Kramer, Cory Webb, Andy Miller and Kyle Ledbetter presenting Joomla site planning and template design

Published in: Technology
1 Comment
No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Joomla Day Austin Part 1

  1. 3. Website Planning & Strategy <ul><li>Jen Kramer, 4Web, Inc. </li></ul><ul><li>Cory Webb, Cory Webb Media </li></ul><ul><li>Joomla!Day Austin </li></ul><ul><li>September 15, 2011 </li></ul>
  2. 4. <ul><li>Introduce Jesse James Garrett and the Five Planes of User Experience </li></ul><ul><ul><li>Strategy, Scope, Structure, Skeleton, Surface </li></ul></ul><ul><li>Introduce Minis & Friends </li></ul><ul><li>Get Jesse and the Minis together and see what happens! </li></ul>Agenda
  3. 5. “ I need a site and I want it blue. How much will that cost?” <ul><li>“I need a house, and I’d like blue paint and beige carpet. How much will that cost?” </li></ul>
  4. 6. <ul><li>What do you need? </li></ul><ul><li>How many pages? </li></ul><ul><li>What is your budget? </li></ul><ul><li>Timeline? </li></ul><ul><li>Do you want to edit your own site? </li></ul><ul><li>What features do you want to include? </li></ul><ul><li>Do you want fries with that? </li></ul>What are your next questions?
  5. 7. Ever forget to ask something? <ul><li>Oops. Now you’re in trouble. </li></ul><ul><li>Especially if you bid a fixed-rate contract. </li></ul>
  6. 8. What questions should I be asking? <ul><li>And does Joomla really make this process different? </li></ul>
  7. 9. <ul><li>The basic questions are always the same and in the same order. </li></ul><ul><li>You can make the questions more specific or more general as needed. </li></ul><ul><li>Follow the plan and your site will turn out great with less bumps. </li></ul>Nope.
  8. 10. <ul><li>Developed by Jesse James Garrett, </li></ul>The Elements of User Experience
  9. 11. Everyone wants to start with making it pretty. <ul><li>That’s planning your interior decorating without developing the floor plans first. </li></ul>
  10. 12. What’s more, some clients might feel like you’re wasting their time. <ul><li>You’re not. You’re actually saving them time and a bundle of money. But that’s often hard to understand. </li></ul>
  11. 13. <ul><li>Visit and interact with people of all ages who may be suffering mentally, physically or emotionally. </li></ul><ul><ul><li>Children with disabilities </li></ul></ul><ul><ul><li>At-risk youth </li></ul></ul><ul><ul><li>Individuals in transition </li></ul></ul><ul><ul><li>Elder adults </li></ul></ul>Introducing Minis & Friends!
  12. 14. <ul><li>Benefits to participants: </li></ul><ul><ul><li>Improve their motor skills </li></ul></ul><ul><ul><li>Ability to connect </li></ul></ul><ul><ul><li>Tactile response </li></ul></ul><ul><ul><li>Use of senses and spirits </li></ul></ul><ul><li>Benefits to volunteers: “life-changing” experience </li></ul>Introducing Minis & Friends!
  13. 15. <ul><li>Questions: </li></ul><ul><li>What do we want to get out of the site? </li></ul><ul><li>Who are our users? </li></ul><ul><li>What do our users want? </li></ul><ul><li>What experience are we trying to provide? </li></ul><ul><li>How will we measure success? </li></ul>Strategy Plan
  14. 16. <ul><li>More people coming to the site through search engines </li></ul><ul><li>Better search placement </li></ul><ul><li>Easy updates for the website </li></ul><ul><li>Inform community about the service </li></ul><ul><li>Get new members and affiliates </li></ul>What do we want to get out of the site?
  15. 17. <ul><li>Coordinators from groups servicing challenged individuals </li></ul><ul><li>Prospective mini horse owners who want to become members </li></ul><ul><li>Prospective donors </li></ul><ul><li>Prospective affiliates </li></ul>Who are our users?
  16. 18. <ul><li>Get in touch with Minis & Friends to coordinate a visit to their group </li></ul><ul><li>How to donate </li></ul><ul><li>How to volunteer </li></ul>What do our users want?
  17. 19. <ul><li>Warm </li></ul><ul><li>Caring </li></ul><ul><li>Inviting </li></ul><ul><li>“I can make a difference” </li></ul><ul><li>“Gosh, that would be good for me too!” </li></ul>What experience are we trying to provide?
  18. 20. <ul><li>The site should be easily updated by Minis & Friends. </li></ul><ul><li>The site should score better in search engines than it currently does for keywords: </li></ul><ul><ul><li>Mini horses Austin </li></ul></ul><ul><ul><li>Miniature horses </li></ul></ul>How will we measure success?
  19. 21. <ul><li>Questions so far? </li></ul>Strategy Plane
  20. 22. <ul><li>Questions: </li></ul><ul><li>What features will the site need to include? </li></ul><ul><li>What kind of detail will those features have? </li></ul><ul><li>What tools, skills and personnel will we need to build the site? </li></ul><ul><li>What is the timeline for building the site? </li></ul>Scope Plane
  21. 23. <ul><li>Contact form/scheduling application </li></ul><ul><li>Easy method of displaying minis/bios (Meet the Minis page) </li></ul><ul><li>Calendar/event feed </li></ul>What features will the site need to include?
  22. 24. <ul><li>It Depends. </li></ul><ul><li>You’ll need to evaluate them on: </li></ul><ul><ul><li>Desired features from client </li></ul></ul><ul><ul><li>Joomla version </li></ul></ul><ul><ul><li>Pre-alpha/alpha/beta/full version? </li></ul></ul><ul><ul><li>Subscription? Support? Upgrade path? </li></ul></ul>Which Joomla extensions are right for the job?
  23. 25. <ul><li>Alex and Jeremy will discuss these in their talk. </li></ul>Which Joomla extensions are right for the job?
  24. 26. <ul><li>Do I need some help? </li></ul><ul><ul><li>Graphic designer to create a custom design vs. canned template </li></ul></ul><ul><ul><li>Joomla extension vs. custom engineered extension </li></ul></ul><ul><ul><li>Client-provided content, or am I writing the content, or do I need a pro? </li></ul></ul><ul><ul><li>SEO assistance? </li></ul></ul><ul><ul><li>HTML/CSS assistance? Custom template construction? </li></ul></ul><ul><ul><li>Something else? </li></ul></ul>What tools, skills and personnel will we need to build the site?
  25. 27. <ul><li>Do I need some help? </li></ul><ul><ul><li>Graphic designers: Andy Miller, Kyle Ledbetter </li></ul></ul><ul><ul><li>Joomla extensions: Alex Andreae, Jeremy Wilken </li></ul></ul><ul><ul><li>Site deployment: Brian Edgerton, Joe LeBlanc </li></ul></ul><ul><ul><li>Client-provided content </li></ul></ul>What tools, skills and personnel will we need to build the site?
  26. 28. <ul><li>Today. </li></ul><ul><li>Actually, like a cooking show, the site was built in advance, starting in early August. </li></ul>What is the timeline for building the site?
  27. 29. <ul><li>Questions? </li></ul>Scope plane
  28. 30. <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>Structure Plane
  29. 31. <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 categories organized? </li></ul></ul>How should the content be organized?
  30. 32. <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>What is a site map?
  31. 33. 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
  32. 34. <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>What is a site map?
  33. 35. <ul><li>Card sorting </li></ul>How to develop a site map?
  34. 36. <ul><li>See site, </li></ul>The Site Map
  35. 37. <ul><li>Everyone has their own theory and philosophy. </li></ul>Categories in Joomla
  36. 38. <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 category </li></ul><ul><li>Negatives </li></ul><ul><li>Can the client find an article to edit in the article manager? </li></ul><ul><li>Can’t use category blogs/lists or other features </li></ul>“ Categories Don’t Matter”
  37. 39. <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>“Categories Follow the Site Map” <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>
  38. 40. <ul><li>Organize them so you can find what you need, and so can your client. </li></ul><ul><li>Thoughtfully make use of category blogs, and other category-based organization. </li></ul>Categories Work for Your Content
  39. 41. <ul><li>Log into back end and show </li></ul>Our Categories
  40. 42. <ul><li>Any Questions? </li></ul>Structure Plane
  41. 43. <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>Skeleton Plane
  42. 44. <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>Surface Plane
  43. 45. <ul><li>Complete site map, outlining category structure </li></ul><ul><li>Identification of the types of additional modules/components used on the website </li></ul><ul><li>Identification of a custom component required for the site </li></ul><ul><li>Design brief for designers, based on goals </li></ul>Our Deliverables
  44. 46. Questions?
  45. 48. Joomla Template Design <ul><li>Andy Miller, Rocket Theme </li></ul><ul><li>Kyle Ledbetter, eBay </li></ul><ul><li>Joomla!Day Austin </li></ul><ul><li>September 15, 2011 </li></ul>
  46. 49. Preferred Tools <ul><li>Kyle: MacRabbit Espresso, Firebug for Firefox, Chrome Web Developer </li></ul><ul><li>Andy: Fireworks, Sublime Text, Chrome Web Developer </li></ul>
  47. 50. Why Adobe Fireworks? <ul><li>- Vector + Bitmap </li></ul><ul><li>- More Powerful Compression </li></ul><ul><li>- Web Slices & Layers </li></ul><ul><li>- Much Faster Than Ps or Ai </li></ul><ul><li>- Smaller Learning Curve </li></ul>
  48. 51. Kyle’s Design Process
  49. 56. Get Inspired! <ul><li>- </li></ul><ul><li>- </li></ul><ul><li>- </li></ul><ul><li>- </li></ul><ul><li>- </li></ul><ul><li>- </li></ul><ul><li>- </li></ul><ul><li>- </li></ul>
  50. 57. Grid System <ul><li>- Design Templates </li></ul><ul><li>- 1 to 1 Pixel Width </li></ul><ul><li>- Standard Layouts </li></ul><ul><li>- Rapid Deployment </li></ul>
  51. 63. Andy’s Design Process Andy Miller CEO / Founder RocketTheme
  52. 64. Logo Design Design Concept
  53. 65. Andy’s Design Process
  54. 66. Initial Design Concept
  55. 67. Colors and Fonts Kuler for Colors Google Web Fonts
  56. 68. Flesh out Design
  57. 69. Finished Comp Homepage Inner Page