INTERACTION DESIGN +‘CREATIVE CODING’

http://timstutts.com

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.’

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

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.

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

A DESIGN PROBLEM

•openFrameworks (C++)

•Cinder (C++)

•Processing (Java)

•Three.js (JavaScript)

•Many others!

A FRAMEWORK IS THE ANSWER

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

BENEFITS OF ‘CREATIVE CODING’

TWO MAIN TYPES OF “CREATIVE CODING” DELIVERABLES

Designing and Programming an

application... ...that controls an experience, then giving the client...

...that generates Media, then

giving the client...

...the media (e.g. film/video, 2D/

3D print)

...an application (e.g. installation, platform app)

A COMMERCIAL “CREATIVE CODING” TIMELINE( PROJECT COULD BE SHORT-FORMAT FILM/VIDEO, PRINT, INSTALLATION, TEMPORARY APPLICATION, ETC )

The Organization: Art / Creative Direction, Project Management, etc.

Planning Executing Delivering

Creative Coder: Research

Programming Explorations

Sketching

Committing

Deciding

Merging

Debugging

Final Push

Sleeping!

Submitting First Push

Reflecting

+ ?

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...

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

‘CREATIVE CODING’ MEETS INTERACTION DESIGN

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

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

III. FINAL PROJECTS UTILIZING INTERACTION DESIGN AND ‘CREATIVE CODING’ ALONG THE WAY. source: my work from

www.pushpopdesign.com, 2013

THANKS:

Arturo Castro

Gerald Kogler

openFrameworks

Zzzinc