PARALLAX SWIPING Tests

I'm using some of these "Victims" Hejduk assets that I rendered out last month to test motion design concepts from material.io. Love using Principle for simple parallax effects. 

ROOMS

A spatial takeover for this series of renderings...

CLUSTERS

The third of my geometry / rendering explorations.

Cairns

The second of my geometry and rendering exercises: Cairns. 

Pinned Navigation

I had fun working on the UX and interaction design for the pinned nav on this voting application. 

Arthur and DW

Confetti

Abstract 2

Abstract 1

Terrazzo Time

Today I spent some time building up my material library with my favorite terrazzo's (and a bit of marble). Can't wait to use them in some scenes. 

The John Hejduk Equivalent to the Utah Teapot

Lately I've been digging back in to design in 3D-- something that has unfortunately not frequently crossed paths with my interaction design work. Approaching modeling and rendering from a perspective outside of architecture has been a much different process than I expected. 

Just to get my feet wet, I've decided to model up one of my favorite sketches ever: John Hejduk's "Victims", a proposal for a pavilion park in Berlin. It never got built, but the forms and narratives are still iconic and full of imagination. 

The designs offer up a good variety of shapes. Some are radial, others angular and stoic. Some are as simple as an extruded box, some have over 100 components and complicated meshes. Now I have my own little diverse portfolio of Utah Teapot / Stanford Bunny alternatives to test out scenes. 

Here are some thumbnails that I have started to pull using elements from this drawing. Right now I'm just making sure that I can move around fluidly in the interface and have some control of mood / lighting / textures in my scene. 

Illustrator Demos Idea

I've been brainstorming ways that Adobe could make bite-sized Illustrator tips-and-tricks gifs for new users in email campaigns. Here's one of the demos!

TRAPPIST-1 Orbit Periods

As a nod to the March for Science, here’s a prototype I made of my favorite science thing from the past year: TRAPPIST-1 planets completing their orbital periods around a dwarf star.

The orbital cycles range from 1.5 days to about 20 days, and the distances to their star are much closer than they are in our solar system. 

In order to get the precision I wanted from NASA's data as well as the effect I wanted from the graphic design, I ended up starting in CAD software (Rhino 3D) and moving through photoshop, illustrator, and sketch before I got to rigging in Principle App. 

Gathering the Data

Since the discovery of the TRAPPIST-1 System was announced, a variety of illustrative diagrams about each planet's radius, orbital period, and distance to Star have been published by NASA / JPL. With a bit of conversion, these diagrams provided enough data I needed to get the planets and their orbits drafted out in Rhino to scale.  Unfortunately Rhino doesn't currently have the capability to measure in lightyears, but it's all about ratios. 

The TRAPPIST-1 planetary system, based on data about diameters, masses, and distances from the host star (artist's impression) Source: NASA/JPL

Drafting to Scale

After establishing a center, offsetting circles to illustrate the orbits was a quick task. The only assumptions I made were from the original position of the planets relative to one another, so I used an underlay of the "Orbital Separation" graph to take an educated guess. 

Deep Space!

Before getting started with the linework, I wanted the background to look galactic. More illustrative than scientifically accurate perhaps, but it adds a good texture. I compiled a couple images together to get to this result, and then adjusted levels / curves / brightness to tone it down. 

Bringing in the Orbit Paths

After importing the linework from Rhino to Illustrator as a .dwg, it's time to start formatting. For the orbit paths, the stroke is a bit thicker with a gradient so when they are rotating in the prototype, the movement is a bit more dramatic. 

From Dots to Planets

Referring to the NASA illustration for tones, I used a collection of watercolor textures to bring the planets to life. The original circle paths from the drawing were used as boundaries to create clipping masks. To give the impression of spherical geometry, I overlayed a gradient mask on each circle so that their illuminated hemisphere shined a bit brighter. 

The Dwarf Star

Whoops! I don't actually have any data behind the size of the dwarf star. But for the effect I want in the visualization, I want more of a glow radiating from the center, from a bright right to a reddish-orange. 

Illustrator to Sketch

I only import geometry to Principle by way of Sketch because the images come in a lot sharper. When I brought in the original geometry into Sketch, a lot of my clipping masks and gradients didn't translate between platforms. I ended up duplicating the Illustrator file and rasterizing the layers-- Not ideal, but it helped make a much simpler layer list. To make things easier in Principle, I order and name layers in Sketch first so I know that once I export I can focus my time on rigging. 

Animating Rotations

The interaction concept of the prototype is simple– by dragging a slider, the the planets start to rotate around the star, with the main driver being the furthest planet creating a full 360 degree orbit. In order to determine the rate of orbits, I first defined a full 360 orbit on Planet 7 to match the furthest extent of the slider. 

Through this relationship, I have defined that Planet 7's 20 day orbital period results in a 360 degree rotation. Planet 6 completes an orbit in 12.35 days. With a bit of algebra I can determine that Planet 6 will have rotated 583 degrees by the time Planet 7 has rotated 360. Applying this logic to the rest of the planets, the model is complete.  

Principle App: Drivers vs. Animations

Recently my talented friend Natalie Kwee sent over some of her illustrations for me to bring some motion into. I'm using it as an exercise to test drive some key features of the Principle prototyping tool. 

For this animation, I'm switching between a drivers based movement and an animation based movement. The "driver" in this scenario would be the X or Y positioning of the screen-- so as you drag your finger across the screen, the elements on the page would manipulate. 

Drivers

The key to keeping all of these elements nice and clean is to put forth the time properly naming and ordering the layers first. I keep elements that should stay together in a group. 

You can see as I pull my screen back and forth that a couple things are happening at different rates: the X and Y positioning of elements, the angle of the shapes. To get that organic, parallax effect, I time the positioning of these elements independently of one another. Since our character should be closer in our picture plane than the cloud, she moves a bit faster. The hat moves with her head but lags and tips a little bit. As she moves into the screen, her hand must stay attached to the balloon string.  

The way Principle deals with drivers is similar to keyframes in any video editing software. You choose a point along the X-axis and drop a marker to indicate some state of change. If between two markers I had a shape rotating 45 degrees, the rotation would occur evenly along the length of the chord between the two markers. 

Animations

Animations occur when you have identical layers that change states on different artboards. In this case, Nat's expression is changing as soon as her glasses appear. The order of state changes here is important. First, the glasses bounce in. Her squint recedes, and a smile appears as she relaxes her brow.

I hope future releases of Principle allow a bit more flexibility in the manipulation of shapes and vectors. But for now, it's a pretty fast and satisfying way to bring a little life into simple illustrations. 

Blocking and Annotating Motion Design

Lately I've been finding that motion and animation is as illustrative to a design concept as just stationary wires. When describing an app concept to the team in the earliest stages, I've found "Show, Don't Tell" to be the most effective policy in communicating an idea. To get this to work, I'll stitch together highly conceptual massing diagrams and stitch them together into a simple prototype. It also helps produce "puppy diagrams", which gives me a good idea of how many wireframes I'll really have to design. 

In addition to building a prototype, I break down the nuances frame by frame and annotate the transitions between elements. Sometimes motions are so natural to us that they are easy to overlook. Having this roadmap of annotations ensures that no bounce or fade gets left behind. 

LA in Lights: Behind the Scenes

Our team recently moved into a new space and we needed a fun, memorable focal point to greet visitors near the front door. 

After several iterations, our final design proposed the letters "LA", hanging in lights as large as possible from the beams above. 

There were a couple of constraints right off the bat-- I had access to plans, but no elevations, and access to the new space was forbidden while construction was underway. There was an optimal amount of bulbs in order for "LA" to be legible, and they had to be spaced properly as not to collide. Luckily with some leftover knowledge of architectural standards, I had a pretty good estimate of the height of the walls. From there, I could estimate the tallest height for "LA" between a comfortable head clearance and with enough room for the conduit/ housing to be properly installed. 

Iconography for Wang Insurance

I had a wonderful time collaborating with Wang Insurance to design this set of illustrated icons representing their services in insurance. Check out the final images in their full glory at www.wangins.com