IMG_1602_1k

UCLA Extension

IMG_1602_1k

I’m super-excited to share a project of mine that’s just gone live…

UCLA Extension is one of the nation’s oldest, largest, and most comprehensive continuing higher education providers. Since 1990, UCLA Extension has been inviting designers to create covers for their printed catalog — which is sent to hundreds of thousands of people in the Los Angeles area and around the world. The covers, known as the Master Graphic Designer Series, showcase a remarkable range of creative talent.

And so it was an honor to be invited to design the cover of their Fall 2014 catalog.

After some early discussions with UCLA Extension, we decided it would be interesting to create a catalog cover that explored the topical themes of interactivity and “big data.” The resulting design is based on a data set that (anonymously) describes every student that enrolled at UCLA Extension over the past year and each of the courses they took.

Because Extension’s covers are intended to be creative expressions, I didn’t do an analytical visualization of the data. Instead I used the data to control how the design was generated. For example, the design starts by representing each student with by a dot and a line. The horizontal position of each dot is then determined by the student’s distance from UCLA. The number of circles and squares that make up each dot is determined by the departments of the courses, the semester they were taken, and if they were in-person or distance learning. And so on… Essentially every aspect of the design is controlled by some aspect of the data.

At the top of the design there is an abstract ‘key’ to the data — showing the range of distances students traveled, and the number of students enrolled each semester in each department.

I wanted to create a cover that expressed the diversity and energy of the students enrolled in UCLA Extension classes. Almost an explosion of optimism — because I think that anyone who enrolls in continuing education is doing an incredibly exciting thing.

UCLA Extension was also excited about creating an interactive version of the cover for their website. It’s a kind of cover-generator, that lets non-programmers get a feeling for how changing a couple design parameters can make a big difference in the resulting image. (It’s a process similar to what was done for the printed cover — except the design parameters were changed by writing code in the Processing programming language. It’s a process that I’ve referred to as sketching in code.)

The process of developing the final design was an exploratory one. Of understanding the shape of the data, developing tools to make meaning of it, and exploring visual representations. And to help illustrate that process, I’m including a handful of those sketches below.

Link: UCLA Extension – Spotlight: About the cover
Link: UCLA Extension – Visual Arts: About the cover
Link: UCLA Extension – The Interactive version of the cover

An early test of "exploding" from the base text.

An early test of “exploding” from the base text.

Each anchor point on the white line's path represented a different attribute of the student.

Each anchor point on the white line’s path represented a different attribute of the student.

design_01f_3

Testing the legibility if all the text were represented by dots and lines.

Testing the legibility if all the text were represented by dots and lines.

design_01h_3

Some very furry letters!

Some very furry letters!

Trying a vertical solution.

Trying a vertical solution.

proof_1

proof_1

Screenshot of the interactive version of the cover.

Screenshot of the interactive version of the cover.

Detail of the "a"

Detail of the “a”