intro to wireframes
TRANSCRIPT
Agenda1. Deb talks for a while
• What is a wireframe? • Why make them?• How to make them? • How to evaluate them?
2. Real world examples3. Activity4. Project time
Wireframes aren't a solution, they are a tool.
If you are marketing yourself as a wireframe producer, you'll end up
producing wireframes. If you market yourself as a problem solver, you'll
end up solving problems- Chris Nodder
Author of “Evil By Design”
User journey
Feature location
Content location
Screen layout
Unique Interactions
Sign offUser testing
Experience
Development
StakeholdersVisual designersUsers
UX designers
It’s All About Communication
Requirements
Collaborative creation
1. Group sketching sessions
2. Interactive wireframing
3. Combining several versions
Make sure you can answer
How will users move around the site?
Does the wireframe address the business and creative goals?
Do you know what all of the elements on the page are?
Is anything important missing from the page?
Can you get to all of the major sections of the site from here? Should you be able to?
Do the wireframes have too much visual detail?
Example: Aviva
Working with: – Project Owners– Business Analysts– Solution Designers– Legal/Insurance Experts– Project Managers
– Developers (in-house and off-shore)
– Testers– Graphics Designers– Copywriters
Aviva Life Insurance UK - a set of web applications to quote and apply for Aviva insurance through partnerships with prominent UK banks.
I had…
1) set of detailed wireframes (about 300)
2) set of high level wireframes (about 30)
3) working prototypes
CommunicationDev team (off-shore) -> detailed wireframes
Dev team (local) -> detailed wireframes / click prototypes
Content writers -> detailed wireframes
QA -> detailed wireframes
Documentation -> detailed wireframes
Sign off -> high level wireframes
CommunicationDecision making -> high level wireframes
Visual design -> high level wireframes
User tests -> prototypes
Demos -> prototypes
Example: University Website
Working with: – Visual Designers– Developers– Project Managers– Outside Stakeholders
Post-secondary Institution – a responsive website to serve as the online face of the university
I had…
1) Desktop, Tablet, and Mobile versions of the navigation
2) 3 page types: Homepage, Landing page, Content page
Group SketchingDo a group sketching session of an interaction with a wearable device. Draw at least 3 panels of the interaction.
Thick and Thin lines: Define and Detail
Bright colour: Grab attention!
Grey marker: Depth
The CDM smartwatch for Canvas!
Group member 1: You’ve talked to marketing, it’s important that they have a sexy product to market.
Group member 2: You’ve talked to the project manager, the project scope needs to be kept to the Minimal Viable Product.
Group member 3: You’re talked to development, they want something new and interesting to code.
Group member 4:You’re from design, you believe the product needs to be simple and easy to use.
Group member 5:You’ve talked to the business, they need a product that will sell many units.