how to design for social media

© 2010 Luckie & Company.

page 1


page 2

FACEBOOK TWITTER YOUTUBE QUESTIONS

OVERVIEW


page 3


OVERVIEW How Is Social Media Like Sharecropping?


OVERVIEW What We’ll Be Covering

4

SOCIAL MEDIA Specifications

In a way, businesses working social media channels are sharecroppers. So are all the users.

They labor on the services, both creating and receiving value. But they don't own the fields they cultivate, and can be put off the land whenever it suits the landlord.

“ ” Valeria Maltoni,

ConversationAgent.com


OVERVIEW What We’ll Be Covering

5

SOCIAL MEDIA Specifications

Outside of blogging, few social media channels offer great flexibility in design.

We’re left to make the most with what we have — and adapt as we must.


page 6


OVERVIEW Carving Out An Identity On The World’s Largest Network


FACEBOOK Carving Out An Identity On The World’s Largest Network

SPECIFICATIONS Imagery Specs

Facebook offers three major areas for design customization:

• Profile/page image • Icon/avatar • Custom tab apps


FACEBOOK SPECIFICATIONS Imagery Specs Carving Out An Identity On The World’s Largest Network


200x600 pixels 520x540 pixels

Optimal feature space

(can be taller, but loses browser viewability)



Profile icons (or avatars), which are used with each of a Page’s status updates, are cropped from the main profile image.

So it’s important to plan carefully for where you want your profile icon to “live” in the main Page image.



176 x 176 pixels

No matter where you place the profile icon in your Page image, be sure to leave a 12-pixel border around the logo to prevent the edges from being cropped.


176 x 176 pixels


FACEBOOK EXAMPLES Examples of Brand Imagery Carving Out An Identity On The World’s Largest Network



Of course, you can always pick another part of your image to be your icon.

EXAMPLES Examples of Brand Imagery



Some other pages worth following:




Big names that have done surprisingly little with their branding:




Facebook advertising is another channel with strict limitations on design and copy.




Headline: 25 characters (including spaces)

Destination URL: Only listed if it links out of Facebook.

Image: 110 x 80 pixels max.

Body copy: 135 characters (including spaces)




Facebook appears to be phasing out the “vertical” ad design (image above copy) in favor of the horizontal layout previously used in premium ad buys.

However, the specs remain the same.




Best practices:

• Faces perform best • Shorter copy is better • Keep viewers in Facebook • Promotions, freebies and events perform well • Drive “Likes” by explaining the benefits you offer • Ask questions


Samples via http://blog.wildfireapp.com/


page 31


OVERVIEW

Branding the Twitter Experience


Twitter is even more limited than Facebook. Your design elements are whittled down to:

• Background • Icon

TWITTER Branding the Twitter Experience



Twitter’s background specs:

• 800K file size limit • Can be tiled or top-left justified • Can customize colors for background, text, links, sidebar and sidebar border






New Twitter formatting elements:





Toolbar: 40 pixels tall, full width

Background: Minimum 1200 pixels wide to fit layout





Tweet stream: 540 pixels wide

Sidebar: 380-500 pixels wide 75% opacity


page 40


OVERVIEW

Developing an Effective Brand Channel


YOUTUBE Developing an Effective Brand Channel

BRAND CHANNEL YouTube Channels Explained

Unfortunately, YouTube reserves most of its branding opportunities for high-dollar ad clients ($250K+)

Otherwise, your design choices are: • Background (256K maximum file size) • Icon (can be pulled from video still) • Color scheme • Video still selections



EXAMPLES Branded and User Channels Examples

Branded:



STRATEGY Broaden the Reach of Social Programs

CAMPAIGNCHANNEL

BRAND CHANNEL

FPO FACEBOOK FANPAGE

VEHICLE PAGE




Branded:




Unbranded:


page 48


OVERVIEW

Fire Away


page 49

THANKS FOR YOUR TIME

David Griner Director of Digital Content Luckie & Co. TheSocialPath.com Twitter.com/Griner

how to design for social media

Documents