Moon Heart – iPhone X Social App Concept
Last Updated on July 18, 2026 by Editorial Team
A social app concept designed for iPhone X, created and shared by Tung Vo Chi.
This freebie includes 23 screens:
- Splash
- Welcome
- Login (3 screens: Login from, Login form partially filled, Login form with iOS keyboard)
- Sign Up
- Intro
- About
- Boost Page
- Update
- Explore (2 screens)
- Profiles (2 screens)
- Search
- Inbox
- Message (5 screens: Message, Message with drop-down menu, Message group settings, Create message group, Create message group finished)
- 2 Layout templates
The search screen shown here is a good example of how Moon Heart handles information density without feeling cluttered.
Search results are laid out as a simple vertical list: circular profile photo on the left, name in bold, location beneath it in a lighter gray with a small pin icon.
That pairing of a strong primary label with a muted secondary line is the backbone of the whole kit, and you’ll see the same rhythm repeat across the explore and inbox screens.
The tab bar above the results (Top, People, Photo, Videos, Tags) is a detail worth studying on its own.
It’s a horizontal filter pattern that shows up constantly in real social products, from Instagram’s search to Twitter’s discovery tab, and having it pre-built saves a genuine chunk of layout work.
The active tab is marked with a thin indigo underline and a color shift in the label, a lightweight convention that reads clearly even at small sizes.
Color-wise the app leans on a near-white background, dark charcoal text, and a single accent, the indigo-to-violet gradient that shows up on the floating action button and the active tab.
That restraint is what makes the whole concept feel calm and modern rather than busy, and it’s a palette that would sit comfortably in a dating app, a community platform, a marketplace, or any product built around browsing people and content.
Using the Search and Navigation Pattern
If you’re adapting this for your own app, the search and tab-filter combination is one of the most reusable pieces in the set.
Swap in your own category labels (Top, People, Photo, Videos, Tags could just as easily become Products, Sellers, Reviews, Deals for a marketplace concept).
Keep the same visual hierarchy: bold label, secondary gray metadata line, circular avatar or thumbnail.
Because the rows are built on that consistent pattern, you can duplicate one entry, drop in a new photo and two lines of text, and the whole list stays visually aligned without extra tweaking.
The bottom navigation bar deserves a mention too. Explore, My albums, a raised circular action button, Search, and Account form a five-item structure that’s become close to a standard for content-driven social apps.
The center button sitting slightly above the bar, filled with the same gradient accent, is a nice touch if your product needs to emphasize one primary action, like creating a post, starting a chat, or adding a listing.
When customizing, try keeping that button’s elevation and gradient even if you change the icon inside it, since that visual weight is what tells users it’s the most important tap target on the screen.
For anyone assembling a pitch deck, portfolio case study, or working prototype for a social, dating, or community app, this screen alone shows how much can be communicated with a search bar, a filter row, and a clean list.
Pair it with the message and inbox screens from the same set to demonstrate a full user journey, from finding someone to actually talking to them, and you’ve got a coherent flow ready to present or hand off to development.
