Whether your site is five pages or 500, it needs a strong foundation that plans for growth. We’ll cover site maps, content strategy, user interaction and experience so you have a plan for your site now, and down the road. We’ll also touch on best practices for doing it all over again for mobile [hint: it's not just shrinking everything down!].

1. House with No Walls:
Creating a Site Structure
for Tomorrow
Lisa Ghisolf, Gizmo Creative Factory
@gizmodesign * gizmo-design.com

4. It’s the “un-fun” stuff
• We are long past “brochureware” sites [sort of]
• Content strategy: More than just what you’ll say
• Sitemaps: What you need, pathways
• Functionality: Phased functionality aligned with business
objectives [especially in e-commerce!]
• Wireframes: What lives on each page
• Prototypes: Functional model/test site

5. Basically...
• Who (your audiences)
• Why (your goals)
• How (functional)

6. But… why?
• Test processes (e-commerce)
• Test content
• Bring clients in quickly
• Iterate quickly
• User experience starts early in the process
• “Design in the browser”

7. Content strategy
• User, user, user! Who are your audiences?
Think about what they — not you — are
expecting to see.
• Look at your content: how ME-centric is it?
• Good content is: up-to-date, user-centric,
useful, u-findable.

8. Sitemap to wireframe
• Visualize your structure & how users will
react: Flowchart it out!
• What is the process? What is interlinked?
• Consistency is key

24. Sitemap & Wireframe Tools
• Sitemaps
• Powermapper.com
• Slickplan.com
• Wireframes
• Gomockingbird.com
• Balsamiq.com
• Both
• Jumpchart.com [w/WP export!]
• gliffy.com

25. Prototyping Tools
• Genesis Sandbox starter theme (genesissandbox.com)
• Foundation (fwp.drewsymo.com)
• hotgloo.com
• marvelapp.com using wireframes

26. What’s next? Mobile
• What works on a laptop or even a tablet doesn’t necessarily
work on a phone
• K.I.S.S.!
• One-column themes
• People are used to scrolling on mobile, but how much will they
read?
• Are the buttons big enough to touch?
• As with ANY site: Make it easy on the user

30. Mobile Tools
• marvelapp.com (desktop & mobile)
• Proto.io
• fluidui.com
• flinto.com

31. Thank you!
Lisa Ghisolf, Gizmo Creative Factory
@gizmodesign * gizmo-design.com
slideshare.com/gizmodesign