itten
335 lines
7.6 KiB
Markdown
335 lines
7.6 KiB
Markdown
# Cyber-Industrial Node-Based UI Design Reference
|
|
|
|
## Overall Style
|
|
|
|
A **high-end professional node-based video processing application** with
|
|
a minimalist industrial aesthetic.
|
|
|
|
The interface feels like software used in a TV broadcast control room,
|
|
media server, or VJ system rather than consumer software.
|
|
|
|
### Design Keywords
|
|
|
|
- minimal
|
|
- monochrome
|
|
- cyber-industrial
|
|
- engineering UI
|
|
- futuristic without glowing neon
|
|
- functional
|
|
- precision
|
|
- technical
|
|
- military HUD inspired
|
|
- professional AV software
|
|
- dark command center
|
|
- node graph editor
|
|
- data visualization
|
|
- clean wireframe
|
|
|
|
There are almost no decorative elements. Everything exists because it
|
|
serves a purpose.
|
|
|
|
## Color Palette
|
|
|
|
Element Color
|
|
-------------------- ----------------------
|
|
Primary background `#060606`
|
|
Panels `#0B0B0B`, `#101010`
|
|
Borders `#2A2A2A`, `#353535`
|
|
Primary text `#E6E6E6`
|
|
Secondary text `#8B8B8B`
|
|
Muted labels `#666666`
|
|
Accent `#FF4040`
|
|
|
|
The red accent is reserved only for: - recording indicator - selected
|
|
source - status light
|
|
|
|
No blue, green, gradients, or unnecessary colors.
|
|
|
|
## Typography
|
|
|
|
Suggested fonts: - IBM Plex Mono - JetBrains Mono - Space Mono - Geist
|
|
Mono - SF Mono - Eurostile - DIN
|
|
|
|
Characteristics: - ALL CAPS - generous letter spacing - thin font
|
|
weight - technical appearance
|
|
|
|
## Layout
|
|
|
|
Three-column application layout:
|
|
|
|
- **Left:** Sources / Navigation
|
|
- **Center:** Node graph workspace
|
|
- **Right:** Inspector
|
|
- **Bottom:** Preview + system monitors
|
|
- **Top:** Thin status bar
|
|
|
|
Everything aligns to a strict grid.
|
|
|
|
## Panels
|
|
|
|
- Rectangular
|
|
- No rounded corners
|
|
- No shadows
|
|
- No blur
|
|
- Thin 1px borders
|
|
- Flat appearance
|
|
|
|
## Grid
|
|
|
|
Use dotted separators instead of thick dividers.
|
|
|
|
Background may include subtle engineering-style dot matrices.
|
|
|
|
## Node Graph
|
|
|
|
- Large black canvas
|
|
- White Bézier connection lines
|
|
- Thin anti-aliased wires
|
|
- Circular input/output sockets
|
|
|
|
### Node Structure
|
|
|
|
``` text
|
|
+----------------------+
|
|
| TEST PATTERN |
|
|
| |
|
|
| VIDEO ○ |
|
|
| AUDIO ○ |
|
|
+----------------------+
|
|
```
|
|
|
|
Each node contains: - title - icon - ports - small ID
|
|
|
|
## Icons
|
|
|
|
Wireframe only.
|
|
|
|
Examples: - camera - folder - network - monitor - mixer - speaker -
|
|
antenna
|
|
|
|
No filled icons.
|
|
|
|
## Controls
|
|
|
|
Text-based buttons:
|
|
|
|
``` text
|
|
[ RUN ]
|
|
[ STOP ]
|
|
[ DETACH NODE ]
|
|
```
|
|
|
|
Selection is indicated with a small red dot.
|
|
|
|
## Navigation
|
|
|
|
Example sources:
|
|
|
|
- TEST PATTERN
|
|
- NDI INPUT
|
|
- DECKLINK
|
|
- MEDIA FILE
|
|
- CAMERA
|
|
- COLOR BAR
|
|
- BLACK
|
|
- IMAGE SEQ
|
|
- SCREEN CAPTURE
|
|
- STREAM INPUT
|
|
|
|
## Inspector
|
|
|
|
Displays: - Node name - Type - ID - Resolution - FPS - Pixel format -
|
|
Audio settings - Status
|
|
|
|
## Preview
|
|
|
|
Wide cinematic preview panel with thin borders and minimal chrome.
|
|
|
|
## System Monitor
|
|
|
|
Shows: - CPU - GPU - Memory - Uptime
|
|
|
|
Simple monochrome progress bars.
|
|
|
|
## Spacing
|
|
|
|
Use a consistent spacing system:
|
|
|
|
- 8 px
|
|
- 16 px
|
|
- 24 px
|
|
- 32 px
|
|
|
|
## Borders
|
|
|
|
- 1px strokes
|
|
- No shadows
|
|
- No elevation
|
|
|
|
## Visual Language
|
|
|
|
Built from: - lines - boxes - dots - wireframes - text
|
|
|
|
No decorative artwork.
|
|
|
|
## Motion
|
|
|
|
- subtle fades
|
|
- smooth cable animation
|
|
- no bounce
|
|
- no exaggerated easing
|
|
|
|
## Inspirations
|
|
|
|
- Blackmagic Fusion
|
|
- TouchDesigner
|
|
- Resolume Arena
|
|
- vvvv Gamma
|
|
- Unreal Blueprint
|
|
- VizRT
|
|
- Ross Video
|
|
- Disguise Media Server
|
|
- OBS Studio (professional redesign)
|
|
- CAD software
|
|
- Sci-fi HUDs (restrained)
|
|
|
|
## Design Principles
|
|
|
|
- Function over decoration
|
|
- High information density without clutter
|
|
- Precision and clarity
|
|
- Minimal color usage
|
|
- Monochrome-first
|
|
- Technical engineering aesthetic
|
|
- Strict grid alignment
|
|
- Flat 2D design
|
|
- Every pixel serves a purpose
|
|
|
|
## Condensed Prompt
|
|
|
|
> Design a professional node-based broadcast media application with a
|
|
> minimalist cyber-industrial aesthetic. Use an almost entirely
|
|
> monochrome palette: matte black backgrounds (#060606), charcoal panels
|
|
> (#101010), thin gray 1px borders (#2A2A2A), white technical
|
|
> typography, and a single red accent (#FF4040) reserved for status
|
|
> indicators. Organize the interface into a left source browser, central
|
|
> node graph canvas, right inspector panel, top status bar, and bottom
|
|
> preview/system monitors. The node graph uses white wireframe nodes
|
|
> with rounded Bézier cable connections, circular input/output ports,
|
|
> and minimal icons. Typography is uppercase, monospaced, and widely
|
|
> spaced. Panels are flat rectangles with no shadows, no gradients, and
|
|
> no rounded corners. Separate sections with dotted divider lines and
|
|
> subtle engineering-grid patterns. The overall feel should resemble
|
|
> TouchDesigner, Blackmagic Fusion, Unreal Blueprint, and professional
|
|
> TV broadcast control software---precise, understated, highly
|
|
> functional, and engineered rather than decorative.
|
|
|
|
# Improving the Cyber-Industrial UI
|
|
|
|
## Executive Summary
|
|
|
|
The current design is visually excellent: minimal, professional, and
|
|
cohesive. However, it prioritizes aesthetics over operational
|
|
efficiency. The goal should be to preserve the visual identity while
|
|
increasing scanability, reducing interaction cost, and improving
|
|
workflow for power users.
|
|
|
|
## Strengths
|
|
|
|
- Strong visual identity.
|
|
- Excellent monochrome discipline.
|
|
- Consistent spacing and alignment.
|
|
- Professional engineering aesthetic.
|
|
- Clean node graph.
|
|
- Low visual noise.
|
|
|
|
## Opportunities
|
|
|
|
### 1. Stronger Visual Hierarchy
|
|
|
|
Increase contrast between: - headings - labels - values - metadata
|
|
|
|
Important values should be immediately recognizable.
|
|
|
|
### 2. Better Color Semantics
|
|
|
|
Keep monochrome, but reserve accent colors consistently:
|
|
|
|
- Red = error / recording
|
|
- Amber = warning
|
|
- Green = connected / healthy
|
|
- Blue = selection or active editing
|
|
|
|
Use colors sparingly.
|
|
|
|
### 3. Improve Node Readability
|
|
|
|
- Larger node titles
|
|
- Better spacing around ports
|
|
- Optional node color tags
|
|
- Display processing state
|
|
|
|
### 4. Inspector Improvements
|
|
|
|
Group settings into collapsible sections: - General - Video - Audio -
|
|
Performance - Metadata
|
|
|
|
### 5. Better Status Feedback
|
|
|
|
Display: - dropped frames - latency - bitrate - GPU memory - node
|
|
execution time
|
|
|
|
### 6. Richer Connection Visualization
|
|
|
|
Differentiate: - video - audio - metadata - control using line styles or
|
|
subtle color accents.
|
|
|
|
### 7. Faster Navigation
|
|
|
|
- searchable node palette
|
|
- quick actions
|
|
- command palette
|
|
- keyboard-first workflow
|
|
|
|
### 8. Dockable Workspace
|
|
|
|
Allow panels to: - float - resize - hide - dock
|
|
|
|
### 9. Better Empty States
|
|
|
|
Guide users with: - templates - examples - drag-and-drop hints
|
|
|
|
### 10. Accessibility
|
|
|
|
- scalable fonts
|
|
- colorblind-safe indicators
|
|
- larger click targets
|
|
- keyboard navigation
|
|
|
|
## Micro-Interactions
|
|
|
|
Keep animations subtle: - smooth node creation - cable routing
|
|
animation - fade transitions - lightweight hover feedback
|
|
|
|
## Modern Enhancements
|
|
|
|
Optional: - minimap improvements - graph bookmarks - performance
|
|
overlays - execution profiling - graph search - breadcrumbs - undo
|
|
history visualization
|
|
|
|
## Design Principles
|
|
|
|
Maintain: - flat design - monochrome-first palette - thin borders -
|
|
generous whitespace - engineering precision
|
|
|
|
Avoid: - glassmorphism - excessive shadows - neon lighting - oversized
|
|
icons - decorative animations
|
|
|
|
## Summary
|
|
|
|
The design should evolve toward a professional engineering workstation
|
|
rather than a futuristic dashboard. Every improvement should increase
|
|
usability without sacrificing clarity or introducing visual noise. The
|
|
software should feel fast, precise, predictable, and built for experts
|
|
who spend hours inside the application.
|