One World Observatory lobby projection

One World Observatory Process Post

By | after effects, design, gergwerk, graphic user interface, gui, information architecture, photoshop, portfolio, process, Stimulant, Uncategorized | No Comments

Now that the One World Trade Center is officially open, I can talk a little about my process for creating the designs! This project marks the first time I used Cinema 4D to create the visuals. The look of the water, map, globe, lighting, and pins were all created in C4D, while the typography and stat designs were created in Photoshop. Below is the breakdown of my process.
one world observatory, one world trade center, dataviz, infographic, design, nyc_
Process Design:
Experimenting using Cinema 4D to create a quick topography. cinema 4d pin test_
Depth Maps:
Once narrowing down a good thickness and spacing for the pins, I used two depth maps to create the continents and ripples. A depth map is an informational image that changes the height between planes, all based on black, white, and grey values. White areas indicate where sections of the image will be raised up and black areas will remain lower. The ‘depth map for continents’ raises areas to create continents and the ‘depth map for pin ripples’ lifts elevations around Brazil, Europe, and Japan. Pro Tip: any area that is not 100% black or 100% white will cause the elevation in that area to be somewhere in between the highest and lowest point. In this case, our ‘pin ripple’ depth map is smooth gradient so the elevation falls off smoothly, causing cone-like shapes. depth map explination examples_
Visual Design:
Starting to add color, creating a low poly texture for the faceted oceans, and testing out placement of lights. In this rendering I’m using powerful lighting techniques called global illumination and ambient occlusion. This brings me to a very important point. If your graphics are going to be built to run in real time by a developer, work with them early in the project to make sure designs can be replicated in code. Cinema 4D is capable of very complex lighting, but there are a lot of cases when you can’t replicate it in code due to hardware and software constraints. In some instances, these effects can be replicated but it will drastically cut the frame rate in the build. Always consult your developers! After making these renders and talking with our developer Joel, I learned some of these lighting techniques aren’t practical for apps that are generated in real time. cinema 4d render of the worldcinema 4d render detail cropLighting and camera setup. High school photography classes for the win!gergwerk-One World Observatory process lightingGlobe view. The mountainous areas represent where most guests are visiting from since the opening of One World Observatory. To get this effect, I went back to using our good ol’ depth map technique.globe depth mapLastly, I created a nebula-like background using Trapcode Form in After Effects. This will be tweaked and placed behind the globe for the big transition reveal.nebula test after effects using trapcode form_
Final Design (black space represents a hallway). Graphics were created in Cinema 4d, After Effects, and composited in Photoshop. Click images for larger detail:
01-oww-map-render-full-r403 gergwerk-oneWorld-06_
Motion Graphic studies: Now that the designs are signed off from the client, it’s time to give the visuals some movement.

These first animations are tests for the stat ribbon. Stats update in real time based on live data being collected when tickets are scanned. While creating motion studies, I like to produce one direction with lots of complex movement and a second that is much more restrained. This allows our developers to start building the simpler version and add in additional flair if there is time.

Once tickets are scanned, country of origin labels will populate on the map. Some of these animations transition on at a harsh angle as a way to continue the faceted design language.

This is the Welcome Wall animation (area above the hallway) that greets visitors in a variety of foreign languages. These languages update in real time based on where people are visiting from. To continue with the OWO faceted design language, angular shapes and sharp shines reveal and hide images as a transitional approach.

And that’s it! I feel honored to have been a part of such a grand experience. I will leave you with an image taken by a visitor of the One World Observatory.  To see the portfolio page for this project visit: Au revoir!One World Observatory data wall by Edward BlakeImage by Edward Blake
Client:  Hettama Group // Legends
Agency: Stimulant

Stimulant credit list:
Design Director: Nathan Moody
Art Director: Jules Konig
Design Lead // Motion Designer: Gregory Kaufman
Technical Lead: Joel Pryde

Project Manager: Julie Yamato
Quality Assurance Lead: Aron Schoppert


GERG WERK Redesign

By | brand, brand identity, design, gergwerk, portfolio, process, typography, website, website design | No Comments

gergwerk tablet redesignGerg Werk Resumegergwerk type card Over the last few months I have dedicated myself to revitalizing the Gerg Werk identity. As a large portion of my design practice utilizes motion and video, I wanted to give homage to these aspects in the redesign. I have done this by visualizing the new Gerg Werk logo as a modified keyframe icon. In animation, keyframes mark the start and end of any transition by moving objects at a steady, constant rate. If you want to give the audience a little razzle dazzle, Easing Keyframes will allow objects to move with inertia, style, and elegance. One type of Easing Keyframe is visualized as a hourglass shape. This ‘Bezier’ Keyframe not only represents style and personality, but also resembles a lowercase ‘g’.types of keyframesIn case you were wondering how these keyframe types effect how objects move, I’ve created a short animation below.
Keyframe – the movement is linear, lacks variety in speed by moving objects in a constant rate
Ease Out – will start the animation slowly, and finish at full speed
Ease In – will start the animation at full speed, then finish slowly
Bezier – shares attributes from both easing keyframes. It is this extra style and attention to detail that I hope to continue to include throughout my work.
Design elements using the Bezier Keyframe as inspiration for the letter ‘g’. After lots of sketching, I was able to create a larger mark that also utilizes the Bezier Keyframe into the initials GWK – Gerg Werk.gergwerk logomark design_
Process sketch variations:gergwerk-test-pattern gergwerk-test-pattern-detail gergwerk-letterforms


One World Observatory teaser post

By | brand, design, design systems, gergwerk, portfolio, Stimulant, typography, Video | No Comments

This is a teaser post based on the latest project I worked on in 2015. Now that the building is open to the public, I can announce that I’m very fortunate to have had the opportunity to design a large scale projection data visualization for the One World Observatory in New York City. For final designs and many more details, see this project in my portfolio here:
Photos from NY Curbedone world observatory, one world trade center, dataviz, infographic, design, nyc one world observatory, one world trade center, dataviz, infographic, design, nyc_
Photos from The Gothamist. one world trade center, projection map, design


Looking back at 2014

By | brand, brand identity, dance, design, gergwerk, gui, portfolio, Stimulant, typography, Uncategorized | No Comments

Lets take a look back at the work I was a part of in 2014.

First, a project that has won the top spot for best use of technology at the Event Design Awards 2014, the Genentech Pipeline Explorer. My role on this project was visual designer, motion designer, and post production. I also co-wrote a blog post that documents our process, which includes  behind the scenes images and lots of project details.

Genentech BioOncology Pipeline at ASCO 2014 from Stimulant on Vimeo.

Second, the interactive art installation for Decibel Fesitval called dBcube. This highly experimental four-sided interactive dance cube received tons of attention from festival goers. The USS Enterprise helmsman, George Takai, also had his turn.

#dBcube at EMP for Decibel Festival 2014 from Stimulant on Vimeo.

A personal favorite of mine is an exhibit for the MOHAI museum in Seattle. The Launchpad uses interactive multi-touch mirrors, depth-sensing cameras, and a real time reactive particle system.

MOHAI Launchpad from Stimulant on Vimeo.

I had the opportunity to  work on branding for my good friend, Noise Jockey. In his spare time, NJ is field recording, producing sound design, sound effects, and music. Here is the final logotype design lockup at the top of his website.Noise Jockey website redesign, gerg werk_
Reversed logomark optionsnoise jockey logomarks, logo_
Alternative direction using Morse code as sound and visual symbolnoise jockey logomarks, logo_
Alternative direction using a noise maker as main logonoise-maker-blog_
Color and layout exploration for logotype noise jockey, logotypes, logo_
Sketch and type explorationsnoise jockey documentation, process


2014 Decibel Festival Cube

By | dance, design, dj culture, gergwerk, photography, portfolio, process, Seattle, Stimulant, Video | No Comments

For the 2014 Decibel Festival, Stimulant designed and built an interactive art installation. The Decibel Cube (#dbCube) uses four Kinect 2’s to track dancers movement across a four foot, five sided plexiglass cube.  Dancers on opposite sides share a unique experience as flowing interactive ribbons connect their virtual bodies. These generated graphics pulse in real-time as the visuals cycle through multiple virtual environments.

Stimulant has made the source code available at This includes the Cinder project for GPU-powered graphics, the node.js software for client synchronization, and even a vvvv patch for audio analysis. The tech discussion is happening over on the Cinder forums.

Hardware for the dbCube__
Joel Pryde and Aron Schoppert setup before Decibel Festival starts.
Joel Pryde and Aron Schoppert setup before Decibel Festival starts.__
Testing completetesting complete!
One of the many virtual environments.One of the many virtual environments.

Client: Decibel Festival
Agency: Stimulant

Stimulant credit list:
Design Director: Darren David
Art Director: Jules Konig
Project Manager: Kristi Torgrimson
Technical Director: Josh Santangelo
Technical Lead: Joel Pryde
Concept Design and Visual Design: Jules Konig and Gregory Kaufman
Quality Assurance Lead: Aron Schoppert
Video cinematography and post production: Gregory Kaufman

ASCO 2014 entrance hall

Genentech’s BioOncology 2014 Pipeline: Design & process

By | brand, design, multi touch, multi touch interface, portfolio, Stimulant, touch screen, Video | No Comments

Genentech BioOncology Pipeline at ASCO 2014 from Stimulant on Vimeo.

Every year, the rock stars of the cancer research and treatment world put on their shiniest shoes and assemble for the American Society of Clinical Oncology (ASCO) conference. In honor of the 50th anniversary of the ASCO conference, Genentech’s BioOncology group asked Stimulant to design and develop a unique way to view and interact with their drug development pipeline. This pipeline represents all the molecules currently being researched and tested to treat various tumor types, each of which can be organized by tumors they may affect, the biological mechanism of their action, and the phase of testing they’re currently in. 

In a sea of printed bar charts that focus on one area of study, Stimulant designed a way for conference attendees to focus in on their own area of interest while still maintaining a holistic look of the data in a larger context. As leaders in biotechnology, Genentech must also pave the way as how data is presented to the oncology community.

I had the pleasure to co-write and share our design process for this project. To read the full design process details along with more behind the scenes imagery, visit:
Dana Smith testing size relationships on low-fi print mock upDana Smith user testing genentech pipeline explorer

Client: Genentech
Agency: Stimulant

Stimulant credit list:
Design Director: Nathan Moody
Art Director: Jules Konig
Project Manager: Julie Yamato
Technical Director: Josh Santangelo
Technical lead: Ritesh Lala
Interaction Design: Dana Smith
Visual Design, Motion Design, & Post Production: Gregory Kaufman
Cinematographers: Stephan Winokur and Nathan Moody
Header image by Stephan Winokur