Design Programming

Design Programming

Redesigning a programming class for visual learners


Overview

As an Associate Lecturer at the University of Sydney’s Design School, my primary focus was to teach and further develop the ‘Design Programming’ unit, a subject focusing on creative uses of coding.

Having been a student studying this unit in the past, I knew students felt like coding did not gel with their design education. As such, engagement was low and I strived to improve this when I came on as an Associate Lecturer.

With the design lab, we rewrote the course content, tested new pedagogical approaches and created/developed an online learning hub for students. These changes improved the unit to become one of the largest and highest-rated design subjects in the faculty.

product shot of design computing

What is Design Computing?

The Design Programming unit introduces design students to programming via a discipline called ‘generative design’. Generative design challenges designers to use programming concepts to create a visual design that evolves or varies each time it is loaded. The designs use the same code but apply random numbers to make key decisions about the composition. These designs apply core programming concepts such as recursion, loops and conditionals.

Generative design 1
Generation 1
Generative design 2
Generation 2
Generative design 3
Generation 3

Problems for Students

Through teaching and querying students throughout the semester, a few recurring themes emerged which ultimately prompted major updates to the unit:

Design students were generally visual learners

When teaching an abstract or technical concept, many students’ learning was improved when the theory and visual output of the code were shown side by side. This contrasts to more traditional methods of teaching where theory is explained first, followed by an independent practical exercise.

The course lacked a creative rubric and visual inspiration

Under the original delivery method of the unit, students were taught core coding concepts but were shown few creative applications of these concepts. This meant that when students were given a creative coding assessment, they had no creative framework to lean on or examples from class which could give them guidance on how to excel.

Programming environments were cause for confusion for students

Setting up a coding environment is often finicky and entails learning lots of new concepts all at once. Students were already dealing with the steep learning curve of the course content, and this extra complexity of setting up their coding environment was unhelpful.

Generative design 1
Generative design 2
Generative design 3
The slides from the initial delivery method were very text-heavy, boring and visually uninspiring

The teaching delivery method initially used conventional programming slides and marking rubrics, which was not working for our creative students


Improvements

To improve student engagement, satisfaction and outcomes - my team at the Design Lab developed a ‘Learning Hub’ website, which hosted coding challenges and our lecture content.

1. Interactive Slides

The lecture content from the original delivery method was updated and turned into interactive web slides. Abstract concepts were coupled with inline interactive examples to make them tangible for visual learners.

Complex coding algorthims had inline interactive examples to assist explaining tricky concepts
Interactivity was baked throughout the lecture materials

Jump to those interactive slides Session 11 or Session 5

2. Simple Coding Environments

The Learning Hub provided a simple coding environment where students could submit their weekly class content. The class content was staged with scafolding code with clues so student could understand next steps in the exercise. This eliminated any issues students had setting up their programming environment.

coding editor in coding challenge
coding editor in coding challenge

3. Creative Examples for Students

Each lecture week had a generative design in the first slide that applied the coding concepts covered that week in the course material. This gave students ideas on how to apply these programming techniques for their assignments. In addition to this extra time was spent covering historically significant generative artists and their methods.

Each lecture had a corresponding generative artwork which was achievable with the techniquies taught that week
Slides were designed to be playful and interactive
Interactivity was used to help illustrate concepts
no alt
Coding challenges for patterns
no alt
Coding challenges for functions

The weekly coding challenges are no longer online however the course content and lectures are available to be viewed at the link below.