
Tabbed Content Screen
Design a mobile screen built around a top tab bar or segmented control that swaps between multiple content lists. The tabs sit above the content area and make the current section obvious without using a full page transition.
Each tab represents a different slice of the same app content, so the layout should keep the structure consistent while the items underneath can change in density, tone, or count. The challenge is to make the switch feel immediate and easy to track on a small screen.
Focus on how the tab bar behaves when labels are short or long, when there are few tabs versus many, and how the active state stays visible while the user scrolls the list. The content below should still feel anchored to the selected tab.
This is a mobile screen, so the interaction has to work with thumb reach and vertical scrolling. Show how the tab control, list spacing, and content hierarchy work together without crowding the top of the page.
Keep the active tab visible during scroll, and make the selected state distinct enough that the list can change without the user losing context.
Better at UI design with every challenge
Select complexity and generate challenge.
Pick a platform.
Get design challenge updates in your inbox
New prompts and challenge updates. It’s free.