Studio Notes

A Simple Animated Subnav

Front-end development is as an opportunity to bring design details to life. I love working on subtle interface animations and transitions for sites I’m designing, testing to see how well they scale across viewport widths, while doing my best to write simple markup.

Bison Trails Subnav Interaction

I recently added this subnav to the Bison Trails marketing site. We needed an easy way to navigate to individual network pages from the main nav. It’s just scss and basic css animations—no javascript. Here’s the gist of the html:

<div class="nav-item ">
  <a href="/networks" title="Networks">Networks</a>
  <div class="nav-submenu">
    <h2><img src="/icons/checkmark.svg" alt="checkmark">Live</h2>
    <a href="/algorand"><img src="/network/algorand.png" />Algorand</a>
    <a href="/cosmos"><img src="/network/cosmos.png" />Cosmos</a>
    <a href="/decred"><img src="/network/decred.png" />Decred</a>
    <a href="/livepeer"><img src="/network/livepeer.png" />Livepeer</a>
    <a href="/tezos"><img src="/network/tezos.png" />Tezos</a>
    <a href="/networks" class="nav-submenu-view-all">View All</a>

The trick is to reveal the nav-submenu div on hover of the parent nav-item div. If nav-item is relateively positioned, then the subnav can be positioned absolutely within it. The same code can be reused to add a submenu within each nav-item in the main nav.

The network icons slide in with css animations. The position of the icon image, and the padding on the containing link, have two states.

  • The default state sets the icon’s left margin to be -20px. The overflow:hidden; line in the .nav-submenu class means these icons won’t be visible.

  • The hover state for links within the submenu, moves the icon to a position where it is visible and adjusts the padding of the text in the link accordingly, so the whole row looks like it’s sliding together to the right as the icon appears.

I also added opacity as a pararmeter that changes, to enhance the animated transition. The same idea and scss approach is applied to the last “view all” link, but a pseudo element is added to contain the → character that appears on hover.

Lost Waves – Sirin's Song

For 20 months, I've selected songs to add to monthly collaborative playlists on Spotify with a group of friends. This month's theme is "arpeggios" and I decided to record a quick track to add as my final selection for the month.

"Sirin's Song" is a Lost Waves ode to arpeggios and this Moog "analog messenger of joy." The single was recorded Friday eve, May 24, and mixed the following day. All synth sounds are from the Moog Sirin analog synthesizer.

Available Fri May 31.

Lost Waves – Sirin's Song design by Under After Lost Waves – Sirin's Song design by Under After

Rubicon – Behind the Logo

Elizabeth Montoya, Vice President of Investor Relations at Rubicon, wrote about the story behind the logo I created for the company. Atlanta-based Rubicon Global is the "leading provider of sustainable waste and re­cycling solutions” valued at $1B :

This summer, Rubicon® will celebrate 10 years of being incorporated. As we look toward the future, we’re also taking the time to reflect on the past—and the development of our unique logo is an important part of that.

Solomon’s knot. That was the inspiration for Rubicon Global’s current logo, a rotation of green (“strong opal,” to be precise) lowercase R’s. That’s what designer and brand strategist Mark Forscher explained to me when I sat down to speak with him recently about the logo design that he came up with for our company.


TechCrunch Interview

TechCrunch Interview design by Under After

TechCrunch interviewed me about my design studio and practice as part of their Extra Crunch "Verified Expert Brand Designer" series.

“The reason why I haven’t scaled up my design business, why I’m not trying to be like a ten-person shop, or even a five-person shop, is because I want to be a collaborator, not a vendor that somebody outsources work to. I think it sets the expectation right upfront that we’re both in this together to figure this out. I’m just a person deeply committed to working with the founder.”

Link to the full interview. View the work I did for TechCrunch in 2018, creating the Extra Crunch visual identity.

Introducing Cave World

Introducing Cave World design by Under After

Adam Nelson and I wrote and recorded these songs over the past year. I'm very excited to share the first Cave World release! Hope you dig. Listen now.

More than a collection of hypnotic songs, Cave World’s “Ready for Anything” is an escape into the warmth of the deep network of caverns buried within our imaginations. Recordings uncovered from this timeless subterranean ecosystem, bubbling with life and hypnotic textures, invoke familiar and unexpected reflections. Filled with glowing creatures and overlapping cultures, “Ready for Anything” journeys through mystic songs about destiny, life, and our search to discover what lies beyond these walls.

Studio Playlist October

Studio Playlist October design by Under After

The Under After studio playlist for October. The design of the playlist cover continues the "frame within a frame" theme I've been playing with this year and is based on another of my hand-drawn sketches. Artists on this playlist: Anthony Naples, Bullion, Ross From Friends (this is one of the most polarizing artist names I can think of, but the music is clever, hypnotic and addictive), Tirzah, Against All Logic, Four Tet, Michael Mayer & Joe Goddard, Oneohtrix Point Never, DJ Koze & Mano Le Tough, JEFF The Brotherhood, Hailu Mergia & Dahlak Band, Romare, and Julien Dyne. Listen!

Embracing the Small Release

Embracing the Small Release design by Under After

It’s hard to launch personal projects. How do you know you’re done? Instead of overthinking it, I’m embracing the small release and the process of iteration. This weekend I migrated my personal site,, to github-pages and built a simple 1-pager with Jekyll. The CSS color fades are subtle and draw more attention to the UI than it deserves. 🙃

Experiments in 3D

Experiments in 3D — design by Under After

While learning how to inflate an object in Cinema 4D and experimenting with soft body dynamics, I thought of a few other things that can be inflated: balloons, the prices of goods or services and our egos. I called the one above "Egos Be Like." I think we've all met someone with an ego so big, you can see it from space.

Experiments in 3D — design by Under After

One of my earliest seamless loops, also an experiment in connecting simple geometric forms.

Experiments in 3D — design by Under After

"TFW You Have Insomnia Because of the News" is a little looping animation, offset in time. Seven smiley faces power through seven days of the week, looping through the endless news cycle. To put on a good face, to get the simple smilely to look right as the surface of the sphere, I had to stretch the source file a bit.