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