ct/bmc_hub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
dcb4d8a280
bmc_hub/docs/designplan.md

5.7 KiB
Raw Blame History

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).