Look and Feel: Styleguide (11/11/2024)
Styleguide uitleg
Wat we hebben gedaan:
Deze les ging over het maken van een styleguide. Dit is een document waarin je de visuele stijl van een website vastlegt, zoals kleuren, lettertypes, knoppen en andere ontwerpregels. We hebben besproken waarom consistentie belangrijk is en zijn begonnen met het ontwerpen van een eigen styleguide.
Wat heb ik geleerd:
- Wat een styleguide is: een handleiding voor de visuele stijl van een website.
- Hoe je consistentie in een website aanbrengt met vaste regels.
- Het belang van een goede basis voor toekomstige ontwerpen.
Drie vragen:
- Welke onderdelen moet een goede styleguide altijd bevatten?
- Hoe maak je een styleguide aantrekkelijk én functioneel?
- Kun je een styleguide hergebruiken voor meerdere projecten?
Look and Feel: Stylesheet en Custom Properties (13/11/2024)
Stylesheet uitleg
Wat we hebben gedaan:
We hebben CSS Custom Properties geleerd. Dit zijn variabelen in CSS waarmee je waarden zoals kleuren of lettergroottes opslaat en hergebruikt. Dit zorgt voor overzichtelijke en efficiënte code. We hebben geoefend met het aanmaken van deze variabelen en hoe je ze in een stylesheet toepast.
Wat heb ik geleerd:
- Wat CSS Custom Properties zijn: variabelen die je hergebruikt in je code.
- Hoe Custom Properties je CSS onderhoudbaar maken.
- Het belang van structuur in je stylesheets.
Drie vragen:
- Wat zijn de voordelen van CSS Custom Properties?
- Hoe kies je namen voor variabelen die duidelijk en bruikbaar zijn?
- Hoe gebruik je Custom Properties in een groot project?
Look and Feel: Code Design Review (15/11/2024)
Code Design Review uitleg
Wat we hebben gedaan:
We hebben elkaars stylesheets bekeken en feedback gegeven. Dit helpt om te leren wat er goed gaat en wat verbeterd kan worden. Een belangrijk onderdeel was hoe je CSS duidelijk en efficiënt kunt maken. Door samen te werken leerden we betere oplossingen te bedenken.
Wat heb ik geleerd:
- Hoe je feedback geeft en ontvangt over code.
- Wat ‘best practices’ zijn voor nette CSS: bijvoorbeeld goed gebruik van commentaar en structuur.
- Hoe je fouten in andermans code kunt herkennen én oplossen.
Drie vragen:
- Hoe schrijf ik CSS die overzichtelijk is en makkelijk aan te passen?
- Wat zijn de meest voorkomende problemen bij stylesheets?
- Hoe zorg ik dat mijn CSS goed werkt op verschillende apparaten?
Look and Feel: Typografie en EM (18/11/2024)
Typografie en EM uitleg
Wat we hebben gedaan:
In deze les hebben we geleerd over typografie in webdesign. We hebben besproken hoe je de leesbaarheid en uitstraling van een website kunt verbeteren door het juiste gebruik van lettertypes, lettergroottes en line-height. Ook hebben we de unit "em" behandeld, waarmee je relatieve maten instelt in plaats van vaste pixels. Dit maakt de website flexibeler en beter schaalbaar.
Wat heb ik geleerd:
- Het belang van typografie voor de gebruikservaring en uitstraling van een website.
- Hoe de "em" unit werkt en het verschil met "px".
- Hoe je de leesbaarheid van tekst optimaliseert met line-height en letterafstand.
Drie vragen:
- Wanneer gebruik je "em" in plaats van "px"?
- Hoe zorg je ervoor dat je typografie goed schaalt op verschillende schermgroottes?
- Welke andere typografie-units zijn er en wanneer zou je die gebruiken?
Look and Feel: Formulieren (20/11/2024)
Formulieren uitleg
Wat we hebben gedaan:
We hebben het ontwerp en de implementatie van formulieren behandeld. Dit ging van het visuele ontwerp tot het technisch implementeren van de formulierstructuur in HTML en het toevoegen van CSS om ze visueel aantrekkelijk te maken. Daarnaast hebben we verschillende soorten formulierinvoer behandeld, zoals tekstvelden, keuzerondjes en selectievakjes, en de juiste validaties toegepast.
Wat heb ik geleerd:
- Hoe je verschillende formulierelementen effectief kunt gebruiken in een website.
- Het belang van formuliervalidatie voor de gebruikerservaring en veiligheid.
- Hoe je formulieren in een aantrekkelijke en gebruiksvriendelijke manier ontwerpt.
Drie vragen:
- Hoe zorg je ervoor dat je formulier toegankelijk is voor alle gebruikers?
- Wat is het belang van formulierfeedback en hoe implementeer je dat?
- Wat zijn de meest voorkomende fouten bij het ontwerpen van formulieren?
User Interface Design (29/11/2024)
User Interface Design uitleg
Wat we hebben gedaan: In deze les hebben we gekeken naar hoe je een gebruikersinterface ontwerpt die zowel functioneel als visueel aantrekkelijk is. We hebben geleerd hoe je een interface moet structureren, welke elementen je moet gebruiken en hoe je een consistente look-and-feel creëert. Daarnaast hebben we aandacht besteed aan het gebruik van kleuren, knoppen, navigatie en andere elementen die de gebruikerservaring verbeteren.
Wat heb ik geleerd?
- Het belang van een intuïtieve gebruikersinterface.
- Hoe je een interface visueel aantrekkelijk en functioneel kunt maken.
- De rol van consistentie en gebruiksvriendelijke elementen in UI-design.
Drie vragen:
- Wat maakt een gebruikersinterface intuïtief voor de gebruiker?
- Hoe pas je de principes van UX-design toe op een interface?
- Welke rol speelt kleurgebruik in de gebruikerservaring?
Programming User Interaction (02/12/2024)
Programming User Interaction uitleg
Wat we hebben gedaan: Deze les ging over het programmeren van interacties tussen de gebruiker en de website. We hebben JavaScript gebruikt om dynamische elementen op de pagina te maken, zoals het reageren op klikken, slepen of andere acties van de gebruiker. We hebben verschillende soorten interacties geïmplementeerd, zoals het tonen van meldingen of het aanpassen van de pagina op basis van gebruikersinput.
Wat heb ik geleerd?
- Hoe je JavaScript gebruikt voor interactieve elementen op een website.
- Hoe je de gebruikerservaring kunt verbeteren door middel van dynamische reacties op gebruikersacties.
- Het belang van goede foutafhandeling en interacties die de gebruiker niet verwarren.
Drie vragen:
- Hoe kan ik JavaScript beter gebruiken om de gebruikerservaring te verbeteren?
- Wat zijn de belangrijkste overwegingen bij het implementeren van gebruikersinteracties?
- Hoe kan ik zorgen dat de interacties op verschillende apparaten goed werken?
UI-Events Deeltaak (09/12/2024)
UI Events uitleg
Wat we hebben gedaan: De opdracht voor deze deeltaak was om 10 UI-events te creëren die een interactie mogelijk maken tussen de gebruiker en de website. We hebben geleerd over verschillende soorten gebruikersinteracties, zoals muisklikken, toetsaanslagen en hover-effecten, en hoe we deze kunnen implementeren met behulp van HTML, CSS en JavaScript.
Wat heb ik geleerd?
- Hoe je verschillende gebruikersinteracties (zoals klikken en toetsaanslagen) programmeert.
- Het belang van testen en itereren om te zorgen dat de interacties goed werken.
- Hoe je UI-events effectief kunt gebruiken om een website interactiever te maken.
Drie vragen:
- Wat is het verschil tussen een event listener voor muisklikken en voor toetsenbordaanslagen?
- Hoe zorg ik ervoor dat een UI-event goed werkt op verschillende apparaten?
- Welke andere soorten UI-events kan ik gebruiken om de gebruikerservaring te verbeteren?
Form States (11/12/2024)
Form States uitleg
Wat we hebben gedaan: In deze les hebben we gekeken naar verschillende toestanden van een formulier, zoals een ingevuld formulier, een formulier met fouten en een succesvol ingediend formulier. We hebben geleerd hoe je visuele feedback kunt geven aan gebruikers op basis van de status van het formulier, zoals het aangeven van foutieve velden en het tonen van succesberichten.
Wat heb ik geleerd?
- Hoe je de status van een formulier effectief weergeeft.
- Het belang van visuele feedback voor de gebruiker in het geval van fouten of succes.
- Hoe je een formulier moet opbouwen en de juiste states toepast voor de beste gebruikerservaring.
Drie vragen:
- Wat zijn de belangrijkste states die een formulier moet hebben?
- Hoe kun je een formulier foutloos en snel laten invullen door gebruikers?
- Hoe kun je de gebruiker geruststellen als een formulier succesvol is ingediend?
User Testing (14/12/2024)
User Testing uitleg
Wat we hebben gedaan: In deze les hebben we geleerd hoe we gebruikerstests kunnen uitvoeren op onze website om te kijken hoe gebruikers ermee omgaan. We hebben gebruikers gevraagd om bepaalde taken uit te voeren en hebben geobserveerd hoe ze interactie hadden met de website. Op basis van hun feedback hebben we verbeteringen aangebracht in het ontwerp en de functionaliteit.
Wat heb ik geleerd?
- Hoe je gebruikerstests uitvoert om problemen te identificeren.
- Het belang van feedback van echte gebruikers om een betere website te maken.
- Hoe je veranderingen in je ontwerp aanbrengt op basis van de resultaten van de tests.
Drie vragen:
- Hoe kies je de juiste gebruikers voor je gebruikerstests?
- Wat is de beste manier om feedback van gebruikers te verzamelen?
- Hoe implementeer je de resultaten van gebruikerstests effectief in je ontwerp?
Navigeren en Labels (16/12/2024)
Navigeren en Labels uitleg
Wat we hebben gedaan: In deze les hebben we geleerd hoe je navigatie-elementen en labels effectief gebruikt. Het ging om het maken van duidelijke en gebruiksvriendelijke navigatie voor de website en het correct labelen van formulieren en knoppen. We hebben ook besproken hoe navigatie de gebruikerservaring beïnvloedt en hoe je duidelijke labels gebruikt die gebruikers helpen bij het begrijpen van de functies.
Wat heb ik geleerd?
- Hoe je de navigatie van een website duidelijk en eenvoudig maakt.
- Het belang van goed gekozen labels voor knoppen en formulieren.
- Hoe je navigatie intuïtief maakt, zodat gebruikers snel kunnen vinden wat ze nodig hebben.
Drie vragen:
- Wat maakt een navigatiesysteem gebruiksvriendelijk?
- Hoe kies je de juiste labels voor verschillende elementen op je website?
- Hoe zorg je ervoor dat de navigatie consistent is op alle pagina’s van de website?
Sprint Planning (18/12/2024)
Sprint Planning uitleg
Wat we hebben gedaan: In deze les hebben we geleerd hoe we een sprint plannen. We hebben besproken wat een sprint is en hoe je taken kunt opdelen in kleinere, behapbare stukken werk. We leerden hoe je een tijdlijn opstelt, de verschillende onderdelen van een project plant en bepaalt welke taken prioriteit hebben voor de komende sprint.
Wat heb ik geleerd?
- Hoe je een sprint efficiënt plant.
- Het belang van het opdelen van taken in kleinere onderdelen.
- Hoe je de voortgang van een sprint volgt.
Drie vragen:
- Hoe bepaal je de prioriteit van taken in een sprint?
- Hoe lang zou een typische sprint moeten duren?
- Wat doe je als je tijdens een sprint achterloopt op schema?
Mobile First (08/01/2025)
Mobile First uitleg
Wat we hebben gedaan: We hebben geleerd hoe je een website ontwerpt en bouwt met de 'mobile first' benadering. Dit betekent dat we eerst de mobiele versie van de website hebben gemaakt en vervolgens hebben uitgebreid naar grotere schermen. We hebben gezien hoe belangrijk het is om de website te optimaliseren voor kleinere schermen voordat je naar grotere apparaten gaat.
Wat heb ik geleerd?
- Het belang van de 'mobile first' benadering in webdesign.
- Hoe je een website kunt optimaliseren voor mobiele apparaten.
- Hoe je CSS media queries gebruikt om de website responsief te maken.
Drie vragen:
- Waarom is 'mobile first' belangrijk voor webdesign?
- Hoe pas je media queries effectief toe?
- Welke uitdagingen kom je tegen bij het ontwerpen voor mobiele apparaten?
Code Design Review – Mobile First (10/01/2025)
Code Design Review uitleg
Wat we hebben gedaan: In deze les hebben we onze code voor de 'mobile first' aanpak bekeken en besproken. We leerden hoe je de code kunt verbeteren om de prestaties van de mobiele versie van een website te optimaliseren en hoe je het ontwerp verder kunt verfijnen voor een responsieve ervaring op verschillende apparaten.
Wat heb ik geleerd?
- Hoe je code efficiënt maakt voor mobielvriendelijke websites.
- Het belang van prestaties bij het ontwerpen voor mobiele apparaten.
- Hoe je de code kunt refactoren voor betere leesbaarheid en prestaties.
Drie vragen:
- Hoe kun je de laadtijd van een mobiele website verbeteren?
- Wat zijn best practices voor het schrijven van responsieve code?
- Hoe test je of je mobielvriendelijke website goed werkt op verschillende apparaten?
Interaction Design (13/01/2025)
Interaction Design uitleg
Wat we hebben gedaan: In deze les hebben we geleerd over interaction design: hoe we de interactie tussen de gebruiker en de website ontwerpen. We hebben verschillende soorten interacties bestudeerd, zoals klikken, slepen en hover-effecten, en hoe je deze in de interface implementeert om de gebruikerservaring te verbeteren.
Wat heb ik geleerd?
- Hoe je interacties ontwerpt die de gebruikerservaring verbeteren.
- Het belang van feedback en reacties van de website op gebruikersacties.
- Hoe je de juiste interacties kiest voor verschillende elementen van een website.
Drie vragen:
- Wat maakt een interactie op een website effectief?
- Hoe zorg je ervoor dat de interacties intuïtief zijn voor de gebruiker?
- Welke interacties zijn het belangrijkst voor een website?
Programming User Interaction (15/01/2025)
Programming User Interaction uitleg
Wat we hebben gedaan:
In deze les hebben we geleerd hoe we interacties tussen de gebruiker en de website kunnen programmeren. We hebben JavaScript gebruikt om verschillende interactieve elementen te creëren, zoals knoppen die reageren op klikken, animaties en andere dynamische elementen die de gebruikerservaring verbeteren.
Wat heb ik geleerd?
Hoe je JavaScript gebruikt voor interactieve elementen.
Het belang van responsieve en dynamische interacties op websites.
Hoe je de gebruikerservaring kunt verbeteren met behulp van JavaScript.
Drie vragen:
- Hoe gebruik ik JavaScript voor interactieve elementen?
- Wat zijn de voordelen van het toevoegen van animaties aan een website?
- Hoe zorg ik ervoor dat interacties goed werken op verschillende apparaten?
Code Design Review – User Testing (17/01/2025)
Code Design Review uitleg
Wat we hebben gedaan:
In deze les hebben we gekeken naar de feedback van gebruikerstests en hoe we die konden toepassen op onze code en ontwerp. We hebben geleerd hoe je code kunt verbeteren op basis van testresultaten en hoe je gebruikersfeedback effectief kunt implementeren.
Wat heb ik geleerd?
Hoe je gebruikersfeedback verzamelt en toepast in je ontwerp.
Het belang van testen voor het verbeteren van een website.
Hoe je je code kunt refactoren om gebruiksvriendelijker te maken.
Drie vragen:
- Wat zijn de belangrijkste punten waar je op moet letten bij gebruikerstests?
- Hoe implementeer je feedback uit gebruikerstests effectief in je ontwerp?
- Hoe kan ik mijn ontwerp verder verbeteren op basis van gebruikerstests?
Refactoring Code Conventions (20/01/2025)
Refactoring Code Conventions uitleg
Wat we hebben gedaan:
We hebben geleerd hoe we onze code kunnen verbeteren door het toepassen van refactoring technieken. Dit betekent dat je je code herschrijft om deze leesbaarder, onderhoudbaarder en efficiënter te maken zonder dat de functionaliteit verandert. We hebben ook best practices voor codeconventies besproken.
Wat heb ik geleerd?
Hoe je code kunt refactoren voor betere leesbaarheid en onderhoudbaarheid.
Het belang van duidelijke naamgeving van variabelen en functies.
Hoe je consistente codeconventies toepast om de samenwerking te verbeteren.
Drie vragen:
- Hoe bepaal je of je code refactoren nodig heeft?
- Wat zijn enkele veelvoorkomende refactoring technieken?
- Hoe zorg ik ervoor dat mijn code onderhoudbaar blijft op de lange termijn?
Wrap-up (22/01/2025)
Wrap-up uitleg
Wat we hebben gedaan:
In deze les hebben we onze voortgang van het project geëvalueerd en nagedacht over hoe we het proces kunnen verbeteren. We hebben besproken welke tools we hebben gebruikt, wat goed werkte en wat verbeterd kan worden. De focus lag ook op het voorbereiden voor de komende presentatie van het project.
Wat heb ik geleerd?
Hoe ik mijn project kan evalueren en verbeteren.
Het belang van reflecteren op je werk en het leren van je fouten.
Hoe je je project goed kunt presenteren aan anderen.
Drie vragen:
- Hoe kan ik mijn werk het beste presenteren?
- Wat waren de grootste uitdagingen die ik tijdens het project heb ervaren?
- Hoe kan ik de feedback van anderen gebruiken om mijn werk te verbeteren?
Expo Opdrachtgevers en 2de Jaar Studenten (24/01/2025)
Wat we hebben gedaan:
Dit was de dag van de expo, waar opdrachtgevers en tweedejaars studenten ons werk kwamen bekijken. We hebben onze projecten gepresenteerd en uitleg gegeven over het proces en de keuzes die we tijdens het ontwerpen en bouwen hebben gemaakt. Het was een kans om feedback te krijgen en onze vaardigheden te laten zien.
Wat heb ik geleerd?
Hoe ik mijn werk effectief kan presenteren aan een publiek.
Het belang van duidelijke communicatie tijdens een presentatie.
Hoe ik feedback kan ontvangen en gebruiken om mijn werk te verbeteren.
Drie vragen:
- Hoe kan ik mijn presentatie verbeteren voor een breder publiek?
- Wat zijn de belangrijkste dingen om te benadrukken tijdens een projectpresentatie?
- Hoe kan ik mijn werk beter uitleggen aan iemand die niet technisch is?