The Amazee Labs Redesign: Part III

In parts one and two of this three-part series about the design of our new website, I wrote about why we decided to redesign, how we chose a design direction, and looked back at our first few attempts at a home page. In part three, I’ll explore how we used tape to mold our site into what it is today.

Tape Art

Having struggled to this point to find a design that felt right, we began to explore tape as a media for design. I spent a day tinkering in Photoshop, and mocked up our (since retired) claim in pieces of digital tape.

Within a few minutes of reviewing the work with the team, it was clear we had found a happy place. Fresh, clean, bright, unique, hand-made, Amazee Labs — these were words used to describe the style and the decision to move forward with tape art was unanimous.

Technique

I spent some time perfecting the digital tape technique. The tape itself was very simple to make. Individual pieces were drawn with Photoshop’s Line Tool at a weight of 13 pixels. Each piece was given a subtle drop shadow to add depth and 80% transparency to add visual interest where the pieces overlapped.

Tape-ography

For type, I started with a base font called Font Leroy Brown (1). Then I altered each letter by hand to make a script (2). And finally I traced the type with tape to create the finished look (3).

Little Things

Charles Eames, a famous architect and furniture designer, once said, “The details are not the details. They make the design.” I find this quote interesting because although it’s true, design details are often lost on the casual observer.

You wouldn’t know it by flipping through the design as a whole, but I was quite obsessive about my tape. I used only two tape sizes throughout the site — 72 pixels in width for the big action buttons, and 13 pixels in width for all other graphics.

Also, my tape-ography designs were created such that no two pieces of tape were the same color.

Perhaps my obsession with tape and attention to detail is no more apparent than on our 404 page, showcasing a skull crafted of nearly 850 pieces of devious tape.

Design Five

It wasn’t long before I had extrapolated the tape concept to a full home page design.

The feedback was positive, further confirmation we were on the right track. But the right track proved to be a long, long way from the finish line. We made our way through at least 25 versions of this start page before we settled on the one we have today.

The Outtakes

It would be impossible for me to show every step we took moving forward, after all, nearly six months passed between the time we decided on tape art and the launch of the website. What I’ll do instead is show you a few design elements that didn’t make the cut, to give you an idea of some ideas we explored along the way.

In Living Color

This colorful rendition of the A-team was a bit too saturated.

Through the Looking Glass

This glass overlay effect was prevalent in almost every iteration of the design, but in the end proved to be too detrimental to performance.

Piled High

We strongly considered including this pile of tape on the start page, to more quickly communicate the tape concept. In the end, we decided it was too literal.

Chair-ished

This start page was one of our very favorites, but was eventually axed because it lacked a human element and was too drastically different in color from the rest of the site. It did, however, inspire the use of the couch in our finished design.

Taped Text

For a while we were using tape for page titles, but decided it wasn’t SEO friendly and would make it too time consuming to add pages in the future.

Lifestyles

Another popular idea was to use a lifestyle photo in the header of our individual team pages, to bring a little more personality to the design. This idea we might see through in the future, if and when we find time to harvest some great photos.

In The End

These three blog posts shed only a fraction of light on the conversation, design, redesign, and decision making that went into completing this project. And I only wrote about design!

Someone a lot smarter than me will have to fill you in on how our crackerjack team of developers not only built the site, but did so using Drupal 8 in just a month’s time. These people are good.

What we launched a few weeks ago was a team effort of the best kind. Thanks to Kathryn, Emma, and Victor for theming the hell out this thing, beautifully and responsively. Thanks to Lucian for his migration work. Thanks to Boris for his site-building and inspiring photography. Thanks also to Michael for getting shit done in general, and to Greg and Dania for their vision. And a special thanks to Daniel Truninger, project manager, who tirelessly saw this project through from start to finish.

That sound you hear is the clock ticking — three years until we’ll have to do it all over again.

May 28, 2014
0 Comments

Get our Newsletter

Comments

What is Amazee Labs?