Sunday, March 11, 2012

Daniel Christiaens Sound Design

Project: Daniel Christiaens Sound Design (Surrey, BC)
Website: (archive)
Technologies/DirectivesHTML/CSS, JS, PHP, MySQL, Wordpress, API Integration (Vimeo, SoundCloud), Domain and Mail Setup
Spotted onFacebook

Concept: The logo is formed from two speaker icons facing each other, forming the letters D and C from the resulting negative space. A secondary logo, chosen by the client to be associated primarily with the website, is a waveform that forms the letters d and c. Both logos present a deliberate reference to sound design that conveys a simplistic impression of the craft while keeping a second layer of meaning and imagery that presents the client's initials and overall identity, evoking the semantics of his unique style. Together with a crisp and contemporary logotype, the whole design comes together with a look and feel that is edgy but professional. Sharp and bold.

Business Card

The brand communicates taking a holistic approach to sound design, understanding the intricate interplay between elements such that sound design does not need to be 'louder' or 'edgier', but the perfect fit that complements excellent work.

Website Landing Page

The website is an unforgiving take on monochromatic and linear composition that milks the combination of a single base hue (gray) and all its tints, tones and shades with varying line widths and weights for all their worth to direct attention to content, content and content all the way. Flat icons and clean graphics tie the interface together to deliver a rich yet consistent experience that plays with various visual depths and component subtleties, providing a suitably interesting backdrop that is inviting instead of intimidating, assisting instead of overpowering. Visitors will instantly be drawn to the content without missing-out on the little details that undeniably establish the client's brand.

The website is divided into four sections fully anchored on the menu on top of each page. Each section is also visually represented in the interactive slider featured on the website landing page. Below the slider is a thumbnail gallery that showcases the client's latest sound designs in video and audio media, dynamically updated in sync with the client's online media providers (Soundcloud and Vimeo).

Section Page in Description View

Section Page in Thumbnail View

Clicking on each thumbnail will bring up the website's Media Box that intelligently renders videos and audio clips consistently across the website, whether on the front page or in the section pages, fully programmed and customized to fit the look and feel of the entire design. The Media Box also automatically switches to mini-player mode for viewers with low screen real estate.

MediaBox Playing an Audio Set

MediaBox Playing a Video Clip

Mini Player

Updates and social connectivity are then conveniently located on the footer of the site, playing on the personal side of the client's online presence. This functionality is achieved through customized Twitter updates and links to the client's media/social accounts that feel right at home with the aesthetics and structure of the design. An interactive and secure contact form is also included on the footer, providing instant connectivity to the client wherever the viewer currently is on the site.

The website is fully tablet- and mobile-capable, automatically adjusting layout and content to serve the best user experience whatever device the visitor is on and whatever technology the device is capable of. The whole site also degrades gracefully for viewers with low computing capacity by defaulting to appropriate links to resources that stand in place of media-rich components so that none of the audio-visual content is lost amidst varying technologies and a virtually consistent user experience is achieved.

Landing Page - Tablet and Mobile Views

The project can also be easily administered by the client to update content, change major and minor layouts and even start a blog. All these functions are intuitively scattered throughout the website with unobtrusive controls that blend perfectly with the entire design and functional philosophy of the project.

Finally, the business card (shown on top) takes the monochromatic scheme employed in the website and stretches it to both extremes of dark on light and light on dark. The front side renders the brand in dark stroke and fill over light background, giving it an air of traditional professionalism. On the other hand the back side renders the alternate logo as the dark background to the website text in light stroke, lending itself to a modern and contemporary feel. Both sides play off of each other to express the entire brand in one edgy and professional yet personal and unique mark that is Daniel Christiaens Sound Design.