Een herontwerp van een aannemers Wordpress website

Standaard aanbouw

Eind Ontwerp Standaard Aanbouw

Ik kreeg de opdracht om een nieuwe website te ontwerpen voor het bedrijf van een kennis. Ik begon met het analyseren van de huisstijl en de websites van concurrenten. Op basis daarvan maakte ik een low-fidelity (lo-fi) ontwerp. Na een feedbacksessie stemde de opdrachtgever in met een concept, waarna ik het ontwerp verder uitwerkte tot een high-fidelity (hi-fi) versie.

Na een tweede feedbackronde heb ik een aangepaste hi-fi ontwerp ontworpen. Deze definitieve versie is vervolgens responsive uitgewerkt en gerealiseerd in WordPress.

Huisstijl voor briefpapier en facturen

Huisstijl elementen

Ondanks dat de website flink outdated was, is het logo en briefpapier inmiddels al wel geupdatet. De wens was dan ook om dit als huisstijl te gebruiken voor het herontwerp.

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

Standaard Aanbouw 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

Standaard Aanbouw Briefpapier
Overzicht van de hoofditeraties

Herontwerp

Het ontwerpproces verliep iteratief, van een eerste LoFi-schets tot een uitgewerkt HiFi-eindontwerp. De focus lag eerst op de hoofdpagina. Vervolgens werden in later stadia de overige paginas bepaald en ontworpen. In de LoFi-fase werd de huisstijl van het briefpapier vertaald naar een digitale opzet. De schuine donkere balken kregen een blauwe kleur, met een geelgroene tint als accent. Na positieve feedback van de opdrachtgever werd dit verder uitgewerkt.

De eerste HiFi-iteratie bracht kleur en beeldmateriaal in het ontwerp, met behoud van de oorspronkelijke navigatiestructuur. In de tweede versie werd het drukke blauw aangepast en werden de afgeronde knoppen vervangen door strakkere varianten. Ook zijn er slogans toegevoegd ter versterking van de boodschap.

De derde iteratie focuste op de leesbaarheid van de herosectie. Aanpassingen volgden in kleurgebruik en typografie. In de vierde versie zijn knoppen, headers en titels verder verfijnd, en werden keurmerken toegevoegd om vertrouwen te wekken.

In de laatste HiFi-iteratie zijn de keurmerken verwijderd, omdat de aannemer deze niet voert. Wel werden een secundaire knop, galerij, contactsectie en nieuwsoverzicht toegevoegd, waarmee het ontwerp zowel visueel als functioneel werd afgerond.

  • Lofi schets

    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

  • Hifi schets #1

    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.

  • Hifi schets #2

    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.

  • Hifi schets #3

    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.

  • Hifi schets #4

    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.

  • Hifi schets #5

    Laatste HiFi iteratie

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

Overzicht van diverse detailpagina's

Overige schermen

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

  • Blogpagina hifi

    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.

  • Servicepagina hifi

    HiFi van de servicepagina

    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.