Using Facebook and Twitter as a guide, the student will gain understanding about finding balance when creating graphics for social media that display effectively for different devices.
- [Narrator] Balance can be applied to web design by paying special attention to the alignment, distribution and placement of the various shapes, colors and different sized objects in your design. Balance occurs in a design when the elements as a whole have a feeling of equality of weight, attention or attraction. The same principle applies to creating the social media graphics. For a business to project a unified brand or image to visitors, they must have a strong profile pic or avatar, and an equally interesting header graphic which is sometimes called a banner or a cover image.
For the profile picture, using balance is pretty straightforward. Most often the profile image will be a centered company logo or a mascot or a similar branded graphic. If the business is a sole proprietorship, an LLC or some other small business entity, a photo of the business owner or a key spokesperson is also common practice. Try not to use some random picture or clip art, a quote that's too small to read or any photo that's difficult to interpret, or do nothing at all, leaving the profile area blank or showing whatever the default graphic might be.
Also realize that the image is going to be scaled to smaller sizes depending on where it's used in the app interface. So ideally, it should be easily recognizable from its maximum size, down to about 24 pixels square. As of April 2016, here are the recommended sizes for profile images in the most popular social media apps. As you can see, they range in size from about 110 pixels up to about 800 pixels square. With profile pics, your main concerns are brand recognition and scalability.
With header graphics, you'll want to consider variables like cropping, scaling and orientation to achieve balance across all devices. To illustrate, let's compare the recommended header image sizes for Facebook and Twitter. These numbers are deceptive because like a website, visitors to social media will access the page from a variety of different devices, and each device will crop and scale the header graphic differently. Let's take a closer look. On Facebook, the current recommended size for your cover images, is 828 by 314 for desktops, and 640 by 360 for mobile.
While it might seem that the smartest thing to do would be combine these dimensions and make one image that's 828 by 360, the image might still get cut off on some devices. For this reason, I recommend using 828 by 462. This will scale best for most devices. Just remember to keep the most important information in the middle. For best results, you'll save you graphic as a PNG or a JPEG file, strive to keep your file size under two megabytes if you can and definitely upload your image to Facebook on a desktop computer instead of using a mobile device, to avoid those jaggies that are caused by the platform's mobile image compression.
Now, for Twitter, the current recommended header image dimensions are 1500 by 500 pixels with a five megabyte max file size. According to Twitter, up to 40 pixels on the top and the bottom of your image, could be cropped on mobile devices. So, like Facebook, it's best to use the inner 1260 by 420 as your mobile safe area, while making sure to keep the most important information within the 1260 by 332 bounds.
Like the title and action safe areas in graphics for television an film. With social media we have what I call the mobile safe areas. You want your image to extend into these areas, but have those parts be less relevant or important in case they get cut off or covered up. Here are three rules of thumb to keep in mind when creating graphics for social media. Keep the important information in the middle of the frame. Use content-aware scaling and/or content-aware fill to expand you background image to fill the frame.
Add marketing copy to areas where it won't be obscured by any profile pictures or any overlaid text. By following these rules of thumb, your images should scale beautifully across a variety of internet-enabled devices.
- Understanding aesthetics
- Picking harmonious colors
- Structuring your layout
- Using space to organize your design
- Communicating with the right fonts
- Aligning objects to achieve balance
- Adding movement with scrolling and animation
- Achieving proportion by scaling objects and text
- Creating CSS for different devices