WANKEN - The blog of Shelby White » Process

About.com Designspiration Interview

Shelby White — Tue, 29 Mar 2011 06:56:06 +0000

Eric Miller, who runs the Graphic Design section of the enormously popular About.com, asked me to do an interview with him about the process of building Designspiration. I talked about some of the issues of building the site and how to overcome such obstacles.

You can read the interview here: About.com Designspiration / Shelby White Interview.

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!

The Printing Process of Field Notes

Shelby White — Thu, 04 Nov 2010 00:14:40 +0000

Click here to view the embedded video.

Coudal Partners has come forth this video that takes you from the printing process of the limited-edition Raven’s Wing Field Notes all the way to the packaging. Its a shame this version is sold out, I would have really liked to get my hands on a few.

The covers are printed by Flywheel Letterpress in Freeport, Illinois on an American-made, black-and-charcoal duplex linen cover stock from Neenah. The charcoal-colored inside cover is printed in black on a vintage offset press. The graph paper is lined in grey and come in 3-packs tightly shrink-wrapped with an orange, French Paper Co. band.

Life Series: One minute of footage takes two years to make

Shelby White — Wed, 31 Mar 2010 09:32:22 +0000

Click here to view the embedded video.

So you know those time lapse sequences on the ever-so-amazing Planet Earth and the new LIFE series? This video, from the new LIFE series on BBC, shows how they make those epic time lapses. I’m still in awe every time I watch this video. The amount of room for error is huge here, yet they nail it perfectly. Ninety-five layers deep in what looked to be After Effects most certainly was difficult to work with.

The rigging that the crew used is also very cool. You can see in the video that they are shooting Nikon and using a large gliding dolly combined with an arm/crane to help with the fluid movement. They used a similar motion control setup when shooting the autumn mountain landscape, Japanese cherry blossoms in bloom and a sand storm in the Sahara (see them all here) the more well known of Planet Earth’s time lapses.

Video sourced from Wimp

Process: Branding Ian Matteson

Shelby White — Tue, 16 Feb 2010 11:27:05 +0000

This project, brand and identity development, was for long time friend and photographer Ian Matteson. Ian is an action and commercial based photographer out of Salt Lake City, Utah. Along with Ian’s action and commercial work, he shoots a lot of film/fine art photographs. As the project progressed, I realized just how great it would be to incorporate these other areas into core components of his brand. We both have put in endless hours working on this project and really are excited to have this portion of it completed.

Objectives & Goals

Our first main objective was to develop an identity for Ian that really complimented his style of photography also keeping his long and short-term goals in mind, while at the same time, enabling him to stand out among others in the photography industry. After talking about these goals we came to recognize that simplicity was key in this case. We needed people to remember his name through his work and needed to be unique in the way that we were doing it. A brand that was cohesive would in itself set Ian apart from his competition.

Logo Development

Round one sketches

Before diving into headfirst into the design, Ian and I sat down (mostly via iChat) and researched current and past photographer logo trends. Based upon our research, we saw a pattern. It showed that generally the more successful photographers opt to utilize their name as their logo. In some cases, Ian’s competition also did this, but completely lacked the visual stability throughout their brand and the uniqueness of the logotype.

The few sketches above show alleys that were explored. Although my initial icon sketches didn’t make the cut, they still provided a point in which I could look at how an icon could assist or take away from the main logo. This was the point where we really questioned tradition and steered away from using an icon. There would be no case where Ian would need to use one and going back to our original goal: We want people to remember his name–not an icon.

Round two sketches

Once the direction was established for the logo, I began to use tracing paper over my round two sketches. Have you ever used tracing paper for logos? I find it to be a huge time saver when repeating sketches over and over. After hashing out several versions of the original sketch, I visited the personality of each letterform. The biggest issue I saw with using just logotype as the main logo was that we really needed it to sing. Ian is such a character that we really needed it to do him justice. The beautiful hand drawn type and driving idea of simplicity fit perfectly into the recipe that both Ian and I were envisioning.

Color

Selecting color was a no brainer for this project. The use of a highlight color deemed inappropriate for this logo considering there was no icon to utilize a seconary color. Also, to add a secondary color to the logo would ultimately take away from our main goal and lastly, it would cause problems when using the logo as a watermark directly over color images. The solution for the color scheme was to bring in Ian’s film and fine art look to enhance the brand. We focused on what imagery would be where and on what application (print or web). In the case of printed materials, the type and logo will be black on white with the exception of the business card (black on black).

The website however, will use white text on dark imagery. This is where we really bring in Ian’s work. All of the images that require a substantial amount of text overlaying them, are greyscale like in the above diagram. The other imagery are portfolio works that have no overlaying text. To create the base colors I blurred out images until they only viewable as splotches of color. Another way to do this is to select your image and use the mosaic filter in Photoshop. I hadn’t used this method prior to this project, but it really helped narrow down the amount of greys, whites and blacks.

Typography

Typefaces used in both print & web applications

The typefaces used throughout the collateral pieces absolutely enhanced this project. Interstate was used in the printed material as it bonded beautifully with the final logo; the angular design of each letterform also complimented Ian’s action photography. For online collateral, we utilized Klavika. Once again the type reflected the work by both the angular and rounded letterforms.

Business Papers

Even though there is becoming less and less of a need for a printed business cabinet, we still felt like it was absolutely necessary. Ian still needs to present himself to clients whom aren’t fully immersed in the digital age. In addition to the traditional business papers, I designed templates of Ian’s business papers as an extension of the identity: Invoice, Contract, Model and Property Releases.

Conclusion

This project has been awesome to work on and the end result is something we’re proud of and thrilled to have it out on the table for viewing. The whole visual aesthetic and logo fit exactly to who Ian is as a photographer. Not to mention Ian is in love with his new look. I hope you enjoyed this post and feel free to chime in if you have something to say.

Power of the Sketch

Shelby White — Mon, 16 Nov 2009 19:15:02 +0000

The sketches above are a few of many pulled from two recent projects of mine. Just over a year ago, sketching concepts was one of my least favorite things to do. It seemed less time consuming to go straight to the computer to try and bring my concept to life. The truth was though, that it took two or three times longer to come up with my concepts than it would have taken to sketch by hand.

The reason it’s faster to sketch is because we can think faster from our brain to pencil than from our brain to computer. In a sense we can compare it to talking. An example would be that we use our voice to communicate; it’s far more effective than communicating digitally and there is little room for misunderstanding. This is my point exactly. Talking is natural and sketching is close to natural (the cavemen did it). When trying to use the computer to hash out our ideas, there seems to be a physical communication barrier that, no matter how good you are with computers, stunts your creative drive.

Being able to provide two or three-minute sketches to clients or the design firm you work for is a valuable asset, but only if you understand the principles of proportion, spacing (type), and ingenuity. In the sketches above, you can tell which ones were the 2-3 minute, 10 second, and 45-minute sketches. The 2-3 minute sketches are the ones you should focus on. The 10 second sketches don’t have the direction they need and the longer, 45-minute sketches are too timely (unless you’re creating an art piece). The 2-3 minute sketches help myself or my client envision the evolution of the project in the design phase. If I were to immediately show my client refined sketch, it may give them the impression that this is the final product. It’s also a safeguard to make sure you don’t spend too much time on an idea that may not be the best solution.

It’s funny sometimes what areas of a project get sketched the most. For example, the HH Annual Report project had more sketches about binding the book, than the design itself. Some of my other projects–a project for the Bicycle Alliance of Washington–started with word lists instead of sketches and eventually moved on to sketches of the photo-driven concepts.

Sketching has helped me spend less time staring endlessly at my monitor so I can spend more time making progress on my personal projects. Since I feel pretty strongly about the power of sketching, I’m curious to know what your thoughts on it. What is the balance between pencil and pixel in your work? Share with us.

Your Most Important Data Isn’t Just Your Work

Shelby White — Thu, 29 Oct 2009 07:14:01 +0000

Is it just me or does it take something negative happening to your files before realizing that you should have backed up your most important data? Not just your work, but your address book, iPhone, website, Email, etc. You can never be too safe. Just last week I went from 1,000+ images and full address book on my iPhone, to diddly-squat. It’s totally an inconvenience to lose that data and hundreds of contacts, but needless to say, I’ve learned my lesson.

Over the past few days I’ve begun my new system of backing up due to being paranoid over the idea of losing work. I purchased another LaCie Poultron 1TB drive from MacMall the other day to back up more data. They’re worthy, cheap drives and have a gorgeously sleek black casing. Other than the external backup drives, I’m also running three internal SATA drives inside of my MacPro Quad Core. Each drive in the machine is used for separate purposes. HD1, standing for harddrive #1 in slot 1, holds the main OS and applications along with immediate documents and fonts. HD2 is my Design Work hard drive holding all of my design work, both personal and client based. HD3 is my photo drive. All of my Aperture vaults and libraries are saved to this drive and then backed up on a weekly basis or just after shooting. I have all of my photos currently in an Aperture vault but also have the native RAW files backed up just in case.

In addition to backing up to hard drives, there are a few online businesses such as Mozy or BackBlaze that perform online backups. Instead of that route, there is also the option of backing up to your server, which I would only do if you trust it fully. I am working on online backups, but the process is slow due to the amount of data being transferred.

This data pinch has pushed me to refine my system of performing backups so I want to ask you–are you backing up? If so, how often do you perform backups? What are your methods/setups and have you run into trouble in the past with data loss? Share with us in the comments.

Workflow Question & Answer

Exclusive Process: Dave Danioth + A Mothers Promise

Shelby White — Mon, 12 Oct 2009 09:26:51 +0000

Dave Danioth is an instructor at the Art Institute of Seattle and is one of the very best. He is an extraordinary artist, particularly with his hand-design skills and airbrushing. His conceptual thinking ability is also extraordinary. His Second Book, A Mother’s Promise, written by Lisa Humphrey and released in 2004 shows a very clever concept–something I had never seen before. The book was a finalist for best children’s picture book by USA Book News.

When flipping through the book after Dave’s explanation of his concept, it was apparent that I needed to get the exclusive process posted here on the WANKEN Blog for you. From here down the process is being explained in Dave’s original words.

Some of the illustrations are in “registration” with others. I did this to symbolize the interconnected message of the poem.

The shell, pinecone and stone in perfect registration with the above spreads

So, if you flip the page from the seashell on the beach to the mother holding the same shell, they are in the exact place of both pages. This is true as well with the pinecone and stone. Also in the “creatures” spread, the moon registers with the sun of the “universe will answer”, the moon reflection in “creating you from” and the moon in “lace you together”.

Creatures

Universe Will Answer

Lace You Together

The seedling and its shadow in “universe will answer” register with the mother and child in “lace you together”, and does the sun and moon.

I chose specific symbolic elements and environments for the poem. The first step in my strategy was a word list. Assigning a symbolic word to each spread helps with sequence and I can conceptualize when riding my bike or working in the yard, etc. I did this the very next day after reading the poem, and this is when I discovered the profound symbolic strategy that the poem uses. The Mother’s first three promises of the worlds sacred environments comes back to us through the universe answering, creating the child from the same three elements promised.

This must be represented visually, so I chose icons (shell, pine cone, stone), to introduce with the promises then bring them back together just as the poem did. It was at this time I began designing the idea to arrange the icons in the same position of the compositions to symbolically/subconsciencly echo inner connectedness.

I chose the use of Mother/Daughter reflections in the water as it is a very retrospective and metaphysical symbol, yet brings us back to earth/water/nature as our foundation. Using the same image other than reversing reflections manifested through the circle of life (reincarnation?), and nurturing love the first and last lines represent.

The leaf represents life and decay and the butterfly is the universal symbol of transformation. The butterfly is the only creature on earth that changes its DNA structure during its lifetime.

The Monarch was chosen due to its migration, representing life’s journey. Monarchs are the only creatures that travel its yearly migration path without being taught or shown the way from other Monarchs! The Monarchs that are born early in spring and summer only live approximately one month, yet the Monarchs born later in the season migrate south and hibernate through the winter in Southern California and Mexico. Amazing! Then in the spring, while breeding and dying, they begin their journey back north.

The seedling was chosen to represent that we are of the earth (registered with Mother’s womb), and the type of seedling is modeled after the Milkweed Plant… the only plant that Monarchs lay their eggs upon and where their larvae eat and metamorphosize.

Worlds Sacred Places

Mountains

The leaf blows out of the “mountains”, floats from the “worlds sacred places” (see waterfall in bkg. of “creatures”), then joining the Monarch and then to the ocean where all come together in the symbolic “making” of the child.

Much of this I meant to be subliminal, and I don’t feel people have to realize it to feel the underlying message, yet some may pick-up on the connections.

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.