+Background byReagan Ray
X Background byReagan Ray

Reagan Ray is the lead designer and resident illustrator for Paravel.

Visit reaganray.com See the Full Background Download wallpaper for: iPhone iPad

Designing for Designers

May 16, 2011
I didn’t set out to design websites for other designers. But lately, these kinds of projects keep landing in my inbox — lucky me! I would like to say I make my own luck because that sounds bad ass. But really, I just try to do good work and be nice to people, and sometimes fun projects come along as a result.

In the past year or so, I have been fortunate enough to have had not one, but two people that I admire bring me on board to handle their visual design needs. Better yet, each of them asked me to design websites for projects near and dear to their respective hearts.

Working with designers on their self-driven projects is different than regular client work; there’s no one pickier about what they like and don’t like aesthetically. That said, after meeting (and drinking a number of beers) with Trent Walton at SXSW, Trent asked me to share how these two projects went down for me.
Article Image

Project 1: 8 Faces

If you somehow miss the explosion of tweets, feverish pressing of the F5 key, and other such nonsense that occurs each time 8 Faces gets ready to release an issue, then you should know that 8 Faces is a magazine edited and published by Elliot Jay Stocks for type and design nerds (us). The magazine has been a smashing success with each of its first two issues swiftly selling out — the first within a matter of hours.

I was ecstatic when Elliot asked me to handle the interactive needs for the magazine: designing the initial website and subsequent redesigns as the magazine’s needs would progress.

Designing the initial website was quite difficult since most of the brand was still in flux. The only element that had been finalized before diving in was the logo. We didn’t even have content! I drew and roughed over a dozen concepts, from grids of faces to giant logos to an octopus (8 faces, 8 arms, c’mon!). Unfortunately, we had a tough time zeroing in on a final concept.
Article Image
Now, when you’re working on projects for designers, they often have a hazy idea of what the end product should like like; their ideas are more detailed than those of the typical client. Early on, we came close to deciding on a concept a few times. But ultimately, we ended up designing and building the final site two weeks before its launch.

In developing the site for the second issue of the magazine, we had an easier time getting things rolling, as the overall aesthetic was already firmly in place. Elliot approved nearly everything on the first go-around with a level of enthusiasm I’m pretty sure only the Brits can manage. We held on to elements we loved from the first design: keeping a buy button in sight at all times with a fixed navigation, a photo gallery for real shots of the magazine, and the overall content structure. Due to the magazine’s changing needs over time, I designed a modular, row-based system which would allow for the reordering of elements as needed, as well as a flexible call-out area for new products in the masthead.

“I was one of those nightmarish clients who asks for something to be designed without being able to provide content, but Kyle still managed to do a fantastic job,” Elliot said. “His modular design allows us to add and remove blocks of content when necessary, and the site's simplicity — as well as accurately echoing the aesthetic of the printed magazine — has given us plenty of breathing room to update and refine the look of the site with each new release.”
Article Image
Having the magazine stick out of the fixed mast a bit created some visual flair. Accommodating for the space it occupies in each section was rather simple. For an added wow moment, the cart and button fly in from the top with a bit of javascript rather than a more standard lightbox or a stand-alone page. There’s always a few opportunities on a project to add an extra touch to make the experience (hopefully) a bit more memorable. I like these moments.

8 Faces will soon be unveiling the line of prints that were promised when the last issue was announced. The aforementioned modular system came in handy here, though we did end up redesigning the masthead a bit again. The color strip at the top of the site was meant to change color with each issue, so we upped the ante on that idea for the prints. Sometimes the colors from the print look wonderful, and sometimes they’re harder to work with; it’s a good exercise in color as the work I do tends to be relatively monochromatic, usually with a single accent color.

Launching each iteration of the 8 Faces site is never lacking in a blur of magazine sales—the first issue sold out in just hours. Elliot has put together an amazing product, and it’s been fun to put together the experience for those new to the magazine as well as those frantically attempting to place their orders for each issue.
Article Image

Project 2: Build

Another site I recently completed was for Andy McMillan’s Build, an annual event to sate the design needs with five days of music, film, conference speakers and workshops. Andy felt that the previous year’s site didn’t have enough oomph and polish to represent the event’s status in the web design community.

The direction for the new site was to freshen the brand, clarify the event as more than just a conference, and—in Andy’s words—”just be absolutely amazing.” Great. There’s the pressure.

Jez Burrows had done the identity work for the previous year’s Build event, and chose a nice blue color to update the logo for freshness. I built a teaser page which didn’t quite work out as planned. The teaser page was meant to have a different clue about the event each week leading up to the public announcement, but with event details difficult to lock down, the teaser page sat idle up until launch.
Article Image
I started the project looking for something to give the home page a wow factor which would also enhance the content. After kicking around a few ideas, we landed on the concept of videos rather than portraits for the most important draw factor: the conference speakers. While the initial direction was for the speakers to introduce themselves (without sound), we had to leave this in their capable hands and it was a nerve wracking experience not knowing what a central element of the site would look like until days from launch.

I explored a few rough site layouts and styles, sketches and so on before combining elements of each. One concept centered around the idea of an online Swiss-style poster modernized by the available technologies of the Internet. This ended up lacking character, though, so we scrapped it. Another concept utilized a fixed sidebar that could introduce changing content as users scrolled through the page — a neat effect to enhance things, but ultimately unnecessary. Scrapped it. The third concept focused on balanced symmetry as much as possible. Putting the logo in the center of the masthead is always a look that I love; it bestows a feeling of official prestige. Bingo.

We tried a few variations of the page and video grid, looking for the ‘it’ feeling. I’m a fiddler and will rearrange things ad infinitum until it all feels ‘right.’ It’s a bit of an unexplainable feeling, and sometimes I find it right away. Other times it takes longer than I (or the client) probably want it to. I really struggled to find the right feeling of elements. It was not until I returned home from SXSW and inverted the background of the masthead that things started to fall into place. Unfortunately, this left us two weeks to finish out the site.
Article Image
After two weeks of late nights and weekend work (I do all freelance work in the evenings and weekends), Andy and I fleshed out the rest of the site. The registration system was designed and built from scratch (Stuart Johnston providing development), which took a few iterations to get right. I set up a grid and standard element style for the internal pages and proceeded to fiddle with different arrangements and hierarchies until they had the ‘it’ feeling too.

Putting together the HTML5 videos was an experience in just how unready HTML5 video is for prime time. Each video was edited, gray-scaled, then exported into three file formats including a .swf file with actionscript to loop the video for non-HTML5 browsers.
Article Image
We also took special care of the day pages to act as a schedule on mobile devices using media queries. This gives users access to information about speakers and links to their work to browse during downtime, something they can’t do with a printed event booklet.

The last pixel was put into place minutes before the site went live. Working with UK-based clients when living in the States means working through the evening alone, and having your client wake up in the wee hours of the night. This is great when you don’t freelance during normal working hours, but calling it done at 5am is the end of a tough night.

The toughest thing about the Build site was not knowing whether the home page videos would turn out, as well as uncertainty over what could be officially announced on launch day. While the videos came back better than I ever expected—thanks to the speakers' hijinks—Andy was unable to launch a good portion of the site while he waited for confirmation on details for each event. As a result I felt considerably uneasy about the launch since about half of what we had built was locked away out of view (though I have word announcements will be made soon!).

Launching the site was just as exciting as 8 Faces. Watching the tickets sell out on launch day was a great feeling, and folks loved the antics of the speakers on the home page.
Article Image

Thrills and Chills

Watching each of these sites go live was an unnerving experience. Both Build and 8 Faces have a substantial audience of highly critical people—quite a few of which are much better at this than I am! Thankfully, the sites have been well received by the community—which is such a sigh of relief in that particularly anxious first hour.

The job isn’t done after the site’s are public, however, particularly with 8 Faces. We’ve been able to refine the site with each iteration, improving the user experience for users and eliminating unnecessary elements to keep things simple.

Looking forward with Build, about half the site is still unavailable still; as those pages come online, we’ll make some iterative changes to continue to enhance the information available and how it’s presented. No design is perfect at launch. It’s a continual refinement that makes for stellar design.

Projects such as these are amazingly fun and open ended — much like self-initiated projects. Both Andy and Elliot began these projects on their own; they had the ultimate creative freedom. If you’re looking for the challenge of designing under the critical eye of the design community, consider launching an initiative yourself.
Written By

Kyle Meyer

Visual and Interface Designer
See more by this author

Share: Twitter, Facebook