Case Studies

Jay Song Studio

IMG_7453Banner2x1W2000.jpg

Jay Song Studio is the purpose-built home studio of audio recording engineer and music producer, Justin Newton, in Cincinnati, Ohio. Justin is my brother and I’ve enjoyed working with him on various iterations of his professional branding over the years, including jnTracks Productions, Railroad Avenue Recording, and his current business name Justin Newton Audio.

Seeking to brand the new studio as a destination for great music records, Justin chose the new name as a play on his first initial and the idea of a songbird. Together we developed an elegant, flexible, and unique logo system based on this songbird-audio concept, refreshed and relaunched his website under the Jay Song Studio moniker, and even developed a simple introductory video to promote the new studio.

 

(Tap or click the image to cycle color variations)

Logo & Brand

Procreate using Apple Pencil, Adobe Illustrator

The primary Jay Song Studio logo comprises an abstraction of an audio waveform in the shape of a silhouetted songbird, with the brand name trailing in its wake. Contextual flexibility is achieved using multiple “lockups” (arrangements) of the “Jay Wave” logomark and the “Jay Song Studio” logotype, of which both pieces can also be used independently.

(Tap or click the image to cycle concept phase slides)

CONCEPT PHASE — Early concept sketches inspired the visual idea of the audio waveform in the shape of the silhouetted jay, but the final design concept did not emerge before thoroughly developing several other, similar but distinct design directions.

(Tap or click the image to cycle logo design iteration slides)

LOGOMARK — We explored numerous approaches for conveying the abstract visual combination of a jay and an audio waveform. The final shape is both simple (to afford scalability) and original (to promote brand ownership), all while remaining objectively recognizable as both a bird and a sound wave, according to a small group of polled viewers.

LOGOTYPE — We simultaneously experimented with typographical iterations, with the goal of visually integrating the logotype with the audio waveform metaphor without over-sacrificing readability. Our final selection accomplishes this with vertically elongated letterforms, and implied small-caps and drop-caps, to help parse the words without spaces. Subtly rounded corners complement the smooth curves of the Jay Wave logomark.

(Tap or click the image to cycle color variations)

COLORS — The Jay Song Studio brand colors come directly from the existing Justin Newton Audio brand, which remains the business name behind both brands. The implementation of the brand colors further enhances the visual metaphor of the audio waveform, as it is typically rendered in professional audio software.

 

Website Design Refresh

Squarespace, Customizations using CSS, HTML, and JavaScript, Adobe Photoshop

Photography, Video Production

Additional Photography by Derek Heidemann

I had previously worked with Justin to update the design of his existing website. With the rebranding under Jay Song Studio, we refreshed the website a second time, taking new photography of the new studio, adding a promotional video (see below), and using the opportunity to clean up some of the language and simplify the path for new clients to reach his business.

 

Promotional Video

Videography, Video Production

Music by Derek Heidemann

We also created a very simple promotional video to introduce Jay Song Studio on the site. I consulted on concept and script, and then handled lighting, direction, shooting, and video editing for the project. Music was provided by Derek Heidemann and edited by Justin himself.

MLD Productions

MLD PRODUCTIONS

Brand refresh
Website

MLD Productions is a Boston area, startup digital media production company with a heavy focus on video, but also audio and photography.

The MLD team approached me to build their website, and in the process we determined that their logo needed a refresh to improve its readability.

MLDLogoRefresh

Brand Refresh

Adobe Illustrator

THE PROBLEM — The original MLD monogram had no separation between letterforms; the right stem of the M coincided with the stem of the L, which also directly connected with the D. This lack of distinction between letters lead many viewers to see "MD" instead of "MLD." The challenge was to eliminate this readability flaw while preserving the established aesthetic.

THE WINNING SOLUTION — Resolving this problem elegantly took thorough experimentation and iteration, eventually resulting in subtle separations between the letters that don't completely break the unified, monogram feel. The L is distinguished not just by separating its stem from the M, but by raising the baseline of the M (along with its central dip) to match that of a new break in the stem of the D. Each new gap between strokes is carefully measured to exactly the same tight distance, helping to maintain that cohesive, "attached" appearance.

COLOR ADAPTATION — To further establish the complete shape of the L,  the white-to-orange ombre is adjusted to the right, now beginning just within the D. To counter-balance this new asymmetry of color, and to supply extra nuance, an inverse ombre is optionally applied to the bounding box.

EMBELLISHMENT — A dim shading now fills the bounding box, intended to provide the monogram better contrast over light backgrounds, and to draw more attention to the concept of the box as representative of a movie screen.

 

Website

Squarespace, HTML, CSS, Adobe Photoshop, Adobe Illustrator

PROCESS — The MLD Productions website was built using the Squarespace platform. This allowed for easy, fast development of a beautiful, rich site, that's easily updated and maintained by the MLD crew, on a very modest budget. It also provides a mobile-responsive structure with minimal effort, which means that everything looks and works great on any device. Despite the guiding nature of the Squarespace framework, there is little limitation of stylistic control or the addition of custom elements not included in the platform, given knowledge of web development tools.

STYLE AND LAYOUT — The site layout was structured around MLD's work, with the shape and behavior of each section defined by its content. Interrupted only by fine lines of white and orange—MLD's brand colors—the content is delivered front and center. The result is a clean, smooth, full-frame layout, affording a distraction-free website experience not unlike that of a personal theater. On supporting web browsers, the use of parallaxing background images (which scroll more slowly than other content) creates an illusion of depth, heightening the immersive, cinematic experience, befitting a company like MLD Productions.