Terug naar Home

Design for Flexibility

Nils Binder

Nils Binder is lead (Front-end) designer bij 9elements. Nils die stelt ons de vraag, which of the 2 websites are you currently making? Waarbij hij een foto laat zien van 2 verschillende layouts. Deze layouts worden het vaakst aangehouden en domineren de styling van het internet.

Nils die vind dat wij te snel uitgaan van dat een design goed is omdat het past op een paar schermen, maar vertelt dat wij er veel te makkelijk naar kijken. Tegenwoordig hebben we 21:9 widescreens en worden dit soort schermen vaak over het hoofd gezien.

Whitespace is belangrijk bij design en ook dus bij websites. Een goede whitespace gebruik zorgt er voor dat de layout van het ontwerp wat rustiger oogt en voor hierarchy zorgt. Momenteel zijn bijna alle websites niet geoptimaliseerd voor schermen buiten de standaard (16:9, 4:3 etc.)

Op de opleiding krijgen we mee dat we voor font units geen PX maar REM moeten gebruiken, maar waarom zeggen ze dit? Dit komt doordat REM aan de body font-size relatief staat, en wanneer de gebruiker dus zou inzoomen, dat ook daadwerkelijk de font-size groter wordt, anders heeft het inzoomen namelijk niet zo veel nut.

Nils vertelt ons over de manier waarop veel wrappers worden gestyled. We gebruiken max-width, padding, margin, maar Nils die maakt een punt dat dit de verouderde manier zou zijn omdat CSS nieuwe mogelijkheden heeft. De nieuwe styling die Nils voorstelt zou gebruik maken van clamp(), min(), max() en margin-inline. Door gebruik te maken van deze nieuwe features is webdesign al een stuk meer responsive voor meer schermen.

Nils die vertelt dat wij designers & developers ons limiteren door het gebruik van tools zoals Figma. Hij vertelt dat hij komt vanuit een tijd waar het ontwerp nog werd ontworpen in Photoshop en dat de evolutie van deze tools voor de standaard taken prima zijn, maar vaak achter lopen op features van het web. Figma die geeft ons momenteel alleen de optie om PX, REM of % te gebruiken. CSS die bevaat veel meer units die gebruikt kunnen worden, denk maar eens aan (D)VH, (D)VW, CH, EM, Vmax en Vmin. CSS introduceert ons ook container query units: QH, QW, QB, Qmin, Qmax etc.

Ik vind dat Nils een goede punt maakt en dat de tools en werkelijke mogelijkheden, niet meer in synchronisatie met elkaar zijn en ons daadwerkelijk limiteert. Ik merkte deze limitatie al snel bij variabele font's met font-feature-settings en kwam er dus achter dat tools zoals figma deze niet ondersteunen waardoor wij bij het ontwerp proces niet zo snel denken aan dit soort dingen.