Een goede website ontstaat door een fijne samenwerking tussen alle disciplines, vooral design en code. Het is belangrijk dat designers en developers goed op elkaar aansluiten om samen tot het beste resultaat te komen. Werken volgens bepaalde standaarden helpt hierbij, omdat het zorgt voor een soepele overgang van ontwerp naar uitvoering. Ook als designer kun je door standaard werkwijzen te volgen je werk makkelijker overdraagbaar maken, zodat iedereen in het team er zonder moeite mee aan de slag kan.

Het kleurgebruik

In ontwerpen voor het web gebruik je altijd RGB, voor drukwerk gebruik je CMYK. Dat is behoorlijk makkelijk te onthouden. Maar waarom? RGB en CMYK zijn afkortingen voor de kleuren die gebruikt worden voor de techniek die hier achter zit. RGB wordt vooral gebruikt voor schermen, deze bevatten meestal 3 kleuren die samen bijna elke kleur die wij kunnen zien, kunnen tonen. CMYK wordt gebruikt bij drukwerk en doordat deze een andere samenstelling hebben, kunnen deze kleuren meestal niet goed weergegeven worden op schermen.

Pixels en Dots Per Inch

Designs kun je het beste aanleveren op basis van 72 dots per inch (DPI). Hoewel pixels altijd leidend zijn in het ontwerp en het aantal DPI niet uitmaakt, zorgt het er wel voor dat bestanden niet onnodig groot worden. Lees ook dit interessante artikel over DPI: https://daraskolnick.com/image-dpi-web/ (tldr; Het maakt weinig uit, maar gebruik vooral 72dpi om de bestandsgrootte zo klein mogelijk te houden).

Het voorkomt ook misverstanden. Bijvoorbeeld wanneer de ontwerper het hele ontwerp twee keer zo klein maakt in pixels maar wel in hogere DPI oplevert. Door miscommunicatie kan zoiets over het hoofd gezien worden en, aangezien de pixels altijd leidend zijn voor de web developers, kan een site veel te klein worden opgeleverd.

Grid

De meeste sites worden gemaakt op basis van kolommen. Het meest gangbare is 12 kolommen waarbij je een ‘gutter’ instelt, oftewel de afstand tussen kolommen. Deze afstanden zijn met aparte CSS classes goed te definiëren en dat is weer makkelijk voor een developer. Door binnen dit grid te blijven krijg je duidelijke, eenduidige nette websites.

Breedte en Responsive ontwerpen

Enkele jaren geleden werden de meeste websites ontworpen met een breedte van 960px, omdat dit destijds de standaard schermgrootte was. Tegenwoordig beschikken de meeste gebruikers over grotere schermen of schermen met een hogere resolutie. Daarom worden moderne ontwerpen vaak gebaseerd op een breedte van 1200px om beter aan te sluiten bij de huidige beeldschermformaten.

Bij het ontwerpen kun je ervoor kiezen om een “mobile first” aanpak te hanteren. Dit betekent dat je begint met het ontwerpen van de mobiele versie van de website en vervolgens het ontwerp uitbreidt naar tablet- en desktopformaten. Meestal start je met het smalste schermformaat, zoals 320px breed (bijvoorbeeld een iPhone SE). Houd er rekening mee dat op grotere telefoons de afmetingen van je elementen kunnen uitrekken, waardoor het ontwerp mogelijk aangepast moet worden voor een optimale gebruikerservaring.

De volgende formaten zijn handig om bij de hand te houden bij het designen van een website.

• App design afmetingen: 320 x 568px (iPhone SE)
• Tablet design: 768 x 1024 (Portrait) – 1024 x 768 (Landscape)
• Desktop: 1200px

“Above the fold” ontwerpen of “boven de vouw” ontwerpen

Above the Fold is het eerste wat de gebruiker ziet als de site laadt. Het is alles wat zichtbaar is als de gebruiker een site opent maar nog niet naar beneden scrollt. Soms wil een opdrachtgever of designer per se dat de gebruiker bepaalde elementen ziet ‘above the fold’. Helaas is dat niet altijd mogelijk.

Op mobiel en tablet zijn de meeste schermen aardig op elkaar afgestemd qua afmetingen. De breedte en de hoogte zijn op veel devices (ongeveer) gelijk. Dat wat de gebruiker ziet bij het openen van de site op mobiele devices is voor iedereen ongeveer hetzelfde. Dat betekent dat je dus redelijk zeker weet welke elementen wel en niet zichtbaar zijn bij het openen van een site op mobiel of tablet.

Op desktop is dat echter een ander verhaal. Daar verschillen de formaten van het scherm nogal van gebruiker tot gebruiker. Dat komt omdat de gebruiker op een desktop veel meer mogelijkheden heeft om zijn eigen browser te customizen door extra werkbalken toe te voegen. Denk aan favorieten of werkbalken van allerlei add-ons. En voor desktop bestaan er natuurlijk heel veel verschillende soorten schermen van verschillende formaten (van 11 inch tot 5K schermen van 31 inch).

Wat de ene gebruiker in beeld heeft, kan bij een andere gebruiker net wegvallen omdat de formaten van de schermen teveel van elkaar verschillen. Kort gezegd: op mobiel is het lastig om specifiek ‘above the fold’ te ontwerpen, voor desktop is dat vrijwel onmogelijk.

Afstanden tussen elementen

In ieder webdesign zitten blokken, knoppen, afbeeldingen of elementen waar een bepaalde afstand tussen zit. Gebruik altijd bij elke afstand en tussen ieder element ronde getallen met tussenstapjes van 5 px (dus 10px, 15px, 20px, 25px, 30px etc). 

Gebruik geen afstanden van bijvoorbeeld 28px en 133px breed. Dit brengt inconsistentie met zich mee, plus het is voor de developer moeilijker en meer werk om alles ‘pixel perfect’ te krijgen.

Illustraties

Tegenwoordig worden op websites veel illustraties gebruikt om dingen aan te duiden. Denk aan een klok bij een tijd, een hamburger icoon voor een menu en natuurlijk je logo. Voorheen gebruikte je hier JPG voor als je een klein bestandsformaat wou, of PNG als deze transparant moest zijn.

Nu kan dat niet meer echt, dit omdat er hoge resolutie schermen zijn in overvloede, denk bijvoorbeeld aan het Retina Display van Apple, die deze in alle iPhones heeft zitten. Deze schermen doen zich voor als normale schermen, maar de pixels zijn zovaak verdubbeld, dat afbeeldingen op oude formaten er pixelig uit gaan zien.

Hiervoor is het SVG formaat in het leven geroepen, dit formaat werkt goed voor iconen en logo’s. SVG zorgt er namelijk voor dat je illustratie op vector formaat is, dit betekend dat deze tot het oneindige vergroot kan worden zonder dat deze kwaliteit verliest. Wat natuurlijk fijn is, als jouw logo er op elk scherm fantastisch uit ziet.

Programma’s om mee te ontwerpen

Webdesigns kunnen in meerdere programma’s gemaakt, iedere designer heeft zijn voorkeur en zo nu en dan verschuift de webdesign wereld weer naar een nieuwe ‘tool’. Elke tool heeft zijn eigen voordelen, maar ook nadelen. We hebben er een aantal verzameld.

Figma

Figma is op dit moment een van de meest gebruikte tools voor webdesigns. De afgelopen jaren heeft Figma diverse nieuwe functies toegevoegd die het makkelijker maakt voor designers om hier in te werken. Daarnaast is het ook makkelijker om het design over te dragen naar developers door gebruik te maken van ‘Dev mode’.

Pro:
– Werkt op verschillende besturingssystemen, zelfs in je browser!
– Samenwerken is gemakkelijk, je kan zelfs spieken wat anderen doen.
– Overdragen naar developers is gemakkelijk!
– Wordt veel ge-update met nieuwe functies.

Cons
– Omdat het in de browser ook werkt, is Figma online based, je werkt dus nooit lokaal wat voor sommigen een nadeel kan zijn.

Sketch

Sketch komt van Nederlandse bodem en wordt constant geupdate met nieuwe tools. Is compleet gefocust op apps en webdesign en heeft handige tools voor iedereen.

Pro:
– Wordt vaak ge-update met de nieuwste functies die aansluiten aan de huidige wensen
– Gemakkelijke en duidelijke interface

Cons:
– Werkt alleen op macOS
– Delen van bestanden is wat lastig.

Adobe Photoshop

De oldtimers in het designwereldje kennen websites ontwerpen in Photoshop nog wel. Je maakt hem, je sliced hem en je exporteert hem. Je krijgt een pakketje van Photoshop die HTML bevat en die je website toont, maar je hebt er nog weinig aan. Photoshop is te gebruiken, maar we zullen het niet aanraden.

Pro:
– Je kunt veel tutorials volgen om het onder de knie te krijgen.
– Heel bekend, maar ook berucht.

Cons:
– Het is meer geschikt voor fotobewerking, het heeft functies voor web maar is niet zijn primair functie.

Adobe XD

We noemen hem toch nog maar even, Adobe XD. Het was Adobe’s reactie op Figma en werd snel ontwikkeld om makkelijk, snel en goed websites in te ontwerpen. Maar werd begin dit jaar (2024) door Adobe stopgezet, omdat ze druk waren om Figma over te nemen. Helaas (of misschien ook niet) is de overname van Figma mislukt en heeft Adobe besloten om Adobe XD niet meer tot leven te roepen.