Portstream

Portstream is onze communicatie en media partner en we doen veel digitale zaken samen. Ze wilde eens iets spetterends en moderns, dus vroegen ze ons om de website opnieuw te ontwerpen.

Portstream redesign

Er zijn veel verschillende manieren om het herontwerp van een website te benaderen. We kunnen de gebruikersgegevens analyseren om te zien wat er op dit moment goed werkt en daar meer de nadruk op leggen, zodat de gebruiker een nog betere ervaring heeft. Of u kunt de website opnieuw laten ontwikkelen en alles opnieuw doen als u vindt dat uw oude website zijn ‘vibe’ verloren heeft.

Met Portstream hebben we ervoor gekozen om het laatste te doen. We hebben een nieuw design gemaakt: nieuwe teksten geschreven, nieuwe informatiearchitectuur gecreëerd, een nieuw kleurenpalet - kortom alles nieuw.

Informatiearchitectuur

Allereerst was onze insteek om een ‘één pagina’ website te maken, ofwel een one-pager.

Eerst wilden we de informatie ordenen en groeperen om later ‘card sorting’ en onderzoek te kunnen doen. Dit betekende dat we de verplaatsbare modules moesten bouwen, wat resulteerde in een geweldig custom backend CMS.

Custom backend CMS, kleurenkiezer en drag and drop functionaliteiten.

De overdracht van designer naar developer heeft deze keer een aantal zeer interessante resultaten opgeleverd. Het verzoek van onze klant was om zoveel mogelijk flexibiliteit te hebben om de content van het CMS te kunnen reorganiseren. Vandaar dat de eerder genoemde modules en informatie architectuur resulteerde in het ontwikkelen van een drag & drop functionaliteit in de backend. Vindt de gebruiker dat het onderdeel hier niet thuis hoort? Waarom dan niet over de mogelijkheid beschikken om deze te verplaatsen naar een andere plek. Door te slepen en het bestand op te slaan kun je dit eenvoudig doen. Vind je de effen kleuren niet meer passen? Verander het dan naar een verloop. Juist, de gehele gradiënt functionaliteit is ingebouwd.

Animaties

We hebben de Lottie plugin geprobeerd, dat Airbnb design heeft ontwikkeld voor Adobe After Effects. De Portstream website was daarvoor een ideale testomgeving. We hebben enkele afbeeldingen geanimeerd en geëxporteerd naar JSON SVG’s. Dit leverde geweldige resultaten op, hoewel we zeer bescheiden zijn in het gebruik van deze plugin. We hebben het met name alleen voor de logo’s van onze klanten gebruikt om de pagina laadtijd geoptimaliseerd te houden. Zoals u misschien wel heeft opgemerkt, gebruiken we dezelfde technologie voor onze eigen website. De belangrijkste redenering hierachter was dat een SVG-animatie licht is in kilobytes, vector gebaseerd is, en werkt op alle web platformen en ziet het er geweldig uit.