Lesweek 4
Focus: prototyping van schermen in HTML, experimenteren met kleurthema’s en eerste integratie van digitale prototypes.
Experimenten & aanpak:
- HTML-generatie via ChatGPT:
- Ik heb geprobeerd één of meerdere schermen in HTML te genereren zoals gevraagd in de les.
- Ervaring: weinig controle over positionering, spacing en exacte kleuren. Het resultaat voelde beperkt en onpersoonlijk.
- Conclusie: beter om eerst zelf te schetsen en begrijpen hoe elk scherm werkt voordat ik het digitaal ga uitwerken.
- Zelfstandige uitvoering:
- Na het experiment met ChatGPT ben ik zelfstandig begonnen met het uitwerken van de schermen in HTML/CSS.
- Voordeel: volledige controle over layout, kleuren en typografie.
- Kleurthema: volledig gebaseerd op Belgische vlag-inspiratie:
- Zwart: #080708 / black
- Wit: #F2F2F3 / anti-flash white
- Geel: #F3D154 / naples yellow & #FFF4CB / lemon chiffon
- Rood: #A60311 / cornell red
- Opmerking: bewust geen blauwe accenten om het thema consequent te houden.
Belangrijkste inzichten:
- ChatGPT was pas nuttig bij het oplossen van foutmeldingen, niet bij het initiële ontwerp.
- Het zelf implementeren van HTML/CSS hielp om beter te begrijpen hoe componenten, structuren en kleuren samenkomen in een scherm.
- De visuele hiërarchie en kleurcontrasten zijn nu duidelijker, vooral bij onderscheid tussen functies in het wagonindelingsscherm.
UX/UI-vragen die richting gaven:
- Hoe kan ik digitale prototypes maken die nog steeds duidelijk zijn voor niet-designers?
- Welke rol spelen kleuren en contrasten bij snelle herkenning van functies (bv. eerste vs. tweede klas)?
- Hoeveel interactiviteit is nodig om de werking van schermen duidelijk te maken zonder extra uitleg?
Resultaten van snelle tests:
- HTML-prototypes gaven een beter gevoel van spacing en layout dan de automatisch gegenereerde versie.
- Kleuren helpen nu om functies snel te onderscheiden, vooral in het wagonindelingsscherm: geel voor standaard, rood voor waarschuwingen of acties, wit voor neutrale achtergrond.
- Consistent gebruik van labels blijft essentieel; iconen alleen zijn nog niet altijd universeel begrijpelijk.
Volgende stappen:
- Doorontwikkelen van digitale prototypes in Figma/HTML met volledige kleurthema’s.
- Testen van iconen en kleurgebruik met gebruikers om herkenbaarheid en toegankelijkheid te controleren.
- Eventueel experimenteren met animaties of hover-states om functies visueel beter uit te leggen.
- Evalueren of tekstlabels kunnen worden verminderd na herkenbaarheidstesten.