Pets.be - (re)Design website

Entityone referentie voor pets.be - header met logo en afbeelding website

Pets.be - (re)Design website

Design
Implementatie design

Een drukbezochte centrale hub voor dierenasielen, gebouwd in Drupal met Bootstrap maar zonder enig ontwerp: onze klant gaf EntityOne de volledige vrijheid om deze website visueel volledig op te bouwen, binnen een duidelijk afgelijnd budget. Resultaat? Nieuw logo, nieuwe huisstijl, … en een nieuw begin voor de dieren op pets.be.

Qua functionaliteit werd de site niet heropgebouwd, maar wel hier en daar qua UX enigszins verbeterd. Deze site is een interessante referentie om het effect te visualiseren van een krachtig design om je zowel te onderscheiden van andere websites, maar vooral om de bezoeker visueel te gidsen naar wat belangrijk is op de website.

Stap 1: Het logo

Eerst en vooral vond ik het belangrijk om het bestaande logo, een eenvoudig icoontje van een dier, te her-evalueren. Mijn eerste intentie was om hier verder op te werken, maar ik besloot al snel om het over een andere boeg te gooien en voor een volledig nieuw logo te gaan.

Na enkele iteraties evolueerde het logo voor pets.be naar één waar de typografie centraal staat. Ik tekende zelf de letters uit, met een referentie naar het origineel logo in de letter “e”: de oortjes van het dier uit het vorige logo keren hier terug, waarbij het staartje van de “e” ook kan dienen als een staart. Het was vooral belangrijk om een vrij “algemeen” dier weer te geven, aangezien de website heel wat verschillende dieren ter adoptie verzamelt.

Eens de typografie van het logo op punt stond, wou ik ook een eigen kleur definiëren in plaats van het standaard blauw van Bootstrap. Ik speelde met diverse opties maar koos al snel voor een oranjetint. Een warme, positieve en engagerende kleur, belangrijk aangezien ook de klant met pets.be een sfeer van vreugde wil - dit om zich te onderscheiden van de meer clichématige, trieste beeldvorming die voor asieldieren al te vaak nog gebruikt wordt.

Logo pets - inverted
Logo pets - with guides

Stap 2: Design en de Homepage

Nadat het logo en de kleuren voor de huisstijl gedefinieerd waren, besloot ik om in Sketch enkele globale elementen vorm te geven. Om de klant een beeld te geven van de nieuwe stijl voor de site wou ik vooral de header en de introductie op de homepagina op voorhand vormgeven. Een lichte hoofdnavigatie en een groot, sprekend introductiebeeld op de homepagina doen alvast wonderen. Na zijn goedkeuring deed ik het meeste van de vormgeving echter meteen in de browser, waarbij ik de site-elementen opbouwde via Google’s “Material Design”-principes.

Hierdoor bewaart de site een uniforme en duidelijke visuele lay-out: de belangrijke elementen vragen om aandacht, secundaire info is zachter. Waar de site voordien veel kadertjes en diverse, chaotische typografie had, zorgde ik voor visuele rust en eenvoud - maar met voldoende kleuraccenten om de site niet doods en sober te doen aanvoelen.

Stap 3: Redesign doorheen de site

Op dit punt had ik alle visuele stijlelementen om de site verder vorm te geven. De volgende belangrijke pagina’s waren de overzichtspagina’s voor de dieren met een filter per diersoort, en uiteraard de detailpagina’s waarbij het de bedoeling is om het dier zelf duidelijk en aantrekkelijk te presenteren naar de bezoeker.

Ik zorgde er telkens voor dat de belangrijkste elementen op de pagina voldoende naar voren springen, dit door ze los te maken van de achtergrond (of secundaire elementen zoals de zijnavigatie net te integreren met de achtergrond), te werken met kleuren, schaduw en typografie zodat elke informatieblok duidelijk naar voren komt.

Uiteraard werden hier en daar bepaalde structurele elementen gewijzigd, weggehaald of verplaatst om op elke pagina de juiste informatie en visuele consistentie te krijgen. Toch is het enorm deugddoend om de website als voor- en na te bekijken, waarbij de structuur hetzelfde blijft maar de site visueel volledig nieuw aanvoelt. Bekijk gerust de voor- en na-beelden en bezoek de website - wie weet wordt je hart wel gestolen door één van de dieren die vandaag ter adoptie beschikbaar staan!

Blijf op de hoogte via onze nieuwsbrief