From 307bb0cd69e9534161c80dc8fa161834a21e88c1 Mon Sep 17 00:00:00 2001 From: itten Date: Thu, 9 Jul 2026 01:48:13 +0300 Subject: [PATCH] design guide --- design.md | 334 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 334 insertions(+) create mode 100644 design.md diff --git a/design.md b/design.md new file mode 100644 index 0000000..2071495 --- /dev/null +++ b/design.md @@ -0,0 +1,334 @@ +# 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.