Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

WordCamp San Diego 2016 #wcsd House with No Walls: Building a Site Structure for the Future

516 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. For WordCamp San Diego 2016 #wcsd.

Published in: Technology
  • Be the first to comment

  • Be the first to like this

WordCamp San Diego 2016 #wcsd House with No Walls: Building a Site Structure for the Future

  1. 1. House with No Walls:
 Creating a Site Structure 
 for Tomorrow Lisa Ghisolf * Gizmo Creative Factory * Chicago @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 • Navigation: It’s strategic – play with it • Sitemaps: Pages needed, pathways • Functionality: Phased functionality aligned with business objectives • Wireframes: What lives on each page • Prototypes: Functional model/test site
  3. 3. Basically... •Who (personas/your audiences) •Demographic + needs + behavior •Why (your goals, their goals) •How (functionalities)
  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. Navigation considerations • Balance your site structure like a pyramid • It’s good to be shallow (less than 3 clicks) • Naming still based on keyword phrases (not just “about us”) – feel free to change in menu name • If forums are pushing low-quality content, consider putting on subdomain • Clean up your tags
  7. 7. Sitemap to wireframe •Visualize your structure & how users will react: Flowchart it out! •What is the process? What is interlinked? Link juice •Consistency is key
  8. 8. Designer pages: -Kiton -Stefano Ricci -Pal Zileri -Brunello Cucinelli -Hugo Boss -Zilli -John Lobb -Zanella -Brioni -Jack Victor -Luciano Barbera -Dolce Punta -Babylone -Angela Caputi -Il Bisonte -Alfred Dunhill -Edward Green -Inis Meain Caruso MORRIS Privacy Policy Terms & Conditions Search Site map Home Designer index Designers A- Z Designers by category New this season My designers What's new Shop all Clothing Denim Outerwear Leather Pants Shorts Suiting Sport coats Shoes Bags Luggage Accessories Belts Gloves Keychains Sunglasses Cufflinks Umbrellas Wallets Hats Scarves/ wraps Jewelry Men's Women's About Blog/ travel diary Customer Service Order status Shipping FAQs Press/ media My Account My Wishlist My Cart History Contact Events Philosophy Version 1.3 - JUNE 20, 2011 Globals [on every page] Blog Calendar Regular pages Dynamically created pages KEY
  9. 9. logo what's new/new this season privacy policy terms & conditions site map customer service contact us home designers shop all clothing shoes bags luggage accessories men's women's about media travel diary home latest travel blog post My Account Register an Account My CartSearch sign up for our e-newsletter cabinet w/clothing linking out/rotating imgs
  10. 10. Sitemap & Wireframe Tools • Sitemaps • Powermapper.com • Slickplan.com • Wireframes • Gomockingbird.com • Balsamiq.com • Both • UXpin.com • Jumpchart.com [w/WP export!] • gliffy.com
  11. 11. Prototyping Tools • Sketch (bohemiancoding.com/sketch/) • Genesis Sandbox starter theme (genesissandbox.com) • Foundation (fwp.drewsymo.com) • hotgloo.com • marvelapp.com using wireframes
  12. 12. Don’t ignore 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
  13. 13. Mobile Tools • marvelapp.com 
 (desktop & mobile) • Proto.io • fluidui.com • flinto.com
  14. 14. Thank you! Lisa Ghisolf * Gizmo Creative Factory * Chicago @gizmodesign * gizmo-design.com slideshare.com/gizmodesign

×