Webdesign og UX/UI — designprincipper og wireframing

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

Webdesign og UX/UI — designprincipper og wireframing

Godt webdesign handler ikke kun om udseende, men om brugeroplevelse. To centrale begreber:

• UX (User Experience): hele oplevelsen — er sitet nemt, logisk og behageligt at bruge?
• UI (User Interface): den konkrete grænseflade — knapper, farver, typografi, layout.

Designprincipper:

• Hierarki: det vigtigste skal være mest synligt (størrelse, farve, placering).
• Konsistens: samme elementer ser ens ud og opfører sig ens.
• Feedback: systemet reagerer (knap skifter farve, besked vises).
• Tilgængelighed (a11y): kontrast, læsbarhed, brug for alle — også med handicap.
• Mobile first / responsivt design: virker på alle skærmstørrelser.

Wireframing: Før man koder, laver man en wireframe — en simpel skitse af layoutet (kasser og pladsholdere) uden farver og detaljer. Det gør det hurtigt at afprøve struktur og brugerflow, før man investerer i det færdige design.

Designprocessen: brugerbehov → wireframe → prototype → test → forbedring (iterativt). At designe med brugeren i centrum er kernen i moderne webproduktion.

Læringsmål

• Skelne mellem UX og UI
• Anvende centrale designprincipper (hierarki, konsistens, feedback, tilgængelighed)
• Forklare formålet med wireframing i designprocessen
• Begrunde responsivt/mobile-first design
• Gennemføre en iterativ, brugercentreret designproces

Sådan kan du arbejde med emnet

• Hvad er forskellen på UX og UI?
• Hvad er en wireframe, og hvorfor bruge den?
• Hvilke designprincipper gør et website godt?

Træningsforslag

• Wireframe: Skitsér en forside som kasser, før du tænker farver.
• Heuristik-tjek: Vurder et website på hierarki, konsistens og feedback.

Typiske faldgruber

• At gå direkte til 'pænt design' uden at tænke brugerflow og struktur.
• At glemme tilgængelighed (kontrast, læsbarhed).