Productbiografie - Iris

Leerdoelen

CSS-layout en structuur

Aan het einde van het project schrijf ik consistente en schaalbare CSS met behulp van moderne lay-outtechnieken, waaronder CSS Grid, Subgrid, Container Queries en Grid Areas. Ik toon dit aan door responsieve componenten of pagina’s te ontwikkelen waarin deze technieken effectief worden toegepast.

Samenwerking met het team

Gedurende het project lever ik actief een bijdrage aan teamdiscussies, geef en ontvang ik constructieve feedback, en reflecteer ik op mijn eigen rol en communicatie binnen het team. Dit documenteer ik via wekelijkse updates en in mijn productbiografie.

Professionele documentatie

Ik onderhoud duidelijke en gestructureerde documentatie van mijn ontwerp- en ontwikkelproces door mijn productbiografie wekelijks bij te werken. Dit omvat ontwerpiteraties, technische beslissingen, teambijdragen en ontvangen feedback, evenals hoe die feedback het product heeft beïnvloed — zodat de achterliggende keuzes inzichtelijk en herleidbaar zijn.

Toegankelijkheid

Ik pas toegankelijkheidsrichtlijnen toe gedurende het hele project, waaronder semantische HTML, voldoende kleurcontrast, toetsenbordnavigatie en ondersteuning voor schermlezers. Ik test deze aspecten en documenteer hoe toegankelijkheid is meegenomen in zowel het ontwerp als de code.

Week 1

debrief opdrachtgever

Vooraf aan de debrief met de opdrachtgever hebben we een vragenlijstje opgesteld om duidelijkheid te krijgen over de opdracht en de eisen. Wij waren als tweede team, dus ik had al heel erg het idee dat het team voor ons dezelfde vragen had gesteld en de opdrachtgever voor het tweede gesprek voorbereid was. We hebben alle vragen beantwoord gekregen en hebben een beter beeld van de opdracht, waarin toegankelijkheid een grotere rol speelt dan ik eerst had verwacht. Ik had de voorkeur voor de tweede opdracht, waarin er meer vrijheid was en interessantere oplossingen te vinden waren. Het team was hiermee in eens en we hebben besloten om de focus te leggen op navigatie met toetsenbord. Dit staat ons toe om beide css layout te gebruiken en te focussen op toegankelijkheid.

werken aan leerdoelen

In deze week heb ik voornamelijk aan 2 van mijn leerdoelen gewerkt, namelijk toegankelijkheid en documentatie. Voor toegankelijkheid heb ik samen met Matthijs een screenreader test uitgevoerd van de huidige framer framed website, om te ontdekken wat er niet werkt en dus wat wij kunnen verbeteren. Ik heb ook in mijn eigen ideegeneratie van het project extra aandacht besteed aan welke ideeën wel en niet overeenkomen met de door ons gekozen probleem.

Ik heb deze week ook het kleurenpallet van Framer Framed onder de loep gelegd. De huidige kleuren op de website voeldoen niet aan de contrasteisen, maar de kleuren in het originele plan bijna allemaal wel. Ik heb daarna getest of de kleuren ook geschikt zijn voor verschillende soorten kleurenblindheid. Een aantal kleuren begonnen wel op elkaar te lijken, maar omdat er in de huisstijl nooit twee accentkleuren naast elkaar worden gebruikt heb ik de beslissing gemaakt om met de originele kleuren verder te gaan.

Voor mijn leerdoel documentatie heb ik veel gedaan aan het bijhouden van de wiki, zoals de notities van de debrief verwerken en de structuur van de paginas bepalen. Ook heb ik mijn productbio bijgehouden, maar wel de laatste touches de maandag erna gemaakt.

Ideegeneratie

Deze week heb ik ideegeneratie gedaan met het team, bijgesloten zijn mijn ideeën. We waren eerst onder de indruk dat we de database gingen maken, zonder bewust te zijn van de toegankelijkheidseis.

Deze ideeën zijn gemaakt na de debriefing met de opdrachtgever, dus zijn al meer gericht op het eindproduct.

andere dingen die ik miss nog moet toevoegen?

• feedback cyd en vasilis (nodig in pb?)
• samenwerking de twee groepjes

Week 2

feedback victor en vasilis

• victor heeft geholpen met de opzet van het link-systeem tussen de verschillende pagina's.
• vasilis heeft tips gegeven voor de beschrijving van links, voeg toe en varier de content

code:

Ik heb deze week gewerkt aan de styling van de relation card, aan de hand van het figma design. Ik heb hiervoor grid gebruikt, en de voor mij nieuwe grid-template-areas en de shorthand grid-template. Ik heb het vergeleken met de andere mogelijkheden zoals flex en dit leek mij de beste vanwege de flexibiliteit.

Terwijl ik aan het werken was aan de styling liep ik tegen een probleem aan: de relaties stonden over elkaar heen. Om dit op de lossen heb ik ze in een aparte container gezet. Doordat we de titel in de html bovenaan de card hebben willen staan kon hij niet samengevoegd worden met de andere relaties, dus ik heb besloten om hem een andere plek toe te wijzen. Zo staat de titel bovenaan te text en kunnen de relaties naast elkaar gestijld worden.

team collab

Ik heb deze week ook de eerste paar keer styling commits en pulls gemaakt, en ervaren hoe github in een samenwerkingsomgeving werkt. Veel was nieuw, en ik heb veel aan mijn teamgenoten gevraagd om te dubbel-checken of mijn commands wel goed waren. Ik heb wel het idee dat ik vertrouwder ben geraakt met het werken in branches, maar omdat ik weet dat het goed fout kan gaan laat ik nog steeds veel van mijn pulls controleren.

Week 3

feedback cyd

• hele card link?

• matthijs helpen met grid

• hulp met de accecibility van de relatie lijst van de relatie

details? button? :target? named anchors? :focus-withing? checkbox? Skiplink(wel of geen links?)