Creative Coding in Interaction Design with Tim Stutts

44
CREATIVE CODING IN INTERACTION DESIGN www.timstutts.com

description

Creative Coding in Interaction Design with Tim Stutts OVERVIEW Creative coding is a practice that is infused in everything from programming 3D-printed furniture to generative, motion graphics for a commercial–essentially any place where design and development can overlap into a singular, art-directed process. But what is its place in the interaction design (UI/UX) field within the highly requirement-driven software industry? Can raw programmatic exploration for the sake of ideation amount to great, usable end-products? As interaction design touches on applications with increasingly advanced, off-screen technologies, traditional deliverables such as wireframes and user-flows in themselves can distance the designer from the technology and fail to fully explore the combined potential of the human and the application. On the other extreme, a designer may choose to work directly with API’s, but find themselves in over their head. The solution and middle ground is the creative coding platform. Presented at FITC Toronto 2014 on April 27-29, 2014 More info at www.FITC.ca

Transcript of Creative Coding in Interaction Design with Tim Stutts

Page 1: Creative Coding in Interaction Design with Tim Stutts

CREATIVE CODING IN INTERACTION DESIGN

!www.timstutts.com

Page 2: Creative Coding in Interaction Design with Tim Stutts
Page 3: Creative Coding in Interaction Design with Tim Stutts
Page 4: Creative Coding in Interaction Design with Tim Stutts
Page 5: Creative Coding in Interaction Design with Tim Stutts
Page 6: Creative Coding in Interaction Design with Tim Stutts
Page 7: Creative Coding in Interaction Design with Tim Stutts

UX

Page 8: Creative Coding in Interaction Design with Tim Stutts

• 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)

Page 9: Creative Coding in Interaction Design with Tim Stutts

IBM ‘SMARTER PLANET’ CAMPAIGNmy role: designer / programmer programmed in: Java (Processing), C++ (OpenFrameworks) firm: Motion Theory, Los Angeles date: early 2010

Page 10: Creative Coding in Interaction Design with Tim Stutts
Page 11: Creative Coding in Interaction Design with Tim Stutts
Page 12: Creative Coding in Interaction Design with Tim Stutts
Page 13: Creative Coding in Interaction Design with Tim Stutts
Page 14: Creative Coding in Interaction Design with Tim Stutts
Page 15: Creative Coding in Interaction Design with Tim Stutts
Page 16: Creative Coding in Interaction Design with Tim Stutts
Page 17: Creative Coding in Interaction Design with Tim Stutts

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.

Page 18: Creative Coding in Interaction Design with Tim Stutts

SHINYSHINY

Page 19: Creative Coding in Interaction Design with Tim Stutts
Page 20: Creative Coding in Interaction Design with Tim Stutts

• openFrameworks (C++)

• Cinder (C++)

• Processing (Java)

• Three.js (JavaScript)

• Unity (C#)

• Many others!

TOOLS

Page 21: Creative Coding in Interaction Design with Tim Stutts

• 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

Page 22: Creative Coding in Interaction Design with Tim Stutts

+ ?

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

Page 23: Creative Coding in Interaction Design with Tim Stutts

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.

Page 24: Creative Coding in Interaction Design with Tim Stutts

OBLONG ‘AIRBORNE BEATS’ APPLICATIONmy role: designer / programmer programmed in: C++ (Cinder, g-Speak) wired in: OmniGraffle company: Oblong Industries, Los Angeles / Barcelona date: 2012

Page 25: Creative Coding in Interaction Design with Tim Stutts
Page 26: Creative Coding in Interaction Design with Tim Stutts
Page 27: Creative Coding in Interaction Design with Tim Stutts
Page 28: Creative Coding in Interaction Design with Tim Stutts
Page 29: Creative Coding in Interaction Design with Tim Stutts
Page 30: Creative Coding in Interaction Design with Tim Stutts
Page 31: Creative Coding in Interaction Design with Tim Stutts
Page 32: Creative Coding in Interaction Design with Tim Stutts
Page 33: Creative Coding in Interaction Design with Tim Stutts
Page 34: Creative Coding in Interaction Design with Tim Stutts
Page 35: Creative Coding in Interaction Design with Tim Stutts
Page 36: Creative Coding in Interaction Design with Tim Stutts

HONDA ‘DEFENSIVE DRIVING’ HUD CONCEPTSmy role: designer / programmer programmed in: C++ (openFrameworks) wired in: OmniGraffle company: Honda Research Institute, Sunnyvale CA date: 2013

Page 37: Creative Coding in Interaction Design with Tim Stutts
Page 38: Creative Coding in Interaction Design with Tim Stutts
Page 39: Creative Coding in Interaction Design with Tim Stutts

•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

Page 40: Creative Coding in Interaction Design with Tim Stutts

WATSON LABS DESIGN AND RESEARCHmy role: concept designer company: IBM, Austin TX date: 2013 - present

Page 41: Creative Coding in Interaction Design with Tim Stutts
Page 42: Creative Coding in Interaction Design with Tim Stutts
Page 43: Creative Coding in Interaction Design with Tim Stutts

WHY MORE INTERACTION DESIGNERS WILL CODE IN THE 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.

Page 44: Creative Coding in Interaction Design with Tim Stutts

THANK YOU!

www.timstutts.com