2. ✏️Ontwerpen
In de ontwerpfase bepalen we de structuur van de oplossing op basis van de analyse. Hier richten we ons op het maken van schetsen en wireframes, waarbij we de huisstijlen van Funda analyseren en rekening houden met de gegeven user stories. Daarnaast experimenteren we met huisstijlkleuren en leggen we de nadruk op toegankelijkheid. De focus ligt op het ontwerp van de collaboratieve functie voor het delen van bewaarde huizen.
In onze ontwerpfase hebben we de user stories, met name de volgende: "Je wilt als gebruiker eigen lijsten van huizen kunnen creëren en het kunnen delen met anderen om samen (asynchroon) huizen te kiezen die in de smaak vallen," als ons startpunt genomen. Deze user story vormde de kern van ons ontwerpproces, omdat het ons hielp begrijpen wat de eindgebruikers echt willen en nodig hebben. We wilden ervoor zorgen dat de website makkelijk te gebruiken is. Dus, we hebben ons gefocust op het maken van een interface die logisch en vriendelijk is. Hiermee kunnen gebruikers simpel hun eigen lijsten van huizen maken en deze delen met anderen. Om het de gebruikers makkelijk te maken, hebben we de schetsen en wireframes gemaakt met aandacht voor eenvoud en handige manieren van navigeren. We hebben ons afgevraagd hoe we de collaboratieve functie, zoals gevraagd in de user story, het beste konden integreren, zodat gebruikers moeiteloos huizen kunnen delen en samenwerken.
Ook hebben we de Living Styleguide als onze richtlijn gebruikt om de huisstijlen in ons ontwerp te verwerken. De living styleguide fungeerde als een soort handleiding die ons hielp begrijpen hoe we de kleuren, lettertypen en andere ontwerp elementen van de opdrachtgever op een consistente manier konden gebruiken. Een belangrijk aspect van deze fase was het experimenteren met huisstijl kleuren. We wilden niet alleen dat het er mooi uitzag, maar ook dat het voor iedereen gemakkelijk te zien en te gebruiken was. Daarom hebben we verschillende manieren onderzocht om de huisstijlkLeuren toe te passen, rekening houdend met kleurcontrasten voor een betere toegankelijkheid .We hebben bewust gekozen om deze huisstijlkenmerken te gebruiken, niet alleen omdat ze er goed uitzien, maar om de identiteit van de opdrachtgever echt te laten zien. Hiermee willen we een herkenbare en vertrouwde sfeer creëren voor de mensen die de website bezoeken.
Hieronder staan alle schetsen die ik heb gemaakt om een idee te krijgen van hoe ik wil dat de site er ongeveer uit komt te zien. Allereerst zie je telkens de initiele schets en vervolgens de breakdownschets hiervan.
Hieronder zie je twee ontwerpen die ik heb gemaakt voor de beginpagina van de website. Ik wilde graag een sidebar implementeren en dit heb ik dan ook getekend.
Hier zie je hoe ik heb gekeken naar de popup van de borden en hoe ik ervoor kan zorgen dat er gezamenlijk borden kunnen worden aangemaakt.
Hieronder staan de schetsen waar ik samen met Nadira aan gewerkt heb om een iets duidelijker beeld te krijgen van de weergave van de website en de functionaliteiten. Je zou dit kunnen zien als hi-fi schetsen.
Schets beginpagina
Ipad view
Iphone view
Popup borden
Ik heb een combinatie van lo-fi en hi-fi schetsen gemaakt, waarnaast ik ook heb gekeken naar de breakdowm schetsen hiervan
Hieronder zie je de schetsen die ik heb gemaakt voor de pagina waar je huizen kan opslaan ookwel een "lijst" Dit is op mobiel formaat gemaakt en daarnaast zijn de verschillende functies hier ook in vormgegeven.
Hier kan je de schetsen zien die zijn bedoelt voor de pagina waar alle huizen worden opgeslagen, daarnaast zie je op deze pagina een algemene view van alle lijsten die je hebt.
In de ontwerpfase heb ik op basis van de informatie uit de Living Styleguide, en de analyse fase waarin ik de focus leg op de userstories, het nieuwe website ontwerp geïmplementeerd. Hierbij stonden de behoeften van Funda en hun gebruikers centraal. Ik heb specifieke ontwerpbeslissingen genomen en aangepast op feedback van de opdrachtgever. Zoals;
- Gebaseerd op feedback over gebruiksvriendelijkheid heb ik de navigatiestructuur verbeterd, waardoor de website intuïtiever te gebruiken is. Toevoeging van Interactieve Elementen
In de ontwerpfase heb ik de vraag van de opdrachtgever geanalyseerd, waarbij ik de behoeften en doelstellingen van Funda heb begrepen. Dit omvatte specifieke gebruikersvereisten, zoals het creëren en delen van lijsten, om aan hun verwachtingen te voldoen.
In mijn schetsen heb ik duidelijk de functionaliteit geïmplementeerd waarmee gebruikers lijsten kunnen toevoegen. Bijvoorbeeld, ik heb stap voor stap weergegeven hoe gebruikers op een intuïtieve manier lijsten kunnen maken. Dit omvatte het toevoegen van een specifieke knop voor het creëren van lijsten en het bieden van eenvoudige stappen.
In mijn schetsen heb ik vooral aandacht besteed voor de implementatie van de huisstijlen van Funda. Ik heb specifieke kleurenpaletten gebruikt die overeenkomen met de Funda-richtlijnen, zoals te zien is in de Living Styleguide. Daarnaast heb ik geëxperimenteerd met kleuren op een manier die niet alleen herkenbaar is maar ook toegankelijk, rekening houdend met verschillende gebruikers. Bijvoorbeeld, ik heb alternatieve kleurencombinaties getest om de visuele vormgeving te behouden terwijl de toegankelijkheid wordt verbeterd.
