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.

A House with No Walls: Building a Site Structure for Tomorrow

444 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 user 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.

Published in: Design
  • Be the first to comment

  • Be the first to like this

A House with No Walls: Building a Site Structure for Tomorrow

  1. 1. HOUSE WITH NO WALLS:
 CREATING A SITE STRUCTURE FOR TOMORROW Lisa Ghisolf * Gizmo Creative Factory * Chicago @gizmodesign * gizmo-design.com
  2. 2. WHAT YOU THINK YOU HAVE
  3. 3. WHAT IT MAY REALLY BE
  4. 4. WHY? ➤ After reaching a company's website via a referral site, 50% of visitors will use the navigation menu to orient themselves. 
 (Source: KoMarketing) ➤ 83% say a seamless user experience across devices is somewhat or very important. (Source: Salesforce) ➤ 48% of users say they feel frustrated and annoyed when on sites that are poorly optimized for mobile. (Source: Newstar Localize and 15miles) ➤ 52% of users said a bad mobile experience made them less likely to engage with a company. (Source: Animoto Online & Mobile Video Study)
  5. 5. 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 ➤Testing: Confirm/debunk suspicions
  6. 6. BASICALLY... ➤Who (personas/
 your audiences) ➤Demographic + needs + behavior ➤Why (your goals, their goals) ➤How (click this, 
 get that)
  7. 7. https://thedesignteam.io/
  8. 8. BUT… WHY? ➤Test processes 
 (e-commerce), 
 the “user journey” ➤Test content ➤Bring clients in quickly ➤Iterate quickly ➤User experience starts early in the process ➤“Design in the browser”
  9. 9. 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, findable.
  10. 10. 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
  11. 11. https://thedesignteam.io/
  12. 12. https://thedesignteam.io/
  13. 13. https://thedesignteam.io/
  14. 14. 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
  15. 15. 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
  16. 16. https://thedesignteam.io/
  17. 17. SITEMAP & WIREFRAME TOOLS ➤Sitemaps ➤Powermapper.com ➤Slickplan.com ➤Wireframes ➤Gomockingbird.com ➤Balsamiq.com ➤Both ➤UXpin.com ➤Jumpchart.com [w/WP export!] ➤gliffy.com
  18. 18. PROTOTYPING TOOLS ➤Sketch (bohemiancoding.com/ sketch/) ➤Genesis Sandbox starter theme (genesissandbox.com) ➤Foundation (fwp.drewsymo.com) ➤hotgloo.com ➤marvelapp.com using wireframes
  19. 19. 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
  20. 20. MOBILE TOOLS ➤marvelapp.com 
 (desktop & mobile) ➤Proto.io ➤fluidui.com ➤flinto.com
  21. 21. https://thedesignteam.io/
  22. 22. TESTING ➤ crazyegg.com ➤ usertesting.com ➤ uxtesting.io ➤ usabilityhub.com/five- second-test ➤ trymyui.com
  23. 23. THANK YOU! Lisa Ghisolf
 Gizmo Creative Factory * Chicago Twitter @gizmodesign
 Web gizmo-design.com slideshare.com/gizmodesign Cartoon images by thedesignteam.io/

×