Gallery
See what others have created
sina
@sina
Going full screen
Design a full-screen pattern for a web app or media surface. The focus is the transition into and out of full-screen, not the content itself. Show the default state with a clear control, then the expanded state with only the controls users need to keep going or leave.
In the expanded view, remove browser chrome from the design and keep the interface visually quiet. If navigation, playback, status, or progress still needs to be present, place it where it does not compete with the main content. The layout should make it clear what stays visible, what collapses, and what appears on interaction.
Design the exit behavior as carefully as the entry behavior. Include a visible exit control, a keyboard path, and any transient UI that appears on hover or tap. The pattern should feel reversible, predictable, and easy to recover from on every screen size.
What to deliver
- Design the trigger to enter full-screen mode.
- Design the in-full-screen state with the minimum required controls.
- Design the exit path back to the standard view.
- Show how navigation or status appears without breaking immersion.
- Include the hover, focus, and keyboard-accessible states for the control.
An engaging full-screen experience can often make the difference between an average and an extraordinary user interaction. Consider animations or transitions when entering or exiting full-screen for added flair!