Here's the updated version of my presentation with notes and changes based on our discussions during the presentation - but without the awesome gifs :(
Boost Turku - Prototyping Workshop - Mobile and Web Prototyping
1. Web and mobile app
prototyping
Joni Juup 2.4.2016 – Boost Turku
With presentation notes!
2. What is prototyping?
“ A prototype is an early sample, model, or release of a product built to test a concept or
process or to act as a thing to be replicated or learned from. “ — Wikipedia
Prototype is a rough version of your idea. It’s a functional sketch.
3. Prototyping helps you to…
• test your ideas.
• find potential problems early on.
• iterate fast and easily.
• understand your product and its
requirements better.
• present your ideas to others in a
functional form.
Putting your ideas in prototype, might open
up possibilities and problems you never
knew existed. Iterating should also be fast
and easy in a prototype, compared to making
the changes in the final phases of the
product development. Presenting your ideas
to others is important and often static
images alone cannot convey your idea,
especially if it’s interaction heavy. By
building prototypes you are able to
understand your product better.
4. Best of all you don’t have to be an
amazing coder or a hip designer to
build a working prototype.
You’re good just as you are now.
6. Pen & paper
wireframes
Grayscale prototype
(Proto.io)
Detailed design
(Sketch, Proto.io)
Interaction prototypes
(Flinto, FramerJS)
Example process of designing an app
7. Fidelity levels
Paper Wireframe Grayscale Detailed Interaction
Iteration speed
UI detail level
Low-fidelity High fidelity
Grayscale fidelity is used for giving an realistic image of the service UI, but driving users focus out of commenting on fonts and colors - it’s a level
commonly used when the final visual look of the service is not yet determined. Consider it a better looking wireframe. Detailed prototype is a
working mockup of the final product, with near final visuals. Interaction is a fidelity level we use often at Taiste when prototyping single
interactions and fine tuning the intricacies of the animations and feel of a single part of the product.
8. Some good prototyping tools
Paper Wireframe Grayscale Detailed Interaction
Pen & paper
Cardboards
Post-its
Whiteboard
Balsamiq
Proto.io
Flinto
Keynote / Powerpoint
InVision
Proto.io
Flinto
HTML/CSS/JS
InVision
Proto.io
Flinto
HTML/CSS/JS
Flinto
HTML/CSS/JS
Origami/Avocado
FramerJS
Low-fidelity High fidelity
http://www.cooper.com/prototyping-toolshttp://prototypingtools.co/
I usually pick my prototyping tools on a couple of criteria: fidelity level which we’re working in, shareability of the prototype, is it for native
app or web, does it have a lot of custom interactions or not and is it a whole service/app flow prototype, or a detailed interaction prototype.
9. Some general do’s and don’ts
• Use animation to convey position, or to draw attention to critical elements.
Don’t animate everything.
• Always try to follow good usability rules. On the mobile, read up on the OS
UI guidelines.
• When testing a detailed prototype outside of your team, avoid lorem ipsums
and unnecessary funny names or texts - they draw the testers attention away
from your product.
• Prototype and test prototypes as early as possible.
10. Good usability uses C.R.A.P
• Contrast - establish a difference between headers and body texts -
with important call-to-actions and minor links.
• Repetition - design elements should follow a similar visual and
functional logic throughout your product.
• Alignment - align elements to create a coherent look. Don’t let stuff
just float around.
• Proximity - group related elements so users don’t have to find them.
From The Non-Designer's Design Book by Robin Williams
