Lesweek 6

Focus: Opstellen van een overzichtelijk HTML-ontwerpdocument, consistent kleurgebruik en structuur, en eerste digitale prototype van project “Lost in Tra(i)nslation”.

Uitvoering:

Structuur HTML:
- Basisdocument opgezet met <!DOCTYPE html> en correcte <head>-meta-instellingen.
- lang="nl" Toegankelijkheid: Schermlezers gebruiken de taalcode om de inhoud correct uit te spreken en de juiste accenten te gebruiken.
- Navigatie toegevoegd met links naar alle weken, zodat eerdere documentatie eenvoudig toegankelijk blijft.
- <header> voor sidebar-navigatie en <main> voor de inhoud van de week.
- <footer> met auteursnaam en jaar toegevoegd voor consistentie.

CSS-styling:
- Fonts: Roboto via Google Fonts geïmporteerd voor leesbare en moderne typografie.
- Basis layout: Flexbox gebruikt voor het hoofdscherm, met sidebar (header) en main content naast elkaar.
- Container: Max-width en padding ingesteld om tekst comfortabel leesbaar te maken.
- Navigatie: Column layout, hover-effecten en visuele hiërarchie voor makkelijke herkenning van actieve links.
- Kleuren: Voorlopig neutraal (zwart, wit, lichtgrijs) in layout, zodat focus blijft op inhoud; in volgende stappen kunnen Belgische vlagkleuren toegepast worden op elementen en accenten.

Prototype focus:
- Titel en subtitels zijn gestructureerd (h1, h2, h3) om hiërarchie en overzicht te behouden.
- Eerste sectie Prototyping Tools met subsectie Lost in Tra(i)nslation toegevoegd als startpunt voor inhoudelijke documentatie.

Inzichten:

Zelf HTML/CSS opzetten geeft maximale controle over opmaak, structuur en navigatie.
Sidebar navigatie helpt om eerdere weken snel te bereiken en overzicht te bewaren.
Basis CSS reset en container spacing zorgen dat het document consistent en rustig oogt, zelfs bij lange content.
Flexbox maakt layout flexibel, zodat later elementen zoals schermvoorbeelden of kleursecties eenvoudig kunnen worden toegevoegd.

UX/UI-vragen:

Volgende stappen:

Toevoegen van echte schermvoorbeelden en screenshots van wagon-indelingen.
Integratie van Belgische vlag-kleuren in headers, buttons of iconen voor consistent thema.
Interactieve elementen testen in browser (links, hover-states, scrollgedrag).
Eventueel iconen en labels toevoegen in HTML om functionaliteit van schermen beter uit te leggen.