Video Detail Page Redesign Mockups
Five visual directions using the same content: cover, play, metadata, tags, collections, actresses, attached images, and edit/reveal/delete actions.
compare options
1. Put video facts in their own file block.Cover resolution and video resolution currently sit close together. Separate “Cover file” from “Video file” so 800x538 and 1920x1080 do not visually compete.
2. Consolidate VIP/Favorite/Watched/Owned.They read like separate widgets today. Make them a single status row with equal sizing and clearer active/inactive contrast.
3. Move destructive actions away from metadata.Delete is visually close to identity info. Put it in an action cluster or overflow menu to reduce accidental attention.
4. Make Play the primary page action.The play button on the cover is good, but add a clear “Play 2 parts” action near metadata for keyboard/mouse scanning.
5. Use tabs if the page starts feeling administrative.Summary, People, Tags, Extras, Files lets the page breathe while keeping all editing reachable.
6. Show per-part metadata where parts are selected.For multi-part videos, show 1080p/H.264 on each part chip instead of one ambiguous summary.
7. Combine tags and collections into one relationship editor.Both are library organization tools, so one “Organize” panel could reduce card stacking.
8. Make the extras area a media strip.Back covers/extras currently consume a full panel even when empty. A compact strip keeps the main page lighter.
9. Keep editing controls closer to fields.Edit metadata, import NFO, add tag, and add collection can sit near their target sections instead of the bottom-left corner.
10. Add a file health badge later.Once metadata exists, a small “Direct Play”, “Large file”, or “Unknown metadata” badge can help diagnose playback without clutter.