At the Fine Arts Faculty of Porto University, we built up an introdutory class focusing on procedural strategies inside a graphic design context. In less stuffy terms, the purpose was to introduce design students to code. However, this required some thought on what subjects to teach (and which to leave out), which pitfalls to avoid, and which approach would work best to introduce an alien, cold and logical subject such as programming to creative people.

Designers are inevitably involved with computers, which are present in most stages of a graphic designer's workflow, from initial sketches to printing finished pieces. Yet there's a dearth of formal education on the technical and social workings of computers and digital media in general.

Nevertheless, attention has been paid to this field during the last decade, which saw the birth and growth of creative-oriented applications, spearheaded by its most popular example, Processing. Among other creative coding tools, we find Pure Data, Context Free, Drawbot, Nodebox, Shoebot, Supercollider and Fluxus. The overwhelming majority of these tools are F/LOSS.

Learning to code is becoming more and more of an obvious choice for designers. The rising popularity of the web has created a huge demand for skilled coders, but designers are also a key part of any serious venture. A designer who can implement his own ideas, instead of just handing over mockups to a web developer, ends up with a big advantage. Becoming acquainted with digital logic, the workings of computers and their bells and whistles is also a way to liberate oneself from being a software operator, and be able to think for and with the machine.

Fábio SantosEdgar SprecherJoana Estrela

Tools and strategies

In our semester-long class, we focused solely on still, static output, meaning that animation and interactivity were left out. This gave room to explore the basic commands and features, as well as combining them with creative strategies that the digital medium enables, such as repetition and randomness.

Processing was considered as the application for this class, but Nodebox/Shoebot were picked because they work natively with vector graphics, which was a crucial factor when considering that the created designs should be meant for print. The fact that they're based on Python, whereas Processing is based on Java, also played a part. Python is one of the most appropriate languages for introducing people to programming, due to its clear, readable syntax, which almost resembles the pseudocode used to explain abstract programming concepts. It also hides away (or puts sugar on) much of the complexity behind programming concepts, allowing us to focus on properly wording our orders to the computer.

Nodebox and Shoebot provide a sketchpad for writing small Python scripts. When running them, the program will create graphical output—an image. This instant visual feedback is a big plus for teaching code to creative-minded people, since it allows for swift tinkering and borrowing from the provided example scripts, and was crucial in easing design students into the coder way of thinking.

Sofia Rocha e SilvaTelmo ParreiraLídia Pereira

Practical example: character generator

One major assignment in this class was to design an identicon generator. Identicons are icons commonly used in blogs, especially inside comment sections, which identify the commenter through a graphical representation of their ip address. This is done by combining different possible parts into one final image. Monsterid and Wavatar provide icons in the shape of quirky monsters, whereas Identicon generates abstract, geometric shapes. The goal of this assignment was to think up the design for an identicon, freely choosing the subject, and create a program that could generate different outputs randomly.

The size constraints of a blog icon are a big limitation, one that wasn't forced on the students in order for them to focus on the more relevant creative questions. Many of the students went through the character-design route, though others attempted more daring approaches, such as cake and bug identicons.

The challenge of this assignment was not the coding itself. Most students were already rather comfortable with using randomness, drawing with code and importing external images. The focus was on creating consistent designs which could work with different compositions and still end up as a complete final result, not giving away the fact that it was generated by a program.

The illustrations running alongside this article are some of the results of this assignment.