Social Media Dimensions Guide (+ Other Digital Assets)

Sometimes, in the modern marketing world, strategy and content can only get you so far. While many of us in pursuit of a strong market presence don’t have much experience with digital design, it goes without saying that powerful imagery can often be the missing link between your content and your audience’s attention.

As a designer, I’m able to spend the majority of my time optimizing visual content for ads and other attention-grabbing digital assets, such as CTAs and web/email banners. 

I’ve developed a few “best practice” ideas and guidelines for myself, as well as a handy Digital Ad/Asset Creation Template for Adobe Illustrator, and I thought they might be worth sharing.

Best Dimensions for Social Media, Email Banners, and Web Graphics

Here are the common dimensions optimized for popular platforms you’ll be using:

• Instagram Ad: 1080 x (566 to 1350) 
• Twitter Ad: 1200 x 675
• LinkedIn or Facebook Ad: 1200 x 627
• Vertical Call to Action: 200 x 600
• Horizontal Call to Action: 600 x 200
• Email Banner: 650 x 150

Below is a quick graphic I created to denote these dimensions that you can print out or save for future reference:

Each platform has its own image standards and content display setups, and each is worth paying careful attention to. After all, you wouldn’t want to post a visual ad to Facebook only to find that half of it has been automatically cropped off due to image size restrictions.

It’s important to note that these dimensions are only recommendations, based on maximum image sizes. You can find a more detailed breakdown of the restrictions for each platform here.

Note on CTAs: Feel free to make them smaller, or to change their shape entirely. Some CTAs are hardly more than a button, and that’s totally fine and can be highly effective. 

I tend to work in large rectangular dimensions for my CTAs because I like to afford myself some space for information and accompanying graphics if I need it, but they can always be resized and reshaped to meet your specific goals. Spotify, for example, makes great use of large square CTAs on their desktop app but prefers small rounded buttons for their website.

Social Media Ad Dimension Template + Other Digital Graphics

I love Adobe Illustrator. I find that it’s capable of tackling nearly every task I put it to without much trouble at all, and the interface has quickly become one of my favorites among the numerous productivity applications I’ve worked with.  

But for those of you that don’t have access to Adobe software, there are a few powerful alternatives:

1. Snappa

Snappa is a versatile online graphic creation tool that uses templates created by professional designers. It’s one of the more “fleshed out” drag and drop designers that I’ve seen, and it’s used by influencers and companies far and wide. They offer a free plan and two monthly subscription plans for you to consider.

2. Canva

Canva is a similar service that offers simple drag and drop controls for both graphic and publication design, with its own long list of templates to work from. They offer a free version with a few limitations and a paid Pro version.

Without further ado, here’s a look at my Asset Creation Template for Adobe Illustrator, which you can download and begin using for yourself below. 

(This file is always evolving to meet our needs and to better streamline my workflow, so I’ll be revisiting this blog from time to time to ensure that you’re getting the most up to date template we can offer.)

As you can see, it provides an appropriately sized workspace for a number of different online graphics, and spaces to house your most important design assets and color information for maximum consistency. You might even recognize those “Download” buttons from a few of the CTAs scattered around our site, I like to keep my most commonly used design elements on hand.

I start my process by adding images of the content I’m advertising into the Content Reference section. 

For example, I make a lot of e-books, so I might put the cover page and a few of the more graphically involved pages into that box. 

From there, I pull some of the key colors into the boxes below using the eyedropper tool, and isolate some design elements, logos, or even key words and phrases (properly formatted), into the Design Assets section to be used consistently throughout each graphic.

Note on Illustrator: Adobe Illustrator is a "vector-based" software, equipped for web and print design, that uses behind the scenes calculations to generate images. This differs from "raster-based" editing software, which stores image information in individually colored pixels.

Using scalable vector graphics, Illustrator can handle resizing without any loss of quality, which is great, but it can lead to some uniquely confusing situations.

Pixel density is arbitrary. Every inch contains 2.54 centimetres, but it's up to you to decide how many pixels should occupy that same inch using a cleverly named metric known as PPI (pixels-per-inch).

Creating an image that look good on screen is all about matching the exported resolution to what the screen is capable of displaying. In short, web graphics look best at 72ppi. In... long, I strongly recommend reading this article from Adobe to better understand the metrics involved.

It’s Time to Build Your Graphics!

At this point, you’re ready to start exploring your options and designing your assets. If you find yourself using the same graphical element repeatedly, add it to the Design Assets box. It could prove useful for other assets down the road. 

If you’re hitting a creative roadblock check out your Content Reference, see if you can draw any inspiration from the source material. 

I designed this template in an effort to keep everything in one convenient place, and to take the mess out of image dimensions, consistent graphical elements, and content referencing. If this sounds like something you could put to use, then download my template below!

Having trouble opening your template? Make sure you have Adobe Illustrator installed.