Facebook Mobile Mockups (PSD)
Last Updated on August 4, 2026 by Editorial Team
Today we have another set of Facebook mockups that includes three mobile screens (.PSD format): Facebook Feed, Facebook Profile and Facebook Fan page.
Created and released for free by Marina D. Enjoy!
Look closely at the profile screen in the preview and you can see how much care went into replicating the real Facebook mobile interface rather than just faking it.
The status bar, the search field with the rounded pill shape, the back arrow, the Messenger icon in the corner, all of it sits exactly where it does on an actual iPhone running the app.
The sample content, a cover photo of someone journaling in bed, a bold monogram placeholder, the name “Marina Dillaco,” the Friends/Following/Message/More action row, and the work, education, and location details underneath, shows exactly how a personal profile fills out once real information goes in.
That level of interface accuracy is what makes this PSD useful for anything beyond a quick preview graphic.
If you’re presenting a personal branding project, a portfolio case study, or a social media strategy deck to a client, this mockup lets you show your own photography, logo, or copywriting sitting inside a screen that reads as unmistakably Facebook.
Because the set covers three distinct contexts, feed, profile, and fan page, it works whether the project is a personal rebrand, a business page launch, or a content calendar you need to visualize before it goes live.
Where to Use Each Screen
The profile mockup is the one to reach for when you’re presenting a personal brand identity, a photographer’s or freelancer’s online presence, or a cover photo and profile picture pairing that needs to look believable in context.
The fan page version is better suited to business and brand work, showing how a logo, page name, and cover image will actually read to visitors landing on a company’s page.
The feed mockup is the most versatile of the three for content marketing purposes, letting you drop in a sponsored post, a product photo, or a status update to show a client how their content will actually appear as someone scrolls past it on their phone.
Because the interface chrome (status bar, search bar, icons) is already built out, you spend your time on the part that matters: the photo, the copy, the profile picture, the logo.
Swapping in your own imagery is straightforward. Open the layered file, find the smart object or image layer standing in for the cover photo, double-click to open it in its own canvas, paste your artwork, resize it to fill the frame, and save.
The mockup updates automatically with correct scale and placement. The same process works for the profile photo placeholder and any text layers holding the name, job title, or bio details, so you can retype them with your client’s actual information.
Keep an eye on contrast when you swap the cover photo. The original uses a soft, muted photograph that keeps the white profile card and dark text legible above it, so if you’re bringing in a busier or brighter image, you may need to nudge the profile name or icon row’s color to keep it readable against the new background.
Because the mockup is scoped to mobile screens rather than desktop browser windows, it pairs well in a presentation deck alongside a desktop Facebook mockup or an Instagram and Twitter mobile set, giving you a fuller cross-platform view of how a brand’s social presence holds together.
Stack a few of these screens side by side in a single slide or image, feed, profile, fan page, and you’ve got a quick, convincing way to pitch an entire social rollout without needing live accounts to demonstrate it.
