Stimulant featured in Communication Arts

By | design, gergwerk, gui, multimedia expereince, portfolio, Stimulant, touch screen, Video | No Comments

I am very proud to say a handful of the projects I worked on over the last few years are being recognized in Communication Arts. Read the full eight-page article here: Stimulant: The San Francisco-based experimental studio brings dreams to life through digital interactions.

Here is sneak peak of the projects I worked on that are featured in the article:




lusio-gergwerk

Lusio: A Night to Awaken

By | gergwerk, Seattle, Video | No Comments

Lusio: A Night to Awaken was an immersive evening of light and sound. For one night only, pockets of Volunteer Park lit up with interactive installations, live performances, LED wearables, large scale projection walls, and ambient music. Lusio featured local PNW Seattle artists: Miguel Edwards / Jonathon Womack / Marcell Marias / Bryan Ressler / Scott K James / Kelly Fleek / Noble Neon / Mokedo / & many more.

To see more artists and track upcoming events, visit lusiolight.com

_
Audio: Nosaj Thing
Video & Post: Gerg Werk
Camera: Canon 60D
Lens: 50mm f/1.8 II

Looking back at 2015

By | after effects, design, gergwerk, multi touch, multi touch interface, portfolio, Seattle, Stimulant, touch screen, typography, Video, website, website design | No Comments

2015 was a very challenging year. There were many experiences that took me out of my comfort zone. Although difficult, these milestones have allowed me to challenge myself and grow in new ways. Lets take a look back at 2015!

This first project is one I am very honored and proud to have had the opportunity to work on. It was my privilege to design a projection-mapped real-time data visualization for The One World Trade Center in NYC. This 65ft x 16ft (20m x 5m) projection is the first thing visitors see when they walk into the building. This was the first time I utilized Cinema4D to create the visuals. In case you missed it, take a look at my visual and motion design process.
Image by Edward Blake.
One World Observatory lobby projectionone world trade center lobby wall designIt wasn’t long until the Millionth visitor arrived!_
Genentech Lobby Wall: Stimulant built an interactive system for the lobbies of Genentech buildings that would increase employee engagement and feature a wide variety of content. The system blends content from Genentech’s intranet, social media feeds, and building energy statistics. I produced many of the visual designs early on this project.
Image by Stimulant.Genentech Interactive Lobby Display_
AM / PM design: making back ends pretty.  This dashboard allows us to easily manage apps.   gergwerk ampm design gergwerk ampm designHere is what AM / PM used to look like:ampm-screenshot-oldLogo design Process gergwerk ampm logo process_
This year I did a major re-haul of the Gerg Werk branding and website design (although it’s safe to say you’ve already gazed upon it if you’re reading this). View the process post here.mackbook-mockup-02 gergwerk type card Gerg Werk Resume_
Save the date and wedding invites design. View the full work here. gergwerk-savethedate-2015 gergwerk-savethedate02-2015 gergwerk-savethedate03-2015_
World Famous: Produced a range of animation-ready illustration elements. Here is a small snippet of the styles I created:gergwerk style framesDigital Kitchen: I had to opportunity to work with Digital Kitchen as a freelance creative for a few months. Unfortunately due to Non Disclosure Agreements I can’t show any of the work I completed. While here, I brainstormed and conceptualized many innovative ideas for interactive installations, worked on high-profile projects, produced detailed graphic designs, and composited designs in real-world environments. Additionally, I assisted creating client-ready presentations.

Tectonic: While working here, I collaborated closely with the team to rebrand a high-profile company. Our design system scales between television, web, and mobile devices. Due to NDA, I’m unable to show this work.

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: http://gergwerk.com/portfolio/one-world-observatory/. 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