Componenten maken voor introductie pagina

[aliceafanasieva]

Ik ga de introductie gedeelte van de drop-and-heal website a.d.h.v atomic design manier bouwen met componenten.

Opdracht component-building-block:

Ontwerp en bouw voor de opdrachtgever een robuust, goed werkend component, waarin de belangen van de eindgebruiker centraal staan.

Werkwijze DLC: Analyseren: Inventariseer het componenten Ontwerpen: Onderzoek variaties voor jouw component met behulp van een morphological chart. Werk verschillende versie van je component uit in Figma. Breakdownschets met de HTML, CSS en JS code voor het component. Schets responsive, progressive enhancement, performance en toegankelijkheid. Bouwen: Maak het component in Sveltekit. Testen: Test het component regelmatig op toegankelijkheid, responsive design en performance en verwerk de feedack.

Definitions of done:

• [ ] Je hebt verschillende versies van je component in detail uitgewerkt in Figma
• [ ] Je hebt een breakdownschets met uitleg hoe je in het component responsive design, progressive enhancement, performance en toegankelijkheid toepast
• [ ] Je hebt een component gebouwd op basis van web standaarden, progressive enhancement, toegankelijkheid, responsive design en performance
• [ ] Je hebt het component getest op toegankelijkheid, progressive enhancement, performance en responsive design, en de bevindingen gedocumenteerd in de wiki
• [ ] Je hebt een gebruikerstest gedaan, en de bevindingen gedocumenteerd in de wiki

[aliceafanasieva]

Introducitie componenten identificeren

Elk van de pagina's uit de introductie kunnen worden verdeeld in 4 componenten:

1. Header en 2. Voortgangsbalk

Het bovenste gedeelte dat "Introductie algemeen" of "Introductie rouwtaken" weergeeft, kan als een herbruikbaar component worden gemaakt. Dit component kan de titel en voortgangsbalk bevatten, die dynamisch aangepast kan worden aan de hand van pagina (misschien een pagina nummer doorgeven bij gebruiken van component). De voortgangsbalk, die de huidige plek in de introductie laat zien, kan ook als apart component worden opgezet.

3. Navigatiebuttons

De buttons om heen en weer te navigeren kunnen als een apart component worden gemaakt.

4. Inhoud component

Het tekstgedeelte onder elke sectie zoals "Privacy," "Tools," en "Rouwtaken" zou ook een component kunnen zijn.

5. Rouwtaak Illustratie (animatie)

De abstracte illustraties die varieëren per pagina van de Introducitie rouwtaken, kan als een afbeelding-component worden opgezet.

[aliceafanasieva]

Morphological chart

Ik heb verschillende opties van componenten voor introductie verkent d.m.v. een morphological chart.

• Dynamische header: header past zich aan de schermgrootte door mediaqueries en is op dit manier toehankelijk.
• Balk met huidige voortgang: dit laat de gebruikers duiderilijk zien in welke fase of taak ze zich bevinden en hoeveel er nog te gaan is.
• Geanimeerde illustratie (SVG) mbv css: meer levendig, ruststellend, geeft de website een dynamisch gevoel.
• Dynamische typografie: zorgt voor optimale leesbaarheid en past zich zonder veel afleiding aan de gebruiker of het apparaat aan.
• Aria-elementen samen met JavaScript-animaties: combineren van aria-elementen met links voor basisfunctionaliteit en voeg aria-attributen toe voor opmaak, dit is belangrijk voor PE. De JavaScript toevoegen om een overgangsanimatie te maken, waardoor de navigatie meer visueel aantrekkelijk is. Dit werkt dus zonder JavaScript, maar voegt mooie animatie toe als JavaScript beschikbaar is.