// Case Study

Adobe ADIM16 Website

A 3-Day Inspirational Master Class at Adobe Headquarters in San Jose, California

Each year Adobe Senior Creative Director Russell Brown holds his “Art Director’s Inspirational Master Class” (ADIM); a three-day conference and master class series that attracts creative professionals from around the world. Each year features a unique theme. ADIM16’s theme was a Jules Verne-inspired “20,000 Layers Under the Sea.” My studio, Positive Space LLC was commissioned to create the identity assets and website. In this case study we will be focusing on the website.

Discovery

Requirements

We first spoke with Adobe staff and stakeholders to establish visual, functional, and content requirements. These included the creation of:

  • Visual elements that stayed true to Verne’s tale combined with a more playful visual treatment.
  • A single-paged, fully responsive layout and navigation system.
  • Standards-compliant code and addressing basic accessibility considerations.
  • Cross-browser compatible code that would perform well in supported browsers including IE 10+ and various Webkit and Gecko-based browsers on Desktop and popular mobile platforms.
  • A fun, yet concise pitch to designers on the value of the conference and classes.

Technical issues and resources would also have to be addressed: web hosting, as well as access to original or stock photography and pre-existing content.

Our Target User

Who was our typical user? It’s a big question with even bigger ramifications. With the help of profiles of previous ADIM attendees and conversations with stakeholders, I was able to craft a number of audience personas. In summary:

A designer, art director, or photographer with a passion for art and travel. These designers are working within in-house or agency settings and have mid to high fluency in Adobe applications. Many have a desire to expand their skillsets into the interactive realm. Attendees were primarily from North America, Asia, and Europe. Many are repeat-attendees who enjoy the master classes, camaraderie, unique projects and prizes the conference offers. While attendees come from a diverse spectrum of income levels, some rely on their employers to fund their trip.

Content  & Information Architecture

Focus, Focus, Focus: IA, Sitemapping and Wireframing

As cliché as it sounds: content is still king. ADIM is one of those conferences that few have heard of. Those who have gone swear by it and return year after year. With our target audience in mind, our mission in creating user-centered content is twofold:

  • Convince the designer of the value (and fun) of this event.
  • Provide concise and understandable content and visual design to convince the designer’s organization to provide trip funding to the event.

This is why it’s extremely important to have content that gives an exact description of what to expect and what the return on investment is. To that end, each section drives this home. From benefits, to speakers, to the free 2 years of Adobe Creative Cloud, the value of this event is spelled out.

Once content was crafted, a simple sitemap and wireframes were created. The design called for a fixed single-level responsive navigation system. For mobile users it would collapse behind a hamburger menu. Tapping/clicking menu items would scroll users smoothly through the site.  The layout would consist of a large header and  3-4 columns on desktop with that layout collapsing in half on medium-sized devices (tablets), and into a single column on mobile (see below). All layouts were aligned to a 12-column grid system.

Medium Fidelity Wireframes
Medium-Fidelity Wireframes

Visual Storytelling

Our site’s visual design takes our content and layout and places them under the sea. Each section brings us further and further into the ocean depths of the Jules Verne tale. On desktop views, parallax scrolling helped enable the illusion of an undersea world with moving bubbles, fish, and seaweed. Other visual elements like a dual-sided spear/craft knife, portholes, and tentacles further reinforce our theme.  Most of these elements were created as SVGs, so scaling from device-to-device isn’t an issue.

Code

The site incorporated standards-complaint HTML, CSS, and JavaScript. The HTML and CSS were handled via the fantastic SASS-based frameworks of Bourbon, Bourbon Neat, and Refills. With Bourbon Neat we can use nested media query bubbling to organize all of our breakpoint styles under a single selector in our SASS documents.

While this does create a lot of media queries, a simple Gulp or Grunt-driven post-processor consolidates these without too much headache. Basic semantic HTML and section 508 considerations further ensure that the site has a reasonable amount of accessibility built-in.

The finished product

While the site has been replaced, renders of the finished site can be found on my dribbble account.  I had also created two variants of the visual design in the end: one blue, one green, and one that showed the surface of the ocean in the masthead. As always, the event was a success and a blast.  Check out this video summary of the conference by Adam Pass.