We launched the“Who is Gary” Facebook Tab in late December for Gary Vaynerchuk, and since then received numerous inquiries on how this was actually put together.

So, I thought it would beneficial to shine some light on what went on behind the scenes, and hopefully inspire others to start telling their own stories in customized Facebook tabs.

A Photoshop file and zip file are available at the bottom for the original 760px wide version of the Facebook tab. The zip file contains the HTML file with static and mouse hover state JPGs we used to upload straight to Facebook.

STORYBOARD

After the decision was made to replace the 10-paragraph biography on Gary’s Facebook tabs with a more fun and digestible storyline depicting Gary’s larger accomplishments and philosophies, we had to pick which points of his life to highlight. But once we had the timeline of events set, we let our imaginations run wild with how to make each point visually entertaining.

Here is a section of the original storyboard we came up with to work off of :

This helped establish the tone of the tab early on, as the only thing we were working off of was a list of bullets points on a timeline. Once I started creating this in Photoshop, the storyboard concepts gave me the license to go increasingly overboard with the art direction.

DESIGN

The first concept I worked on, after picking one of the sections we storyboard-ed, was alternating a cut-out of Gary with accompanying text for every other milestone. Each milestone of his life was separated by a thin horizontal rule. This looked somewhat decent, but it was clear that most of the sections in the storyboard would need to be digitally faked and created as there were not any, for example, pictures of Gary in a huge boat we could have used for the top section of the tab where he and his family come to America. The direction evolved more and more as little touches began to add life to the story.

I used the font, “Handwriting-Dakota”, for most of the copy, and “Sketchbook Rockwell” for the titles to give the text a playful hand-made feel. Although the font color was black at first, I changed it to a dark gray as a number 2 pencil is never pure black. This helped give the sense of it actually sitting the surface of paper. I then used the same dark gray color with a very thin-line brush tip and freely added extra doodles and scribbles to highlight certain areas – just enough to add some charm, but not distract from the content. I even went so far as adding pencil smudges to the larger sections of text. I remember drawing a lot as a child and how dirty the side of my hand would get because of putting too much lead on the page, not only smudging the page but darkening the side of my hand as I drew.

Detail of the pencil effect work :

I changed the font size a lot, even if the text was on the same line, since it is rare that people write in the exact same size consistently across every section on different, yet slight, angles.

If any shape or object looked too perfect then I would carefully add a pencil outline myself,trim away a small amount of its shape, and tilt it slightly to give it a feeling of someone actually arranging all of this by hand. There are only a few text elements on here that are perfectly straight, even the smallest tilt adds to the piece as a whole and a perfectly centered or straight object is spotted immediately and breaks the illusion. So, I spent a lot of time trying to add little imperfections to the objects generated in perfect form from Photoshop since I don’t know too many people that can draw a perfect circle.

Just about everything has a drop shadow layer style applied to it since every object in real life casts a shadow no matter how subtle.

The bottom section featuring Crush It! and VaynerMedia originally had a cracked blacktop background, and I was going to go with a sidewalk chalk feel for the text and doodling elements. However, I ultimately switched it to an image of a corkboard in order to carry the penciled text through that was use on the rest of tab. Although this is the only time I used sticky notes since it made the most sense that they would be on a surface like this.

As an easter egg, I threw in a small image of our soon-to-be-launched VaynerMedia portfolio in the absolute bottom right corner. While no one has questioned the image, did anyone catch it until now? It will be our little secret, ok? Well, at least until we launch it and blab to everyone that it’s up and running.

IMPLEMENTING ON FACEBOOK

While I wanted this post to focus more on the design and thinking behind the Facebook tab, I also wanted to quickly point others in the right direction with implementing this onto Facebook. The zip file provided in the assets at the bottom of this post is exactly what we posted to Gary’s Facebook page. So, the main concept is to build a simple HTML page, with rollovers that are controlled by CSS positioning. For a solid start on creating the actual custom tab for yourself on Facebook please refer to this link, or start searching on your own for “fbml custom tab”.

WRAP UP

So, whether you’ve stay with me up to this point(congratulations), or if you skipped straight to the end here(why’d you do that?)you’ve reached the end of this behind the scenes look at the process and thought that was put into the Who is Gary tab. My intent was to provide some insight on the effects and the reasoning behind them used throughout Gary’s story on Facebook.

While Adam gave away my Photoshop file for Gary’s revised Facebook tab at 520px last week, I wanted to give away the original 760px version containing some extra assets, as well as the actual HTML file that is being used on Facebook complete with mouse rollover areas.

LET US KNOW!

Is anyone up for trying out the sidewalk chalk idea we didn’t end up using? The Erasure font would work well as a solid starting point.

If there were two more additional sections added to the current Gary Facebook tab where you go with them next expanding on the style already being used?

What custom Facebook tab work have you created?

Let us know in the comments!

Downloads

Below you’ll find assets we’ve used in Gary’s Facebook Tab

1)A .PSD of Gary’s 760px Facebook tab, and zip files containg the HTML file along with the JPGs used when uploading to Facebook. Click here to download.

Below are some examples of websites that effectively use textures that you may not have noticed.

Snook.ca

Can you see the subtle noise in the tan background? This effect brings additional depth and life into his design.

Thisisgrow.com

You have to look closely, but do you notice the hatch pattern separating the main content from the secondary content? This subtlety divides content and creates a platform to display content.

VersionApp

You have to scroll down a bit on this one. Check out the texture on the gray surface – notice how nicely it compliments the large graphic? The texture helps keep a correlation between the hyper-real forefront graphic and the rest of the content.

Culinary Culture

This subtle background texture correlates nicely with it’s dining-theme.

Ate Bits

This one is a bit more obvious. It helps make the website look more “real” – creating the illusion of being able to reach out and touch it.

Now these examples are not to say that adding a textured background is the answer to every great website’s design (see: Vimeo), but maybe the next time you visit a well-designed site, you’ll notice some of the subtleties of its design and even see elements you hadn’t before.

Do you know of any other sites that quietly use textures to enhance their design?

Love to hear you thoughts below!