Upload
fabricastartups
View
116
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Workshop Mock-Ups Workshop dado no programa FastStart Fall'12 Mais Informações: http://fabricadestartups.com/
Citation preview
Mock-ups
What is a Mock-up?
A mock-up is a model of a design, used to acquire feedback from users.
A mock-up is a model of a design, used to acquire feedback from users.
A mockup is a prototype if it provides at least part of the functionality and enables testing.
What is a Mock-up?
.Mock-up
.Prototype
Some coding happens
What´s the process?
3.Mock-up
4. Prototype
1.Sketch
2.Wireframe
What is a Mock-up?
1. Sketchexploration + speed
What is a Mock-up?
• try out different ideas and concepts
What is a Mock-up?
• first approach at navigation model
What is a Mock-up?
• establish a composition
What is a Mock-up?
2. Wireframescontent + structure• Reference Zones• High Fidelity• Storyboards• Standalone• Specification
What is a Mock-up?
Reference Zones
•What it is-Shows just major positioning of content blocks• Use to-Discuss a big idea or concept early in a project.-Show the overall structure of particular pages-Show how a family of pages work together• Watch out for-Some people can't think abstractly.
What is a Mock-up?
High Fidelity Wireframes
•What it is-Shows as much detail as in the built product.• Use to-Work through the detail of how an interaction (or part of one) will work. -Ensure the designer and stakeholders both have the same idea about how something works.• Watch out for-Readers get bogged down in detail.-Leave time to absorb the detail.
What is a Mock-up?
Storyboards
•What it is-A sequence of 'screens' that show the flow across time.• Use to-Show how the wireframes fit together.-Show how a user will experience a workflow - Demonstrate a task end-to-end.• Watch out for-Show tasks before & after for a whole context.
What is a Mock-up?
Standalone
•What it is-A wireframe that can be understood without you there.• Use to-Communicate any of the wireframe types we've discussed, but in a way that means they can be understood without you. -Document for future reference and use .• Watch out for-Everything has to be included -Lots of annotations are needed -It can be hard to follow linkages between screens.
What is a Mock-up?Specification
•What it is-A wireframe with enough detail to be built.• Use to-Development.• Watch out for-Everything has to be included:
-all states (logged in, logged out, error)-data sources and destinations-all actions-all validations
-It must stand alone -Talk to your developers to make it usable for them. -Never show this to business people or users.
What is a Mock-up?
3. Mock-upcolour + graphics
What is a Mock-up?
Mock-up
•It´s about-look and feel-built on the wireframe with color.-graphics and polish.-may adjust layout slightly but stays.-within the general guide of the wireframe.
What is a Mock-up?
What is a Mock-up?
What is a Mock-up?
4. Prototypecode + functions
What is a Mock-up?
Prototype
It´s about...• Simulate the final design, aesthetics, materials and functionality of the intended design• May be reduced in size or functionality • Functions working together• Final check for design flaws
3.Mock-up(color + graphics)
1.Sketch
(exploration + speed)
4. Prototype(code + functions)
2.Wireframe(structure + content)
Dude, I need an MVP...
3.Mock-up
(color + layout)
Sketch(exploration + speed)
4. Prototype(code + functions)
Wireframe(structure + content)
MVP (testing)
?
What is a Mock-up?
It depends...
Some coding happens
Tool(s) of the trade
Keynote Powerpoint
Keynotopia.com