Articles > Creating a generative identity for the Exploratorium

Creating a generative identity for the Exploratorium

by Paul Hoppe
Paul Hoppe, multi-disciplinary designer from Los Angeles, California

Art Center College of Design

Creating a Generative Identity for the Exploratorium

If you have ever been to the Exploratorium in San Francisco you know it’s a wonderful place. It is a museum of art, science, and human perception, filled with amazing experiences in the form of interactive experiments and visual phenomena. For one of my advanced graphic design courses at Art Center College of Design I took on the challenge of redesigning the way the Exploratorium presents itself to the world. My goal was to create a “visual language” that would operate seamlessly throughout a variety of media and embody the museum’s grass-roots energy. The outcome was an algorithm-based brand identity system that allows for infinite variation of the brand mark with no two versions exactly alike.

Science meets art

At the Exploratorium, children are everywhere. They run excitedly from exhibit to exhibit, enraptured at the joy of new discoveries. “Woooooah!” and “Coooool!” are often followed by “Why does it do that?” or “How does it work?” It’s not just the kids who get into it. Adults both young and old are given an opportunity to remember things they have forgotten they learned in a place where anything seems possible. The Exploratorium is a museum where the art of science collides with the science of art, where you can use your hands to play with the unexpected results. It employs scientists, artists, designers, educators and many various hybrids thereof. It is a place where learning, playing, creating, and discovering all happen simultaneously.

The chance to work with an institution like the Exploratorium would be a dream come true for me. Not only because I believe in its approach to art, science, and education, but also because, as a starting point for an identity re-design, it offers a lot of opportunities to do experimental work that wouldn’t be appropriate for most institutions. The great thing about being a student is that dreams like this can become a reality without the hassle of meetings, pitches, or contracts.

Identity through typography

I created this project for a course entitled “Transmedia Typography.” The brief was to create an identity system and supporting materials for a cultural entity with an emphasis on using typography to communicate a dynamic and consistent message across a variety of media types (print, environmental, motion, interactive, and other emerging media,) with the goal of taking full advantage of each medium’s different strengths. Over the course of an extremely intense 14-week term the project went through loose phases of research, ideation, direction, and iteration.

As part of my research I spent hours of digging through current Exploratorium materials as well as looking at similar institutions around the world. I combined this information with feelings and insights from my personal experiences at the museum, and was able to formulate a pretty good idea of what the museum is about. I found three things that really inspired me. The first was the museum workshop where the exhibits are designed and built. It’s not that different from your average shop. Tools, materials, and works in progress are everywhere. The difference is that this shop located INSIDE the exhibition space. Its transparent walls let visitors actually watch the exhibits taking shape. It’s a beautiful, creative mess that is the heart of the museum. The second inspiration came from the dual nature of the Exploratorium. I saw that it inhabits a unique space somewhere between scientific institution and a cultural center. Not wholly one or the other, but also completely both at once. The other thing that grabbed my attention was one of the goals from their mission statement… “To support a culture of experimentation and collaboration, to inspire curiosity and understanding, and to stimulate fresh ideas and directions.” This is exactly what a designer wants to hear!

While researching I was also on a healthy dose of ideation. This involved actively transforming what I was discovering in the research into design concepts and forms. Each person in the class was pushed to explore a huge variety of ideas. My ideas covered the spectrum from decent to horrible and from timid to insane. Through this design process it began to become clear to me that the Exploratorium needed an identity indicative of way they help people engage with the ever-changing nature of the world around them. It also felt important that the solution be something that express their multifaceted personality by being spontaneous, energetic, and unexpected while simultaneously being based in reason, math, and logic.

Creating infinite variety

A direction finally started to take shape as I began to experiment with a plug-in for Adobe Illustrator called Scriptographer. It is a unique tool that lets you draw shapes and even create your own drawing tools using a set of computer instructions written in the JavaScript language. I was happy to discover that with this approach to my design sketching I could create an infinite variety of shapes that all followed the same mathematical rules and could therefore be combined in unexpected ways while still maintaining a cohesive look. This was the approach I had been looking for. After lots of experimentation with code-based solutions for dynamically drawing the lines (including attempting to write my own algorithm from scratch) I was finally able to fine-tune the Scriptographer output into something I was happy with. After the lines were drawn, another script was used to give them color. By following a defined series of steps I was able use the randomized functions of the script to produce the letter-mark in a predictable way. Each time the letter-mark was created it had its own unique form but still kept the same look and feel. My direction was solidified and a generative identity was born!

Now came the task of making iterations of that direction to build out the applications for my visual language. A typeface is the DNA of a visual identity, and I already I had a system that could successfully generate a letter, so the obvious next step was to do the whole alphabet! I completed a lowercase set of letters (plus a few punctuation marks) based on the forms of Gotham Rounded, which I chose for its open nature, strong structure, and friendly curves.

Transcending language to communicate ideas

In my opinion, successful typography utilizes its ability to communicate in two ways. First, and most obviously, it forms words that communicate through their meaning. Second, it transcends the words to illustrate ideas and emotions through the way in which the words are displayed (typeface, size, spacing, etc.). I had the typeface, so now I just needed some language to use it on! I chose to write some phrases based on the words of contemporary artist Olafur Eliasson. His work seemed like a good fit for the Exploratorium, and he also happens to be one of my favorite artists. The phrases are written to promote the Exploratorium’s attitude about questioning the world around us. When set in the generative typeface, the phrases take on new meaning as they are constructed out of the very ideals they are promoting. Using Adobe InDesign I designed posters combing the phrases with images that describe the spectrum of scale in our physical world. From the epic awesomeness of space, to the intricate details of microscopic organisms and right in the middle, the human form.


Identity collateral and interactive applications

In order for the letter-mark to stand out and not get too bogged down in its surroundings, it needed lots of space to breath and supporting typography that would communicate the necessary information in a simple and straightforward manner while allowing the mark itself to add flavor and excitement without getting in the way. For the identity collateral I once again used Scriptographer in Adobe Illustrator, this time to generate the background patterns. By using a procedure similar to the one used for creating the letter-mark the backgrounds complement the rest of the system and stay visually clean and simple. Using the power of ActionScript 3 and Adobe Flash I took a similar approach for the website. An animated version of the letter-mark sits in the corner as a “dynamic foundation” that the rest of the content can move around. The color scheme of the website is also randomly changing in subtle ways to reflect the letter-mark. The animated version of the logo was built in Cinema 4D using a dynamic hair simulation that was blown around by virtual fans.


The Exploratorium is a forward thinking institution, so for my final application I wanted to do something that embraced its connectedness to the world in an interactive and spatial way. To do this I developed a real-time Twitter visualizer again using ActionScript 3 in Adobe Flash. This application could be easily installed on massive video displays in the museum allowing people from all over the world to interact with The Exploratorium space in a direct way. This could also allow the visitors to connect with one another by seeing their Tweets displayed next to each other on an architectural scale.


DIY brand element generation

Usually a completed identity system is handed over to the client in the form of a digital library of approved logos, typefaces, colors, backgrounds, etc. and accompanied by a standards manual of how to use them. In my opinion one of the great things about creating an identity system in this procedural way is that it’s easy to imagine how the entire process could be automated and handed over to the museum staff and in-house designers as “DIY Brand Element Generation Software.” This would allow them to easily generate their own custom design elements with a few clicks of the mouse. Unlike a library of approved design elements this would allow the supporting materials to evolve and always feel fresh and interesting. The ability to export vector or bitmap files for use in the Adobe Creative Suite would provide flexibility of use over an ever-expanding range of applications while always staying “on brand.”

Aftermath

After a short break to regain the sanity I had lost during my sleepless 14-week term I was encouraged by my project mentor Brad Bartlett and department chair Nik Haffermass to submit the project to the Adobe Design Achievement Awards. Initially I had trouble figuring out how to enter it as there was no “Generative Transmedia Design” category. I ended up submitting in both Print Communications, and Non-Browser Based Design and at the last minute I put together a case-study video in Adobe After Effects that quickly explained the breadth and process of the project.

I had the honor of it being first selected as a semi-finalist in both categories and then as a finalist in Non-Browser Based Design. It was then re-categorized as Application Development and I was invited to attend the awards ceremony in Taipei where it went on to win in that category.

I have also been lucky enough to meet some of the wonderful people from the Exploratorium and share the project with them. While I know they can’t actually put my identity into use, it has been great to connect with them through it and I hope that it has become something that would encourage their visitors by fostering creativity and curiosity.


⇒ Older Posts




Comments