Iteratie 2 - Einanas/S12-proof-of-concept GitHub Wiki

funda-logo.zip

Analyse 🔍

Om een betere beeld te krijgen over waar ik naar toe wil werken heb ik besloten om mijn schetsen te verbeteren dan wat ik de vorige iteratie had zodat ik een betere oplossingsrichting heb.

Ontwerpen 🎨

Ik heb wat aanpassingen gedaan en wat nieuwe schetstechnieken toegepast en nu is het wat beter en duidelijker voor mijzelf wat ik wil gaan doen en hoe ik het kan doen:

Breakdown schets

Ik heb twee schetsen gemaakt. De eerste is normaal en de tweede is voor de dropdown menu. Dit is de eerste breakdown schets. Ik heb het verdeeld in 2 delen:

  • De eerste is met alles en heb voor elke stuk html code geschreven die erbij horen;
  • De tweede is een wat simpele schets zodat ik voor mezelf duidelijk kan zien hoe ik het design kan indelen; IMG_20240608_000346_hdr~2 Dit is de tweede breakdown schets, de dropdown menu. Ik heb er een breakdown schets van gemaakt en een wireflow zodat je kan zien wat er gebeurt als je op het menu knop drukt: IMG_20240608_000400_hdr~2

Wireframe

Ik heb een wireframe gemaakt zodat je kan zien wat er gebeurt als je een lijst wilt maken: IMG_20240608_000411_hdr~2

UI States

Ik heb 2 Ui States gemaakt:

  1. Deze UI state gaat om dat je wilt drukken op het creëren van een lijst: IMG_20240608_000419_hdr~2
  2. Bij deze UI State gaat het om dat je jouw lijst een naam wilt geven en vervolgens de optie krijgt om huizen te selecteren of om gewoon verder te gaan: IMG_20240608_000427_hdr~2

UML Diagram

Ook heb ik een UML diagram gemaakt voor de pagina's. IMG_20240608_161917_hdr~2

Bouwen 👩‍💻

Ik heb mijn website in drie delen gebouwd zoals je kon zien bij mijn breakdown schets.

  • De eerste in een header. Ik heb eerst alleen de html code toegepast, ik moet nog alleen de css goed toepassen om de dropdown effect te creëren voor mobile first en dat wil ik bij de volgende iteratie doen. De Daaronder is het site opgedeeld in 2 secties:

  • De eerste sectie is met knopjes voor je lijsten.

  • De tweede sectie is waar je kan zien welke huizen er in je gemaakte lijst is.

Ik heb de data opgehaald uit de database en vervolgen dat gekoppeld aan mijn HTML, maar lukte het me niet om dit op page refresh te updaten. Ook was ik bezig met een dropdown menu te maken met view transitions eraan gekoppeld alleen kreeg ik de dropdown menu niet af voor de code review.

Testen

testplan schrijven Test scenario:

  1. De gebruiker zit op het lijsten pagina en drukt op het knopje "+ maak een lijst" om een lijst aan te maken voor zijn/haar selectieve keuzes voor huizen.
  2. En dat ze kunnen zien welke huizen er zijn.

testen testresultaat bespreken en bewerken