Vernieuwing van het ontwerpsysteem voor FD

Vernieuwing van het ontwerpsysteem voor FD

Written by
Philip Wallage, the Sr. UI/UX Designer that'll do all the work!
Philip Wallage
Sr. UI/UX Designer
Client
FD
Tools
Figma
Interested in working together?
Book a call

Zeven jaar geleden kreeg ik de ongelooflijke kans om een van de eerste digitale ontwerpsystemen te maken voor 'Financieele Dagblad' (FD), een toonaangevende financiële krant in Nederland. In die tijd navigeerden we door de begindagen van digitaal ontwerp met Sketch.

Naarmate ontwerptrends en -tools evolueerden, vond ik dat het tijd was om dit project opnieuw te bekijken en te verfijnen met de expertise en capaciteiten die ik sindsdien heb ontwikkeld.

De beroemde zalmroze krant.

De iconische zalmroze krant van de krant FD vormde een unieke uitdaging bij de overgang naar digitaal: het behoud van voldoende contrast voor toegankelijkheid.

Bij het analyseren van de huidige FD-website kwamen verschillende contrastproblemen aan het licht, waardoor delen van de site moeilijk te zien waren voor mensen met een visuele beperking.

Het zijbalkmenu met een donkerdere achtergrond botste bijvoorbeeld met de blauwe kleur van het merk en de groene tekst die werd gebruikt om positieve aandelenaantallen aan te geven, miste voldoende contrast.

Om deze problemen aan te pakken, ben ik begonnen met Zonder titel II, een ongelooflijk veelzijdig ontwerpsysteem dat ik vaak gebruik als basis voor mijn projecten.

Voor geïnteresseerden heb ik een link toegevoegd om te downloaden een gratis versie van UntitleDUI en ontdek het zelf.

Kleurenpalet

De eerste grote taak was het corrigeren van het kleurenpalet, vooral het uitdagende zalmroze. Ik heb screenshots van de huidige website verzameld om een basislijn vast te stellen. Interessant genoeg gebruikte de website twee verschillende achtergrondkleuren: donkerder op de startpagina en lichter op de artikelpagina's.

Met behulp van tints.dev, Ik heb geëxperimenteerd met verschillende tinten en tinten om de juiste balans te bereiken.

De blauwe kleur van het merk was eenvoudiger, maar ik heb een iets donkerdere tint gebruikt voor succes-, waarschuwings- en foutkleuren om de zichtbaarheid te verbeteren.

Het was een hele zoektocht om dat klassieke Serif-lettertype te vinden, maar het was beknopter, wat betekent dat er meer ruimte was voor tekst op mobiel.

Typografie

Vervolgens heb ik me beziggehouden met typografie. FD gebruikt traditioneel Arnhem, een sterk maar breed serif-lettertype. Ik heb ervoor gekozen om een serif te behouden voor weergavedoeleinden, maar koos voor 'PP Editorial New' voor een meer beknopte look. Hoewel het geen halfvet of middelzwaar gewicht heeft, past het goed bij het ontwerp.

FD gebruikt Proxima Nova voor gewone tekst, maar ik heb ervoor gekozen om Inter uit mijn ontwerpsysteem te gebruiken voor een strakkere, modernere uitstraling.

Ik heb de effectstijlen, tussenruimte, radius en rasters nauwkeurig bekeken en aangepast. Dit was geen alles-in-één proces; je moest de variabelen doorzoeken om de juiste tinten en tinten voor verschillende elementen in te stellen.

Het vernieuwde ontwerpsysteem respecteert de iconische uitstraling van FD en verbetert de toegankelijkheid en gebruikerservaring aanzienlijk. De nauwgezette aanpassingen en verfijning resulteerden in een visueel aantrekkelijker en gebruiksvriendelijker digitaal platform.

Het vernieuwen van het FD-ontwerpsysteem was een uitdagend maar lonend project dat mijn ontwerpvaardigheden naar nieuwe hoogten heeft getild. Het vernieuwde ontwerp zorgt ervoor dat iedereen toegang heeft tot de inhoud van FD en ervan kan genieten, ongeacht de visuele mogelijkheden.

Dit project is een voorbeeld van mijn toewijding om UX-ontwerpen van wereldklasse te creëren die digitale platforms naar een hoger niveau tillen.