Logo of UI Challenges
Sign in
Wireframe example for Chat Detail
An example interpretation of the prompt
Icon of target

Chat Detail

Icon of book open

Design a single chat detail screen for a 1:1 conversation. This is the view users land on when they open one thread, so the header, message timeline, and composer need clear hierarchy. The screen should feel personal and active, not like a generic inbox.

Use a header that shows the other person’s avatar, display name, and current presence or last seen state. Keep navigation and thread actions visible but secondary. The message area should handle alternating sent and received bubbles, with timestamps, read receipts, and a clear visual distinction between user messages and incoming messages.

Include message-level interactions that fit the context: reactions, reply, copy, and delete or more actions. Add at least one in-thread state such as a typing indicator, unread marker, or date divider so the layout shows how the conversation behaves over time. The composer should support text entry plus common attachments or emoji without crowding the main thread.

Icon of book open

Incorporate subtle animations, like the chat bubble's entrance or a 'typing' indicator, to bring the chat to life.

Better at UI design with every challenge

Select complexity and generate challenge.

Pick a platform.

You can always choose to receive scheduled challenges. A unique design prompt will be sent to your email daily for the duration you select.

Get design challenge updates in your inbox

New prompts and challenge updates. It’s free.