Webdesign og UX/UI-principper

Kommunikation og IT A · HTX · A-niveau · Kommunikation og webproduktion (HTX-specifikt)

💻 Webdesign og UX/UI

UX (User Experience) = den samlede oplevelse af at bruge et produkt.

UI (User Interface) = de visuelle elementer brugeren interagerer med.

Vigtige UX-principper:

• Fitts' lov: jo større og tættere et mål er, jo hurtigere kliks
• Hick's lov: jo flere valg, jo længere tid at beslutte — minimér valg
• Gestalt-principper: nærhed, lighed, kontinuitet, lukkethed
• F-mønstret og Z-mønstret: hvordan øjne scanner en side

UI Design System:

• Typografi: hierarki (H1-H6), læsbarhed (min. 16px), kontrast
• Farvelære: primær, sekundær, accent; 60-30-10 reglen
• Spacing: konsistente marginaler (8px-grid systemet)
• Komponenter: buttons, cards, forms, navigation

Dark patterns: manipulative UI-design (trick questions, misdirection, hidden costs) — uetisk og nogle er nu ulovlige under GDPR.

Lighthouse score: Googles audit-tool måler performance, tilgængelighed, best practices, SEO.

Læringsmål

• Anvende Fitts' lov, Hick's lov og Gestalt-principper i design
• Bygge et konsistent design system med typography og farver
• Identificere og undgå dark patterns
• Analysere et website med Lighthouse og prioritere forbedringer

Sådan kan du arbejde med emnet

• Forklar forskellen på UX og UI med et eksempel
• Vurder en hjemmeside ud fra principperne hierarki, kontrast og konsistens
• Diskutér hvordan farvevalg påvirker brugerens opfattelse af et brand

Træningsforslag

• Analyser en velkendt webside med Gestalt-principper og identificer hvad der virker
• Byg et mini design-system i Figma med farver, typografi og komponenter
• Find 5 dark patterns på rigtige websites og beskriv den manipulative mekanisme