digital prototyping tools_leuven_3_2015
TRANSCRIPT
digital toolscreative process
pedro [email protected] slide | 2
drafting the ideas
structuring the concepts
sketching the first layouts
activating your layouts
building a rapid prototype
agenda | dt for
digital toolscreative process
pedro [email protected] slide | 3
Right now it’s only a notion...but i
think i can get money to make it into a
concept... and later turn it into an ideaWoody Allen
First things first
digital toolscreative process
pedro [email protected] slide | 4
that original approach
the innovative interaction experience
the user satisfaction
What do we wantto achieve?
digital toolscreative process
pedro [email protected] slide | 5
drafting the ideas
http://www.thechase360.com/en-gb/index.html
The right ingredients?BULLS + CARS + 360º CAMERAS
digital toolscreative process
pedro [email protected] slide | 6
http://idarchive.com/project/mtv-rule-switcher/
The right ingredients?YOUNG COUPLE + MOTHERINLAW+ A ROOM
drafting the ideas
digital toolscreative process
pedro [email protected] slide | 7
http://www.worldunderwater.org/#/locations
drafting the ideas
Environmental preventionMashing up to be creative
digital toolscreative process
pedro [email protected] slide | 8
http://24hoursofhappy.com/
drafting the ideas
Reeinventing the timelineSimplicity and efficency
digital toolscreative process
pedro [email protected] slide | 9
1 | drafting ideas
A whiteboard
A paper
Ideas
Concepts
Mind maps
brainstorming
digital toolscreative process
pedro [email protected] slide | 10
http://www.mindmeister.com/https://bubbl.us/
mind map tools
digital toolscreative process
pedro [email protected] slide | 11
Collaborative scenarios
Distance teams
Complex/extensive applications
Dynamic projects
when to use
digital toolscreative process
pedro [email protected] slide | 12
2 | Information design
Selecting content
Identifying content structure
Building your content architecture
Building your interaction map
brainstorming
digital toolscreative process
pedro [email protected] slide | 14
Visio: multi usage scenarios;
extensive libraries;
interoperability
www.microsoft.com/Office/visio/
flowcharts
digital toolscreative process
pedro [email protected] slide | 15
Gliffy: (limited) free use;
cloud based;
collaboration features.
www.gliffy.com
flowcharts
digital toolscreative process
pedro [email protected] slide | 16
For most situations
To interact with compatible technologies
(e.g. SQL, UML, …)
For applications being developed (and
growing)
when to use
digital toolscreative process
pedro [email protected] slide | 17
3 | interaction design
Deciding how content will be displayed
Selecting interaction patterns
Sketching the first screens
Building paper prototypes
Building digital wireframes
brainstorming
digital toolscreative process
pedro [email protected] slide | 18
3 | interaction design
brainstorming
wireframesketch mock-up prototype
low-fi design medium high-fi design
digital toolscreative process
pedro [email protected] slide | 19
Balsamiq Mockups
www.balsamiq.com/products/mockups
wireframe/mockup tools
digital toolscreative process
pedro [email protected] slide | 20
To send your wireframes anywhere
In collaborative and distance scenarios
To preview interaction and interaction
problems (e.g. nr. of clicks, confusing paths, …)
when to use
digital toolscreative process
pedro [email protected] slide | 21
Hands on! 40 minutes
1. Open: https://uaveiro.mybalsamiq.com/
2. Head to the balsamiq project you are linked to
3. Take 15 minutes to discuss with your group 3 or 4 main screen interfaces for
your project
4. In pairs create a wireframe of a screen
5. Correlate the wireframes and create the hyperlinks to make it a live mockup.
wireframe/mockup tools
digital toolscreative process
pedro [email protected] slide | 25
rapid prototyping
4 | rapid prototyping
Integrating interfaces
Activating interaction
Delivering to multiple devices
Multiple options with different features
digital toolscreative process
pedro [email protected]
http://www.invisionapp.com/
rapid prototyping
free FOREVER!
Coment and share
digital toolscreative process
pedro [email protected]
https://marvelapp.com/
rapid prototyping
free to use
digital toolscreative process
pedro [email protected]
http://proto.io/
rapid prototyping
15 days free
digital toolscreative process
pedro [email protected]
http://www.fluidui.com
rapid prototyping
free up to 10 screens
digital toolscreative process
pedro [email protected] slide | 34
For marketing (the idea) purposes
For client acceptance
For lab or field evaluations
For investment presentations
when to use
digital toolscreative process
pedro [email protected] slide | 35
Tools are nothing without ideas
Consider the pros and cons of adding an
additional tool
Do your best!
final notes
digital toolscreative process
pedro [email protected]
final notes
Thanks!
And see you in 22/5?
Pedro [email protected]
Dep. Communication and Art
University of Aveiro