This document discusses interaction design and 'creative coding'. The author is an interaction designer who incorporates creative coding into their work. Creative coding encompasses roles where traditional design is not enough to realize technological ideas. Standard design apps cannot directly connect to experiences, while programming languages alone slow innovation. Frameworks like openFrameworks and Processing bridge this gap. Benefits of creative coding include understanding technology in planning and seamless designing/programming. The author discusses how creative coding can meet interaction design through effective planning, addressing usability, choosing appropriate tools, and knowing when to explore vs commit. Examples are provided of wireframes, coding environments, and final projects combining the two fields.

1. INTERACTION DESIGN +
‘CREATIVE CODING’
http://timstutts.com

2. MY BACKGROUND
• I’m
an interaction designer who has been incorporating
aspects of ‘creative coding’ into application design in the recent
years, largely through my consultancy, PushPopDesign.
• Outside
of interaction, I have done work in commercial
motion graphics, print, data visualization, and most extensively
in sound design for moving image, games, and art installations.
Many of these projects have incorporated ‘creative coding.’

3. INSPIRATION
• Recent
article/ list that I published to my blog, “Who works
with ‘Creative Coders?,” which showed up on Hacker News
• Related
discussions from people in the community
• Ongoing
conversations with studios that are taking notice
• Wanting
to give back to the Creative Coding community

4. DEFINITION
‘Creative Coding’ (original coined by the commercial world,
where a ‘creative’ is one who makes) encompasses a spectrum
of Designer/Programmer-type roles that emerge from the
unique needs of projects, where traditional design planning
and execution deliverables can no longer fully realize the ideas
made possible through newer technology, for example, specific
needs for branded generative graphics, ‘big data’ visualization,
natural user interface, and physical computing.

5. A DESIGN PROBLEM
• Standard
design applications are often not fully able to realize
and execute ideas within new paradigms, due to the fact that
they are unable to directly connect to the experience, and
rather can just provide planning and containing media.
• Programming
languages in the raw have too many
dependencies to be adequate ways of designing and
prototyping. The ability to connect with the experience is
there, but the rate of innovation is slowed.

6. A FRAMEWORK IS THE ANSWER
• openFrameworks
• Cinder
(C++)
• Processing
• Three.js
• Many
(C++)
(Java)
(JavaScript)
others!

7. BENEFITS OF ‘CREATIVE CODING’
• Individuals
are beneficial in the planning stages, as they
understand the possibilities / limitations of technology.
• Valuable
in the execution phase, as they are able to move
back in forth between designing and programming without
intermediate hand-offs.
• Synaptic
leaps and bounds through this process allow for new
design discoveries to be made and implemented during
software development. It’s all in the details.

8. TWO MAIN TYPES OF “CREATIVE
CODING” DELIVERABLES
Designing and
Programming an
application...
...that generates
Media, then
giving the client...
...the media (e.g.
film/video, 2D/
3D print)
...that controls an
experience, then
giving the client...
...an application
(e.g. installation,
platform app)

9. A COMMERCIAL “CREATIVE CODING” TIMELINE
( PROJECT COULD BE SHORT-FORMAT FILM/VIDEO, PRINT, INSTALLATION, TEMPORARY APPLICATION, ETC )
Planning
Executing
Committing
Submitting
Merging
First Push
Programming Explorations
Sketching
Creative Coder: Research
Delivering
Final Push
Deciding
Debugging
The Organization: Art / Creative Direction, Project Management, etc.
Sleeping!
Reflecting

10. The Commercial world gets it. Next question: Can the
interaction design community in the software industry warm
up to “creative coding” as more than just a play thing?
+
?
We can help...

11. ‘CREATIVE CODING’ MEETS INTERACTION DESIGN
•
Align to deliverable expectations early (e.g. exploration, demo, full-on software).
•
Become more effective planners. Create wireframes, user-flows, etc.
•
Address usability issues at various stages, considering form and function, while still
doing aesthetically impressive work, if that is an aim of the project.
•
Use ‘creative coding’ frameworks for what they are good for and not for what they
aren’t (involve other libraries and maybe even use traditional applications at times).
•
Know when it’s time to explore and when its time to commit or even enter a
more standard, development cycle. Perhaps your role ends after prototyping and
transitioning code, or perhaps you are working on code for the final application.

12. I. WIREFRAMES AND PLANNING DELIVERABLES IN
PREPARATION FOR ‘CREATIVE CODING.’
source: my work from www.pushpopdesign.com, 2013

13. II. CREATIVE CODING IN ACTION WITHIN VARIOUS
PROGRAMMING ENVIRONMENTS
source: my work from www.pushpopdesign.com, 2013

14. III. FINAL PROJECTS UTILIZING INTERACTION DESIGN
AND ‘CREATIVE CODING’ ALONG THE WAY.
source: my work from
www.pushpopdesign.com, 2013

15. THANKS:
Arturo Castro
Gerald Kogler
openFrameworks
Zzzinc