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

Article Detail

Icon of book open

Design a single article detail screen for a content-heavy product. The page should open with the article title, author, publish date, and estimated reading time, followed by the main body in a layout that supports long-form reading. Treat typography, spacing, and line length as the core of the design.

Use supporting elements only where they help the story: inline images, captions, pull quotes, code blocks, or embedded media if the article calls for them. Keep links visually distinct without breaking the reading flow. Secondary actions like share, save, and follow should be present, but never compete with the article itself.

Include navigation that helps readers move through the page: back, related articles, and a way to jump to sections if the article is long. If you add a progress indicator or sticky header, keep it subtle and readable. Show how the screen handles dense content without feeling cramped.

Icon of book open

Incorporate whitespace strategically to avoid clutter and aid comprehension, particularly around text-heavy areas.

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.