A few weeks ago, we covered the essential stages behind the website design process. But what about social media, another integral facet of your digital advertising campaign? The vast majority of social media platforms not only encourage attractive imagery, but they display it in a way that makes graphics a vital component of your social page. Well designed images that are made purposefully for social media, can expand your campaign beyond your wildest dreams.

In this first part of our three part series, we’re going to be focusing Facebook, specifically the often notorious cover photo. As many of us have most likely found out at some point, designing the perfect cover photo for your Facebook page can be a frustrating experience. Optimising your ideal design to fit the constraints that have been imposed, luckily, is relatively easy with a little, helping hand and a few key figures.

The basics behind the cover photo

Facebook’s cover photo was implemented in late 2011. It was designed to allow individual persons and businesses to better display their images. At the time, the 851 x 315 pixel size of the cover photo was actually quite generous. However, bigger screens and better pixel detail has meant that, due to the size of the cover photo space having hardly changed, that it can seem quite small by today’s standards.

There is still plenty of room to work with, however, this despite your display photo now overlapping a portion of the cover space. Maximising this space to its full potential can not only make your page more attractive, but can also increase your likes and enquiries on an organic basis. How is that possible? Let’s have a look at a diagram of the various components that make up the cover photo once it’s uploaded.

cheat sheet

This is how your cover photo appears to others. The black box in the bottom left corner is where your display picture is. The red marked area is where the text describing your company name, and which industry it works in, is placed. This area is largely unusable to us due to the text, unfortunately. Combined with the overlapping display picture, this unfortunately limits the workable space of your cover photo.

So that leaves us with the green shaded area, which is the available space that we have to play around with. As you’ve probably noted, it looks rather trimmed down, compared to a blank canvas, and we’ve lost roughly a quarter of the image space from the initial dimensions. However, it’s the placement of the workable space that gives us the best chance to maximise this image’s potential.

For instance, let’s look at the action buttons that Facebook supplies, contact, like, and message. These three buttons are pivotal to the success of your social media campaign, as it is from here that we gain our audience and our enquiries. One great thing about these buttons is where they are placed, and the available space that we have around it! It gives us a great way to highlight these action buttons by drawing attention to them through visuals. Let’s get to it then!

How to approach your design

Along with the space provided to highlight these call-to-action buttons, there are also a few essential things that you need to consider before we can begin designing. The first one that is often overlooked is that of placing your logo onto the actual cover photo. The mechanisms that make Facebook work occasionally display your cover photo as it is, and disregard your display picture.

This means that any beautiful photo that you create without some part of your identity will be ineffective in these cases. Some instances where this occurs are:

  • Page suggestions.
  • Page promotion ads.
  • Call-to-action promotion ads.

Now that we’ve got that out of the way, let’s see what we can do.

cheat sheet example

You may remember our made up construction friends – UCC – from our article on the importance of fonts in logo design. We’ve borrowed this logo again, and have incorporated their slogan over a flat ribbon design. You will see that we have also mirrored this ribbon look just above the call to action buttons. Creating the cover photo in this way, where there is more visual weight on the right hand side of the picture, forces us to turn our eyes to this area.

You can also see that I have used a slightly altered logo for the display picture. This is done to avoid repetition. If you are fortunate to have a alternative brand logo, definitely use it. If not, try to capture the most predominant part of your logo, and use it that way. This can be anything, from the first letter of your company’s name (as we’ve done here), to any graphical detail that is incorporated into your logo.

What else can I do to enhance the image?

  • Use of the available space that you have, leave nothing bare!
  • Try to keep text on your cover photo to less than 20% of the image. This will make your cover photo comply with Facebook rules, should you look to promote your page.
  • Try to use shades of the colour(s) that are found in your branding, as we’ve done here.
  • Play around with different typefaces.
  • Don’t be afraid to use layering techniques in Photoshop to build a visual heirachy.

The great saving debate

So you’ve finalised your design and it’s all ready to go, great! You’ve now come to the most important part of the process: saving. Unfortunately for us, Facebook (along with all the other, major social platforms, it must be said) use a heavy JPEG compression mechanism for all photos uploaded. This means that your incredibly sharp and attractive image will now have JPEG artifacts on it (those little squares that appear), should you upload it.

At ITCC, we prefer to use another type of image file, PNG. PNG is an evolutionary child of the old GIF format, and supports lossless compression. This means that, no matter how hard Facebook tries to compress the image, it will not lose its clarity. Best of all, PNG’s can be fine tuned much more efficiently to be lower in size. It’s also important to make sure that you “save for web”, as opposed to just saving.

Let’s open up the save for web dialogue box and have a look.

save-example a

You will notice that PNG files are available in either 8 bit or 24 bit. 8 bit, whilst still retaining a lot of information, still risks compression artifacts. Make sure to save the image as 24 bit.

save example b

The next step is to make sure that we select a smaller colour profile to limit the file size. Colour profiles are important, as they optimise the colours in the image to display as intended on various sources such as paper, photographic paper, and computer screens. We use sRGB, which is a common colour profile used in the web design industry. We’re also making sure that the preview we’re using is “Internet Standard”, giving us a clear view of our image.

save example c

You should always aim to make sure that your PNG file is less than 380 for a cover photo.

The moment of truth

Now that we’ve saved it, it’s time to show the world our brand new cover photo. Here’s an example of what we’ve done when finally uploaded.

cheat sheet final

If you’ve done your measurements right, any highlighting of the call-to-action buttons you’ve created should show up perfectly. To test whether you have, try to reposition the image with your mouse. If it doesn’t move, then that means it has perfectly fit itself to Facebook’s cover photo constraints. We also aligned and sized the business logo to fit nicely above the display picture, allowing it to have breathing space so that both can be seen clearly.

We hope you enjoyed our first article. Next time, we’ll be talking about optimising both the cover photo and the unique, circular display photo for Google+. We’d also be keen to hear about what you’ve done for your cover photo, so share your ideas with us below!

A few weeks ago, we covered the essential stages behind the website design process. But what about social media, another integral facet of your digital advertising campaign? The vast m...

Read More