Standaard aanbouw herontwerp

Een herontwerp van een wordpress website

Projectjaar: 2021
Projectdoel: Moderne uitstraling
Doelgroep: Gezinnen met interesse in een aanbouw

Ik kreeg de opdracht om een nieuwe website te creeëren van een bedrijf van een kennis. Ik begon met het analyseren van de huisstijl en websites van concurrenten. Hier ontwierp ik een Lofi bij. Na een feedback sessie ging de opdrachtgever akkoord met de lofi en vervolgde ik mijn ontwerp naar een HiFi. Na een volgende feedbacksessie is er een tweede HiFi ontworpen en deze is vervolgens responsive uitgewerkt in wordpress

Huidige website

Website voor het herontwerp

Het bedrijf had eerst de naam, 'Meer Woon Ruimte'. Tegenwoordig noemt het bedrijf haarzelf Standaardaanbouw. Hier hebben ze een nieuw logo voor en een nieuw briefpapier huisstijl. Op basis van die stijlen ben ik een nieuwe website gaan ontwerpen.

Huisstijl elementen

Huisstijl voor briefpapier en facturen

Voor er iets bedacht kan worden voor de doelgroep is het belangrijk dat hier eerst globaal onderzoek naar gedaan wordt. Hieronder vindt u mijn belangrijkste bevindingen uit het onderzoek

Logo

De aannemer is recentelijk een rebranding aangegaan en heeft het bedrijf hernoemd naar standaard aanbouw. Hiervoor huurde de aannemer een designer voor een nieuw logo

Briefpapier

De aannemer werkt voornamelijk via bestaande contacten en heeft hiervoor geen website nodig gehad. Wel werden er facturen opgesteld en hiervoor werd briefpapier ontworpen

Herontwerp

Overzicht van de hoofditeraties

Hieronder vind u de verschillende iteraties tijdens het ontwerpproces. Ik begon met een schets in de vorm van een LoFi ontwerp en eindigde met een eind HiFI ontwerp.

LoFi ontwerp

In het LoFi-ontwerp probeerde ik de stijl van het briefpapier na te bootsen. De schuine donkere balken wil ik de blauwe huiskleur geven en als accentkleur wil ik de geel groene kleur gebruiken. De opdrachtgever was tevreden met het LoFi-ontwerp en ik ging dus verder met het HiFi-ontwerp

Eerste HiFi iteratie

In dit ontwerp voeg ik kleur en afbeeldingen toe om het ontwerp meer vorm te geven. Naast de afbeeldingen probeerde ik ook de huisstijl van het briefpapier na te bootsen op de website. Voor de menuselectie gebruikte ik het oorspronkelijke ontwerp van de beter wonen website.

Eerste herontwerp met kleur, huisstijl en detail

Tweede HiFi iteratie

Het blauw in de eerste HiFi iteratie vond ik te druk. Daarnaast pastte de afgeronde knoppen niet in de stijl van de rest van de website en werden deze dus aangepast. Ook werden er slogans toegevoegd.

Tweede iteratie van het herontwerp met kleur, huisstijl en detail

Derde HiFi iteratie

In de volgende iteratie heb ik geëxperimenteerd met de herosectie van de pagina. In de vorige itaratie was de tekst, ondanks de tekstschaduw, de tekst nog slecht leesbaar.

Vierde HiFi iteratie

In deze iteratie werd er verder geïtereerd op de herosectie en kreeg de achtergrondkleur, knop, header en titel aangepast. Ook werden er keurmerken toegevoegd om vertrouwen te wekken.

Laatste HiFi iteratie

De aannemer heeft geen keurmerken dus werden deze verwijderd. Daarnaast werden er secondaire knoppen, een galerij, een contactsectie en recente nieuwspagina's toegevoegd.

Tweede en laatste iteratie van het herontwerp met kleur, huisstijl en detail

Overige schermen

Overzicht van diverse detailpagina's

Nadat er een akkoord was bereikt over het eindontwerp van de hoofdpagina, werden diverse detailpagina's uitgewerkt. Deze detailpainga's werden in dezelfde vorm en huisstijl ontworpen dan het hoofdscherm. Hieronder vind u de 3 hoofddetailpagina's vormgegeven.

Blogpagina

Verschillende klanten bij het bedrijf willen graag op de hoogte gesteld blijven over diverse ontwikkelingen bij het bedrijf. Hiervoor wordt een nieuwspagina ofwel blogpagina bijgehouden door de aannemer. Daarnaast geeft het hebben van een up-to-date nieuwspagina meer vertrouwen naar potentiele nieuwe klanten.

HiFi van de servicepagina's

De aannemer levert verschillende services. De aannemer wilt de focus hebben op 'hulp bij het zelf aannemen' en daarom is deze optie als call-to-action zichtbaar op het hoofdscherm. Bij de vergelijking tussen services wordt deze optie daarom ook in het midden getoond, de positie waar ogen het eerst naar toe gaan.

Github en Eindresultaat

Code en eindontwerp

Nadat er een akkoord was voor het ontwerp, werd de website responsive ontworpen op Wordpress. Er werd gebruik gemaakt van een thema die semantieke HTML genereerd en de plugin Advanced Custom Fields. Met Advanced Custom Fields heb je als devloper veel flexibiliteit met het ontwerpen. Voor elk type content, kan er een 'custom field' aangemaakt worden waar je als devloper de styling en positie kan aanpassen. Daarnaast is het mogelijk om al die verschillende 'fields' in een specifieke structuur voor de eigenaar te tonen waardoor het wijzigen en toevoegen van content wordt versimpeld.

Github

Helaas is de aannemer en eigenaar momenteel bezig met een groot persoonlijk project waardoor hij geen tijd heeft om nieuwe klussen aan te nemen. De website staat daarom momenteel offline. De code kunt u echter nog wel bekijken op mijn github

Bekijk github