Webdesign & Design Patterns
Van der Veen
Ontwerp
Concept
Voor dit project ontwierpen mijn teamgenoot en ik een nieuwe versie van de website van Van der Veen, een webshop voor Nederlands eten in het buitenland. De oude website was onoverzichtelijk en niet gebruiksvriendelijk, dus kregen wij de opdracht om het ontwerp te verbeteren met behulp van design patterns. Benieuwd hoe we met design patterns de webshop verbeterden? Bekijk het project!
We begonnen met een styleguide waarin we een nieuw kleurenpalet en lettertype vastlegden, het bestaande logo bleef behouden. Daarna maakten we allebei schetsen. Ik ben begonnen met het schetsen van de homepagina en heb meerdere varianten gemaakt.Deze schetsen zijn gedetailleerd, zodat je duidelijk kunt zien dat we hebben gelet op grootte, positie, dichtheid en UI-regions. Tijdens het schetsen realiseerden we ons ook dat het belangrijk was om een goede en aantrekkelijke banner te maken. Naast mijn schetsen voor de homepagina heb ik ook schetsen gemaakt van het bestelproces.
Schetsen
Ik heb de banner gemaakt in Photoshop. Hiervoor heb ik gezocht naar foto’s van hoge kwaliteit van de producten en de achtergrond verwijderd. Vervolgens heb ik met een brush de achtergrond gemaakt en handmatig schaduwen toegevoegd om de banner een speelse uitstraling te geven. Ook hebben we de slogan van ‘Van der Veen’ in het midden geplaatst, zodat je meteen weet waar de website over gaat.
Banner
Bij het maken van de home pagina hebben we goed gelet op de verschillende design patterns, zo hebben wij gebruik gemaakt van een home link als je op het logo klikt, hebben wij ervoor gezorgd dat de website fully connected is door ook home in de nav bar te zetten. Ook hebben wij de patterns: evoking a feeling en hub a spoke laten terug komen in de banner. Daarnaast hebben wij gebruik gemaakt van een carrousel en cards. Als laatste hebben wij ook gelet op de accessibility.
Bij het ontwerpen van de product pagina’s hebben wij de design patterns die wij gebruikt hebben voor de homepagina ook laten terug komen en we hebben nieuwe patterns toegevoegd. Zo hebben wij een shopping card en iconen gebruikt. Verder hebben we gebruik gemaakt van de volgende design patterns: breadcrumbs, search filters, infinite list, pagination en productpage.
Homepagina & productpagina’s
Nadat we de homepagina en de productpagina’s gemaakt hadden zijn we door gegaan met het bestelproces, hier hadden we net een andere versie van de banner gebruikt zo dat het duidelijk is dat je in een ander venster zit. Namelijk het bestelproces. Hier hebben we we wederom gelet op de design patterns voor het bestelproces hebben wij de volgende patterns gebruikt: primary and secundary buttons, input hints, cancel ability, progress indicator en stepwise.
Ook hebben we tussendoor en toen we de website afhadden feedback gekregen op ons werk zodat we de website verder konden verbeteren. Zo hebben we wat interacties gedaan en nieuwe patterns aan het design toegevoegd. Zo miste we bijvoorbeeld nog een problem summary en kon je niet meteen een review achterlaten wat niet gebruiksvriendelijk en efficiënt is. Deze punten hebben we allemaal aangepast zodat het design en de gebruiksvriendelijkheid nog beter werd.
Bestelproces
Tijdens dit project heb ik veel kennis opgedaan over design patterns die ik eerder niet kende. Deze patronen zijn van groot belang bij het creëren van een gebruiksvriendelijke en kwalitatieve website.
Ook ging de samenwerking in dit project erg goed ik vond het erg fijn om in een tweetal te werken omdat je samen goeie keuzes kon maken, zo vulde we elkaar onwijs goed aan.
Reflectie
![](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>)