Introduction to Proportion

Proportion heeft een lange geschiedenis als schoonheidsbepaler in kunst en design. De oude Egyptenaren gebruikten een rastersysteem voor hun muurschilderingen om de schaal, de verhouding en de hiërarchie te bepalen. De oude Grieken waren gefascineerd door de verhoudingen van het menselijk lichaam. De Gulden Snede werd gebruikt om “perfecte” verhoudingen te creëren voor de Gutenberg Bijbel. Er is geen tekort aan voorbeelden van zorgvuldig overwogen verhoudingen.

Heden ten dage leeft verhouding voort als een krachtig ontwerpprincipe dat helpt bij het vormen van consistentie, hiërarchie, ritme en algehele schoonheid in ontwerpen. In deze les bespreken we hoe je proportie kunt gebruiken in UI-ontwerp.

Grootte vs Schaal vs Verhouding

Om te kunnen profiteren van verhouding in UI-ontwerp, moeten we eerst de verschillen begrijpen tussen grootte, schaal en verhouding. Alle drie deze termen zijn verwant, maar er zijn enkele duidelijke verschillen om te overwegen.

Grootte is de werkelijke afmetingen van een element, vaak gemeten in px, pt, em, rem etc.

Bijv. de grootte van dit logo is 75px hoog en 275px breed.

Schaal is de relatieve afmeting van een element, vaak gemeten in percentages of veelvouden.

Een element kan bijvoorbeeld worden geschaald zodat het groter of kleiner is dan de oorspronkelijke grootte.

Proportie is de harmonieuze verhouding tussen twee of meer elementen van schaal.

Bijv. als één element groter wordt, moeten de overige elementen ook in dezelfde mate toenemen om proportioneel te blijven.

Proportie in UI Design

Een proportioneel en disproportioneel logo vergelijken is één ding, maar u vraagt zich waarschijnlijk af “Hoe werkt dit voor UI Design?” Immers, met verschillende schermgroottes en apparaten is het niet mogelijk om een evenredige UI te houden, toch? Het antwoord op die vraag is “Ja en Nee.”

UI’s bevatten doorgaans een combinatie van statische en vloeiende elementen.

  • Statische elementen blijven even groot, ongeacht hoe groot of klein het scherm is.
  • Vloeibare elementen schalen tot een bepaald percentage van hun container.

De vergelijking van statische elementen met vloeiende elementen zou per definitie nooit resulteren in een evenredig ontwerp, omdat ze niet met dezelfde snelheid schalen. Gebruikers wisselen echter meestal niet van apparaat terwijl ze uw UI ervaren.

Met dit in gedachten is het mogelijk om proportie te gebruiken in UI-ontwerp. Alleen misschien niet op de manier die je zou verwachten.

Maateenheden in UI Design

Je hebt waarschijnlijk de term “pixel” het vaakst horen gebruiken als maateenheid voor digitale producten. Dit was algemeen aanvaardbaar tot 2010, toen Apple het Retina-display introduceerde.

Het Retina-display veranderde de manier waarop we over ‘grootte’ dachten door twee keer zo veel pixels per vierkante inch van het display in te pakken. Hoewel de grootte van een element op een Retina-display hetzelfde lijkt als op een niet-Retina-display, verschilt het totale aantal pixels waaruit dat element is opgebouwd aanzienlijk. Een knop die bijvoorbeeld 48 px hoog is op een gewoon beeldscherm, zou nu 96 px hoog zijn op een Retina-display vanwege de pixeldichtheid.

Sindsdien zijn er veel verschillende HPD-schermen (High Pixel Density) beschikbaar gekomen voor veel verschillende merken en apparaten. Gelukkig worden HPD-schermen doorgaans gedefinieerd aan de hand van hoeveel meer pixels er per vierkante inch passen dan het standaardbeeldscherm met een pixeldichtheid van 1X.

De meeste schermen kunnen bijvoorbeeld worden omschreven als schermen met een pixeldichtheid van 1X, 2X of 3X.

De term “pixel” is nog steeds algemeen gangbaar om de grootte van een element te beschrijven. Om verwarring te voorkomen, geven veel ontwerpers er echter de voorkeur aan de term “punt” of “pt” te gebruiken, die de grootte beschrijft, ongeacht de pixeldichtheid van het scherm.

Voor de rest van deze les zullen we de termen “pt” en “px” door elkaar gebruiken als meeteenheid om de relaties tussen elementen in ons ontwerp te beschrijven.

Het 8pt Grid System

Wanneer je werkt met ontwerpsoftware, zoals Illustrator, Photoshop, Sketch, XD, Figma enz. is het heel gebruikelijk voor ontwerpers om grids of kolommen te gebruiken om te helpen bij hun ontwerpinspanningen. Veel van de ontwerpprincipes die in deze cursus worden besproken, kunnen worden bereikt met behulp van rasters of kolommen, dus het is geen verrassing dat ze een populair gereedschap zijn in de gereedschapskist van de ontwerper.

Echter, er is één bepaalde strategie, die uitzonderlijk goed werkt voor proportie. Deze strategie staat bekend als het 8pt Grid System.

Het 8pt Grid System werd voor het eerst geïntroduceerd in Google’s Material Design-specificatie. Gelukkig is het vrij eenvoudig te begrijpen. Het komt erop neer dat u een raster wilt gebruiken dat is opgebouwd uit vierkantjes van 8 x 8 pt. Als je boven op dit raster ontwerpt, wil je ervoor zorgen dat alle elementen aan het raster vastklikken.

Dit resulteert in elementen met afmetingen die altijd deelbaar zijn door 8. Door op deze manier te ontwerpen, is het gemakkelijk om elementen proportioneel te houden, terwijl er een gevoel van verticaal ritme in het ontwerp ontstaat.

Waarom 8 punten?

Het 8-puntensysteem wordt het meest gebruikt om twee belangrijke redenen:

  • De meest voorkomende schermafmetingen zijn deelbaar door 8, waardoor uw ontwerpen zeer helder en duidelijk zijn op de meeste apparaten (geen gesplitste pixels).
  • De aanbevolen basisgrootte van het lettertype op het web is 16px. Hierdoor kunnen ontwikkelaars elementen op een webpagina schalen in REM-eenheden terwijl ze trouw blijven aan het rastersysteem.

Over het geheel genomen zijn er meer voordelen voor het gebruik van 8 punten in tegenstelling tot een ander getal voor het raster. U kunt echter een getal zoals 10pt of 12pt gebruiken als dat beter bij u past.

Waarom geen 4 punten?

De Google Material Design-spec beveelt het gebruik van 4pt aan voor “Kleinere componenten, zoals iconografie en typografie.” Het merendeel van de UI-elementen kan echter nog steeds worden afgehandeld door het 8pt-systeem, dus het is populairder om mee te beginnen.

De Gulden Snede

Het 8pt-rastersysteem heeft zijn duidelijke voordelen in UI-design, maar als je een snelle Google-zoekopdracht uitvoert voor “Proportion in UI Design”, krijg je een voorpagina vol met resultaten over de Gulden Snede.

De Gulden Snede is 1:1,618 en wordt beschouwd als het snijpunt tussen wiskunde en esthetische schoonheid. Veel ontwerpers negeren rastersystemen volledig ten gunste van het creëren van verhoudingen met de Gulden Snede.

Er zijn genoeg voorbeelden van hoe de Gulden Snede is gebruikt voor alles van de Gutenberg Bijbel tot modern logo ontwerp tot voorvallen in de natuur. Er zijn echter anderen die geloven dat de schoonheid van de Gulden Snede gewoon een mythe is.

Hoe dan ook, het valt niet te ontkennen dat velen gecharmeerd zijn van de Gulden Snede, dus het is zeker de moeite waard om het in deze les te vermelden.

De Gulden Snede gebruiken in UI-ontwerp

In les 4 van deze cursus hebben we besproken dat een ontwerp niet meer dan 3 tot 4 niveaus van hiërarchie zou moeten hebben in een bepaald deel van de UI. Met dit in gedachten kunt u de Gulden Snede toepassen in uw ontwerp door de volgende eenvoudige stappen te volgen:

Definieer de hoogte van een rechthoek en vermenigvuldig dat getal met 1.618 om de breedte te vinden. Zo ontstaat een “Gouden Rechthoek”.

In bovenstaand voorbeeld beginnen we met 350pt, maar u kunt elk getal gebruiken dat u maar wilt.

Verdeel uw Gouden Rechthoek op in perfecte vierkanten. Elk perfect vierkant levert een nieuwe, kleinere Gouden Rechthoek op.

Verdeel de Gouden Rechthoek verder tot u 3-4 verschillende perfecte vierkanten van verschillende grootte hebt.

Gebruik de grootte van elk vierkant als een “plaatshouder” om uw lay-out te helpen opbreken en hiërarchie in uw ontwerp aan te brengen.

Over het geheel genomen is het resultaat een esthetisch en evenredig ontwerp. Kijk eens naar dit voorbeeld van Prototypr.io.

Start met restricties

Nu we enkele methoden hebben behandeld om proportie in UI-ontwerp vast te stellen, laten we het eens hebben over een aantal geweldige startpunten. Door eerst met beperkingen te beginnen, is het gemakkelijker om uw UI rond die beperkingen op te bouwen.

Mobile First Design

De uitdrukking “Mobile First” is bedacht door Luke Wroblewski in zijn boek met dezelfde titel. De term werd populair bij ontwerpers als een manier om de drang te bestrijden om meer dingen in een UI te proppen, alleen maar omdat er genoeg ruimte was om dat te doen.

Door zich eerst op mobiel ontwerp te richten, moeten ontwerpers om de beperkingen van mobiele apparaten heen werken en zich richten op wat echt belangrijk is. Als gevolg daarvan blijft de ervaring van de gebruiker consistent tussen apparaten, omdat het belangrijkste doel van de UI het middelpunt van de aandacht blijft.

Font Size

Zoals eerder vermeld, is de standaard lettergrootte voor bodytekst op het web 16px voor de meeste grote browsers. Alles kleiner dan dit kan onverwacht zoom gedrag veroorzaken op Apple mobiele apparaten. Daarom wordt over het algemeen aanbevolen om 16px als basislettergrootte te nemen en de overige lettergroottes (koppen, kleine tekst, bijschriften, labels, enzovoort) dienovereenkomstig te specificeren.

We kunnen deze lettergroottes definiëren met proportionaliteit in gedachten door de ontwerpspecificatie van Google Material te volgen en te kiezen voor groottes met stappen van 4pt, zoals de stijlgids van Bootstrap voor lettergrootte.

Note: het ophogen van uw lettergrootte met de Gulden Snede wordt niet aanbevolen, omdat de verschillen tussen elke lettergrootte veel te groot zouden zijn. Bijvoorbeeld, beginnen met een basis lettergrootte van 16 en vermenigvuldigen met 1.618 zou resulteren in een H1 kop van 177.4 pts, wat zeer moeilijk leesbaar zou zijn.

Knopgrootte

Een andere beperkende factor om te overwegen is de precisie van de invoermethode die wordt gebruikt op uw ontwerp. In dit specifieke geval hebben we het over vingers, duimen, cursors en stylus pennen.

Vingers en duimen zijn veel breder en minder precies dan cursors of stylus pennen. Daarom is het belangrijk dat de afmetingen van knoppen, invoer, pictogrammen of andere aanraakpunten zorgvuldig worden gekozen om rekening te houden met deze beperkingen.

Google’sMaterial Design beveelt aan dat aanraakpunten op mobiele apparaten minimaal 48pt hoog en 48pt breed zijn, met minimaal 8pt ertussen.

Contentbreedte

Content is vloeibaar, wat betekent dat het zoveel horizontale en verticale ruimte opvult als maar mogelijk is. Ondanks deze eigenschap is het een goed gebruik om een minimale en maximale breedte voor uw inhoud te definiëren.

Een minimale inhoudsbreedte kan worden bepaald door de minimale schermbreedte die uw ontwerp zal ondersteunen. De kleinste schermresolutie die de meeste ontwerpers ondersteunen is 320px (dat is bij 1X) breed. Echter, je moet je minimale breedte kiezen op basis van echte gebruikersgegevens als je in staat bent om die te verkrijgen. Google Analytics is een goede plaats om naar dit soort gegevens te zoeken.

Terwijl de breedte van de inhoud zoveel scherm kan vullen als het gegeven is, is het over het algemeen niet aan te raden om uw inhoud meer dan 52 tekens per regel te laten omvatten. Dit zou suggereren dat de maximale breedte van uw inhoud kan worden bepaald door het gebruik van de werkelijke bodytekst op zijn normale lettergrootte en het vinden van een comfortabele inhoud breedte die binnen dit bereik past.

Conclusie

Tot besluit: proportie is een nuttig ontwerpprincipe. Ondanks een combinatie van statische en vloeiende elementen, kan een proportionele UI nog steeds worden bereikt door gebruik te maken van een 8pt Grid System, de Gulden Snede, of een andere methode. Als je begint met het definiëren van de afmetingen van elementen, is het gebruikelijk om te beginnen met je beperkingen, zoals apparaat, lettergrootte, knopgrootte, en contentbreedte. Nadat de basisafmetingen zijn gedefinieerd, is het veel eenvoudiger om elementen dienovereenkomstig te schalen.

Volgende les
Grondbeginselen van ontwerp: Witruimte

Vorige les
Grondbeginselen van vormgeving: Emphasis

Feedback

Hoe kan deze les verbeterd worden? Laat hieronder uw feedback achter!