2. Ontwerpen
Met een Wireflow laat ik zien hoe ik interactie op mijn website eruit komt te zien. Een Wireflow is voor mijzelf, maar ook voor mijn teamgenoten waarmee ik samen werkt. Andere mensen moeten mijn schets kunnen begrijpen.
- Scherm 1: Wanneer er op de zoekbalk wordt geklikt en er wordt getypt dan verdwijnt de tekst die in de zoekbalk staat;
- Scherm 2: Als er een zoekopdracht staat en er wordt interactie gemaakt met de "zoek" button, dan komen er 2 zoekresultaten, 1 bij de lijsten en 1 bij de algemene opgeslagen huizen. Bij de lijsten wordt er altijd "voeg een lijst toe" behalve als de gebruiker aan de max 6 lijsten zit. Verder worden de lijsten getoond waarbij een match is in het zoekresultaat, de lijsten waar geen match is die worden niet getoond. Bij de "alle opgeslagen huizen" worden alleen de huizen getoond waarmee er een match is in het zoekresulaat;
- Scherm 3: Als er geen match is dan wordt er op de "mijn lijsten" "voeg een lijst toe" getoond, behalve als de gebruiker aan de max 6 lijsten zit, dan word er "er zijn geen zoekresultaten" getoond. Bij "alle opgeslagen huizen" wordt er "er is geen zoekresultaat" getoond als er geen match is.
- Scherm 1: Wanneer er op het vlak "voeg een lijst toe" wordt geklikt opent een popup;
- Scherm 2: Nadat er op de button wordt geklikt opent een popup, als het geopend is wordt de achtergrond zodat de focus op de popup is. In de popup kan je de nieuwe lijst een naam geven & bijdragers toevoegen ook is er de mogelijkheid om actie te annuleren via het kruisje rechts bovenin de popup.
In de breakdown schets heb ik HTML-elementen, CSS properties en Javascript code gezet. Hierdoor ben ik goed voorbereid voor het coderen van de popup