UX design

Ik ben begonnen bij SEO-bedrijf Yoast als illustrator, maar al snel zag ik kansen om de UX van de producten te verbeteren. Er was geen dedicated designer die zich daarmee bezig hield, zodoende bouwde ik over de jaren een UX afdeling op met meerdere medewerkers.

Samen beheerden we een design library in Sketch met alle componenten die we gebruikten, zodat we de stijl vast konden leggen en sneller schermen konden bouwen. Elk scherm van elke plugin hebben we wel aangeraakt - en ook het onderliggende systeem WordPress hebben we aan gesleuteld zoals je elders kunt lezen.

• Lees meer details over het ontwerpproces (komt binnenkort)

Eloquence is een indiegame over het leren van een vreemde taal, dus de UI is erg belangrijk om gesprekken te kunnen voeren, bij te houden welke woorden je hebt geleerd, en om nieuwe zinnen te vormen. Bovendien speel je als een tijdreiziger uit de verre toekomst die terugkeert naar een tribale setting, dus de UI moest ook futuristisch aanvoelen, maar nog steeds bruikbaar zijn.

Ik werd gevraagd om concepten voor deze UI aan te leveren. Ik gebruikte een combinatie van UI-designprincipes om de functionaliteit vertrouwd te laten aanvoelen, en voegde decoratieve elementen, kleuren en vervaging toe om het die sci-fi uitstraling te geven. De iconen zijn gebaseerd op universele taalconcepten om de speler te helpen de stammen van deze onbekende taal te begrijpen.

Ik ondersteunde Loyalis bij hun business development met snelle strategische wireframes en prototypes.

Zij geven de voorkeur aan oplossingen die heel gericht inspelen op het gebruikersverhaal zodat ze problemen snel kunnen oplossen, en alles daarbuiten is een kosten-batenanalyse. Dus moet ik het gebruiksscenario goed begrijpen, en daarom ben ik vaak al aanwezig bij brainstormsessies, waarin ik live in Figma mee ontwerp zodat iedereen de impact van de beslissingen kan zien en in de design thinking mindset komt.

Nadat de eisen duidelijk zijn, maak ik interactieve prototypes van de bedoelde flow op basis van deze wireframes, zodat iedereen het idee in zijn eigen tijd kan beoordelen en de oplossing kan verfijnen voordat er iets gebouwd wordt.

Dankzij deze werkwijze hebben we een complete applicatieflow, een beheerdashboard en een intern backend-systeem voor een nieuwe dienst die ze willen aanbieden uitgewerkt en binnen enkele maanden gebouwd.

Op een ochtend vroeg een oud collega me zijn website te updaten. We schetsen wireframes tijdens de lunch, in de namiddag maakte ik de mockups in Figma, en de volgende dag had hij een eerste versie live staan.

Deze one-pager belicht alle relevante info en werkervaring van Anton in een fris modern design. Anton wilde graag opvallen tussen de andere developers met zijn creatieve aanpak van software ontwikkeling, dus een bijpassende site die dat uitstraalde was nodig.

De Figma file is helemaal opgebouwd met Auto Layout zodat de content meebeweegt bij verschillende schermbreedtes. Ik bouwde ook een tablet layout die tevens dienst doet als de PDF export die Anton bij sollicitaties mee kan sturen.

Voor Bounden ontwierp ik een grote verscheidenheid aan thema’s voor elk van de spelwerelden, waarbij ik alle UI-elementen aanpaste aan dat thema en het kleurenschema. De spelwereld is altijd een bol, dus het was interessant om te zien wat voor verschillende contexten ik kon bedenken om een bepaald gevoel op te roepen bij de speler.

Dit project sprak echt de minimalist in mij aan; ik hou van eenvoudige kleurrijke vormen en kalme, aangename composities met sterke kleurcontrasten. Veel van deze ontwerpen zijn in het uiteindelijke spel terechtgekomen, vertaald naar 3D-assets.

Lethal League is een snelle, urban-geïnspireerde sci-fi sport-/vechtgame. Ik werd gevraagd om mockups te maken voor de UI, die deze rauwe en energieke sfeer moest weerspiegelen.

Ik liet me inspireren door street art en hiphopcultuur om stijlen te proberen die goed aanvoelden in deze gamewereld.

De website die je nu bekijkt is van de grond af door mij gebouwd met HTML, CSS, en een klein beetje PHP. Over de jaren zijn er meerdere versies geweest waarin ik steeds weer nieuw geleerde moderne technieken ging toepassen.

De site is volledig responsive met een aantal breakpoints die de content herstructureren voor tablet en mobiel. Ik gebruik PHP includes om veelvoorkomende onderdelen zoals de navigatie modulair in te laden vanuit een centraal bestand, en heb een CDN gebruikt om afbeeldingen in het best passende formaat en resolutie aan te bieden. Ook cache ik weinig veranderende elementen om het laden te versnellen. Zodoende heeft de site een score van 98% in Google Pagespeed Insights, wat kijkt naar snelheid, accessibility, SEO, en meer.

Bovendien heeft de site een dark mode die reageert op de instelling van het systeem van de gebruiker, en is de content in twee talen beschikbaar.