Presentation at the KU Leuven about digital tools to support the creative process on developing multimedia aplications

1. digital tools
creative process
pedro almeida
almeida@ua.pt
digital tools
creative process

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

10. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 10
http://www.mindmeister.com/https://bubbl.us/
mind map tools

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

13. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 13
flowcharts

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

19. digital tools
creative process
pedro almeida
almeida@ua.pt slide | 19
Balsamiq Mockups
www.balsamiq.com/products/mockups
wireframe/mockup tools

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

22. digital tools
creative process
pedro almeida
almeida@ua.pt

23. digital tools
creative process
pedro almeida
almeida@ua.pt
http://socialitv.web.ua.pt

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

25. digital tools
creative process
pedro almeida
almeida@ua.pt
https://popapp.in/
rapid prototyping

26. digital tools
creative process
pedro almeida
almeida@ua.pt
http://www.invisionapp.com/
rapid prototyping
free FOREVER!
Coment and share

27. digital tools
creative process
pedro almeida
almeida@ua.pt
rapid prototyping

28. digital tools
creative process
pedro almeida
almeida@ua.pt
rapid prototyping

29. digital tools
creative process
pedro almeida
almeida@ua.pt
https://marvelapp.com/
rapid prototyping
free to use

30. digital tools
creative process
pedro almeida
almeida@ua.pt
http://proto.io/
rapid prototyping
15 days free

31. digital tools
creative process
pedro almeida
almeida@ua.pt
http://www.fluidui.com
rapid prototyping
free up to 10 screens

32. digital tools
creative process
pedro almeida
almeida@ua.pt
rapid prototyping

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