WANKEN - The blog of Shelby White » Showcased Work

Showcased Work: Old Spice Campaign Stats Poster

Shelby White — Tue, 01 Feb 2011 09:56:34 +0000

If you’ve heard recently, the Old Spice guy Isaiah Mustafa is back. His return makes this the perfect time to share with you a project I completed a few months ago for fun. The goal was to create a refined and informative infographic. At the time of creating this, the Old Spice campaign entitled “The Man Your Man Could Smell Like” was in full swing. The campaign was led by Isaiah Mustafa and driven by the great Wieden + Kennedy creative agency. The results of the campaign relative to sales and the social media buzz, exponentially exceeded expectations and ultimately marked the campaign as one of the most successful in history.

The question was how do I design for this. Do I pair the design with what the brand has established or do I take an alternate route? At the time I was heavily inspired by the international typographic style and Massimo Vignelli. This explains for the minimal layout and geometric line angles similar to the New York City subway maps. However, this direction didn’t come immediately. I toyed around with various versions that were far from being relevant to Old Spice or being easily readable. This version however, felt the most appropriate. Bringing in a few elements such as the cutting-off of the logo and Old Spice related colors, helped reflect current establishments that the brand already uses.

The data was collected by the marketing firm, Symphony IRI.
Type family used: Helvetica Neue Ltd Std

Typefaces of the World poster is also available now.

Showcased Work: Typefaces of the World Poster

Shelby White — Mon, 24 Jan 2011 08:57:26 +0000

Typefaces of the World was a poster I created to show the typefaces that are most commonly used in a lot of today’s design. The poster includes information for each typefaces such as the year it was made, the location and the typographer. These 50 typefaces were chosen based on popularity and usefulness in present design. It was by mere coincidence that the typefaces were nearly split 50/50 between Europe and the United States—the most prominent locations for typographers were in these areas.

View larger poster.

Initially the poster was created as an experiment and excuse to explore new methods of working in Illustrator that I hadn’t attempted before. I’d seen info graphics on Behance where data was fanned-out but evenly spaced—there was no way this was done by hand. It took a while but after figuring out the method of doing it where you can essentially paste in your data with tab-formatting, the poster was on its way. I’d like to play with this further to really nail it down because there aren’t any tutorials on there on creating a dynamic way to showcase information in this way. Hint: its not type on a path.

Typefaces used in this poster: Helvetica Neue LT Std & Univers LT Std

Order the poster by clicking the link below:

ORDER THIS POSTER

Also leave a comment to let me know you’re interested in the poster.

Making of Designspiration.net

Shelby White — Mon, 13 Dec 2010 10:19:41 +0000

Nearly ten months ago, I had an idea that was inspired by the design community, one that I became very passionate about. The idea was to create some sort of platform to share what inspires you. We’ve seen it done before, but what I have for you is something I hope and believe you’ll really enjoy.

Designspiration is the outcome of my efforts to realize my idea, evolving into a site occupied by a diverse range of inspiration curated by its users. Designspiration or DSPN for short, focuses on the core principles of sharing inspiration and utilizes some great features; like a search function that works like a Swiss army knife, which I will discuss more in the post. Little did I know when starting this project that I would be clocking in more than 1,000 hours over the past ten months.

If you’re eager to check out the site, you can hit Designspiration.net or Ds.pn. With that said, I’m really excited to share this project and process with you…

This post is broken up into these sections:

Defining the Goals
Design & Typography
Development
Features & Invitations
Conclusion

Defining the Goals

Since the dawn of the project, I was constantly asking myself, why create another inspiration website?

The answer was simple: I ~~wanted~~ needed to find a way to help fellow students find inspiration. Through talking with other students in the past year at the Art Institute of Seattle, I found that over half of the graphic design students hadn’t heard of image bookmarking sites like FFFFOUND, and had potentially visited Behance no more than a handful of times. Granted, those aren’t the only sites out there, but they are two of the highest regarded. Perhaps even more alarmingly, I noted on multiple occasions that students were stopping by Google images as an inspiration outlet—rather frightening isn’t it?

It was quite clear that what needed to be done was provide a solution to the problem, and a concept was forming in my mind. The question was how do I make it happen? Answering that question isn’t easy. I had to realize that in order to complete this extremely daunting task, I needed to ask myself if I truly believed that I could make it happen. I believed I could do it even though I had no knowledge of how to, but not once did I allow myself to say, “I can’t do this.” Instead I asked myself, how could I do it.

Through the planning phase, done during the first week, I realized two things: one, I knew very little programming (html/css) and two; my budget was…well there wasn’t one. I spent some time talking with developers about what I was trying to do, and was pointed to Ruby on Rails. The following week was hell so I moved away from Ruby on Rails and started using an easier solution, PHP and MYSQL.

Research & Usability Testing

Usability was by far the most important aspect of creating this site, and I spent a great deal of time ensuring it was always usable and intuitive. To gather data for the initial build, I reached out to a number of designers and photographers to ask them a series of questions. The questions pertained to why they use specific sites and what they would like to see improved or added. The results were actually surprising: the majority wanted something very simple, but it had to have search capabilities and a range of high quality inspiration (without the junk). I completely immersed myself in using a lot of sites to understand how and why they are successful. Believe it or not, FFFFOUND is ugly for a reason, and has a unique system of relating images.

After 6 weeks I had a beta build up for DSPN and began doing small task testing. Some of the tasks included the difficulty of searching, ease of navigation, uploading to the site and how users tagged. The hardest part about the testing was who to include and who to exclude in the tests. One of the larger groups incorporated were those who answered yes to experiencing creative block. This group is more likely to use DSPN.

Design & Typography

The designing of the site was the second most difficult part to accomplish. Based on the research and desires of the people who will be using the site, they called for simplicity—I agreed. The design was to be ultimately dictated by the content, and it needed to be subtle, freeing each of the images from distraction as much as possible. I also believe this form of minimalism in the design added to a feeling of sophistication to the site in general.

As with every project I do I start on paper regardless if its web or print. This project quickly transitioned into wireframes however. You can see from the rough sketch to wireframe, how the structure for the live search started developing.

Hand-in-hand with the layout was choosing the right typeface, especially when the site’s audience was planned to be so broad. It had to work well at small sizes and be a default on most machines. Initially, I had explored using gothic faces and serif faces such as Didot and reformed Baskerville for the logo, but most brought too much outside influence into the site’s neutral-leaning aesthetic. Designspiration needed a typeface that said, “I am unique, but I can sit back and watch the show”. Linotype’s version of Helvetica Neue did that.

As with any large project, the smaller areas of design were initially overlooked. Those areas were the login form and each call-to-action above input forms site-wide. Being that tagging forms such a large part of the site, I wanted to calmly let people know that its really not that big of a hassle, and it will actually help you find what you’re looking for faster.

Development

Seventy-five percent of the time spent on this project was invested in the development. Coming into the project, I lacked almost all knowledge of any of the programming languages that I would be using. This may be surprising, but despite my knocking of Google images earlier in this post, the majority of my knowledge in JavaScript, JQuery, PHP and Mysql was found and learned via Google. Halfway through the project, a light bulb turned on in my head and I realized something that all accomplished developers have had to recognize at some point—that the majority of the coding was about thinking logically.

The nice thing about building a site from scratch is that it negates a lot of the unnecessary fluff that frameworks come with and it loads very quickly. Certainly the whole site would have been much easier to build if it were on a framework. Some of DSPN’s biggest original features such as the LiveType search function were built completely from scratch and took a lot of strategy to implement properly. I needed to figure out things like how I could allow the user to have as much control as possible when searching and still be able to use commands such as cut and copy, pasting and typing in other input fields. The only caveat to using JavaScript for all of this is that it may or may not work in Internet Explorer so you should make sure you’re in one of these browsers: Firefox, Safari or Chrome.

The search by color feature was actually easier to create than the tag search. Essentially getting each color from an image is the same as when in Photoshop and using the color picker. Just imagine zooming to 3200% and sampling an average of 2,000 pixels in .002 seconds and you’re hired.

All of those colors get stored and used in calculating what colors in the image. The visual part of this is where things begin to get tricky because our eyes lie. When we look at an image we see colors that have a higher luminance and calculating this is not easy. You may see in the search results that some images seem off and this happens when there is a lot of negative space occupied by whites or lighter colors. As the database grows, these results will slowly get filtered and put into groups with similar color palettes.

Features & Invitations

• LiveType search: To search for any image just begin typing. It’s a much faster solution than having to click in a box every time.

• Color Search: If you’re looking for images with certain colors, click the color search icon and you can select up to 5 colors from a 120-color palette.

• Keyboard Navigation: The Up and Down arrows scroll between posts and the Left and Right arrows take you to the next and previous page.

Hopefully by now, you’re asking, how do I get invited to the site?

Currently, membership is driven by those whom already been invited. Those members have the control over who gets invited; its a way to maintain the user base and the quality of uploads. By doing it this way it allows for me to keep up with the site, but don’t worry just yet because the site has to start somewhere:

Send an email to register AT designspiration.net with a link to your portfolio or the type of inspiration you’d be uploading.

Conclusion

Spending the last 10 months working on this project has taxed, pushed, challenged, and ultimately, improved my skills as both a designer and a developer. Now that the project is live and in your hands, I’d like to ask that if you see my idea’s potential as a reliable source of well-curated inspiration, would you tell one friend about it by Tweeting or posting to Facebook.

As usual with projects as large as this, there will be updates and additions. Those will come and as I mentioned before, this site is all about you and your inspiration. Your suggestions and ideas to help make the site better are all valid and I would love to hear them.

Follow Designspiration on Twitter & Facebook.

Check it out, Designspiration.net!

New Project: Marcus Eaton Album Artwork

Shelby White — Tue, 31 Aug 2010 10:22:56 +0000

It’s been a long time since this project for Marcus Eaton was first started, but its finally done. I actually just received hard copies and hope to get those up in the portfolio soon. I’m really excited to finally be able to post some of my recent work so post your thoughts in the comments.

Marcus and I have done several projects in the past and it is always a pleasure. When first talking with him about this album art titled As if you had wings, the goal was that this album needed to do something different than the previous had. The music of the album was this great, new, updated sound that would really speak for itself. We both agreed that we had a chance to do something really interesting. We did just that by bringing in a lot of different elements at first and then removing them, revision after revision until it the artwork felt where it needed to be.

A large chunk of my time early on in this project was spent on trying to come up with the perfect concept. Needless to say, I didn’t arrive at it in round 1 or round 2 or 3. I came onto the final concept by trial and error mixed with experimentation. Perhaps if the earlier concepts would have been killed much sooner, the progress would have happened in a timely manner. The first concepts were far different from what the final art looked like. It also had a completely narrowed vision to it. Sometimes I wish my bad concept detector was higher for such open ended projects like this one.

Showcased Work: Shwood Website Design

Shelby White — Wed, 27 Jan 2010 07:57:19 +0000

These are just a few of the web designs done late last year for Shwood Eyewear out of Portland, Oregon. The website itself was to be built in HTML/CSS with jquery components and a full-browser Flash video player. This project is one of many more to be included in the new portfolio the next few weeks.

Check this project out on Behance.

FRAME BY FRAME: The Helly Hansen Annual Report

Shelby White — Wed, 23 Sep 2009 17:04:06 +0000

Note: This project was completed as a class assignment at the Art Institute of Seattle. This was not done directly for Helly Hansen (though it would be very rad if HH took a liking to it). I hope that in some way the sharing of my process may be of inspiration to you.

Over the past few weeks I’ve been showing sneak peeks of projects that I’m working on via Twit-pics and now its here. If you’re just tuning into the blog, you can follow on twitter to see things that don’t make the blog.

The Objective

Before diving into the process, let me define the project. The goal of the project was to choose an existing company and create a minimum of 28 pages, bound, and at least 6 x 7″ or larger publication. The publication was to be an annual report about the company; presenting who they were in the industry and their financial success. The financial section of the project was required to have at least 6 to 7 pages of tabled financial data.

The company I chose was Helly Hansen and there were several reasons why. Every project that I do for an assignment (if I have the opportunity to choose), I like to choose companies that are easy to work with based on their branding. I also like to consider what options I have when working with their logo as well as the photography of the project.

The Concept

The most important thing to me was to portray the report close enough alongside their branding, that it would fit within. If you look closely at the Helly Hansen logo, you’ll see that the two H’s are separated by an angle. Each spread uses that angle is echoed lightly throughout the entire report.

The second idea I used took the logo’s height and width to determine the size of the annual report. To do this I enlarged the logo roughly 600% until the width reached 8.5″. This idea alone drives the report.

The third most important idea of my concepts was to put a small change on the images that were shown throughout the report. For those who may not know, Helly Hansen’s product line was originally and still remains focused on performance gear for boating and heavy outdoor use.

The Photography

Since photography remains dear to me, it was only right that I go the extra mile (or 13.6 for that matter) to get the shots myself. Check out the photos from the shoots in this next, Frame by Frame clip (view in High Quality).

Click here to view the embedded video.

Instead of showing stock imagery or images gathered by HH themselves, I shot my own style with regards to what was appropriate for the report. Over 1,000 images were shot for the project (usually I’d shoot more) but only 15 were used in the publication. I felt like this is a pretty high percentage of keepers to tossers.

The Cover & Binding

To start the building of the cover, I purchased Gorilla glue (Home Depot), Vinyl/Fake Leather (JoAnn’s Fabrics) and Basswood (Utrecht). The following images show just how I made each piece.

I utilized a laser cutter to etch/carve the logo into the front cover. Once again you see the angled lines echoed both on the front and on the back covers along with “ANNUAL REPORT” on the front and “HELLYHANSEN.COM” on the back.

Having never worked with perfect-binding a book before, I did my research online on the materials needed, clamping it, gluing it and also attaching it to the covers. A lot of the process is very simple and straightforward if you have another book or pictures to reference while you build yours.

Conclusion

I would have to say, I am very satisfied with how the overall piece turned out and I can’t wait to try the whole process again. Lets turn it over to you since this post is for you. If you enjoy what I’ve done here, let me know–feedback is always welcomed.

Thank you to Greg & Brooke Miller and also to David Cole for helping out as the talent in some of the photos that were used.