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.

1. House with No Walls:
Creating a Site Structure
for Tomorrow
Lisa Ghisolf * Gizmo Creative Factory * Chicago
@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
• 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

5. Basically...
•Who (personas/your audiences)
•Demographic + needs + behavior
•Why (your goals, their goals)
•How (functionalities)

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

9. 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

17. 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

18. 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

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

26. Prototyping Tools
• Sketch (bohemiancoding.com/sketch/)
• Genesis Sandbox starter theme
(genesissandbox.com)
• Foundation (fwp.drewsymo.com)
• hotgloo.com
• marvelapp.com using wireframes

27. 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

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

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