Craft a beautiful chat app UI design with our high fidelity Chat UI kit for Sketch. Chat interfaces for live chat, team collaboration, messaging, customer support and gaming are included. Design your responsive chat interface with all the essential elements required for fully interactive chat experiences.
This Messaging UI kit includes designs for social chat, team collaboration, livestreams, in-game chat, sales and support. Each interface has light, dark, web and mobile versions to make designing your chat app straightforward.
Design chat that looks like iMessage, WhatsApp or Facebook Messenger.
Design a messaginge app that feels like Slack or Twist with that classic email thread layout.
Livestream features a compact UI that is better suited for real-time events.
Gaming chat like Xbox live for multiplayer games.
Agent and chatbots messaging UI for sales and support use cases.
The design philosophy of this UI kit was to provide other designers with template to work off. This means that we needed to create a robust design system with relatively generic styling, while still showcasing the unique features of each use case. Our React Native Chat and React Chat SDKs have been built to offer the same styles as this UI Kit.
The message list UI is for displaying attachments, messages, channels, typing indicators and date separators. Show accurate dates and message actions in the chat message lists.
Display the active conversations with indicators of who has read along with any new messages received within the Channel List UI Component.
Threads enable conversations to stay on topic and organized. Threads render a parent message with a list of replies, keeping everything in a single threaded conversation.
The chat message UI is not simply a what a user shares. There are many micro-interactions that revolve around a message. Editing, deleting, flagging, muting, reactions, retry and thread initiation are all attached to each individual message.
Select and show an emoji reaction to a message. Reactions allow users to quickly respond to any message, for any purpose.
Composing the perfect message takes a robust and flexible message input UI. Attaching images, videos, and files and select the perfect emoji. This UI Kit also has designs for the more advanced features like commands for mentioning a user, attach a gif or initiating chatbots.
Automatically format rich display of links with UI for OG scraping, and the OG-data. Customize the headers, images and interactions that are available in this chat ui kit.
I hope that this Messaging UI Kit goes a long way to helping you design the next great chat app. In the Sketch file you will find pages dedicated to each use case we believe are most relevant:
Each example in the chat interface kit is designed for the specific demands of each use case. It is my hope that everyone who uses this chat design ui kit finds these examples to be flexible and adaptable to their own application.
Each design is free to use as you see fit. It’s a great way to start with everything being relatively generic and straightforward for you to customize and extend as your needs demand.download for sketch 53