Design it Yourself: Reminder Posts for Social Media

By on May 15, 2020 in Tutorials
Design it Yourself: Reminder Posts for Social Media

If you spend enough time on social media you'll definitely run into them: posts where a brand makes a quote stand out by simulating a phone and some kind of message alert. Because these kinds of notifications are such a natural part of our day, we feel immediately connected to them while scrolling on different social platforms. Mixed up with other types of content, these posts add a casual, conversational touch to your feed.

 

View this post on Instagram

 

A post shared by Later: Social Media Scheduler (@latermedia) on

Got a message in mind? Let's get to work. Thanks to some creative shop owners, you can now replicate this look for your own brand in minutes. Here are some easy steps you can follow to design a social media post that looks like a text or reminder:

1. Decide which mobile Graphical User Interface (GUI) you'd like to simulate.

Do you want this notification to look as though it had been seen in an iPhone, Android, or Windows OS screen? Fortunately, there's a variety of GUI kits to reproduce most mobile operating systems:

For this example, I'll use the iOS UI Kit by Jérémy Paul. Make sure you have access to the app each of these products is compatible with. Many of them are designed to work with Figma, Adobe XD, or Sketch — all apps specialized in UI design. In my case, Photoshop actions were ideal.

After you download the Photoshop action set (.atn) and install any associated fonts, open Photoshop and create a brand new 1080x1080px document. Click on the .atn file included in the product's folder and it will immediately become available in your Actions panel in Photoshop. To open the panel, just click on Window > Action and open the "iPhone UI Kit" folder that is now listed. Clicking on the left arrow will display multiple user interface elements that you can just add to your composition. Select "Alert" and click on play to apply the action.

Save

The initial result will be something like this:

Save

2. Add your own message

Edit the text fields to reflect the message you'd like to share. These actions allow you to change heading, body, and button text easily. The iPhone's interface uses San Francisco, a system font that you can download using the links provided by the seller.

Save

3. Tweak it to fit your brand's visual style

If you've defined a specific visual aesthetic for your brand's feed, you might want to adapt the composition's background and typography. In the example below, @mindbodygreen customized the standard iPhone reminder alert to reflect the brand's font and color palette:

 

View this post on Instagram

 

A post shared by mindbodygreen (@mindbodygreen) on

Here's another example from @planoly where they're playing with the standard Reminder graphic to present information about an upcoming event:

 

View this post on Instagram

 

A post shared by Planoly - Planner for Insta (@planoly) on

In this case, we'll just add a background texture and small logo on the bottom right. Another helpful feature in this UI kit is the ability to "dim" the dark layer behind the notification. After you've placed the background image behind the Alert group, you can set a higher or lower opacity in the "Dimmer" layer to determine how much of the background should come through.

Save

Because I wanted the background graphic to stay as bright as possible, I set that opacity to 0%. Finalize your graphic adding a minimal version of your logo and share away.

Save

Get your free grid template


Download it now

img

Download it now

Design a cohesive Instagram grid

Download this kit to quickly export Instagram shots that match your brand's visual style. PSD and AI files are included, as well as a moodboard to display your brand's assets.

Try something different!

Once you've learned how to use the GUI kit of your choice, the possibilities are truly endless. Play with interface elements and engage your audience with the kind of messages they interact with everyday. File transfers, Tweets, notes, and SMS conversations are just some of the mediums you can use to insert brand messages.

 

View this post on Instagram

 

A post shared by Later: Social Media Scheduler (@latermedia) on

 

View this post on Instagram

 

Sometimes you need a colorful graphic to get the message across

A post shared by Unspirational (@textsfromyourex) on

You can even take this a step further and replicate user interface elements from other popular applications like Spotify, Instagram, or Facebook. These kits make it possible:


Products Seen In This Post:

Get your free grid template


Download it now

img

Download it now

Design a cohesive Instagram grid

Download this kit to quickly export Instagram shots that match your brand's visual style. PSD and AI files are included, as well as a moodboard to display your brand's assets.

3 Comments

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →