CREATIVE CODING IN 	

INTERACTION DESIGN
!
www.timstutts.com
UX
• The process wasn't necessarily creative. Could be driven almost
entirely by usability research, pre-existing patterns.	

• Wireframes and user-flows, though important to the application design
process, could compartmentalize the imagination.	

• Frequently fell behind the technology. Rather than make use of new
technologies, UX would wait for them to be distilled into templates.	

• UX rarely tried to make a statement, show something new.
UX FRUSTRATIONS (CIRCA 2009)
IBM ‘SMARTER PLANET’ CAMPAIGN
my role: designer / programmer	

programmed in: Java (Processing), C++ (OpenFrameworks)	

firm: MotionTheory, Los Angeles	

date: early 2010
CREATIVE CODING
‘Creative Coding’ (originally 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.
SHINYSHINY
• openFrameworks (C++)	

• Cinder (C++)	

• Processing (Java)	

• Three.js (JavaScript)	

• Unity (C#)	

• Many others!
TOOLS
• Individuals are beneficial in the design 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.
BENEFITS OF CREATIVE CODING
+ ?
The Commercial world gets it. Can the interaction
design community in the software industry warm up
to creative coding as part of the process?
UX
PushPopDesign specializes in the design and prototyping of
next-generation applications and experiences, along with the
creation of related audio-visual media assets.  Harnessing the
combined potential of creativity and technology.  Boldly
blending experience design with programmatic exploration.
Embracing best practices at times, but freely shattering them
when they are probative to innovation.
OBLONG ‘AIRBORNE BEATS’APPLICATION
my role: designer / programmer	

programmed in: C++ (Cinder, g-Speak)	

wired in: OmniGraffle	

company: Oblong Industries, Los Angeles / Barcelona	

date: 2012
HONDA ‘DEFENSIVE DRIVING’ HUD CONCEPTS
my role: designer / programmer	

programmed in: C++ (openFrameworks)	

wired in: OmniGraffle	

company: Honda Research Institute, Sunnyvale CA	

date: 2013
•Seek projects where ‘creative coding’ is beneficial.	

•Establish your role and final deliverable expectations early on.	

•Be flexible on choice of planning deliverables.	

•Address usability issues while in the process of making.	

•Know when it’s time to explore, when its time to commit.
LEARNED
WATSON LABS DESIGN AND RESEARCH
my role: concept designer	

company: IBM,AustinTX	

date: 2013 - present
WHY MORE INTERACTION DESIGNERS
WILL CODE INTHE FUTURE
• As technology advances,WYSIWYG type tools will become less quick to adapt to
design in conjunction with developing technologies.	

• We are in the middle of massive paradigm shift as to what an application is. The
flat web is becoming a smaller piece of the overall landscape for UX possibilities.	

• In particular spatial, gestural and data visualization paradigms benefit from a
designer’s ability to get their hands dirty and innovate with actual technology, rather
than just using sticky notes and wires.	

• Design education programs are producing more and more students with hybrid
designer/programmer skill-sets to meet the design challenges of tomorrow.
THANKYOU
!
www.timstutts.com

Creative Coding in Interaction Design with Tim Stutts

  • 1.
    CREATIVE CODING IN INTERACTION DESIGN ! www.timstutts.com
  • 7.
  • 8.
    • The processwasn't necessarily creative. Could be driven almost entirely by usability research, pre-existing patterns. • Wireframes and user-flows, though important to the application design process, could compartmentalize the imagination. • Frequently fell behind the technology. Rather than make use of new technologies, UX would wait for them to be distilled into templates. • UX rarely tried to make a statement, show something new. UX FRUSTRATIONS (CIRCA 2009)
  • 9.
    IBM ‘SMARTER PLANET’CAMPAIGN my role: designer / programmer programmed in: Java (Processing), C++ (OpenFrameworks) firm: MotionTheory, Los Angeles date: early 2010
  • 17.
    CREATIVE CODING ‘Creative Coding’(originally 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.
  • 18.
  • 20.
    • openFrameworks (C++) •Cinder (C++) • Processing (Java) • Three.js (JavaScript) • Unity (C#) • Many others! TOOLS
  • 21.
    • Individuals arebeneficial in the design 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. BENEFITS OF CREATIVE CODING
  • 22.
    + ? The Commercialworld gets it. Can the interaction design community in the software industry warm up to creative coding as part of the process? UX
  • 23.
    PushPopDesign specializes inthe design and prototyping of next-generation applications and experiences, along with the creation of related audio-visual media assets.  Harnessing the combined potential of creativity and technology.  Boldly blending experience design with programmatic exploration. Embracing best practices at times, but freely shattering them when they are probative to innovation.
  • 24.
    OBLONG ‘AIRBORNE BEATS’APPLICATION myrole: designer / programmer programmed in: C++ (Cinder, g-Speak) wired in: OmniGraffle company: Oblong Industries, Los Angeles / Barcelona date: 2012
  • 36.
    HONDA ‘DEFENSIVE DRIVING’HUD CONCEPTS my role: designer / programmer programmed in: C++ (openFrameworks) wired in: OmniGraffle company: Honda Research Institute, Sunnyvale CA date: 2013
  • 39.
    •Seek projects where‘creative coding’ is beneficial. •Establish your role and final deliverable expectations early on. •Be flexible on choice of planning deliverables. •Address usability issues while in the process of making. •Know when it’s time to explore, when its time to commit. LEARNED
  • 40.
    WATSON LABS DESIGNAND RESEARCH my role: concept designer company: IBM,AustinTX date: 2013 - present
  • 43.
    WHY MORE INTERACTIONDESIGNERS WILL CODE INTHE FUTURE • As technology advances,WYSIWYG type tools will become less quick to adapt to design in conjunction with developing technologies. • We are in the middle of massive paradigm shift as to what an application is. The flat web is becoming a smaller piece of the overall landscape for UX possibilities. • In particular spatial, gestural and data visualization paradigms benefit from a designer’s ability to get their hands dirty and innovate with actual technology, rather than just using sticky notes and wires. • Design education programs are producing more and more students with hybrid designer/programmer skill-sets to meet the design challenges of tomorrow.
  • 44.