Designing Social Media, Pt. 1
Most of us use social media to promote our personal brands or companies. But have you taken into account that your social media profiles should be designed to represent your brand just as well as your website? I was able to attend a lecture recently about designing for Twitter and Facebook, so I'd like to share what I've learned with you.Before I dive in, I'll make a few disclaimers. One, the reason this is titled "Part 1" is because I only want to talk about designing for Twitter in this post. Facebook is much more complicated and I haven't played with it enough to feel comfortable talking about it yet. Two, I haven't updated my Twitter design in a while so don't look at mine thinking you'll see a shining example of how to utilize these tips and tricks. I'll provide links to some folks who've made their accounts all spiffy so that you can admire their work.
Read on true believer...
Read on true believer...
OK, first of all let's talk about that Twitter icon of yours. Twitter displays 150x150 pixel squares on the main timeline. You should be able to crop your image when you upload it, but if your image is nowhere close to a square it may become distorted. Just to be safe, I recommend designing in a square if possible, around 300x300px. Uploading a larger picture is good in case someone clicks through to see a larger version of your image (you'd hate to disappoint them!). Here's a look at all the different sizes Twitter can display. One is my profile header pic; below it is the timeline pic; and to the right is the actual size of my picture if you click through.
The
next step is designing your Twitter background. Many of you may not be
aware that Twitter has revealed a complete redesign of their site. Lots
of us use apps either on our phones or desktops and forget to ever check
out the actual Twitter homepage. This new design means that lots of
your backgrounds (mine included) now look pretty rough.
No
worries though, you just need a quick and effective redesign. There are
several ways to do this, and not all of them require tedious Photoshop
work. A good article that lists some of these Twitter design programs
(as well as breaking down the design changes pixel for pixel) is HERE on mashable.com. NERD ALERT:
this entire website, including this article, is very "techie" and if
you aren't used to designing things for the web some of it may not make
sense. Please ask me in the comments if you don't get what they're
talking about, and I will do my best to put it in plain English.
If you are going
to dive into a custom Photoshop-based design, I would highly recommend
downloading the guidelines they've so graciously provided at the end of
the article. The new fluid layout Twitter is using will make it
difficult to effectively repeat a background, so here's a trick that David Sparks
(@DigitalSkraps, @CS2Interactive) told us at a lecture I attended. All
designs that you upload are automatically aligned to the top left of the
browser window. Your design will be better preserved if you keep most
of your design elements (pictures, text, textures, etc.) on the left
side of the page. David's profiles utilize this technique very well,
check them out HERE and HERE. Or, scroll down.
David's
profile image is huge. If you don't want a huge image, make sure that
where your image cuts off you set a background color that matches your
image in some way. If you can't make the colors the exact same, at least
make them in the same palette. Don't be this guy:
You
may be wondering why you should worry about alignment, and would it not
be easier to just tile whatever image you want to use? Yes and no. With
tiling images on Twitter, the fluid layout makes it difficult to
predict how your image will tile. I personally am not a fan of visible
seams in a tiled image, and I feel like it can be a little busy and
rough on the eyes when someone is visiting your profile. If you are
going to use a pattern, make sure that it tiles seamlessly. This is NOT
easy. If you just want a bunch of tiles of your logo, then yes it's
easier. But that's no fun! Here's an example of super fun tiling from my
buddy Will Bryant:
Push the boundaries of the design constraints of Twitter, and let me know what you come up with in the comments.
For more resources on designing for Twitter or other social media sites, here are a couple of good places to go:
NERD ALERT 2: these two websites are very, very nerdy. But awesome at the same time. Good luck and have fun!

Leave a comment