Webdesign advocatenkantoor
van der Meer & van den Bosch
Ontwerp
Concept
Mijn eerste grote individuele project was het ontwerpen en bouwen van een website voor het advocatenkantoor Van der Meer en Van den Bosch (dit was een fictieve opdracht). Vanuit school kreeg ik vooraf één persona en de benodigde informatie over het kantoor aangeleverd, maar verder doorliep ik het gehele proces zelfstandig. Benieuwd naar dit project? Lees dan hier verder!
Allereerst begon ik met het in kaart brengen van de user needs en de requirements van het advocatenkantoor. Dit gaf me een helder overzicht van de wensen en eisen waar ik tijdens het ontwerp- en ontwikkelproces rekening mee moest houden. Een belangrijk uitgangspunt was de meegeleverde persona, die kleurenblind is en de voorkeur geeft aan overzichtelijke informatie zonder lange tekstblokken. Bij het opstellen van de user needs heb ik een prioritering aangebracht. Ik bracht eerst in kaart welke elementen essentieel waren om terug te laten komen in de website, en keek daarna naar aanvullende wensen die minder cruciaal waren, maar wel waarde toevoegden aan de gebruikerservaring.
Dit ben ik gaan verwerken in mijn schetsen en ik heb een mindmap gemaakt met verschillende ideeën die ervoor zouden kunnen zorgen dat de site gebruiksvriendelijk wordt. Zo had ik bedacht dat er veel gebruik gemaakt moest worden van bijpassende iconen ter ondersteuning van de tekst. Dat er informatieve video’s op de website zouden moeten komen en dat er een persoonlijke pagina moest komen aangezien mijn persona vaak te maken had met het advocatenkantoor. Ook heb ik goed gekeken wat de voordelen en nadelen waren van deze ideeën.
User needs / requirements
Schetsen / mindmap
Hier zie je de mindmap over de ideeën die ik had voor de website.
Dit zijn de schetsen die ik maakte van de verschillende pagina’s.
Om een goed beeld te krijgen van mijn website heb ik ook een paper prototype gemaakt van de homepage. Hierin laat ik zien hoe verschillende banner vormen eruit kunnen zien en 2 functies op de homepage. Daarna heb ik een flowchart gemaakt van mijn 2 interacties en heb ik een sitemap gemaakt van de website. Vervolgens heb ik op de voorbereiding van mijn hifi prototype heb ik wireframes gemaakt, om efficiënt te werken heb ik meteen de teksten in mijn website geplaatst zodat ik nadat ik het design had gemaakt er niet achter zou hoeven komen dat de tekst niet goed paste.
Van Lo-fi…
De stijl van het advocatenkantoor heb ik ook samengesteld. We kregen het logo, de lettertypes en foto’s wel aangeleverd. De stijl heb ik geprobeerd om zo uitgebreid mogelijk vast te leggen in de styleguide. Daarbij heb ik icoontjes uitgezocht, kleuren vastgesteld en het gebruik van alle onderdelen vastgelegd. Nadat ik de visuele identiteit had vastgesteld ben ik begonnen aan mijn uiteindelijke hifi prototype. Waar ik het meeste op heb gelet is dat er een goede balans in mijn design zat, of alles op de juiste pixels is afgemeten en of het gebruiksvriendelijk is. Dit deed ik door vaak terug te kijken naar mijn user needs en requirements.
…Naar Hi-fi
Klik hier om het prototype te bekijken!
![](data:image/svg+xml,<svg display="block" id="1189051114" role="presentation" viewBox="0 0 24 20" xmlns="http://www.w3.org/2000/svg"><path d="M 20.4 0 L 3.6 0 C 2.645 0 1.729 0.395 1.054 1.098 C 0.378 1.803 -0.001 2.756 0 3.75 L 0 16.25 C 0 17.245 0.379 18.198 1.054 18.901 C 1.728 19.604 2.644 20 3.6 20 L 20.4 20 C 21.355 20 22.271 19.605 22.946 18.902 C 23.622 18.197 24.001 17.244 24 16.25 L 24 3.75 C 24 2.755 23.621 1.802 22.946 1.099 C 22.272 0.396 21.356 0 20.4 0 Z M 19.597 2.499 L 12 8.439 L 4.403 2.499 Z M 20.4 17.5 L 3.6 17.5 C 3.282 17.5 2.976 17.368 2.752 17.134 C 2.526 16.899 2.4 16.581 2.4 16.25 L 2.4 4.063 L 11.28 11 C 11.706 11.333 12.294 11.333 12.72 11 L 21.6 4.063 L 21.6 16.25 C 21.6 16.581 21.474 16.899 21.248 17.134 C 21.024 17.368 20.718 17.5 20.4 17.5 Z" fill="rgb(255, 255, 255)" height="20px" id="EdetBMibR" width="24px"/></svg>)