Webudvikling+UX/UI design

Teknikfag A — Digitalt design og udvikling · HTX · A-niveau · Specialisering

🎓 Webudvikling+UX/UI design

Webudvikling = bygning af hjemmesider + web-applikationer. Centralt på HTX Teknikfag A — Digitalt design og udvikling.

3 hovedlag:

1.

HTML (struktur): HyperText Markup Language. Skelet med tags <header>, <main>, <footer>, <article>, <section>, <div>, <p>, <h1>-<h6>, <a>, <img>, <form>, <input>, <button>. Semantiske tags (HTML5) = bedre tilgængelighed + SEO.

2.

CSS (udseende): Cascading Style Sheets. Styler farver, typografi, layout.

Moderne layout: Flexbox (1D) + Grid (2D). Media queries for responsivt design.

CSS Variables: --main-color: #2563eb. Frameworks: Tailwind CSS, Bootstrap.

3.

JavaScript (adfærd): programmering der kører i browseren. DOM-manipulation, event listeners, AJAX/Fetch API. Frameworks: React, Vue, Svelte (frontend) + Node.js (backend).

Frontend vs. Backend: Frontend = browser-side. Backend = server-side. Full-stack = begge. UX (User Experience) = brugerens samlede oplevelse. UI (User Interface) = visuelle elementer brugeren interagerer med.

Designprocesser:

1. User research: interviews, observation.

2. Personas.

3. User journey maps.

4. Wireframes.

5. Mockups.

6. Prototyper.

7. Usability testing.

Værktøjer: Figma (markedsledende, gratis), Adobe XD, Sketch (Mac-only).

Centrale UX-principper — Nielsens 10 heuristikker:

1. Visibility of system status.

2. Match real world.

3. User control.

4. Consistency.

5. Error prevention.

6. Recognition over recall

Læringsmål

• Udvikle en hjemmeside med HTML, CSS og JavaScript
• Anvende UX/UI-principper til at designe en brugervenlig grænseflade
• Teste og forbedre en hjemmesides brugervenlighed

Sådan kan du arbejde med emnet

• Byg en simpel hjemmeside med HTML og CSS og forklar, hvilke designvalg du har gjort for brugervenligheden
• Forklar forskellen på UX og UI design og giv et eksempel på, hvordan begge dele kommer til udtryk på en hjemmeside du kender
• Vælg en hjemmeside og diskuter, hvad der efter din vurdering kunne forbedres i dens brugeroplevelse

Skab eget værk og analysér klassiske eksempler. Reflekter over teknik og udtryk.