Social Media Graphic (Habitat) – Instructions

On this page (quick links):


Overview

The continued popularity of social media brings with it the need for social media graphics. Many graphic designers are asked to create graphics and banners for their company’s and client’s social media sites.

These graphics include:

  • Highlighted Products
  • Company values and beliefs
  • New employee highlights and announcements
  • We’re hiring!
  • Join us for our open house
  • Product launches
  • Fundraisers
  • Goodwill efforts, good stewardship partnerships, or charitable affiliations the company enjoys
  • Landing a new account
  • Launching a new website or app

The list is endless. In a recent study, social media graphics were the third most frequent project designers reported working on.


Grading Checklist

  • Design one social media graphic for Habitat for Humanity
  • Size: 1080 x 1080 pixels
  • Software: Illustrator, RGB, 72 ppi
  • Stock photos: unsplash.com, pexels.com, pixabay.com
  • Save your final graphic for the web as an optimized 1080 x 1080 pixel .png
  • Critiques: Participate in critiques of your work
  • Presentation: present your final work to the class

4 Levels of Graded Design Work

(Always strive for Client-ready)


Social Media Graphics – Best Practices

  • Follow your client’s brand guidelines
  • Follow pixel dimensions for each specific platform, or use a universal size of 1080 x 1080 pixels (recommended).
  • Highlight one message, topic, or subject only per graphic
  • Use large headlines to grab attention
  • One large photo or graphic to grab the attention
  • Brand your design with your client’s logo, typography, colors, layout, and repeatable design elements.

Design Template (Illustrator)

Download and open this Illustrator template I made so we can review this project together in class.


Tutorial Video: How to create the Habitat social media graphic in Illustrator

This is a video of my in-class demonstration showing how to get started with Illustrator and this design project. It has everything you need to get started, from opening the template, loading fonts, finding and placing photos, drawing vector shapes, and adding and modifying text.

20:07

Download Habitat’s Logos, Fonts, and Brand User Guide

Download the files below and carefully read and understand the brand user guide and its guidelines. Like my example below (family in the house), you can deviate a little from these, but make sure you use the correct logos, font, and colors.


Messages to choose from

  1. Use a message from one of the design examples below, or use:
  2. We are thankful for our volunteers
  3. Every hand can make a difference. Volunteer today!
  4. To our true heroes. Thank you for your service. We celebrate Veteran’s Day in your honor.
  5. To all who served, we are thankful for your service. Happy Veteran’s Day.
  6. Myth: Habitat for Humanity gives houses away. Fact: Habitat homeowners buy their houses with a 30-year, interest-free mortgage.

Examples – From Habitat’s User Guide

The Habitat brand guidelines manual provides several examples of how designers should apply the brand so that everyone’s designs look similar and follow consistent brand guidelines.


Examples – Student Design Work


Export to a web-friendly PNG file

These are the final files that you would deliver to your client (or hand in to me, your teacher)

FIle > Export > Export As . . .
Match the settings above (use your own name), and click Export
Match the settings above, and click OK.
The two new files will be on your desktop as separate PNG files.

These are now optimized for the web and can be delivered to your client and directly uploaded to their social media accounts.

Good Job!