House with no walls: Building a site plan for the future

1,748 views
1,475 views

Published on

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!].

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,748
On SlideShare
0
From Embeds
0
Number of Embeds
40
Actions
Shares
0
Downloads
17
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

House with no walls: Building a site plan for the future

  1. 1. House with No Walls: Creating a Site Structure for Tomorrow Lisa Ghisolf, Gizmo Creative Factory @gizmodesign * gizmo-design.com
  2. 2. 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
  3. 3. Basically... • Who (your audiences) • Why (your goals) • How (functional)
  4. 4. 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”
  5. 5. 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.
  6. 6. Sitemap to wireframe • Visualize your structure & how users will react: Flowchart it out! • What is the process? What is interlinked? • Consistency is key
  7. 7. Sitemap & Wireframe Tools • Sitemaps • Powermapper.com • Slickplan.com • Wireframes • Gomockingbird.com • Balsamiq.com • Both • Jumpchart.com [w/WP export!] • gliffy.com
  8. 8. Prototyping Tools • Genesis Sandbox starter theme (genesissandbox.com) • Foundation (fwp.drewsymo.com) • hotgloo.com • marvelapp.com using wireframes
  9. 9. 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
  10. 10. Mobile Tools • marvelapp.com (desktop & mobile) • Proto.io • fluidui.com • flinto.com
  11. 11. Thank you! Lisa Ghisolf, Gizmo Creative Factory @gizmodesign * gizmo-design.com slideshare.com/gizmodesign

×