bydr.studio
Het ontwerpen en bouwen van mijn eigen portfolio voor bydr.studio, met veel aandacht voor toegankelijkheid, wisselende kleurthema's en 3D-interacties.
De vraag
Mijn oude portfolio was visueel en technisch verouderd, en voldeed niet aan de WCAG-richtlijnen voor toegankelijkheid. Ik wilde een nieuw platform dat kan meegroeien, voor iedereen werkt en meteen laat zien wat ik kan als designer én developer.
Mijn rol
Omdat dit mijn eigen studio is, doe ik alles zelf: van de sitemap en het UX/UI-design in Figma tot de frontend development met animaties.
Ontwerp & ontwikkeling
Ik begon bij de basis: toegankelijkheid. Met Coolors en Randoma11y stelde ik twaalf kleurthema’s samen. Met de Color Contrast Analyser controleerde ik dat ze allemaal aan WCAG AA voldoen, en een deel zelfs aan AAA. Bij elke paginalading of met een themaknop wissel je van thema.
In Figma bouwde ik daarna een uitgebreide styleguide, met typografie, iconen, geluiden en de verschillende states van elementen. Alles staat in custom properties, zodat het ontwerp één op één naar CSS gaat.
Het resultaat
Het platform is nog volop in ontwikkeling en te volgen op GitHub. Op dit moment voeg ik animaties toe met GSAP, zoals een eigen cursor met stagger-effecten. Daarnaast volg ik de cursus van Bruno Simon om interactieve 3D-elementen met WebGL en Three.js te bouwen.
Wat ik leerde
Ontwerpen voor jezelf is vaak het moeilijkst. Daarom pak ik dit project vanaf dag één aan als een echte opdracht, met uitgewerkte prototypes in Figma, WCAG-checks en nieuwe technieken zoals GSAP en Three.js. Zo dwing ik mezelf buiten mijn comfortzone te stappen.