140 lines
5.7 KiB
Markdown
140 lines
5.7 KiB
Markdown
# BMC Hub - Design System & UI Plan
|
|
|
|
## 1. Design Filosofi: "Nordic Top"
|
|
Dette designdokument beskriver UI/UX-strategien for BMC Hub, baseret på templaten **10_nordic_top**. Designet er forankret i skandinavisk minimalisme med fokus på funktionalitet, luft og overskuelighed.
|
|
|
|
**Nøgleprincipper:**
|
|
* **Fuld Bredde (Fluid Layout):** Udnytter hele skærmens bredde for maksimalt overblik, ideelt til store datatabeller og dashboards.
|
|
* **Top-Navigation:** En fastgjort topbar frigiver plads i siderne og giver en velkendt, hierarkisk navigationsstruktur med dropdowns.
|
|
* **Kort-baseret UI:** Indhold grupperes i "cards" med bløde skygger og rundede hjørner for at skabe visuelt hierarki.
|
|
* **Accent-farver:** En dyb blå (`#0f4c75`) bruges konsekvent til handlinger og branding, suppleret af lyse baggrunde.
|
|
|
|
---
|
|
|
|
## 2. Visuel Identitet
|
|
|
|
### Farvepalette
|
|
Designet benytter en stram palette defineret via CSS variabler for nem vedligeholdelse.
|
|
|
|
| Variabel | Farvekode | Anvendelse |
|
|
| :--- | :--- | :--- |
|
|
| `--accent` | `#0f4c75` (Dyb Blå) | Primære knapper, aktiv navigation, branding, ikoner |
|
|
| `--accent-light` | `#eef2f5` (Lys Blå/Grå) | Hover-effekter, baggrund for ikoner, aktive menupunkter |
|
|
| `--text-primary` | `#2c3e50` (Mørkegrå) | Overskrifter, primær tekst |
|
|
| `--text-secondary` | `#6c757d` (Mellemgrå) | Brødtekst, labels, meta-data |
|
|
| `--bg-body` | `#f8f9fa` (Off-white) | Sidens baggrundsfarve |
|
|
| `--bg-card` | `#ffffff` (Hvid) | Kort, navbar, modaler |
|
|
|
|
### Typografi
|
|
* **Font:** 'Inter', system-ui, sans-serif.
|
|
* **Vægtning:**
|
|
* **Bold (700):** Overskrifter, KPI-tal.
|
|
* **Medium (500):** Labels, menupunkter, knaptekst.
|
|
* **Regular (400):** Brødtekst.
|
|
|
|
---
|
|
|
|
## 3. Komponentbibliotek
|
|
|
|
### Navigation (Topbar)
|
|
* **Struktur:** Logo venstre, Menu center, Profil/Notifikationer højre.
|
|
* **Dropdowns:** Bruges til underkategorier (f.eks. Kunder -> Oversigt, Opret, Rapporter).
|
|
* **Aktiv Tilstand:** Markeres med `--accent-light` baggrund og `--accent` tekstfarve.
|
|
|
|
### Knapper (Buttons)
|
|
* **Primær:** Fuld `--accent` baggrund. Bruges til hovedhandlinger (f.eks. "Opret Kunde", "Gem").
|
|
* **Sekundær/Filter:** Hvid baggrund med border. Bliver farvet ved aktiv/hover.
|
|
* **Ikon-knapper:** Runde knapper til hurtige handlinger (f.eks. notifikationer, rediger).
|
|
|
|
### Tabeller (Data Lists)
|
|
* **Design:** Clean look uden lodrette streger.
|
|
* **Features:**
|
|
* Avatar/Initialer for virksomheder.
|
|
* Status badges (pille-formede).
|
|
* Handlingsmenu (tre prikker) yderst til højre.
|
|
* Hover-effekt på rækker for læsbarhed.
|
|
|
|
### Formularer (Inputs)
|
|
* **Styling:** Store, luftige inputfelter med blød border.
|
|
* **Fokus:** Tydelig `--accent` border og skygge ved fokus.
|
|
* **Gruppering:** Logisk opdeling med overskrifter (f.eks. "Virksomhedsoplysninger", "Kontaktperson").
|
|
* **Kort-valg:** Radio buttons designet som klikbare kort (se Abonnement-valg i `form.html`).
|
|
|
|
### Status Indikatorer (Badges)
|
|
Bruges til at vise tilstande hurtigt i tabeller.
|
|
* 🟢 **Success:** Aktiv, Fuldført (Grøn baggrund/tekst).
|
|
* 🟡 **Warning:** Afventer, Pause (Gul/Orange baggrund/tekst).
|
|
* 🔴 **Danger:** Kritisk, Opsagt (Rød baggrund/tekst).
|
|
* ⚪ **Neutral:** Hardware typer (Grå baggrund/tekst).
|
|
|
|
---
|
|
|
|
## 4. Side-Skabeloner (Templates)
|
|
|
|
Systemet består af 5 kerneskabeloner der dækker de fleste behov:
|
|
|
|
### 1. Dashboard (`index.html`)
|
|
* **Formål:** Give hurtigt overblik over forretningens tilstand.
|
|
* **Indhold:**
|
|
* 4 KPI-kort i toppen (Kunder, Hardware, Support, Omsætning).
|
|
* Grafisk visning (placeholder) eller lister.
|
|
* "Seneste Aktiviteter" tabel.
|
|
* System Status panel (Server load, memory).
|
|
|
|
### 2. Listevisning (`customers.html`)
|
|
* **Formål:** Administration af store datamængder.
|
|
* **Indhold:**
|
|
* Søgefelt og "Opret" knap i header.
|
|
* Filter-bar (Alle, Aktive, Inaktive, VIP).
|
|
* Datatabel med rig information.
|
|
* Paginering i bunden.
|
|
|
|
### 3. Formular / Opret (`form.html`)
|
|
* **Formål:** Indtastning af data (CRUD operationer).
|
|
* **Indhold:**
|
|
* "Tilbage" knap for nem navigation.
|
|
* Opdelt formular i sektioner.
|
|
* Forskellige input typer: Text, Email, Tel, Select, Radio Cards, Textarea.
|
|
|
|
### 4. Indstillinger (`settings.html`)
|
|
* **Formål:** Brugerprofil og systemkonfiguration.
|
|
* **Indhold:**
|
|
* 2-kolonne layout.
|
|
* Venstre: Vertikal navigationsmenu.
|
|
* Højre: Indholdspaneler (Profilbillede, Stamdata, Toggles for notifikationer/Dark mode).
|
|
|
|
### 5. Login (`login.html`)
|
|
* **Formål:** Adgangskontrol.
|
|
* **Indhold:**
|
|
* Centreret kort på fuld skærm.
|
|
* Logo og velkomsttekst.
|
|
* Email/Password felter.
|
|
* "Husk mig" og "Glemt kode" funktioner.
|
|
|
|
---
|
|
|
|
## 5. Brugerrejse & Navigation
|
|
|
|
### Flow Eksempel: Opret ny kunde
|
|
1. **Login:** Bruger logger ind via `login.html`.
|
|
2. **Dashboard:** Lander på `index.html` og ser overblik.
|
|
3. **Navigation:** Klikker på "Kunder" i topmenuen -> Vælger "Oversigt" (eller direkte "Opret ny kunde").
|
|
4. **Liste:** Ser listen på `customers.html`, søger evt. efter eksisterende.
|
|
5. **Handling:** Klikker "Opret Kunde" knappen.
|
|
6. **Formular:** Udfylder data på `form.html`.
|
|
* Vælger branche via dropdown.
|
|
* Vælger abonnementspakke via visuelle kort.
|
|
7. **Afslutning:** Klikker "Opret Kunde" -> Sendes tilbage til `customers.html` (eller detaljevisning).
|
|
|
|
---
|
|
|
|
## 6. Teknisk Implementation
|
|
|
|
* **Framework:** Bootstrap 5.3.2 (CSS/JS).
|
|
* **Ikoner:** Bootstrap Icons (CDN).
|
|
* **Layout:** `container-fluid` for fuld bredde, `row` og `col-*` grid system.
|
|
* **Responsivitet:**
|
|
* Navbar kollapser til "burger menu" på mobil.
|
|
* Tabeller bliver scrollbare horisontalt (`table-responsive`).
|
|
* Grid system tilpasser sig fra 4 kolonner (desktop) til 1 kolonne (mobil).
|