diff --git a/docs/installer-wireframes.md b/docs/installer-wireframes.md new file mode 100644 index 0000000..d11b50e --- /dev/null +++ b/docs/installer-wireframes.md @@ -0,0 +1,81 @@ +# Installer Wireframes (Proksi UX) + +Robert's wireframe sketches for the installer wizard UI. + +**Source:** Hand-drawn mockup shared 2026-03-06 + +## Flow Overview + +1. User boots from USB into a **headless live image** +2. Opens browser, navigates to **http://proksi.local** +3. Walks through a multi-step wizard (screens below) + +--- + +## Screen 1: Hello (Welcome / Account Setup) + +| Field | Notes | +|-------|-------| +| Hostname | Name for the server | +| Username | Info tooltip explaining what this is for | +| Password | | +| Password (confirm) | | +| Backend on/off | Toggle to enable/disable backend | +| Backend address | Only relevant if backend is on | +| Language | Language selector | + +Navigation: **Next** button (bottom right) + +--- + +## Screen 2: Device Setting (Drive Selection) + +Shows detected drives as a selectable list with radio buttons. + +| Element | Notes | +|---------|-------| +| Boot drive | Select which drive to install the OS on (info tooltip) | +| Drive list | Radio buttons for each detected drive | +| Other drives | Remaining drives used as storage | +| Auto setup | One-click automatic drive assignment | + +**Auto setup logic:** +- Tests drive speeds +- Fastest drive becomes boot drive +- Remaining drives become LVM storage + +Navigation: **Back** and **Next** buttons + +--- + +## Screen 3: Device Setting (Per-Device Purpose) + +Repeats for each additional connected device. + +> "We see you have a [device] connected. What is it for?" + +- Radio button options for device purpose +- **"I don't know" (default)** — safe fallback if user is unsure + +Navigation: **Back** button, **Next** button (repeats for each device) + +--- + +## Screen 4: Connections (Network) + +| Field | Notes | +|-------|-------| +| Network settings | IP configuration (DHCP/static) | +| Connect to a VPN | Optional VPN setup | + +*(Wireframe was cut off — likely continues with more options or a summary/confirm screen)* + +--- + +## Design Notes + +- Wizard-style step-by-step flow with back/forward navigation +- Info tooltips (i icons) on fields that need explanation +- Auto setup reduces decisions for beginners +- "I don't know" defaults keep things safe for non-technical users +- Working title for the installer UI: **Proksi**