Transforming My Toolkit - jamesmelzer.comjamesmelzer.com/poster.transforming-my-toolkit.ia... ·...
1
Transforming My Toolkit: A One-Year Journey from Wireframes to HTML Prototypes Prepared by: James Melzer [email protected] 2012 IA Summit Speed up design cycles • Faster, richer interactions • Integrating visual design directly into prototypes instead of downstream • More emphasis on sketching studios and client engagement (at least for me) Eliciting better feedback • Holistic feedback on the entire design at once • Equally effective with users, clients and developers • Demonstrate rich interactions, working navigation, and real content Improving design communications • The deliverable is precise code • Written in a language developer’s understand • May be accompanied by documentation, focusing on variations, complex behaviors, and content guidelines Personal Design Process This Year 2011 Prototyping Visual Design Usability Testing Client Review Develop Spec Sketching Prioritization Personal Design Process Last Year 2010 Client Review Usability Testing Spec Sketching Prioritization Client Review Visual Design Wireframe Sitemap Start with something you know I started prototyping for a client I had worked with before, in a design system I knew well Tips for Getting Started Start Low-Fidelity Working in low-fi prototypes was easier and enabled me to expand your toolbox without slowing down the project Use real content Unlike wireframing, where Lorem Ipsum felt natural, prototyping made me more conscientious about asking for (or creating!) real content Unexpectedly early visual design Rapid prototyping exposes the major design decisions early, so I was able to involve visual designers much earlier than I expected Involve the client in design immediately I’ve been experimenting with showing rough prototypes immediately after sketching studios, to keep the client engaged and answer specific design questions Start in the client’s comfort zone I made my first full-fidelity prototype for a usability test, then reused it for documentation Can your developers “read” a prototype? One developer could simply read my CSS, allowing me to leave typography specs and other details undocumented Prototypes make great spec illustrations I could manipulate the prototype into any state, making it a snap to document complex behaviors with small multiples Wireframes beget flat sites For me, the two-dimensional nature of wireframes limited my design creativity Reasons to Switch Content never “flows” realistically in wireframes No wireframing tool responds to changes in content like real HTML, and I found myself spending too much time faking it Sitemaps are confusing Even customer’s who “get it” need to use their imagination to see how navigation and structure mesh together. A prototype lets them take navigation for a test drive. Visual design potential is lost when it comes at the end By layering visual design on at the end, I missed opportunities to improve the design earlier Throw-away prototypes seem wasteful Documenting in wireframes once an HTML prototype exists on a project seemed like a missed opportunity d suit my Simple Destination Some A Simple Destination includes three to five pages of content. Most Destinations will be simple. mporary/Permanent anding page) page of content, a ng is best. A Launch a type of Destination. Deep Destination A Lot There is no limit to the size of a Complex Destination. Permanent Complex Destinations involve ent creation • New structu item instea stackable Placemen • New plac Benefits Technic the sec • Option Visual • Maste fonts • Rem • Con • Add pe Prototyping Benefits
Transcript of Transforming My Toolkit - jamesmelzer.comjamesmelzer.com/poster.transforming-my-toolkit.ia... ·...
Transforming My Toolkit: A One-Year Journey from Wireframes to HTML Prototypes
Prepared by:James [email protected] IA Summit
Speed up design cycles
•Faster, richer interactions•Integrating visual design directly into prototypes
instead of downstream•More emphasis on sketching studios and client
engagement (at least for me)
Eliciting better feedback
•Holistic feedback on the entire design at once•Equally effective with users, clients and
developers•Demonstrate rich interactions, working navigation,
and real content
Improving design communications
•The deliverable is precise code•Written in a language developer’s understand•May be accompanied by documentation, focusing
on variations, complex behaviors, and content guidelines
Personal Design ProcessThis Year2011
PrototypingVisual Design
Usability Testing
Client Review
Develop
Spec
Sketching Prioritization
Personal Design ProcessLast Year2010
Client Review
Usability Testing
SpecSketching PrioritizationClient
ReviewVisual Design
Wireframe
Sitemap
Start with something you knowI started prototyping for a client I had worked with before, in a design system I knew well
Tips for Getting Started
Start Low-FidelityWorkinginlow-fiprototypeswas easier and enabled me to expand your toolbox without slowing down the project
Use real contentUnlike wireframing, where Lorem Ipsum felt natural, prototyping made me more conscientious about asking for (or creating!) real content
Unexpectedly early visual design Rapid prototyping exposes the major design decisions early, so I was able to involve visual designers much earlier than I expected
Involve the client in design immediatelyI’ve been experimenting with showing rough prototypes immediately after sketching studios, to keep the client engagedandanswerspecificdesign questions
Start in the client’s comfort zoneImademyfirstfull-fidelityprototype for a usability test, then reused it for documentation
Can your developers “read” a prototype?One developer could simply read my CSS, allowing me to leave typography specs and other details undocumented
Prototypes make great spec illustrationsI could manipulate the prototype into any state, making it a snap to document complex behaviors with small multiples
Wireframes beget flat sitesFor me, the two-dimensional nature of wireframes limited my design creativityReasons
to Switch
Content never “flows” realistically in wireframesNo wireframing tool responds to changes in content like real HTML, and I found myself spending too much time faking it
Sitemaps are confusingEven customer’s who “get it” need to use their imagination to see how navigation and structure mesh together. A prototype lets them take navigation for a test drive.
Visual design potential is lost when it comes at the endBy layering visual design on at the end, I missed opportunities to improve the design earlier
Throw-away prototypes seem wastefulDocumenting in wireframes once an HTML prototype exists on a project seemed like a missed opportunity
Understanding Tabbed Destinations
Version 12 published June 15, 2011 by James Melzer ([email protected])
5 of 19
Do I need a Tabs?
Is my content extensive enough to require tabbed
navigation? What kind of Destination would suit my
content?
Simple
Destination
Some
A Simple Destination includes
three to five pages of content. Most
Destinations will be simple.
Temporary/Permanent
Most Simple Destinations are
permanent, but smallers ones may
be temporary.
Launch Landing
(single page)
A Little
If it’s only one page of content, a
Launch Landing is best. A Launch
Landing is not a type of Destination.
Temporary
Launch Landings support
promotions or initiatives only
intended to last a few months.
How much content is
available?
How permanent is the
content?
Deep
Destination
A Lot
There is no limit to the size of a
Complex Destination.
Permanent
Complex Destinations involve
signifcant content creation
investment.
Simple
Complex
Series Track 2: Design & Annotations
Version 4 published June 24, 2011 by James Melzer ([email protected])
14 of 16
N13 Featured Content “Stacked List”Content
• Clearly state the type of content. TBD Icons
reinforce the types.
• Clearly denote the connection to the
product, using the product’s name in the
title or description. Example: “Learn how the
State of Oregon uses the CATALYST 6500
SWITCH to save taxpayers money.”
Structure
• New structure: component is now a single
item instead of a container. Items are
stackable and flow with content.
Placement
• New placement within three sections:
Benefits, Features & Capabilities, and
Technical Specifications. Place at the end of
the section.
• Optional
Visual Style
• Masterbrand typographic style (i.e. larger
fonts, cyan links, headings with underscore)
• Remove the table/box around the content
• Convert headings into headings
• Add icon representing doc type (case study,
performance benchmark, data sheet, etc.)
Comparative PlacementComponent/Content Preview
2960: Original2960: Track 2
Key: Track 1 New Component/Variation New Content Masterbrand Style Only
Prototyping Benefits
