Rol:
UX/UI Designer
Front-end developer
Type product:
Responsive website
Opdrachtgever:
Only for Men
Opdracht omschrijving:
Voor herenmode zaak The Bakery, gespecialiseerd in producten van denim stof, heb ik een nieuwe website ontworpen en gebouwd. Voor deze opdracht heb ik meerdere producten aangeleverd zoals: Een sitemap, drie stylescapes, een redesign op de huidige website en tot slot de nieuwe website ondersteund door het Divi wordpress thema.
Doel van de opdracht:
The Bakery heeft een onwijs uniek concept. Het is een herenmode zaak gevestigd in een oude bakkerij, waar naast het verkopen van denim artikelen nog altijd ook vers brood gebakken wordt. De bezoekers kunnen dus naar huis gaan met een nieuwe broek samen met een vers gebakken brood. De website heeft meerdere doelen. Het vertellen van het concept van de winkel en het personeel, de verschillende modemerken laten zien, een nieuwsbrief aanbieden en de mogelijkheid tot maken van een afspraak voor stijladvies in de winkel. Tot slot heeft de website een eigen blog met nieuwsartikelen.
Fase 1: Analyseren van de briefing
Van Only for Men kreeg ik de briefing aangeleverd. Deze heb ik grondig doorgenomen en ook een debriefing op geschreven met daarin de belangrijkste functionaliteiten. Dit heeft mij een sterke basis gegeven voor het ontwerpen van de nieuwe site.
Fase 2: Ontwerpen van een vernieuwde sitemap
Voordat ik ben begonnen met ontwerpen, heb ik een vernieuwde sitemap ontwikkelt. Net als bij mijn opdracht voor De Brinck vond ik het prettig om eerst de gehele paginastructuur in kaart te brengen, zodat ik ook exact een idee heb van welke pagina’s er ontworpen moeten worden. Na goedkeuring van Only for Men ben door gegaan op het maken van de eerste wireframes.
Fase 3: Wireframes maken
In fase drie heb ik de eerste (schetsmatige) wireframes ontwikkelt. Hierin gaat het nog niet om de vormgeving het van design, maar om echt een goede structuur en flow te bedenken. Ik heb uiteindelijk vier definitieve wireframes opgeleverd van de Home, Meet the bakers, Brands en Blog pagina’s.
Fase 4: Stylescapes
Om de style van de nieuwe website te bepalen heb ik drie verschillende stylescapes ontwikkeld. Samen met Only for Men heb ik een keuze gemaakt voor een definitieve scape. Deze stijl is vertaald naar de pagina’s van de website.
Fase 5: Design uitwerken tot klikbaar prototype
In de vijfde stap heb ik mijn wireframes samen met de stylescape vertaald tot een levendig en kleurrijk prototype van de website. Hierin zitten niet alleen de vier basis pagina’s van de wireframes in verwerkt, maar dit is echt de complete website. Ook zit hier interactie in verwerkt, om de beleving van de website aan de gebruiker mee te geven.
Fase 6: Bouwen van de website in WordPress
In de laatste fase van het project heb ik het prototype nagebouwd in WordPress. Zelfstandig heb ik alle pagina’s gebouwd, ook voor mobiel formaat. Ook functies zoals de nieuwsbrief integratie heb ik met behulp van Mailchimp in de website verwerkt. Een toffe functies die ik in deze fase ook heb kunnen uitwerken is een “social wall”. Dit is een muur van Instagram berichten van The Bakery, op de homepagina van de website.
