Gallery
See what others have created
shia
@shia
Story Viewer Screen
Design a full-screen mobile story viewer for vertical photo or video content. The story fills the screen; chrome stays minimal so the content leads.
A thin progress bar runs across the top, broken into segments for each story in the set. It should communicate where the viewer is in the sequence and which item is currently active.
Taps on the left and right edges move backward and forward through stories. The center remains dedicated to viewing, while the top and edge interactions stay usable without crowding the content.
Treat this as a transient, high-focus screen: users may pause, skip, or exit quickly. The layout should make those actions feel immediate without adding persistent clutter.
What to deliver
- Design the full-screen story viewer default state.
- Show the segmented progress bar in active, completed, and upcoming states.
- Place tap zones for previous and next story navigation.
- Include an obvious exit affordance that does not compete with the content.
- Define the paused state if the story is video or animated content.
Use the progress bar segments to show both position and pace: the current segment can advance, while completed segments stay visually distinct from upcoming ones.