How to design for social media

OVERVIEW What We’ll Be Covering SOCIAL MEDIASpecifications “ 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 dont own the fields they cultivate, and can be put off the land whenever it ” suits the landlord. Valeria Maltoni, ConversationAgent.com4 © 2010 Luckie & Company.

OVERVIEW What We’ll Be Covering 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. 5 © 2010 Luckie & Company.

FACEBOOKCarving 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 © 2010 Luckie & Company.

FACEBOOKCarving Out An Identity On The World’s Largest Network SPECIFICATIONS Imagery Specs 200x600 520x540 pixels pixels Optimal feature space (can be taller, but loses browser viewability) © 2010 Luckie & Company.

FACEBOOKCarving Out An Identity On The World’s Largest Network SPECIFICATIONS Imagery Specs 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. © 2010 Luckie & Company.

FACEBOOKCarving Out An Identity On The World’s Largest Network SPECIFICATIONS Imagery Specs 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 © 2010 Luckie & Company.

FACEBOOKCarving Out An Identity On The World’s Largest Network SPECIFICATIONSImagery Specs 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) © 2010 Luckie & Company.

FACEBOOKCarving Out An Identity On The World’s Largest Network SPECIFICATIONS Imagery Specs 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. © 2010 Luckie & Company.

FACEBOOKCarving Out An Identity On The World’s Largest Network SPECIFICATIONS Imagery Specs 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/ © 2010 Luckie & Company.

TWITTERBranding the Twitter Experience SPECIFICATIONS Imagery Specs 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 © 2010 Luckie & Company.

TWITTERBranding the Twitter Experience SPECIFICATIONS Imagery Specs New Twitter formatting elements: Toolbar: 40 pixels tall, full width Background: Minimum 1200 pixels wide to fit layout © 2010 Luckie & Company.

YOUTUBEDeveloping 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 © 2010 Luckie & Company.

http://www.thesocialpath.com	1130
http://carbzombie.tumblr.com	16
http://michaelbatistich.com	14
http://tarrask.posterous.com	12
http://socialjenneration.com	8
http://safe.tumblr.com	5
http://christiannenos.wordpress.com	4
http://bytes.fallonhotdish.com	3
http://socialjenneration.tumblr.com	2
http://translate.googleusercontent.com	2
http://depololo.tumblr.com	2
http://twitter.com	1
http://lj-toys.com	1
http://posterous.com	1
https://twitter.com	1
http://74.6.238.254	1
http://webcache.googleusercontent.com	1
http://www.slideshare.net	1
http://207.46.192.232	1

How to design for social media

by David Griner on Feb 03, 2011

Accessibility

Tags

Upload Details

Usage Rights

19 Embeds 1,206

Statistics

How to design for social media — Presentation Transcript