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

Activity rings

Icon of book open

Design a compact activity rings component for a fitness app. Use concentric circles to show three daily metrics: steps, calories, and active minutes. The default view should read as a quick status check, with each ring clearly labeled and paired with a visible number and goal.

Include one interaction state that reveals more detail on tap or hover. That state should show the exact progress for each metric, not just the visual ring fill. If you use motion, keep it tied to progress changes rather than decoration.

Treat accessibility as part of the component, not an afterthought. The rings need a text alternative, enough contrast to separate each metric, and a layout that still works when color is removed or the component is viewed at a small size.

Icon of book open

Employ a color-coded scheme for the activity rings to intuitively differentiate between the various metrics, using universally recognized colors that symbolize the type of activity.

Better at UI design with every challenge

Select complexity and generate challenge.

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