That’s all well & good, but what about those of us who want branded pages? What do we do now? What does VaynerMedia tell our clients to do? No longer can we fit the amount of branded information we previously could – there just is not enough space. Take a look:

My Twitter profile when viewed through old Twitter:

My Twitter profile when viewed through new Twitter:

It’s quite clear that the branded backgrounds we created for our Twitter profiles last year are no longer effective or attractive with the new layout. And the backgrounds we’ve created for clients won’t work either. So what do we do? It’s not quite as simple as when Facebook resized their pages from 760px to 520px.

We’re not sure what we’ll do in light of Twitter’s layout changes and we’re not sure what we’ll recommend for our clients. But either way, it does not make sense to make background changes until the new layout has been rolled out to everyone. So, there’s still some time left on the clock. Keep an eye out in the coming weeks to see what we do (possible follow-up post to come)!

What are your thoughts? Are you planning on changing your background? What would you recommend brands do with the limited space they still have left?

Note: Overall, the new Twitter is a good move for brands, both consumer and personal. The changes will keep more users on Twitter.com rather than on third party applications. Search is easier. Trending topics are easier to see. But, I haven’t had a chance to mess around with it too much yet, so “New Twitter’s Implications for Brands” will have to wait till another day.

Be sure to stay tuned for the next blog post highlighting some of the basics of the Text Tool. While your waiting, be sure to go back and mess around with all the things that you have learned.

7. Delete and Duplicate Selections

There are two major flaws when you cut, copy, and paste selections:

1. Once you cut a selection from a layer, the area you had selected goes away. This can be annoying when you want to cut the same selection from multiple layers.
2. When you cut or copy and then paste a selection, any blending option or layer styles you had on the layer do not carry over.

• When cutting a portion from multiple layers, you should use delete rather then the cut method. This will preserve the area you want to delete.
• When you want to copy a layer selection and retain layer styles, you can simply select the area you want to recreate and simple duplicate the layer (Cmd or Ctrl + J) and it will retain the styling you had on the source layer.

Snapping to Pixels

While anti-aliasing is wonderful and can help make things pretty, it can also have an adverse effect. There is a right and a wrong way to deal with it:

Photoshop offers a feature that can help you circumvent this problem – snap to pixels. When creating a new shape layer, Photoshop will automatically start you off on a whole pixel, allowing you to create perfect lines. To turn this on:

Although snapping to pixels won’t solve every anti-aliasing problem you run into, it will at least give you a strong starting point when designing with shape layers. If you continue to run into this problem, pick your Direct Selection Tool (A), grab the shape layers points and manually drag them into place. Being mindful of this will help you become more observant as a designer.

This post was more or less a reverberation of one of my previous articles, Web Design Subtleties, where the attention to detail is major play in making a design really sing.

If you like to learn more about anti-aliasing, click here.

When branding a Twitter account, designers are very much at the mercy of different browser window sizes. Often, designers will focus on branding the left gutter of a Twitter page since that has the highest chance of visibility across different browser sizes, while ignoring the right to avoid losing branding on variable monitor sizes.

My Wish

This thought process has lead me to an interesting thought: What if your Twitter page remained in place? Say, for example, set to the left of the browser? If it remained fixed, designers would know exactly how much room to work with and they would be less concerned with the content stream partially covering their design. I think this would allow for more interesting designs like these:

@felixxxthedj

@gaksdesign

@adamplitt

These are all wonderful examples of engaging Twitter backgrounds, however as the browser window is made larger, much of their impact gets lost. Hypothetically, if the Twitter feed remained in place, designers would be less limited and could really go wild.

Your Thoughts

Be sure to stay tuned for the next blog post highlighting some of the basics of the marquee tool. In the meantime, be sure to keep on trying out the current feature set you know.

8. Selecting Multiple Layers

Grouping layers is important in Photoshop, but you don’t want to end up with too many groups. Being able to select multiple layers on the fly is very important. You can achieve this in 2 ways:

• In the layer window, you can hold shift and select multiple layers across a span. Holding Ctrl for Windows and Cmd for Mac while clicking on a single layer will either select or deselect it within your selection.
• As mentioned earlier, holding Ctrl for Windows or Cmd for Mac while clicking on the canvas selects a layer, but you can also select or deselect multiple layers by holding the Shift Key.

My mom is a creative director for a healthcare communications agency in Philadelphia. Not only is she a fantastic designer, but she really knows how to work with coworkers and clients to create a powerful message. Ever since I started to show an interest in communication and marketing, my mom has constantly stressed three simple rules, rules that she says far too few people think about.

1. Who is your target audience?
2. What is the message you want to convey to them?
3. What do you want them to do (call to action)?

Sounds pretty fundamental, right? In fact, it seems insane, that anyone would send an email or launch a campaign (or release anything, for that matter) to the public without knowing the answers to these three questions, at least on a subconscious level. However, we constantly see messaging that is a little “off” because their creators don’t truly do their due diligence. Are you speaking to the right audience? Do you even know who your audience is? Are you sending the proper message? Are you clearly telling the audience what you want them to do?

We live in a world of information overload. There is just too much out there to process it all. Companies are wasting millions and billions of dollars on ineffective messaging, and it just doesn’t make any sense.

Take a step back. Do you take the time to think about these questions, in some form, before you write an email, a term paper, or create a national advertising campaign? It’s ok if you don’t, but I hope this post helps you start. Also, thanks mom! I love you!

Enough waiting… LETS GO!

3. How it Works

We all understand that the concept of the Move tool is for moving elements (layers and groups of layers) around the workspace, however, there are 2 ways to move things; dragging the mouse and using the arrow keys.

• Dragging elements will move them exactly as your cursor moves. If you hold Shift while dragging, it can lock the movement at 45-degree intervals in any direction (I only really use this to limit horizontal or vertical movement).
• If you’re using the arrow keys, you can move elements one pixel at a time, in any direction. Holding Shift simply makes it 10 pixels at a time.

Categories (Color-Coded)

All of us here come from different backgrounds, armed with different skills and experiences. And so do our readers! That’s why we’ve attached highly-visible color-coded category tags to each our blog posts. This should help users skim through content and find interesting topics faster. If you don’t feel like browsing, we’ve also included a search bar!

Bigger Photos and Text

We’ve also included bigger photos for faster skimming and quicker topic recognition. Keeping with that theme, we’ve also increased the font-size and line-height within each article to help reduce eye fatigue on those longer reads.

Beefed-up Sidebar & Comments Section

We’ve ditched our static sidebar for one that displays useful and relevant content for our users. For example, we’ve capitalized on some of WordPress’s built-in plug-ins by including a “Related Posts” and “Most Commented On” section. Additionally, we’ve rebuilt our comments section using Disqus, giving users the ability to “Like” comments, among other features.

Authors

There will also be an ‘About the Author’ section in the sidebar and at the end of each post. By doing this, we hope to bring as much transparency and accountability to each of our contributors. It could also help put a name to a face when we meet each other!

In Conclusion

We’d love to hear your feedback on the changes! Is there anything you think we’ve missed or you’d like to see? Expect to see these changes to go live very soon! Drop a comment below.

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.

As you may have heard by now, Facebook announced in October that they will be making major changes to all existing fan pages by “late ’09, early ’10.” Much to the excitement of online marketers everywhere, Facebook is rolling out with a new e-mail API that will allow organizations and business to directly collect user e-mail addresses. Facebook will also be getting rid of the boxes feature, as well as cutting the maximum width of their custom Facebook tabs from 760px to 520px, essentially forcing developers and designers who work on Facebook (like me) to retroactively re-do all of our previous, wider-than-520px, work on Facebook. Not fun.

So how do us designers and developers prepare for this unmistakably annoying task? Well, over the past few weeks, the crew here at VaynerMedia have bit the bullet, and converted nearly all of our clients’ Facebook pages to the appropriate size, free of cost. The following are some insights into our process of converting existing tabs to fit the new format, and how we’ve prepared for the upcoming storm.

What a Disaster!

Upon first hearing the news – our design/development team thought the process would be an absolute mess… and rightfully so! Our meticulously planned layouts and images were suddenly going to be snuffed out by some arbitrary decision and inexplicitly vague deadline. Plus, we were going to have to go back and redesign all of our previous work. We didn’t have much time, either, as we still had a full slate of current client projects that needed to be taken care of in the upcoming weeks.

However, as we began the process of redesigning, we noticed the workspace reduction wasn’t as severe as originally thought. In fact, with a workspace reduction of ~30%, we were actually able to tighten up our interfaces in some areas, while still allowing enough pixels to allow our designs to breathe and maintain their clarity (with a little adjustment of course.)

Rollover to see the size change with Gary’s Facebook Tab. The pink color indicates the 520px mark. (This is not to size – find the link below for a .PSD of the custom tab)

Here are a few things we’ve learned through the process:

Compromise (the right way)

As your content is getting squeezed, it will tend to get pushed down and your custom tab will become elongated. If you had plans on getting a lot of content above the fold, you’ll have to come to terms with that not happening. However you may treat this as a positive, as this may serve as an opportunity to consolidate and boil down your content.

For example, with our client, Sunshine Suites (P.S. If you’re looking for affordable NYC office space, these guys are Crushing It), you’ll notice we had to remove the navigation of the original Facebook page and focused, instead, on a single introduction video with a clear call-to-action inviting the user to Sign Up Now for more information. This ultimately provides a more enjoyable and easily digestible user-experience. By being forced to work in a smaller layout, we were able to consolidate and boil down what was most important, rather than what would otherwise be considered a compromise.

Rollover to see the how the the new size looks above the fold. The old size is the tab zoomed out.

Putting the Time In – Do You Expense the Client?

There’s no way getting around it – you’ll have to put the time in to accommodate these changes. If you’re working for a digital shop that includes some sort of maintenance retainer in the contract, your costs will be covered for the most part.

However, what about freelance designers and developers, do they revisit the work they’ve already completed, possibly months ago, to restructure their work for free as an added value proposition? Or do they charge per project? How will clients react to this change? An interesting metaphor comes to mind: If a customer buys an SUV, and gas prices go up, would the customer be justified in going to the dealership to demand they install a more fuel-efficient part (restructured Facebook tab) in your car for free? Probably not. I believe that the ball is in our court (as well as other digital agencies) at the moment.

How to Prepare for Next Time

In the event Facebook decides to reduce their custom tabs again in the future, it helps to be a little more prepared. One thing that helped ease the process along was keeping Photoshop layers organized (I know, how many times have you heard that before?). In doing so, we were able to target and resize big chunks of information quickly and efficiently.

Also, from a client-relationship standpoint, accounting for the uncertainty of Facebook and all other social media platforms should be made in future contracts. In writing, it should be made clear that in the event something like this happens again, certain actions should be taken. Perhaps, a redesign/implementation should be offered at a discounted rate? Or perhaps those costs are covered within a monthly retainer?

In Conclusion

Most of what I’ve discussed is still up in the air, as we don’t actually know what exactly will happen to existing custom Facebook pages. Will custom content be distorted or completely cut off? Perhaps Facebook will provide vertical and horizontal scroll bars to allow you to see content not yet converted to the 520px model?

Either way – it never hurts to be prepared. The best way to get through this is to give yourself enough time to implement and learn from this challenge. Adaptation and problem solving is what us designers and developers do best.

What design hurdles have you had to overcome with Facebook’s pixel downsizing?

For your convenience, I’ve included a simple 520px width Facebook template for download to make your transition process just a little easier. If you have any questions, concerns, or just want to bitch about Facebook, shoot me an e-mail or drop a comment below!

The following list the top 10 things I wish I had known before I had started. The only other bit of knowledge I’d like to leave you with, before you begin your journey, is the following:

Using Photoshop is a skill that evolves and takes time; don’t get overwhelmed. There are many sources of knowledge and you are only limited by your thirst. The best approach is to just get your hands dirty.

1. User Interface

One of the most important things that users tend to overlook is optimizing their workspace. This applies to any application, program, or web tool you may use, and Photoshop is no exception. With the vast number of features available, it’s very important to make your most frequently used tools easily accessible. As you gain experience, the number of tools you’ll need readily available will grow over time, and so, too, will your environment.


In my personal experience, the most important windows are Navigator, Layers, and Character/Paragraph. Within the application frame, make sure that Tools and Options are displayed to fully utilize the potential of the tools. These features, as well as others, can be hidden or displayed using the Window menu. Once you have set up your interface, make sure to save the workspace.

2. Shortcuts

Whether you use Photoshop sparingly or routinely, keyboard shortcuts will help increase your productivity and ease of use.

The following are some workspace shortcuts to get you started on your way:

• Within the workspace, there are 3 different screen modes; Standard Screen Mode, Full Screen Mode with Menu Bar, and Full Screen Mode. The keyboard shortcut to switch between screen modes is simply ‘F,’ for both Windows and Mac. Personally I prefer the second option (Full Screen with Menu Bar), but it’s purely a matter of preference. It can also be accessed by clicking the View menu.
• Sometimes the best environment is no environment. To toggle off and on all the windows and tools, use the ‘Tab’ key, on both Windows and Mac.

7. Do It Yourself

Although Google is a great tool, doing things yourself provides critical learning experiences. There are many open source, free-for-use, elements that other designers have provided, and for time-sensitive projects, it’s completely fine to use these resources. But when time permits, I always try to recreate them with my own personal touch. The benefits of this are two-fold:

• Versatility – What if you’re using open source icons, but you need one that isn’t included? If you reproduce them yourself, you can use them for any situation.
• Learning – Figuring out how something is done takes effort, however, the experience you acquire along the way far outweigh the costs of time and stress.

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!

Correct Page Titles

When the user clicks through to a page, it should be abundantly clear what page they are viewing.  Best way to do this?  Give your page a title!  Place it on the top left corner of the page; make it the first thing people see.  Try to avoid ambiguous titles, because they’ll just confuse the user.  If you have an ‘About Me’ page, just title it ‘About Me.’  No need to go crazy.

If you’re using WordPress to run your site, this tip should be especially easy to implement.  Just go to your Dashboard, click through to Pages and edit the name of the page you wish to change.

Simple Slugs

From WordPress: “Slugs are usually a URL friendly version of the post title…. Slugs are meant to be used with permalinks as they help describe what the content at the URL is.”

Slugs allow the user to preview links before they click it.  If I share this link with you: 45royale.com/blog/ you’ll probably be able to guess that it’s a blog.  A simple slug takes the guesswork out of navigating links and makes your URL easier to share.  Remember, usability is all about driving user actions.

Go into your WordPress Dashboard and click Edit Page.  Below the page title you’ll find the page URL.  By default, they should both have the same name.  Leave them that way.  Hopefully, the title of your page clearly describes its contents, but if not, that’s okay – you can always change it.

Optimize Clickable Content

If something can be “clicked”, it should be made obvious to the user.  This process can be surprisingly difficult to refine, but there is one quick step you can take to help optimize your clickable content: Make your links look consistent!

This means they should all look and act the same, especially in their “hovering” and “clicking” states.  They should also be starkly different from non-clickable text.  (For example, make links bold, or a different color.)  When users hover over links, give them a different color or use an underline.  If your site’s links are obvious, there will be less user guesswork, which means less user frustration and a better overall experience.

Even if you’re not a developer, I would try to spend a few minutes scanning through your CSS and playing with your a, a:hover and a:visited tags.  (If you’re not sure what I just said, check out this. Firebug, an HTML/CSS debugging Firefox extension, is a great way to play with your markup.  Once you make changes, you can easily update your WordPress CSS by clicking Edit page > Appearance >  Editor and by opening your CSS file in the right column.

For more (detailed) articles on web usability, please check out:

25 Incredibly Useful Usability Cheat Sheets Checklists

10-ux-blogs-you-should-be-reading