The document outlines essential elements for creating effective site structures, emphasizing the importance of user-centric content strategy, sitemaps, wireframes, and prototypes. It stresses early user experience consideration, iterative testing, and mobile optimization while providing tools for sitemaps and wireframes. The author encourages designers to focus on user expectations and maintain consistency throughout the design process.

1. 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: Pages needed, 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 (personas/your audiences)
•Demo + 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. Sitemap to wireframe
•Visualize your structure & how
users will react: Flowchart it
out!
•What is the process? What is
interlinked?
•Consistency is key

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

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

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

25. Prototyping Tools
• Sketch (bohemiancoding.com/sketch/)
• 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