Craft a beautiful chat app with our high fidelity chat UI kit for Sketch. Chat interfaces for livestreaming, team collaboration, messaging, customer support and gaming are included. Design responsive chat applications with all the essential elements required for fully interactive chat experiences.
This UI kit includes designs for social messaging, team collaboration, livestreams, in-game chat, sales and support. Each use case has light and dark versions to make designing your chat app straightforward.
Design chat that looks like iMessage, WhatsApp or Facebook Messenger.
Design 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 bot based chat UI for sales and support use cases.
The design philosophy of this UI kit was to provide other designers with a 95% complete starting point. 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.
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 a bot.
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 Chat 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 UI kit is designed for the specific demands of each use case. It is my hope that everyone who uses this chat 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