Document Version: 1.0
Purpose: UI/UX Design Reference for Figma Mockups & Frontend Development
Target Audience: UI/UX Designers, Frontend Developers
Last Updated: October 2025
- Executive Summary
- User Personas & Roles
- Information Architecture
- User Stories & Scenarios
- Screen-by-Screen Specifications
- User Flows & Journeys
- Component Library
- Interaction Patterns
- Responsive Design Strategy
- Accessibility Guidelines
- Visual Design System
Farm3D is a mission control center for 3D printer farms, enabling operators to monitor dozens or hundreds of printers simultaneously, manage print jobs intelligently, and maintain equipment efficiently. The UI must balance information density (showing many printers at once) with clarity (quick status recognition) and efficiency (minimal clicks to common actions).
- Glanceable Status: Users should understand farm health in 3 seconds
- Progressive Disclosure: Show summaries first, details on demand
- Action-Oriented: Common tasks should be ≤2 clicks away
- Fail-Safe: Destructive actions require confirmation
- Real-Time First: Live updates without manual refresh
- Scalable Layouts: Work for 10 or 100+ printers
- Mobile-Aware: Core monitoring works on tablets/phones
Most Common Tasks (optimize for these):
- Check farm status at a glance (90% of all visits)
- Upload a new print job and set priority
- Investigate a printer error or failed print
- View camera feed of specific printer
- Complete a maintenance task
- Check job queue and estimated completion times
- Role: Administrator
- Age: 32
- Experience: 5 years in 3D printing, manages 50-printer farm for commercial service
- Goals: Maximize printer utilization, minimize failed prints, track costs
- Pain Points: Switching between multiple tools, missing failures until too late, unclear what's blocking production
- Daily Routine:
- Morning: Check overnight prints, investigate any failures
- Throughout day: Monitor status dashboard, respond to alerts
- Evening: Queue up overnight batch, ensure materials loaded
- Quote: "I need to know immediately if something goes wrong, and I need to see the whole farm at once."
- Role: Operator
- Age: 26
- Experience: 2 years, hands-on printer management
- Goals: Keep printers running, complete maintenance tasks, meet deadlines
- Pain Points: Forgetting which printer needs filament change, unclear task priorities, manual scheduling
- Daily Routine:
- Check task list for today
- Load/unload print beds
- Change filaments as needed
- Upload customer jobs
- Monitor prints in progress
- Quote: "I need a clear list of what to do next - which printer needs attention and why."
- Role: Viewer (read-only)
- Age: 40
- Experience: Business owner, minimal technical knowledge
- Goals: Track order progress, verify quality via cameras
- Pain Points: Too much technical detail, unclear when job will complete
- Use Case: Periodic check-ins on job progress
- Quote: "I just want to see if my parts are printing okay and when they'll be done."
| Feature | Admin | Operator | Viewer |
|---|---|---|---|
| View dashboard | ✓ | ✓ | ✓ |
| View camera feeds | ✓ | ✓ | ✓ |
| View analytics | ✓ | ✓ | Limited |
| Upload jobs | ✓ | ✓ | ✗ |
| Control printers (pause/cancel) | ✓ | ✓ | ✗ |
| Manage tasks | ✓ | ✓ | View only |
| Add/remove printers | ✓ | ✗ | ✗ |
| User management | ✓ | ✗ | ✗ |
| System settings | ✓ | ✗ | ✗ |
Farm3D Application
│
├── 🏠 Dashboard (Landing)
│ ├── Farm Overview Stats
│ ├── Printer Grid (Multi-View)
│ └── Recent Alerts
│
├── 🖨️ Printers
│ ├── Printer List View
│ ├── Printer Detail View
│ │ ├── Current Status Tab
│ │ ├── History Tab
│ │ ├── Metrics Tab
│ │ └── Settings Tab (Admin)
│ └── Add New Printer (Admin)
│
├── 📋 Job Queue
│ ├── Queue Overview (Gantt/Timeline)
│ ├── Job List (Filterable)
│ ├── Upload New Job
│ └── Job Detail View
│ ├── Job Info
│ ├── Print Settings
│ ├── Schedule Info
│ └── History/Logs
│
├── ✅ Tasks
│ ├── My Tasks (Operator View)
│ ├── All Tasks (Admin View)
│ ├── Create Task
│ └── Task Detail
│
├── 📹 Live Cameras
│ ├── Grid View (All Cameras)
│ ├── Focus View (Single Camera)
│ └── Timelapse Library
│
├── 📊 Analytics
│ ├── Farm Performance
│ ├── Printer Utilization
│ ├── Job History
│ ├── Material Usage
│ └── Cost Analysis
│
├── 📁 Files
│ ├── G-code Library
│ ├── Model Library
│ └── Upload Manager
│
└── ⚙️ Settings
├── User Profile
├── Printer Groups (Admin)
├── Material Management (Admin)
├── Notifications
└── System Configuration (Admin)
Primary Navigation (Always Visible - Left Sidebar or Top Bar):
- Dashboard
- Printers
- Job Queue
- Tasks
- Cameras
- Analytics (collapsed by default for Operators)
- Files
- Settings
Secondary Navigation (Contextual):
- Breadcrumbs for deep pages
- Tabs within detail views
- Quick actions menu (fab/dropdown)
Persistent Elements:
- User avatar/profile menu (top-right)
- Notification bell with badge count (top-right)
- Global search (top-center)
- Emergency stop button (always visible, red)
US-001: Quick Farm Health Check
- As a Farm Manager
- I want to see all printer statuses at a glance on the dashboard
- So that I can immediately identify problems without clicking into individual printers
- Acceptance Criteria:
- All printers visible on one screen (scrollable grid for large farms)
- Color-coded status (green=printing, blue=idle, yellow=warning, red=error, gray=offline)
- Critical alerts shown prominently at top
- Success rate and utilization visible as summary cards
US-002: Monitor Individual Printer
- As an Operator
- I want to click on a printer card to see detailed real-time status
- So that I can investigate issues or check print progress
- Acceptance Criteria:
- Live camera feed visible
- Current job progress (% and time remaining)
- Temperature graphs (nozzle, bed, chamber)
- Recent event log
- Quick action buttons (pause, resume, cancel)
US-003: View Multiple Camera Feeds
- As a Farm Manager
- I want to see all camera feeds in a grid layout
- So that I can monitor all active prints simultaneously
- Acceptance Criteria:
- Adaptive grid (4x4, 6x6, etc. based on screen size)
- Auto-refresh feeds (configurable interval)
- Click to enlarge specific camera
- Show printer name and status overlay on each feed
- Highlight printers with warnings/errors
US-004: Upload and Queue Job
- As an Operator
- I want to upload a G-code file and set basic parameters
- So that the system can automatically schedule it on an appropriate printer
- Acceptance Criteria:
- Drag-and-drop file upload
- Set priority (1-10 slider)
- Set deadline (optional date/time picker)
- Specify material requirements (dropdown)
- Preview estimated print time
- See which printers are compatible
- Receive confirmation with estimated start time
US-005: View Job Queue Status
- As a Farm Manager
- I want to see all queued jobs in order with estimated completion times
- So that I can plan capacity and communicate deadlines to customers
- Acceptance Criteria:
- List view with sortable columns (priority, deadline, status)
- Timeline/Gantt view showing schedule
- Filter by status, material, assigned printer
- Visual indication of jobs approaching deadline
- Drag-and-drop to reorder jobs (changes priority)
US-006: Modify Job Priority
- As an Operator
- I want to change a job's priority after submission
- So that I can respond to urgent customer requests
- Acceptance Criteria:
- Editable priority slider on job detail page
- Option to "rush" job to front of queue
- System re-optimizes schedule automatically
- Shows new estimated start time immediately
- Confirmation dialog for major priority changes
US-007: Cancel or Restart Job
- As an Operator
- I want to cancel a failed job or restart it on a different printer
- So that I can recover from failures without losing the job
- Acceptance Criteria:
- "Cancel" button with confirmation dialog
- "Restart" button that re-queues job
- Failure reason required for cancellation (dropdown + text)
- Option to assign specific printer for restart
- Logs action with timestamp and user
US-008: View My Daily Tasks
- As an Operator
- I want to see a prioritized list of maintenance tasks assigned to me
- So that I can work efficiently without forgetting anything
- Acceptance Criteria:
- Today's tasks at top, sorted by due time
- Overdue tasks highlighted in red
- Task type indicated with icons (filament change, nozzle swap, cleaning)
- Printer location/name clearly shown
- One-click to mark task complete
- Add notes/photos before completing
US-009: Create Maintenance Task
- As a Farm Manager
- I want to create a task for a specific printer
- So that operators know what maintenance is needed
- Acceptance Criteria:
- Select printer from dropdown
- Choose task type from common templates
- Set due date/time
- Assign to specific operator (optional)
- Add detailed instructions (rich text)
- Attach photos/documents
- Set urgency level (low, normal, high, critical)
US-010: Smart Task Suggestions
- As an Operator
- I want to see system-generated task suggestions based on printer usage
- So that I don't miss routine maintenance
- Acceptance Criteria:
- "Suggested Tasks" section on dashboard
- Based on print count (e.g., "Lubricate after 100 prints")
- Based on time (e.g., "Clean nozzle monthly")
- Based on material changes (e.g., "Purge after switching materials")
- One-click to convert suggestion to task
US-011: View Farm Performance Summary
- As a Farm Manager
- I want to see key metrics for farm performance over time
- So that I can identify trends and make operational improvements
- Acceptance Criteria:
- Date range selector (today, this week, this month, custom)
- KPI cards: total prints, success rate, avg. utilization, total hours
- Line graph showing utilization over time
- Bar chart comparing printer performance
- Material consumption breakdown (pie chart)
- Exportable to PDF/CSV
US-012: Analyze Printer Efficiency
- As a Farm Manager
- I want to compare individual printer utilization and success rates
- So that I can identify underperforming printers for maintenance
- Acceptance Criteria:
- Table/grid view of all printers with sortable columns
- Metrics: uptime %, success rate, total prints, avg. job time
- Color-coded performance indicators
- Filter by printer group
- Click printer to see detailed history
- Identify patterns (e.g., printer always fails on specific material)
US-013: Respond to Critical Alert
- As a Farm Manager
- I want to receive immediate notification when a printer has a critical failure
- So that I can prevent damage or wasted materials
- Acceptance Criteria:
- Browser notification (if enabled)
- Alert banner at top of screen (red, persistent)
- Alert panel shows: printer name, error type, time, suggested action
- One-click to view printer camera feed
- One-click to pause printer
- Mark alert as "acknowledged" to dismiss
- Alerts logged in notification center
US-014: Emergency Stop All Printers
- As a Farm Manager
- I want to press a single button to emergency stop all printers
- So that I can respond to safety issues (fire, gas leak, etc.)
- Acceptance Criteria:
- Bright red "EMERGENCY STOP" button always visible
- Requires click-and-hold for 2 seconds (prevent accidental clicks)
- Stops all printers immediately
- Sends alert to all online users
- Logs event with timestamp and user
- Requires admin authorization to restart farm
Layout: Full-width, two-section vertical split
Card Grid (4 cards, horizontal):
Card 1: Active Printers
- Primary Metric: "42 / 50" (large, bold)
- Label: "Active Printers" (small, above metric)
- Subtitle: "84% utilization" (medium, below metric, green if >70%, yellow if 50-70%, red if <50%)
- Icon: Printer icon (left side)
- Behavior: Click to open Printers page filtered to "active"
Card 2: Job Queue
- Primary Metric: "18" (large, bold)
- Label: "Jobs in Queue"
- Subtitle: "~4h 30m avg. wait" (medium, gray)
- Icon: Clock/hourglass icon
- Behavior: Click to open Job Queue page
Card 3: Success Rate (Today)
- Primary Metric: "94%" (large, bold, green if >90%, yellow if 80-90%, red if <80%)
- Label: "Success Rate (24h)"
- Subtitle: "2 failed" (small, clickable link)
- Icon: Checkmark icon
- Behavior: Subtitle links to failed jobs list
Card 4: Active Alerts
- Primary Metric: "3" (large, bold, red if >0)
- Label: "Active Alerts"
- Subtitle: "1 critical, 2 warnings"
- Icon: Bell icon
- Behavior: Click to open notification center
Grid Layout: Adaptive based on farm size
- 10-20 printers: 4×5 grid
- 21-50 printers: 6×9 grid
- 51-100 printers: 10×10 grid
- 100+ printers: 12×12 grid with virtualized scrolling
Each Printer Card:
Visual Structure:
┌─────────────────────────────┐
│ [Status Indicator] Printer 1│ ← Header (status color + name)
│ │
│ [Camera Thumbnail] │ ← Live feed preview (if available)
│ or [Printer Icon] │
│ │
│ 🟢 Printing │ ← Status text
│ Job: "gear_housing.gcode" │ ← Current job (truncated)
│ ████████░░ 78% │ ← Progress bar
│ ⏱ 1h 23m remaining │ ← Time remaining
│ │
│ 🌡️ 210°C / 60°C │ ← Temps (nozzle/bed)
│ 💾 PLA │ ← Material loaded
└─────────────────────────────┘
Status Colors (applied to card border and top bar):
- Green (#10B981): Printing successfully
- Blue (#3B82F6): Idle, ready for job
- Yellow (#F59E0B): Warning (low material, maintenance due)
- Red (#EF4444): Error, requires attention
- Gray (#6B7280): Offline, not connected
Hover State:
- Card lifts slightly (shadow increase)
- Shows quick action buttons (pause/resume, cancel, view details)
- Camera thumbnail enlarges to 80% of card
Click Behavior:
- Opens printer detail modal or navigates to printer detail page
- Passes printer ID to detail view
Special States:
- No Camera: Show printer icon silhouette instead of camera feed
- Offline: Grayed out, show "Last seen: 2h ago"
- Maintenance Mode: Yellow striped border, show "Maintenance" badge
Toggle Button: "Alerts" (can collapse to save space)
Alert List:
- Reverse chronological (newest at top)
- Max 10 visible, "View All" link at bottom
- Each alert shows:
- Timestamp: "2m ago" (relative time)
- Printer Name: "Printer 12"
- Alert Type: Icon + text ("Filament Runout")
- Severity: Color-coded dot (red/yellow/blue)
- Action Button: "View" or "Dismiss"
Layout: Modal overlay (dim background) or full page
Left Side:
- Printer Name: Large, bold, editable (pencil icon for Admin)
- Status Badge: Same color scheme as dashboard
- Last Seen: "Updated 5s ago" (live countdown)
Right Side:
- Quick Actions (icon buttons):
- Pause (⏸️)
- Resume (
▶️ ) - Cancel Job (✖️)
- Emergency Stop (🛑, requires confirmation)
- Settings Icon (⚙️, Admin only)
- Close Button (✕)
Tabs:
- Overview (default)
- Current Job
- History
- Metrics
- Settings (Admin only)
Layout: Two-column
Left Column (60%):
Camera Feed:
- Large live video player
- Full-screen button (top-right of player)
- Screenshot button (camera icon)
- Record timelapse button (if not already recording)
- Camera controls: zoom, pan (if PTZ camera)
Right Column (40%):
Status Summary:
- Current Status: "Printing" (large text with icon)
- Uptime Today: "6h 24m"
- Prints Today: "4 completed, 1 in progress"
Temperature Gauges (visual circular gauges):
- Nozzle: 210°C / 250°C max (shows as filled arc)
- Bed: 60°C / 110°C max
- Chamber: 45°C (if available)
Material Info:
- Current Material: "PLA - Black" (dropdown to change, Operator+)
- Spool ID: "#12345" (links to Spoolman)
- Remaining: "~450g" (progress bar)
Capabilities (icon list):
- Bed Size: "220 × 220 × 250mm"
- Max Temp: "280°C / 110°C"
- Enclosure: ✓ (checkmark if yes)
- Auto-Leveling: ✓
Recent Events Log (scrollable list):
- "10:34 AM - Job started: gear_housing.gcode"
- "10:32 AM - Material loaded: PLA Black"
- "09:58 AM - Print completed: bracket_v2.gcode"
- "View Full Log" link at bottom
Visible When: Printer has active job
Job Information:
- Job Name: "gear_housing.gcode" (large, bold)
- Uploaded By: "Alex M." (with avatar)
- Started At: "Today at 10:34 AM"
- Priority: ⭐⭐⭐⭐⭐ (5/10)
Progress Section:
- Large Progress Circle: Shows 78% (center of screen, animated)
- Time Elapsed: "1h 14m"
- Time Remaining: "~1h 23m"
- Estimated Completion: "Today at 12:31 PM"
Print Settings (grid layout):
- Layer Height: "0.2mm"
- Nozzle Temp: "210°C"
- Bed Temp: "60°C"
- Print Speed: "60mm/s"
- Infill: "20%"
- Support: "Yes"
File Preview (if available):
- 3D model thumbnail or G-code visualization
- Layer slider to preview different layers
Action Buttons (bottom):
- Adjust Priority (button, opens slider)
- View G-code (opens text viewer)
- Download File (icon button)
Filter Bar (top):
- Date range picker (last 7 days default)
- Status filter: All / Completed / Failed / Cancelled
- Search by job name
History Table:
| Job Name | Started | Duration | Status | Actions |
|---|---|---|---|---|
| bracket_v2.gcode | 10/22 9:15 AM | 2h 14m | ✓ Completed | View |
| enclosure_panel.gcode | 10/22 6:30 AM | 3h 45m | ✓ Completed | View |
| test_cube.gcode | 10/21 8:45 PM | 0h 18m | ✗ Failed | View |
Click Row: Opens job detail modal with:
- Full job information
- Failure reason (if failed)
- Timelapse video (if available)
- Photos from camera
- Event log
Summary Stats (above table):
- Total prints: 127
- Success rate: 94%
- Total print time: 284h 12m
- Most printed file: "bracket_v2.gcode (12 times)"
Time Range Selector (top):
- Last 24 hours / Last 7 days / Last 30 days / Custom
Charts (vertical stack):
1. Utilization Over Time (Line Chart):
- X-axis: Time
- Y-axis: Utilization % (0-100%)
- Shows active vs. idle time
- Highlights downtime events
2. Temperature History (Multi-line Chart):
- Nozzle temp (orange line)
- Bed temp (blue line)
- Chamber temp (green line, if available)
- Target temps shown as dashed lines
3. Job Statistics (Bar Chart):
- Number of jobs per day
- Stacked by status (completed/failed)
4. Material Usage (Pie Chart):
- Breakdown by material type
- Shows grams used
- Click to see detailed usage log
Key Metrics Summary (cards at top):
- Average Utilization: "78%"
- Total Jobs: "42"
- Success Rate: "95%"
- Total Print Time: "156h 24m"
Sections (accordion style):
1. Printer Configuration:
- Name (text input)
- Moonraker URL (text input with "Test Connection" button)
- Camera RTSP URL (text input with "Preview" button)
- Printer Group (dropdown)
- Current Material (dropdown)
2. Capabilities:
- Max Nozzle Temperature (number input + °C)
- Max Bed Temperature (number input + °C)
- Build Volume (3 number inputs: X, Y, Z in mm)
- Supported Nozzle Sizes (multi-select: 0.2, 0.4, 0.6, 0.8, 1.0mm)
- Has Enclosure (checkbox)
- Has Auto-Leveling (checkbox)
- Direct Drive (checkbox)
3. Maintenance Schedule:
- Enable Automatic Task Generation (toggle)
- Lubrication Interval (number input + "prints")
- Nozzle Change Interval (number input + "prints")
- Deep Clean Interval (number input + "days")
4. Danger Zone (red border):
- Remove Printer (button, requires confirmation)
- Factory Reset Settings (button)
Save Button (bottom, primary color, disabled until changes made)
Layout: Full width, three-panel view
Left Side:
- Total Jobs: "18 in queue"
- Estimated Queue Time: "~12h 45m to clear all"
- Next Available Printer: "Printer 7 in 23m"
Right Side:
- Upload Job (primary button, large)
- Optimize Schedule (secondary button)
- View Toggle: List / Timeline (icon buttons)
Filter/Sort Bar:
- Status: All / Queued / Scheduled / Printing / Paused (tabs)
- Material: All / PLA / PETG / ABS / TPU (dropdown)
- Sort by: Priority / Deadline / Upload Time (dropdown)
- Search: (text input with icon)
Job Cards (vertical list):
Each card shows:
┌────────────────────────────────────────────────────────────┐
│ [Drag Handle] gear_housing.gcode [⋮ Menu]│
│ │
│ [Thumbnail] Priority: ⭐⭐⭐⭐⭐⭐⭐⭐ (8/10) │
│ 150x150mm Material: PLA │
│ Est. Time: 2h 30m │
│ │
│ Status: 🟡 Scheduled → Printer 12 │
│ Est. Start: Today at 2:15 PM │
│ Deadline: Tomorrow at 5:00 PM │
│ │
│ [Edit Priority] [Assign Printer] [Cancel Job] │
└────────────────────────────────────────────────────────────┘
Drag Handle:
- Left edge, 6-dot icon
- Allows drag-and-drop reordering
- Changes priority automatically
Menu (⋮):
- Edit Details
- Change Priority
- Assign Specific Printer
- Cancel Job
- Download G-code
Color Coding:
- Green Border: Will start soon (<30 min)
- Yellow Border: Scheduled but not soon (>30 min)
- Red Border: Deadline approaching (<2 hours) or overdue
- Gray: Queued, not yet scheduled
Layout: Horizontal timeline
Y-Axis: List of printers (one row per printer) X-Axis: Time (hours, with current time marked)
Each Job: Colored block showing:
- Job name (truncated if too small)
- Duration (width of block)
- Hover for full details
Features:
- Drag blocks to reassign to different printer
- Resize blocks to adjust estimated time
- Click block to open job detail
- Color-coded by material or priority
- "Now" line showing current time (animated/moving)
Controls (top-right):
- Zoom: Fit All / 6h / 12h / 24h
- Group by: None / Material / Priority
- Show: All Printers / Active Only
Triggered By: "Upload Job" button
Step 1: File Upload
- Large drag-and-drop area
- "Browse Files" button
- Supported formats shown: .gcode, .gco
- Progress bar during upload
- File analysis: auto-detect print time, material from G-code
Step 2: Job Settings (form):
- Job Name: Auto-filled from filename, editable
- Priority: Slider (1-10) with labels: Low / Normal / High / Urgent
- Deadline: Date/time picker (optional)
- Material Required: Dropdown (PLA / PETG / ABS / TPU / Nylon / Flexible)
- Nozzle Size: Dropdown (0.2 / 0.4 / 0.6 / 0.8 / 1.0 mm)
- Quantity: Number input (default 1, for bulk orders)
Step 3: Assignment Options:
- Auto-Assign (radio, default): System schedules optimally
- Assign to Specific Printer (radio): Dropdown to select printer
- Assign to Group (radio): Dropdown to select printer group
Preview (right side of modal):
- 3D model preview (if STL available)
- G-code layer preview
- Estimated time: "2h 30m"
- Compatible printers: "12 available"
Buttons:
- Cancel (secondary)
- Upload & Queue (primary)
Layout: Two-column
My Tasks (Operator view):
- Today (badge count)
- This Week
- Overdue (red badge)
- Completed
All Tasks (Admin view):
- Unassigned
- By Assignee (collapsible list)
- By Type (Filament Change / Nozzle Change / Maintenance / Other)
- By Printer
Create Task Button (large, at top)
Sort Bar:
- Sort by: Due Date / Priority / Printer (dropdown)
- View: List / Board (kanban-style)
Task Card (in list view):
┌─────────────────────────────────────────────────────┐
│ 🔴 HIGH PRIORITY │
│ │
│ Filament Change - Printer 12 │
│ Current: PLA Black → Required: PETG Red │
│ │
│ Due: Today at 2:00 PM (in 1h 23m) │
│ Assigned to: Jamie O. │
│ │
│ [Mark Complete] [Postpone] [Details] │
└─────────────────────────────────────────────────────┘
Priority Indicators:
- 🔴 High: Red dot, urgent/blocking
- 🟡 Normal: Yellow dot, routine
- 🟢 Low: Green dot, can be delayed
Overdue Tasks: Red background tint, pulsing animation
Click Card: Opens task detail modal
Header:
- Task type icon (large)
- Task title (editable)
- Priority dropdown
- Due date/time picker
- Status: Pending / In Progress / Completed (dropdown)
Body:
- Printer: Link to printer (click to view)
- Assigned To: User dropdown (Admin can reassign)
- Description: Rich text editor
- Instructions: Checklist (e.g., "1. Heat nozzle to 240°C", "2. Remove old filament")
- Attachments: File upload for photos/PDFs
Action Log (timeline):
- "Created by Alex M. on 10/22 at 9:00 AM"
- "Assigned to Jamie O. on 10/22 at 9:05 AM"
- "Marked in progress on 10/22 at 1:45 PM"
Completion Section (if status = In Progress):
- "Add completion notes" (text area)
- "Upload photos" (optional)
- "Mark Complete" (primary button)
Buttons (footer):
- Delete Task (danger, Admin only)
- Cancel (secondary)
- Save Changes (primary)
Columns:
- To Do (Pending)
- In Progress
- Completed (last 24 hours)
Cards: Simplified version of list view cards
- Drag-and-drop between columns (updates status)
- Swim lanes by printer or assignee (optional)
Modal or page, form layout:
Fields:
-
Task Type: Dropdown (common templates) or "Custom"
- Filament Change
- Nozzle Change / Cleaning
- Bed Leveling
- Lubrication / Maintenance
- General Cleanup
- Custom
-
Printer: Dropdown (required)
-
Title: Text input (auto-filled based on type, e.g., "Filament Change - Printer 12")
-
Priority: Radio buttons (Low / Normal / High)
-
Due Date/Time: Date/time picker
-
Assign To: User dropdown (optional, defaults to "Unassigned")
-
Description: Rich text editor with toolbar
-
Checklist (optional):
- Add checklist items (text input + "Add Item" button)
- Draggable to reorder
-
Attachments: Upload area
Buttons:
- Cancel
- Create Task
Layout: Full-screen grid
Left Side:
- View: Grid / Focus (toggle)
- Grid Size: 4×4 / 6×6 / 9×9 (dropdown)
- Show: All / Printing Only / With Alerts (filter)
Right Side:
- Refresh Rate: 1s / 5s / 10s (dropdown)
- Timelapse Library (button, opens modal)
- Full Screen (button)
Adaptive Grid:
- 4×4: Larger cameras for up to 16 printers (desktop)
- 6×6: Medium cameras for up to 36 printers
- 9×9: Smaller cameras for 50+ printers (large monitors)
Each Camera Cell:
┌─────────────────────┐
│ [Live Feed] │
│ │
│ │
│ │
│ ─────────────────── │
│ Printer 12 │ ← Name (bottom overlay)
│ 🟢 Printing (78%) │ ← Status + progress
└─────────────────────┘
Overlay (appears on hover):
- Status badge (top-left corner)
- Quick actions (top-right):
- Full-screen this camera
- Take snapshot
- View printer details
- Alert icon (pulsing, if printer has alert)
Click Behavior:
- Single click: Enlarge to Focus View
- Double click: Full-screen this camera
No Camera State:
- Gray placeholder with printer icon
- "No camera configured" text
- "Add Camera" button (Admin only)
Layout: Large video player (70% width)
Video Player:
- Full camera feed (maximum quality)
- Playback controls (if timelapse)
- Zoom controls (if camera supports)
- Full-screen button
Right Sidebar (30% width):
Printer Info Summary:
- Printer name (large, bold)
- Current status with icon
- Progress: 78% (large circular progress)
- Time remaining: 1h 23m
- Quick action buttons (pause, resume, cancel)
Metrics (cards):
- Temperatures (nozzle, bed)
- Current material
- Layer: 234 / 567
Grid Thumbnails (scrollable):
- Small thumbnails of other cameras
- Click to switch to that camera
Filter Bar:
- Date range picker
- Printer dropdown
- Job name search
Grid of Timelapse Cards:
┌─────────────────────────────┐
│ [Thumbnail - first frame] │
│ │
│ ──────────────────────── │
│ gear_housing.gcode │
│ Printer 12 | 2h 30m │
│ 10/22/2024 10:34 AM │
│ │
│ [▶️ Play] [⬇️ Download] │
└─────────────────────────────┘
Click Card: Opens video player modal
- Play timelapse
- Scrub through frames
- Download video
- Share link
Layout: Full-width dashboard with multiple panels
Date Range Selector (prominent):
- Quick options: Today / Last 7 Days / Last 30 Days / This Month / Custom
- Date picker for custom range
Export Button (top-right):
- Export to PDF
- Export to CSV
- Schedule Report (opens modal for recurring reports)
Card 1: Total Prints
- Large Number: "1,247"
- Comparison: "+12% vs. last period" (green ↑ or red ↓)
- Sparkline: Mini line chart showing trend
Card 2: Success Rate
- Large Number: "94.2%"
- Comparison: "+2.1% vs. last period"
- Color: Green if >90%, yellow if 80-90%, red if <80%
Card 3: Average Utilization
- Large Number: "78%"
- Comparison: "+5% vs. last period"
- Mini Progress Bar: Visual representation
Card 4: Total Print Hours
- Large Number: "2,847h"
- Comparison: "+18% vs. last period"
- Equivalent: "~118 days"
Left Column:
Chart 1: Farm Utilization Over Time (Line Chart)
- X-axis: Date/time
- Y-axis: Utilization %
- Show: Average, Peak, Valley
- Hover: Tooltip with exact value and date
- Annotations: Mark major events (e.g., "Added 5 printers")
Chart 2: Jobs by Status (Stacked Area Chart)
- X-axis: Date
- Y-axis: Number of jobs
- Stacks: Completed / Failed / Cancelled
- Color-coded (green/red/gray)
Right Column:
Chart 3: Printer Performance Comparison (Horizontal Bar Chart)
- Y-axis: Printer names
- X-axis: Utilization % or Success Rate
- Sort by: Best to Worst
- Color gradient: Green (high) to Red (low)
- Click bar: Drill down to printer analytics
Chart 4: Material Usage (Donut Chart)
- Segments: Material types (PLA, PETG, ABS, etc.)
- Center: Total weight used
- Hover: Show exact grams and cost
- Click segment: View jobs using that material
Tab 1: Top Performers
- Table of printers sorted by utilization
- Columns: Printer, Utilization %, Success Rate, Total Prints, Total Hours
- Top 3 highlighted with badges (🥇🥈🥉)
Tab 2: Problem Printers
- Table of printers with lowest success rates or highest downtime
- Columns: Printer, Issues, Success Rate, Last Failure, Action
- Action: "Schedule Maintenance" button
Tab 3: Material Consumption
- Table showing material usage
- Columns: Material, Total Used (g), Cost, # of Jobs
- Footer: Total cost for period
Tab 4: Job History
- Searchable, filterable table of all jobs
- Columns: Job Name, Printer, Status, Duration, Material, Date
- Export to CSV button
AI-Generated Insights (if available):
- "Printer 12 has 15% lower success rate than average - consider maintenance"
- "PLA usage increased 25% this week"
- "Utilization peaks at 2-4 PM daily"
Action Buttons:
- "Generate Full Report" (PDF with all charts)
- "Set Up Alerts" (open notification preferences)
Layout: Two-panel (file tree + preview)
Navigation Tree:
📁 G-code Files
└─ 📁 Customer Projects
├─ 📁 Project Alpha
├─ 📁 Project Beta
└─ 📄 misc_parts.gcode
└─ 📁 Test Files
└─ 📁 Templates
📁 Model Files (STL/3MF)
└─ 📁 Mechanical Parts
└─ 📁 Enclosures
Top Buttons:
- Upload Files (primary button)
- New Folder (secondary button)
- Sort By: Name / Date / Size (dropdown)
Context Menu (right-click file):
- Preview
- Print Now
- Add to Queue
- Download
- Rename
- Move to Folder
- Delete
When File Selected:
Header:
- File Name: "gear_housing.gcode" (large)
- File Info: Size: 12.4 MB | Modified: 10/22/2024 2:34 PM
- Actions:
- Print Now (primary button)
- Add to Queue (secondary button)
- Download (icon button)
- Delete (icon button)
Preview Section:
- For G-code: 3D visualization of layers (use web-based G-code viewer)
- Layer slider (0 to max layers)
- Play animation button
- View modes: Layer-by-layer / Full model / Cross-section
- For STL/3MF: 3D model viewer
- Rotate, zoom, pan controls
- Measurements tool
- Slice preview (if slicer integrated)
Metadata (below preview):
- Print Settings (if available):
- Estimated Time: 2h 30m
- Material: ~75g PLA
- Layer Height: 0.2mm
- Supports: Yes
- File Hash: SHA-256 (for deduplication)
- Times Printed: 12
- Success Rate: 92%
Job History (expandable section):
- Table of past prints of this file
- Columns: Printer, Date, Status, Duration
- Link to job details
Drag-and-Drop Area (large):
- "Drag files here or click to browse"
- Supported formats: .gcode, .gco, .stl, .3mf
- Multiple file upload
Upload Progress:
- List of files being uploaded
- Progress bar per file
- Status: Uploading / Analyzing / Complete / Failed
Duplicate Detection:
- "This file already exists: gear_housing.gcode"
- Options:
- Replace existing (checkbox)
- Rename new file (text input)
- Skip upload (button)
Layout: Two-panel (sidebar menu + content area)
Categories:
- 👤 Profile
- 🖨️ Printer Groups (Admin)
- 📦 Materials (Admin)
- 🔔 Notifications
- 🔒 Security
- 🌐 Integrations (Admin)
- ⚙️ System (Admin)
User Information:
- Avatar: Upload button, circular crop
- Name: Text input
- Email: Text input (read-only if SSO)
- Role: Badge (Admin/Operator/Viewer, read-only)
- Language: Dropdown (English, Spanish, French, etc.)
- Timezone: Dropdown with search
Preferences:
- Theme: Light / Dark / Auto (toggle buttons)
- Dashboard Default View: Grid / List (toggle)
- Camera Quality: Low / Medium / High (radio buttons)
- Refresh Rate: Dropdown (1s / 5s / 10s / 30s)
Save Button (bottom)
Purpose: Organize printers by location or power circuit
Group List:
- Table with columns: Group Name, # Printers, Power Circuit ID
- Actions: Edit / Delete
Add Group Button (top-right)
Edit Group Modal:
- Group Name: Text input
- Description: Text area
- Power Circuit ID: Text input (for power management)
- Max Concurrent Power: Number input (# of printers that can run simultaneously)
- Assigned Printers: Multi-select checklist
Material Library:
- Table: Material Name, Type, Cost/kg, In Stock, Last Ordered
- Actions: Edit / Delete / Reorder
Add Material Button
Edit Material Modal:
- Material Name: Text input (e.g., "PLA - Black")
- Type: Dropdown (PLA / PETG / ABS / TPU / Nylon / Other)
- Cost per kg: Number input
- Min Stock Alert: Number input (grams)
- Supplier: Text input
- Spoolman Integration: Toggle + Spool ID input
Notification Channels:
Browser Notifications:
- Enable (toggle)
- Sound alerts (toggle)
- Allowed alert types (checkboxes):
- Critical errors
- Job completed
- Job failed
- Material low
- Maintenance due
Email Notifications:
- Enable (toggle)
- Email address (text input)
- Frequency: Immediate / Hourly Digest / Daily Digest
- Allowed alert types (same as above)
Slack Integration (if configured):
- Channel name
- Alert types to send
Alert Thresholds:
- Low Material Warning: <X grams (number input)
- High Failure Rate: >X% failed in Y hours (number inputs)
Change Password:
- Current Password (password input)
- New Password (password input)
- Confirm New Password (password input)
- Password strength indicator
- Change Password button
Active Sessions:
- Table: Device, Location, IP, Last Active
- "Sign Out" button per session
- "Sign Out All Other Sessions" button
API Keys (Admin/Operator):
- List of API keys with creation date
- "Create New API Key" button
- Modal: Name, Permissions (checkboxes), Expiration date
- Copy key to clipboard (only shown once)
- Revoke key button
Spoolman:
- Status: Connected / Not Connected
- Server URL (text input)
- "Test Connection" button
- Auto-sync interval (dropdown)
Moonraker:
- Auto-discovery: Enabled / Disabled (toggle)
- Polling interval (number input + seconds)
MinIO / File Storage:
- Endpoint (text input)
- Bucket name (text input)
- Access key / Secret key (password inputs)
- "Test Connection" button
Webhooks (future):
- Add webhook URL for external notifications
General Settings:
- Farm Name (text input)
- Farm Location (text input)
- Timezone (dropdown)
Database:
- Database size: 1.2 GB
- Last backup: 10/22/2024 3:00 AM
- "Backup Now" button
- Auto-backup: Enabled (toggle) + Schedule (cron-like)
Updates:
- Current version: v1.2.3
- "Check for Updates" button
- Auto-update: Enabled (toggle)
Logs:
- "View System Logs" button (opens log viewer)
- "Download Logs" button
Danger Zone (red border):
- Factory Reset: Resets all settings (requires confirmation)
- Delete All Data: Deletes all jobs, history, etc. (requires confirmation + password)
Triggered By: Clicking bell icon in top bar
Layout: Slide-out panel (right side) or modal
Title: "Notifications" Tabs:
- All
- Unread (with badge count)
- Critical
Actions:
- "Mark All as Read" button
- Settings gear icon (opens notification preferences)
Each Notification Card:
┌──────────────────────────────────────────────────┐
│ 🔴 Critical [x] Dismiss│
│ │
│ Printer 12 - Filament Runout │
│ Detected at Layer 234/567 │
│ │
│ 2 minutes ago │
│ │
│ [View Printer] [Mark as Read] │
└──────────────────────────────────────────────────┘
Types of Notifications:
- Critical (🔴 red): Printer errors, material runout
- Warning (🟡 yellow): Maintenance due, low material
- Info (🔵 blue): Job completed, job started
- Success (🟢 green): Schedule optimized, task completed
Unread: Bold text + subtle background color Read: Normal weight, slightly dimmed
Click Notification:
- Marks as read
- Navigates to relevant page (printer detail, job detail, etc.)
Swipe Actions (mobile):
- Swipe left: Mark as read
- Swipe right: Dismiss
Priority: Ensure core functionality works on tablets (iPad) and phones
Layout: Single column, scrollable
Top Section: KPI Cards (2×2 grid, stacked)
Printer Grid:
- 2×N grid on phone (portrait)
- 3×N grid on phone (landscape)
- 4×N grid on tablet
Hamburger Menu:
- Navigation in slide-out drawer
- Replaces left sidebar
Persistent Bottom Bar:
- Dashboard (home icon)
- Job Queue (list icon)
- Tasks (checkmark icon)
- Cameras (camera icon)
- More (three dots, opens full menu)
Layout: 2×2 grid (phone) or 3×3 grid (tablet)
- Swipe down to refresh
- Tap to focus on single camera
Focus View:
- Full-screen camera
- Swipe left/right to navigate between cameras
- Tap to show controls overlay
List View Only: Timeline view not available on small screens
Job Cards: Full-width, simplified
- Swipe left: Cancel
- Swipe right: Edit priority
- Tap: Open detail
Actor: Alex the Farm Manager
Scenario: Alex arrives at work and wants to quickly assess overnight activity
Steps:
- Login → Dashboard loads
- Scan Summary Cards (3 seconds)
- Active printers: 42/50 ✓
- Success rate: 94% ✓
- Alerts: 3 active
⚠️
- Click Alert Card → Notification center opens
- Review 3 alerts:
- Printer 12: Filament runout (completed 2h ago)
- Printer 7: Job failed due to bed adhesion
- Printer 29: Maintenance due today
- Review 3 alerts:
- Click "View Printer 7" → Printer detail modal opens
- Check camera feed (shows failed print)
- Review event log: "Layer 15 - Adhesion failure detected"
- Click "View Job" → Job detail shows
- Click "Restart Job" button
- Select "Assign to Printer 18" (same group)
- Confirm
- Return to Dashboard
- Scan printer grid visually
- All green/blue except Printer 12 (yellow - needs filament)
- Navigate to Tasks page
- See "Filament Change - Printer 12" at top of list
- Assign to Jamie O.
- Done - confident farm is running smoothly
Total Time: 2-3 minutes
Actor: Jamie the Operator
Scenario: Customer calls with rush order, needs to jump the queue
Steps:
- Navigate to Job Queue page
- Click "Upload Job" button → Modal opens
- Drag G-code file → gear_housing_v3.gcode
- System analyzes: ~2h 30m, PLA required
- Set Priority: Move slider to 9/10 (Urgent)
- Set Deadline: Tomorrow 9 AM
- Select Material: PLA (dropdown)
- Preview Section shows:
- 8 compatible printers available
- Estimated start: "In 15 minutes on Printer 7"
- Click "Upload & Queue"
- Confirmation: "Job added to queue. Est. start: 10:45 AM"
- Return to Queue List
- New job appears at top (green border = starting soon)
- Shows "Scheduled → Printer 7"
- Navigate to Dashboard
- Wait ~5 minutes
- Printer 7 card updates: "Printing: gear_housing_v3.gcode, 2% complete"
Total Time: 1-2 minutes
Actor: Jamie the Operator
Scenario: Jamie receives notification that Printer 12 needs filament change
Steps:
- Notification arrives (browser push + bell icon badge)
- Click notification → Opens Tasks page, focused on specific task
- Task Detail Modal opens automatically:
- "Filament Change - Printer 12"
- Current: PLA Black
- Required: PETG Red
- Instructions checklist:
- Heat nozzle to 240°C
- Unload current filament
- Load PETG Red
- Purge 50mm
- Update material in system
- Click "Start Task" → Status changes to "In Progress"
- Go to Printer 12 physically
- Return to task, check off steps:
- ✓ Heat nozzle to 240°C
- ✓ Unload current filament
- ✓ Load PETG Red
- ✓ Purge 50mm
- ✓ Update material in system
- Click "Upload Photo" → Takes picture of new spool
- Add completion note: "Changed to Spoolman ID #2847"
- Click "Mark Complete"
- Confirmation: "Task completed. Printer 12 ready for jobs."
- System automatically:
- Updates printer status to "Idle"
- Updates current material to "PETG Red"
- Assigns next job requiring PETG to Printer 12
Total Time: 3-5 minutes (physical work) + 1 minute (system updates)
Actor: Alex the Farm Manager
Scenario: Dashboard shows Printer 18 failed a print, Alex needs to diagnose
Steps:
- Dashboard → Printer 18 card shows red border
- Status: "Error - Print Failed"
- Last job: "enclosure_bracket.gcode"
- Click Printer 18 card → Detail modal opens
- Overview Tab visible by default:
- Camera shows: Print stopped mid-way, nozzle away from print
- Event log shows: "11:23 AM - Layer shift detected, print cancelled"
- Click "Current Job" tab:
- Job name: "enclosure_bracket.gcode"
- Failed at: Layer 87/234 (37% complete)
- Failure reason: "Layer shift detected by system"
- Review timelapse (if available):
- Scrub to ~37% → See print shift suddenly
- Hypothesis: Loose belt on Y-axis
- Click "Create Task" from printer menu:
- Template: "Maintenance"
- Title: "Check and tighten Y-axis belt"
- Priority: High
- Assign to: Jamie O.
- Add note: "Layer shift at 37%, likely loose belt"
- Return to Job Detail:
- Click "Restart Job" button
- Do not assign to Printer 18 (needs maintenance)
- Select "Auto-assign to available printer"
- Confirm
- Return to Dashboard:
- Printer 18 now shows yellow (maintenance scheduled)
- Restarted job appears in queue
Total Time: 4-6 minutes
Actor: Alex the Farm Manager
Scenario: Friday afternoon, Alex prepares weekly report for management
Steps:
- Navigate to Analytics page
- Set Date Range: "Last 7 Days"
- Review KPI Cards:
- Total Prints: 847 (+8% vs. prior week) ✓
- Success Rate: 92.3% (-1.2% vs. prior week)
⚠️ - Utilization: 81% (+3% vs. prior week) ✓
- Print Hours: 1,247h
- Note success rate drop → Investigate
- Click "Problem Printers" tab (below charts):
- Printer 7: 78% success rate (10 failures)
- Printer 12: 82% success rate (8 failures)
- Printer 29: 85% success rate (6 failures)
- Click "Printer 7" row → Drills down
- View failure breakdown: 7 adhesion failures, 3 material issues
- View common jobs: Most failures on "thin_wall_test.gcode"
- Hypothesis: Bed needs re-leveling, or file has issues
- Create tasks:
- Task 1: "Re-level bed on Printer 7" (Assign to Jamie)
- Task 2: "Review thin_wall_test.gcode file" (Assign to self)
- Return to Analytics
- Review Material Usage Chart:
- PLA: 45kg (up 12%)
- PETG: 18kg (down 5%)
- ABS: 8kg (stable)
- Click "Export to PDF" button
- Select: "Include all charts and tables"
- Confirm
- PDF downloads: "Farm3D_Weekly_Report_Week42_2024.pdf"
- Email report to management with summary notes
Total Time: 10-15 minutes
Actor: Alex the Farm Manager
Scenario: Fire alarm triggered in printer room, need to stop all printers immediately
Steps:
- Alex is at Dashboard (or any page)
- See/Hear fire alarm
- Click "EMERGENCY STOP" button (large red button, always visible in top bar)
- Confirmation Modal appears:
- "EMERGENCY STOP ALL PRINTERS?"
- "This will immediately stop all active prints and disable all printers."
- "Click and hold to confirm"
- Click and hold button for 2 seconds
- System executes:
- Sends emergency stop command to all printers via Moonraker
- Marks all active jobs as "Cancelled - Emergency Stop"
- Sets all printers to "Offline" status
- Broadcasts alert to all users: "EMERGENCY STOP ACTIVATED"
- Dashboard updates:
- All printer cards turn gray (offline)
- Large banner: "EMERGENCY STOP ACTIVE - All printers disabled"
- Button changes to "Resume Operations" (admin only)
- Fire resolved, safe to resume
- Alex clicks "Resume Operations":
- Requires password confirmation
- System re-enables printer connections
- Printers return to "Idle" status
- Jobs remain cancelled (manual restart required)
- Alex reviews:
- Check cameras for any visible damage
- Create tasks for physical inspection of each printer
- Manually restart jobs as needed
Total Time: 30 seconds (emergency stop) + 5-10 minutes (recovery)
Primary Button:
- Use: Main call-to-action (Upload Job, Create Task, Save)
- Style:
- Background: Primary color (#3B82F6 blue)
- Text: White, bold
- Border radius: 6px
- Padding: 12px 24px
- Hover: Darken 10%
- Active: Darken 20% + scale 98%
- Disabled: Gray, 50% opacity, no hover
Secondary Button:
- Use: Less important actions (Cancel, Assign)
- Style:
- Background: White (light mode) / Dark gray (dark mode)
- Text: Primary color
- Border: 1px solid primary color
- Same dimensions as primary
- Hover: Background tint of primary color (10% opacity)
Danger Button:
- Use: Destructive actions (Cancel Job, Delete, Emergency Stop)
- Style:
- Background: Red (#EF4444)
- Text: White
- Same dimensions as primary
- Hover: Darken 10%
- Confirmation required for critical actions
Icon Button:
- Use: Quick actions, toolbar buttons
- Style:
- Background: Transparent
- Icon: Primary or gray
- Padding: 8px
- Hover: Background tint
- Size: 32×32px or 40×40px
Floating Action Button (FAB):
- Use: Primary action on mobile (Upload, Add)
- Style:
- Circular, 56×56px
- Primary color background
- White icon (+ or upload)
- Shadow: 0 4px 8px rgba(0,0,0,0.2)
- Fixed position: bottom-right corner
- Hover: Lift shadow
Standard Card:
- Use: Printers, jobs, tasks
- Style:
- Background: White (light) / Dark gray (dark)
- Border: 1px solid light gray
- Border radius: 8px
- Padding: 16px
- Shadow: 0 2px 4px rgba(0,0,0,0.1)
- Hover: Shadow increase to 0 4px 8px
Status Card (for printers):
- Additional:
- Top border: 4px solid (status color)
- Hover: Border expands to 6px
Metric Card (KPI cards):
- Layout:
- Icon (top-left, 32×32px)
- Large number (center, 48px font)
- Label (below number, 14px)
- Subtitle (below label, 12px, gray)
- Optional: Sparkline chart (bottom)
Text Input:
- Style:
- Border: 1px solid light gray
- Border radius: 6px
- Padding: 10px 12px
- Focus: Blue border (2px), shadow
- Error: Red border + red label
- Disabled: Gray background, no border
Dropdown/Select:
- Style: Same as text input + chevron down icon
- Behavior:
- Click opens menu (max height 300px, scrollable)
- Search bar if >10 options
- Keyboard navigation (arrow keys)
Slider:
- Use: Priority, temperature, volume
- Style:
- Track: Light gray, 4px height
- Thumb: Primary color circle, 16px diameter
- Fill: Primary color (from min to thumb)
- Labels: Min and max values at ends
- Current value: Above thumb or tooltip on hover
Toggle Switch:
- Use: Enable/disable features
- Style:
- Track: Gray (off) / Primary color (on)
- Thumb: White circle, slides left/right
- Size: 44px wide × 24px tall
- Smooth animation (200ms)
Date/Time Picker:
- Style:
- Input field with calendar icon
- Click opens calendar overlay
- Calendar: Standard grid, today highlighted
- Time: 12-hour or 24-hour based on locale
- "Today" and "Clear" buttons at bottom
Sidebar Navigation (desktop):
- Style:
- Fixed left, 240px wide (collapsed: 60px)
- Background: Dark gray (#1F2937)
- Icons + labels for each page
- Active page: Primary color background + white text
- Hover: Lighten background
- Collapse button at bottom
Top Navigation Bar:
- Left: Logo or farm name
- Center: Global search bar
- Right: Notifications, user avatar, settings
Breadcrumbs:
- Use: Deep pages (Printer > Printer 12 > History)
- Style:
- Text links with "/" separator
- Current page: Bold, not clickable
- Hover: Underline
Tabs (horizontal):
- Style:
- Border bottom: 1px solid light gray
- Active tab: Primary color bottom border (2px) + primary text
- Inactive: Gray text
- Hover: Lighten text
- Padding: 12px 16px per tab
Toast Notification:
- Use: Success confirmations, errors
- Style:
- Slide in from top or bottom-right
- Width: 300px, auto height
- Background: White with colored left border (4px)
- Colors: Green (success), red (error), blue (info), yellow (warning)
- Icon matching color
- Close button (X)
- Auto-dismiss after 5 seconds
- Clickable for more details
Alert Banner:
- Use: Persistent warnings, important info
- Style:
- Full-width bar at top of page
- Background: Light tint of alert color
- Icon + message + action button
- Dismiss button (X)
- Sticky position (stays at top when scrolling)
Progress Bar:
- Use: Job progress, upload progress
- Style:
- Track: Light gray, 8px height
- Fill: Primary color or gradient
- Border radius: 4px
- Percentage label: Right side or center
Loading Spinner:
- Use: While fetching data
- Style:
- Circular spinner, primary color
- Size: 24px (inline) or 48px (full-page)
- Smooth rotation animation
Skeleton Loader:
- Use: Placeholder while content loads
- Style:
- Gray rectangles matching content layout
- Shimmer animation (pulse)
- Example: Card with skeleton for image + 3 text lines
Standard Modal:
- Style:
- Overlay: Black, 50% opacity
- Content: White card, centered
- Max width: 600px (small), 900px (large)
- Border radius: 12px
- Shadow: Large (0 8px 16px)
- Header: Title + close button
- Body: Content area with padding
- Footer: Action buttons (right-aligned)
- ESC key to close
Confirmation Modal:
- Use: Destructive actions
- Style: Same as standard + warning icon
- Buttons: "Cancel" (secondary) + "Confirm" (danger)
Drawer (slide-in panel):
- Use: Notification center, settings
- Style:
- Slides from right or bottom
- Full height, 400px wide (or 80% on mobile)
- White background
- Close button or swipe to dismiss
- Header: Title + close
- Body: Scrollable content
Line Chart:
- Use: Trends over time (utilization, temperature)
- Library: Chart.js or Recharts
- Features:
- Hover tooltips with exact values
- Legend (toggleable series)
- Zoom/pan controls for large datasets
- Responsive (scales to container)
Bar Chart:
- Use: Comparisons (printer performance)
- Features:
- Horizontal or vertical
- Stacked or grouped
- Click bar for drill-down
Donut/Pie Chart:
- Use: Proportions (material usage)
- Features:
- Center label (total or title)
- Hover for percentage
- Click segment for details
Gauge Chart:
- Use: Temperatures, success rate
- Style:
- Semicircle or full circle
- Color gradient (green to red)
- Large number in center
- Min/max labels
Gantt Chart (timeline):
- Use: Job schedule
- Features:
- Drag-and-drop
- Zoom controls
- Color-coded bars
- Tooltips on hover
WebSocket Connection:
- Establish on page load
- Auto-reconnect if dropped
- Show "Reconnecting..." toast if connection lost >5s
- Visual indicator: Green dot in nav bar when connected
Update Patterns:
- Printer Status: Push every 10s (or on change)
- Job Progress: Push every 30s (or 5% increment)
- Alerts: Push immediately
- Queue Changes: Push immediately after optimization
Visual Feedback:
- Updated elements briefly flash/highlight (subtle animation)
- Timestamps show "Updated Xs ago" (live countdown)
- "Live" badge on camera feeds (pulsing red dot)
Job Queue Reordering:
- Trigger: Click and hold drag handle (6-dot icon)
- Visual:
- Card lifts (shadow increase)
- Other cards shift to make space (smooth animation)
- Drop indicator: Blue line between cards
- Release: Card drops into new position
- Feedback: "Priority updated" toast
- Backend: Recalculates priorities based on new order
File Upload:
- Drop Zone:
- Dashed border when dragging file over
- Changes to solid primary border on hover
- "Drop files here" text appears
- Accept: Shows checkmark animation
- Reject (wrong file type): Shows X + error message
Global Search (top nav):
- Trigger: Click search icon or Cmd/Ctrl+K
- UI:
- Overlay with large search input
- Live results as you type (debounced 300ms)
- Categorized results: Printers / Jobs / Files
- Arrow keys to navigate, Enter to open
- Scope: Searches printers, jobs, files, tasks
- Close: ESC key or click outside
Filter Dropdowns:
- Multi-Select:
- Checkboxes for each option
- "Apply" and "Clear" buttons
- Selected count badge on dropdown button
- Single-Select:
- Radio buttons
- Closes automatically on selection
- Visual: Active filters shown as removable chips above list
Pagination (tables, large lists):
- Style:
- Page numbers with prev/next arrows
- "Showing 1-20 of 342" text
- Jump to page input (for large datasets)
- Items per page: 20 / 50 / 100 dropdown
Infinite Scroll (camera grid, printer grid):
- Behavior:
- Load next batch when scrolling near bottom (500px threshold)
- Loading spinner appears at bottom
- "No more items" message when done
- Performance: Virtualized scrolling for 100+ items (render only visible + buffer)
Swipe Actions:
- Cards:
- Swipe left: Reveal delete/cancel button
- Swipe right: Reveal edit/info button
- Notifications:
- Swipe left: Dismiss
- Swipe right: Mark as read
Pull to Refresh:
- Dashboard, Job Queue, Tasks:
- Pull down from top
- Loading indicator appears
- Release to refresh
Pinch to Zoom:
- Camera feeds, charts:
- Two-finger pinch/spread
- Smooth zoom animation
Global:
Cmd/Ctrl + K: Open searchCmd/Ctrl + /: Show keyboard shortcuts helpESC: Close modal/drawer
Navigation:
G then D: Go to DashboardG then P: Go to PrintersG then J: Go to Job QueueG then T: Go to Tasks
Actions:
N: New (context-dependent: new job, new task, etc.)R: Refresh current view?: Help/documentation
Tables:
Arrow Up/Down: Navigate rowsEnter: Open selected rowSpace: Select/deselect row (multi-select)
Desktop: ≥1280px (full layout) Tablet: 768px - 1279px (condensed layout) Mobile: <768px (single column, bottom nav)
Desktop (≥1280px):
- Sidebar navigation (left, 240px)
- Multi-column layouts (2-3 columns)
- Printer grid: 6×6 or larger
- Floating panels and modals
- Hover states and tooltips
Tablet (768-1279px):
- Collapsible sidebar (60px icons only) or top nav
- Two-column layouts
- Printer grid: 4×4 or 5×5
- Full-screen modals
- Reduced whitespace
Mobile (<768px):
- Bottom tab navigation (5 tabs max)
- Single column layouts
- Printer grid: 2×N (portrait) or 3×N (landscape)
- Full-screen modals (slide up from bottom)
- Drawer navigation for secondary menus
- Larger touch targets (min 44×44px)
- Collapsible sections (accordions)
Navigation:
- Desktop: Left sidebar
- Tablet: Top bar with hamburger
- Mobile: Bottom tabs + hamburger
KPI Cards:
- Desktop: 4-column grid
- Tablet: 2×2 grid
- Mobile: Vertical stack or horizontal scroll
Printer Grid:
- Desktop: 6×6, 8×8, or larger
- Tablet: 4×4 or 5×5
- Mobile: 2×N (portrait) or 3×N (landscape)
Tables:
- Desktop: Full table with all columns
- Tablet: Hide less important columns
- Mobile: Card view instead of table
Forms:
- Desktop: Two-column layout
- Tablet: Two-column layout
- Mobile: Single column, stacked
Charts:
- Desktop: Large, multiple charts side-by-side
- Tablet: Smaller, vertical stack
- Mobile: Full-width, swipe to see more
Bottom Navigation:
- 5 primary tabs (Dashboard, Printers, Jobs, Tasks, More)
- Active tab: Primary color + icon fill
- Badge counts on Jobs and Tasks
Sticky Headers:
- Page title and key actions stick to top when scrolling
- Breadcrumbs collapse to just "< Back" on mobile
Swipe Navigation:
- Swipe between tabs (e.g., printer detail tabs)
- Swipe between cameras (in focus view)
Optimized Inputs:
- Native mobile keyboards (numeric for numbers, etc.)
- Date/time pickers use native mobile pickers
- Camera upload uses device camera directly
Focus Indicators:
- All interactive elements must have visible focus outline
- Outline: 2px solid primary color
- Offset: 2px from element
Tab Order:
- Logical order (left-to-right, top-to-bottom)
- Skip navigation link at top (jump to main content)
- Modals trap focus (cycle within modal)
Interactive Elements:
- All buttons, links, inputs keyboard accessible
- Custom components (dropdowns, toggles) fully keyboard operable
Semantic HTML:
- Use proper heading hierarchy (h1, h2, h3)
- Use
<button>for buttons,<a>for links - Use
<nav>,<main>,<article>, etc.
ARIA Labels:
- All icons have
aria-labeloraria-labelledby - Status updates use
aria-liveregions - Complex widgets (tabs, accordions) use proper ARIA roles
Alt Text:
- All images have descriptive
alttext - Camera feeds: "Live feed from Printer 12"
- Charts: Provide text summary or data table alternative
Dynamic Content:
- Status changes announced to screen readers
- Progress updates announced at key milestones (25%, 50%, 75%, 100%)
- Alerts use
role="alert"for immediate announcement
Color Contrast:
- Text: Minimum 4.5:1 contrast ratio (WCAG AA)
- Large text (18px+): Minimum 3:1
- Icons and UI elements: Minimum 3:1
Color Independence:
- Status not indicated by color alone (use icons + text)
- Charts use patterns in addition to colors
- Color-blind friendly palette (use tools like ColorOracle)
Text Sizing:
- Base font size: 16px minimum
- Allow browser zoom up to 200% without breaking layout
- No horizontal scrolling at 200% zoom
Focus States:
- Never remove focus outlines
- Ensure sufficient contrast for focus indicators
Reduced Motion:
- Respect
prefers-reduced-motionmedia query - Disable animations for users who prefer reduced motion
- Keep essential movement only (progress bars, loading spinners)
Animation Best Practices:
- Duration: 200-300ms for UI transitions
- Easing: Use natural curves (ease-out, ease-in-out)
- No infinite animations (except loading states)
Primary Colors:
- Primary Blue: #3B82F6 (buttons, links, active states)
- Dark Blue: #1E40AF (hover states)
- Light Blue: #BFDBFE (backgrounds, highlights)
Status Colors:
- Success Green: #10B981 (printing, completed)
- Warning Yellow: #F59E0B (warnings, maintenance)
- Error Red: #EF4444 (errors, critical alerts)
- Info Blue: #3B82F6 (info messages)
- Idle Gray: #6B7280 (idle, offline)
Neutral Grays:
- Black: #111827 (text, dark mode background)
- Dark Gray: #1F2937 (sidebar, cards in dark mode)
- Medium Gray: #6B7280 (secondary text, borders)
- Light Gray: #D1D5DB (borders, dividers)
- Off-White: #F9FAFB (backgrounds, cards in light mode)
- White: #FFFFFF (main background)
Semantic Colors:
- Link: #3B82F6 (underline on hover)
- Disabled: #9CA3AF (50% opacity)
Font Family:
- Primary: Inter, system-ui, -apple-system, sans-serif
- Monospace: "Courier New", monospace (for G-code, logs)
Font Sizes:
- h1: 32px, bold (page titles)
- h2: 24px, semi-bold (section headings)
- h3: 20px, semi-bold (card titles)
- Body: 16px, regular (main text)
- Small: 14px, regular (labels, secondary text)
- Tiny: 12px, regular (timestamps, captions)
Font Weights:
- Bold: 700 (headings, important text)
- Semi-Bold: 600 (sub-headings, labels)
- Regular: 400 (body text)
Line Heights:
- Headings: 1.2 (tight)
- Body: 1.5 (comfortable reading)
- UI: 1.3 (compact for UI elements)
Letter Spacing:
- Headings: -0.02em (slightly tighter)
- Body: 0 (default)
- All Caps: 0.05em (looser for readability)
Base Unit: 4px
Spacing Scale:
- xs: 4px (0.25rem)
- sm: 8px (0.5rem)
- md: 16px (1rem)
- lg: 24px (1.5rem)
- xl: 32px (2rem)
- 2xl: 48px (3rem)
- 3xl: 64px (4rem)
Usage:
- Card padding: 16px (md)
- Section spacing: 32px (xl) vertical, 24px (lg) horizontal
- Button padding: 12px 24px
- Input padding: 10px 12px
- Grid gap: 16px (md) or 24px (lg)
Border Radius:
- sm: 4px (inputs, small elements)
- md: 6px (buttons, cards)
- lg: 8px (larger cards)
- xl: 12px (modals)
- full: 50% (circular buttons, avatars)
Border Width:
- Default: 1px (dividers, cards)
- Thick: 2px (focus states)
- Status: 4px (top border on status cards)
Shadows (elevation):
- sm: 0 1px 2px rgba(0, 0, 0, 0.05) (subtle)
- md: 0 2px 4px rgba(0, 0, 0, 0.1) (cards)
- lg: 0 4px 8px rgba(0, 0, 0, 0.15) (hover)
- xl: 0 8px 16px rgba(0, 0, 0, 0.2) (modals)
Icon Library:
- Primary: Heroicons or Lucide (consistent style)
- Size: 16px, 20px, 24px (based on context)
- Stroke: 2px (regular), 2.5px (bold for emphasis)
Icon Usage:
- Always pair with text for critical actions
- Use consistent icons across app (e.g., always use same "settings" icon)
- Color: Inherit text color or use status colors
Common Icons:
- Printer: 🖨️ (printer icon)
- Job: 📄 (document icon)
- Task: ✓ (checkmark icon)
- Alert:
⚠️ (triangle with exclamation) - Settings: ⚙️ (gear icon)
- Camera: 📹 (video camera icon)
- Search: 🔍 (magnifying glass)
- Menu: ☰ (hamburger icon)
- Close: ✕ (X icon)
- Edit: ✏️ (pencil icon)
- Delete: 🗑️ (trash icon)
Container:
- Max width: 1440px (desktop)
- Padding: 24px (desktop), 16px (mobile)
- Centered on screen
Grid System:
- 12-column grid (desktop)
- 8-column grid (tablet)
- 4-column grid (mobile)
- Gutter: 24px (desktop), 16px (mobile)
Content Blocks:
- Cards: Span 3-4 columns (desktop), full-width (mobile)
- Forms: Max width 600px for readability
Pages:
-
🎨 Design System
- Color palette
- Typography specimens
- Component library (buttons, inputs, cards, etc.)
- Icon set
- Spacing guide
-
📱 Screens - Desktop
- Dashboard
- Printers (list, detail)
- Job Queue
- Tasks
- Cameras
- Analytics
- Files
- Settings
-
📱 Screens - Mobile
- Mobile versions of all screens
-
🔄 User Flows
- Flowcharts with arrows connecting screens
- Annotations for key interactions
-
🎭 States & Variations
- Empty states
- Loading states
- Error states
- Different user roles
Auto Layout:
- Use Auto Layout for all components (buttons, cards, forms)
- Define padding and spacing using 4px base unit
- Set constraints for responsive behavior
Variants:
- Button: Primary / Secondary / Danger × Default / Hover / Active / Disabled
- Status Badge: Online / Offline / Printing / Error / Idle
- Card: Default / Hover / Selected
Component Properties:
- Text override: Job name, printer name, etc.
- Boolean properties: Show icon, Show badge, etc.
- Instance swap: Icon, Avatar
Interactions:
- Click to navigate between screens
- Hover to show tooltips and hover states
- Drag for drag-and-drop (job reordering)
- Scroll for long lists
Animations:
- Smart animate for smooth transitions
- Dissolve for modals appearing/disappearing
- Slide for panel/drawer open/close
Flows:
- Create separate flows for each user story
- Start frame: Dashboard
- End frame: Success state or error state
Export Specifications:
- CSS variables for colors, spacing, shadows
- Typography styles with exact specs
- Component dimensions and spacing
- Icon SVG files
- Image assets (logos, illustrations)
Developer Handoff Notes:
- Annotate complex interactions
- Explain conditional logic (e.g., "Show alert banner only if >0 alerts")
- Specify API data bindings (e.g., "Printer name from API: printer.name")
Advanced Filtering:
- Saved filters (favorite combinations)
- Complex queries (e.g., "PLA jobs >2 hours on idle printers")
Batch Operations:
- Multi-select jobs/tasks/printers
- Bulk actions (change priority, assign, cancel)
Custom Dashboards:
- Drag-and-drop dashboard builder
- Widget library (KPIs, charts, camera feeds)
- Save multiple layouts per user
Mobile App:
- Native iOS/Android app (React Native or Flutter)
- Push notifications
- Offline mode (view cached data)
Print Fault Detection:
- Real-time alerts overlaid on camera feeds
- Confidence scores (e.g., "85% likely layer shift")
- Auto-pause on critical detections
- Defect heatmap showing problem areas
Predictive Maintenance:
- ML-based predictions (e.g., "Printer 12 likely to fail in 20 prints")
- Maintenance scheduling optimization
- Anomaly detection (unusual vibrations, temps)
Smart Suggestions:
- Job-printer matching (AI recommends best printer)
- Schedule optimization suggestions
- Material recommendations based on success rates
Multi-Site Management:
- Site selector dropdown
- Aggregate stats across all sites
- Transfer jobs between sites
Cost Tracking:
- Detailed cost per job (material, energy, labor)
- Customer billing integration
- Profitability analysis
Client Portal:
- Public-facing view for customers
- Order tracking
- Camera access (if permissions granted)
- Upload new jobs
API & Webhooks:
- Public REST API for integrations
- Webhooks for events (job completed, printer error)
- OAuth 2.0 for third-party apps
This UI/UX specification document provides a comprehensive blueprint for designing and building the Farm3D platform. It covers:
✅ Complete user flows for all primary use cases ✅ Detailed screen-by-screen specifications ✅ Component library and design system ✅ Accessibility and responsive design guidelines ✅ Visual design specifications (colors, typography, spacing)
-
Review & Feedback (Week 1):
- Review with stakeholders
- Gather feedback on user flows and priorities
- Confirm design direction
-
Design System Creation (Week 2):
- Build Figma component library
- Define all variants and states
- Create color, typography, and spacing guides
-
High-Fidelity Mockups (Weeks 3-5):
- Create all desktop screens (8-10 key screens)
- Create mobile variations (5-6 key screens)
- Focus on Dashboard, Job Queue, and Printer Detail first
-
Prototyping (Week 6):
- Link screens with interactions
- Create flows for 3-4 key user stories
- Add hover states and animations
-
User Testing (Week 7):
- Test with 3-5 users from target personas
- Gather feedback on usability
- Iterate based on findings
-
Developer Handoff (Week 8):
- Export design tokens and assets
- Create handoff documentation
- Conduct walkthrough with frontend team
- Support during implementation
📦 Figma file with 5 pages (Design System, Desktop Screens, Mobile Screens, User Flows, States) 📦 Interactive prototype for key flows 📦 Design token export (CSS variables, JSON) 📦 Asset export (icons, logos, images) 📦 Handoff documentation
Document End
Prepared By: Farm3D Design Team
Date: October 2025
Version: 1.0