Chat Interface Design

Chat Messaging UI Kit

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.

Flexibility

Chat UI kit that covers the five essential use cases for your chat ui design.

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.

Example Social Messaging App  Interface Design

Social Messenger UI

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

Example Social Messaging App  Interface Design

Team Chat UI

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

Example Social Messaging App  Interface Design

Live Chat UI

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

Example Social Messaging App  Interface Design

Game Chat UI

Gaming chat like Xbox live for multiplayer games.

Example Social Messaging App  Interface Design

Customer Support UI

Agent and chatbots messaging 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 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.

Chat Message List
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.

Chat Channels UI Screen
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.

Chat Threads UI
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 UI Components
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.

Reactions in Chat
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.

Chat Message Composer
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 chatbots.

Chat Cards UI
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 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:

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

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