UI mockups · Desktop app
Chat messenger UI mockup
A desktop messaging app: conversation list with unread badges, a group thread with message bubbles and attachments, and a notifications settings dialog.
The 2 screens
Chat messenger: Inbox, Settings. Each screen below is drawn from the mockup itself, with the headings, buttons, fields and lists that are on it.
1Inbox Inbox
Desktop window with 20 paragraphs, 10 avatars, 9 headings, 6 icons, 5 cards, 4 badges, 3 sections, a button and 7 more component types.
- Headings
- Chats · Design team · Marco Rossi · Launch - Q4 · Lena Fischer · Support rota · Kenji Watanabe · Family
- Navigation
- All · Unread · Groups
- Fields
- Search messages · Message Design team
- Buttons and actions
- Send
- Text and labels
- 09:42 · Priya: pushed the new onboarding flow · 3 · 09:15 · Sounds good, see you at 3 · Yesterday · Sam: release notes are in the doc · 12 · Thanks, that fixed it · Mon · You: swapping Friday with Jo · Could you review my pull request? · 1 · Sun
2Settings Settings
Desktop window with 3 radios, 3 toggles, 2 buttons, 2 headings, 2 labels, an avatar, a divider, a dropdown and 7 more component types.
- Headings
- Chats · Notifications
- Navigation
- Profile · Notifications · Privacy · Appearance
- Fields
- Search messages · From 22:00 to 07:00
- Buttons and actions
- Cancel · Save changes
- Lists and columns
- Design team · Marco Rossi · Launch - Q4 · Lena Fischer · Support rota · Kenji Watanabe · Family
- Text and labels
- Alex Kim · Desktop notifications · Show message previews · Play sounds · Notify me about · All new messages · Direct messages and mentions · Nothing · Quiet hours
Open and edit it
The chat messenger mockup is free on every Tierslate plan. Opened in the editor it becomes a board of your own: every component is a real shape you can move, resize, retext or recolour, you can add screens from the web, iOS and Android component library, and React code can be generated from the screens. In the editor it is under Templates, on the Mockups tab.
More mockups
- Calendar app UI mockup - A desktop calendar - a colour-coded week view with a mini month and calendar toggles, an event editor with guests, and a month view with an agenda.
- Note-taking app UI mockup - A desktop notes app: notebooks and tags in a sidebar, a note list, a rich editor with checklist and table, and a share dialog with access controls.
- Food delivery app UI mockup - Browse restaurants, pick dishes, check out and follow the courier - four mobile screens.
- Shopping website UI mockup - An online clothing store - home page, product listing with filters, product detail and checkout.
- Banking app UI mockup - A mobile bank - balance with quick actions and recent activity, a transaction detail and a send-money flow.
- Admin dashboard UI mockup - A store back office - KPI cards, revenue chart, top products and recent orders, plus a customer profile page.