All good things come to an end!
I’m retiring the current state of this blog / website to turn it into something new. For the sake of sweet memories, here’s a clip of the last design for the time capsule. I’ll show it to my children (3 adopted dogs) someday.
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.
A spatial takeover for this series of renderings...
The third of my geometry / rendering explorations.
The second of my geometry and rendering exercises: Cairns.
I had fun working on the UX and interaction design for the pinned nav on this voting application.
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.
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.
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!
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.
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.
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.
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.
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.
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 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.
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.