Chat App Design

Chat UI Kit

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.

Flexibility

Chat UI kit that covers the five essential use cases for chat apps

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.

Social Messenger UI

Design chat that looks like iMessage, WhatsApp or Facebook Messenger.

Team Chat UI

Design that feels like Slack or Twist with that classic email thread layout.

Livestream Chat UI

Livestream features a compact UI that is better suited for real-time events.

Game Chat UI

Gaming chat like Xbox live for multiplayer games.

Customer Support UI

Agent and bot based chat UI for sales and support use cases.

Chat UI Kit

Flexible Chat UI Components

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.

Top level components

Chat message lists

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.

Top level components

Chat Channels and Lists

Display the active conversations with indicators of who has read along with any new messages received within the Channel List UI Component.

Top level components

Chat Threads UI

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.

Message components

Chat Message UI

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.

Message components

Chat Emoji Reactions UI

Select and show an emoji reaction to a message. Reactions allow users to quickly respond to any message, for any purpose.

Message input

Chat Message Input UI

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.

Message components

Messenger Cards UI

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.

Kickstart your design of the next great chat app!

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:

  • Social messaging
  • Email replacement for teams
  • Livestream broadcasts
  • Gaming
  • Sales and support

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
Stream Design