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

Hyperlink

Icon of book open

Design a single hyperlink as it would appear inside a real interface, such as body copy in an article, a product detail page, or a settings screen. The goal is to make the link feel native to the layout, not like a decorative callout.

Show the full interaction set: default, hover, visited, active, and keyboard focus. Each state should be easy to tell apart at a glance, but still feel like the same link. Use underline, color, and emphasis intentionally; do not depend on color alone.

Keep the link embedded in readable copy with the surrounding typography, spacing, and line length visible. The link should stand out enough to invite action, but not break the rhythm of the text or compete with nearby content.

Treat this as a small component with real constraints: it needs to work in context, remain accessible, and preserve clarity across states. The best version looks obvious, familiar, and easy to use without extra explanation.

Icon of book open

Hyperlinks are the lifeblood of navigation on the web. Get creative and experiment with subtle animations or unique visual cues like icons or changing text styles to elevate the user experience.

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.