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 samenwerking en digitale samenwerking

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

Toegankelijkheid

Ik heb deze week aan Cyd hulp gevraagd voor hulp met de toegankelijkheid van de relaties. De relaties horen links te zijn, maar het is onlogisch om van het hele vakje een link te maken omdat dat alles voorgelezen word door een screen reader. Cyd heeft me de tip gegeven op alleen de titel een link te maken, maar wel om de proberen om het hele vak klikbaar te maken voor muisnavigatie. Dit is gelukt, echter tijdelijk uitgezet door een ander interactief object wat werd overheerst. Aan het einde van deze week was er nog geen oplossing gevonden.

Matthijs helpen met grid

De beste manier om te bewijzen dat je iets heb geleerd is het uitleggen aan iemand anders. Ik heb deze week aan Matthijs uitgelegd hoe grid werkt, en samen met hem een voorstel voor het grid van de main component te maken.

Relatielijst en toegankelijkheid

In de relatie-component staat er een lijstje met diens relaties. Doordat veel van deze relaties hele lange namen hebben en/of heel veel relaties hebben we besloten dat we de relaties willen kunnen verstoppen. Ik ben hier heel diep ingedoken om dit ook zo toegankelijk mogelijk te houden.

Een ding wat algemeen is besloten is dat de relaties van de relaties geen links worden, maar alleen informatie. De relaties van de main subject van de pagina zijn wel links. Door de extra links weg te halen is de site veel minder chaotisch.

Dropdown

Als eerste heb ik een dropdown gemaakt. Ik wou mogelijk maken dat de eerste regel van de relaties zichtbaar was, en aangezien de hoeveelheid relaties op de eerste regel variabel is heb ik alles in een lijst in de summary gezet, en de hoogte van het blok aangepast met behulp van de :opened state. Dit is natuurlijk niet semantisch correct, dus ik ben naar de leraren gegaan voor andere oplossingen en heb een heleboel suggesties gekregen. Ik heb er veel van uitgewerkt en getest, en ik heb de meest opmerkelijke hieronder beschreven:

Checkbox in lijst

Een andere oplossing die ik heb geprobeerd is om in de lijst een knop(checkbox) toe te voegen waarmee de rest van de lijst word uitgeklapt. Ik wou de knop alleen aan de rechterkant van de relaties hebben, wat lastig bleek te zijn aangezien de grootte en hoeveelheid van de relaties variabel is.

Checkbox onafhankelijk van lijst

Weer een andere oplossing die ik heb geprobeerd is de checkbox onafhankelijk maken van de lijst. Hierbij waren er helaas ook problemen met de positioning van de knop, aangezien hij vast word gezet in verhouding op de card, en de positie zou moeten veranderen als er meer of minder text is , en de hoeveelheid relaties zodra de lijst zichtbaar is. Op het voorbeeld hieronder is de knop relatief aan de onderkant van de card, waardoor hij onder de relaties schuift op het moment dat ze toegevoegd worden aan de kaart.

Dropdown(nog een keer)

Na veel dingen geprobeerd te hebben en overlegd te hebben met mijn team hebben we besloten dat we geen preview hoeven hebben van de relaties, en dus alles in een dropdown kan. zucht. Deze oplossing werkt, een kleine preview van de hoeveelheid relaties maakt het af en werkbaar.

Week 4

Documentatie

Ik heb de afgelopen weken veel aan documentatie gewerkt, onder andere door notities te maken tijdens de gesprekken met de opdrachtgever en die later te notuleren, maar ook door elke week mijn productbiografie te updaten. Dit heeft ervoor gezorgd dat ik een goed overzicht heb wat ik tijdens dit project heb gedaan en wat er nog gedaan moet worden.

Feedback Sanne

• meer testen
• meer onderzoek (regelgrootte, lettergrootte) (light/dark, kleurenblindheidpallet)
• tips animatie details/summary

Feedback Declan

• wat hij kan zien is er geen tijd voor details als toegankelijkheid, focus op een werkende site

Toegankelijkheid

Kleuren

Na in de eerste week de kleuren van FF getest te hebben, hebben we het design gemaakt in de kleuren van de bibliograph. Ik heb deze week gespendeerd om deze kleuren een geupdate versie te geven, waarbij ook rekening word gehouden met kleurenblindheid. Als basis heb ik het Wong kleurenpallet gebruikt, gemaakt door Bang Wong. Daarna heb ik deze kleuren getest met een contrast checker, en een van de kleuren aangepast zodat het contrast klopt en de kleur verschilt van de anderen, zelfs voor mensen met kleurenblindheid.

Ik heb ook een light/dark mode gemaakt, ervoor zorgend dat de contrasten nog steeds kloppen. Ik heb hiervoor @media (prefers-color-scheme: ) gebruikt.

Screenreader

Ik heb deze week ook veel getest met screenreader. Dit was heel interesant, want ik heb ondervonden dat het heel onwennig is om over de pagina te bewegen. Zodra je /tab/ indrukt, leest hij alleen de knop/element op waar je op staat, en bijvoorbeeld niet het uitgeklapte gedeelte. Ik heb hiermee ook ontdekt, dat de knop er dubbel stond (twee op elkaar).

States

Ik heb ook styling toegevoegd bij de :hover, :active en :focus state. Dit zorgt ervoor dat het item waar de user op gefocust is opvalt en dat de site responsive aanvoelt.

Samenwerking team

Deze week was een bijzondere week bor samenwerking in het team, omdat er veel van de dagen mensen er niet waren of thuis werkten. Ik heb me gefocussed op details en bug fixes op de pagina's die al gemaakt waren, ook al voelde dat een beetje raar want er moesten nog hele pagina's (zoals de homepagina) gemaakt worden. Dit is zo gedaan zodat iedereen aan zijn leerdoelen kon komen. Een groot deel van deze week was vertrouwen op de rest van het team dat zij ook progressie aan het maken zijn.

Styling

Ik heb inspiratie gehaald uit te talk van Nils deze week, en flexibele margins toegevoegd. Dit was nodig om de regelgrootte op een groot scherm niet extreem te maken.

Ik heb door gebruik te maken van media queries een mobile layout gemaakt voor onze site. Als het scherm kleiner dan een bepaalde breedte is, verander ik het grid zodat de detail en de relaties onder elkaar komen te staan. Om ervoor te zorgen dat dit goed werkt heb ik ook de grootte van de elementen en de manier van scrollen aangepast.

Week 5

Maandag hadden we het voorlaatste gesprek met de opdrachtgever, waarin we voornamelijk het design hebben doorgesproken en wat laatste aanpassingen hebben aangestipt. De dag erna hebben we een lijstje gemaakt met alle taken- die die opdrachtgever had aangestipt en de taken die wij nog moesten doen. Deze hebben we verdeeld en aan het einde alles samengesteld voor de eindoplevering samen met het andere team.

Een van de grotere items die ik deze week heb gemaakt is een legenda voor de kleuren. Ik heb deze in een apart component gezet zodat hij op elke nodige pagina geladen kan worden. Ik heb hiervoor het popover element en de bijgaande backdrop kunnen gebruiken.Ik kreeg hierop feedback dat het niet handig was om de legenda als laatste op de pagina te hebben. Echter, door de structuur van de Liquid files was de keuze of als laatste of als eerste, en ik wou het menu niet verder belasten.

Ik heb de footer gemaakt :). Ik heb de footer op de huidige FF site nagemaakt, met uitzondering van het stukje nieuwsbrief informatie. In plaats daarvan heb ik statische links naar de Framer Framed website toegevoegd (een wens van de klant). Ik heb ook de icons die ze hadden gebruikt voor hun social media een titel gegeven zodat ze kunnen worden opgelezen door een screenreader.