Sander Kop Portfolio

Website design

We hebben ervoor gekozen om voor ons concept BrandBazar per groepslid een mockup voor de website op te leveren en deze mockups te bespreken en aan de hand van onze bevindingen te verbeteren. Hieronder zie je mijn mockup.

Mockup

Ik vond het belangrijk dat de hoofdfunctionaliteit van het concept, namelijk het aangeven welke winkel je mist in een bepaalde stad, duidelijk naar voren komt op de website. Vandaar dat ik heb gekozen voor een duidelijke call to action met daaronder een input veld waar men direct aan kan geven welke winkel gemist wordt. Ook is te zien welke winkels zoal door anderen gemist worden, dit geeft de gebruiker het gevoel dat hij niet alleen is, dat meerdere mensen hem zijn voorgegaan. Wanneer de gebruiker bij een winkel op het i’tje klikt, krijgt hij meer informatie over deze winkel. Wanneer de gebruiker op het pijltje onder de call to action klikt, kan hij bekijken/ aangeven welke winkels hij mist in een andere stad.

Ook kan de gebruiker verschillende succesverhalen bekijken van winkels die zich hebben gevestigd na de vraag van de BrandBazar community.

Guidelines

Het design van de mockup voldoet aan deĀ guidelines voor minimalistisch webdesign, hieronder leg ik per principe uit hoe het design hieraan voldoet:

1. Negative Space

Ik geef alle elementen op de website voldoende witruimte, zodat je oog naar deze elementen geleid wordt. Ik heb ervoor gekozen om deze witruimte te vullen met een full color achtergrond.

2. Large & Vivid Photography

Ik maak in mijn design gebruik van een hero image en een hero header, de call to action.

3. Dramatic Typography

De typografie van de hero header springt er uit en dient als een focuspunt in het minimale design van de website.

4. Beautiful Contrast

De witte letters van de tekst op de website contrasteren perfect met de donkere achtergrond.

5. Stupidly Simple Navigation

Er zijn in dit design slechts twee menu items, waardoor een hamburger menu niet nodig is. Deze items zijn daardoor ook op een mobiel platform duidelijk zichtbaar voor de gebruiker.

6. Visual Harmony

Ik heb gebruik gemaakt van horizontale symmetrie voor de winkels in het “bekijk welke winkels anderen missen” gedeelte van de website.

7. Flat Design Evolved

Ik maak in het design gebruik van flat design kleuren.

© 2017 Sander Kop