Camera Prep — UI Pattern Comparison

Choose a pattern to explore

Pattern B
Three-Column Persistent Layout
A persistent three-column layout: navigation rail, content column, and camera preview. All sections always visible at once.
→
Pattern C
Bottom Drawer
Camera preview fills the screen. A tab bar along the bottom reveals a collapsible drawer for each feature, maximizing the video area.
→
Pattern D
Accordion Sidebar
Sidebar with accordion-style sections. Each row expands inline to show item lists directly in the sidebar.
→
Pattern E
Feature Strip
Preview maximized. A horizontal strip at the bottom shows feature cards with prominent toggles and item previews. Tapping opens a picker sheet.
→
Pattern F
Narrow Sidebar + Vertical Content
A narrow left column shows feature toggles with thumbnail previews. Selecting a feature reveals a vertical content column, keeping the camera preview large.
→
Pattern G
Icon Rail + Flyout
A 44px icon rail sits over the full-bleed preview. Clicking an icon slides out a panel over the preview. When no panel is open, the camera fills the entire window.
→
Hi-Fi
High Fidelity Prototype
Pixel-perfect implementation from Figma. Toggle sidebar with 5 feature cards, a 800×450 video stage with brand overlays, and the full macOS window chrome.
→