Gallery
See what others have created
khanhdokuriitsu
@khanhdokuriitsu
Chatting & Sending Messages
Design the core messaging flow for a chat product: conversation list, new message start, thread view, and message sending. Focus on the moments users actually move through: finding a person, opening or starting a thread, writing a message, and confirming it went out.
Show the compose area with a text field, send button, and any attachment or emoji controls that belong in the primary path. The thread should make it obvious what was sent by the user, what came from the other person, and what is still in flight. Include timestamps only where they help scan the conversation.
Design the important system states around sending: empty thread, typing indicator, sending, delivered, read, failed, and retry. Unread badges, new message alerts, and conversation previews should make it easy to spot what needs attention. Keep the layout readable on first glance and make the next action obvious at every step.
What to deliver
- Design the conversation list and the open chat view.
- Include recipient selection for starting a new message.
- Show the compose area with text input, attachments, and send action.
- Add message states for sending, sent, delivered, read, and failed.
- Show notification badges or alerts for unread messages.
For an engaging touch, consider incorporating subtle animations when messages are sent or received. This can make your design feel more dynamic and responsive to user actions.