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
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.
The initial result will be something like this:
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.
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
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
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.
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.
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.
Download it nowTry 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
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:
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.
Download it now
Brand strategist. Creating design tools to empower creative entrepreneurs. Author of the Lean Branding book. MA in Design Management from the Savannah College of Art and Design (SCAD).
View More Posts
