2. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 2
drafting the ideas
structuring the concepts
sketching the first layouts
activating your layouts
building a rapid prototype
agenda | dt for
3. digital tools
creative process
pedro almeida
almeida@ua.pt 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 idea
Woody Allen
First things first
4. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 4
that original approach
the innovative interaction experience
the user satisfaction
What do we want
to achieve?
5. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 5
drafting the ideas
http://www.thechase360.com/en-gb/index.html
The right ingredients?
BULLS + CARS + 360º CAMERAS
6. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 6
http://idarchive.com/project/mtv-rule-switcher/
The right ingredients?
YOUNG COUPLE + MOTHERINLAW+ A ROOM
drafting the ideas
7. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 7
http://www.worldunderwater.org/#/locations
drafting the ideas
Environmental prevention
Mashing up to be creative
8. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 8
http://24hoursofhappy.com/
drafting the ideas
Reeinventing the timeline
Simplicity and efficency
9. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 9
1 | drafting ideas
A whiteboard
A paper
Ideas
Concepts
Mind maps
brainstorming
11. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 11
Collaborative scenarios
Distance teams
Complex/extensive applications
Dynamic projects
when to use
12. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 12
2 | Information design
Selecting content
Identifying content structure
Building your content architecture
Building your interaction map
brainstorming
14. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 14
Visio: multi usage scenarios;
extensive libraries;
interoperability
www.microsoft.com/Office/visio/
flowcharts
15. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 15
Gliffy: (limited) free use;
cloud based;
collaboration features.
www.gliffy.com
flowcharts
16. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 16
For most situations
To interact with compatible technologies
(e.g. SQL, UML, …)
For applications being developed (and
growing)
when to use
17. digital tools
creative process
pedro almeida
almeida@ua.pt 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
18. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 18
3 | interaction design
brainstorming
wireframesketch mock-up prototype
low-fi design medium high-fi design
20. digital tools
creative process
pedro almeida
almeida@ua.pt 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
21. digital tools
creative process
pedro almeida
almeida@ua.pt 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
24. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 25
rapid prototyping
4 | rapid prototyping
Integrating interfaces
Activating interaction
Delivering to multiple devices
Multiple options with different features
33. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 34
For marketing (the idea) purposes
For client acceptance
For lab or field evaluations
For investment presentations
when to use
34. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 35
Tools are nothing without ideas
Consider the pros and cons of adding an
additional tool
Do your best!
final notes
35. digital tools
creative process
pedro almeida
almeida@ua.pt
final notes
Thanks!
And see you in 22/5?
Pedro Almeida
almeida@ua.pt
Dep. Communication and Art
University of Aveiro