Een goede website valt of staat bij de samenwerking tussen alle disciplines die daarbij komen kijken. Alle verschillende expertises moeten zo goed mogelijk op elkaar aangesloten zijn om het beste eindproduct te realiseren. Door op een gestandaardiseerde manier te werken bereik je die aansluiting. Ook voor het design van je website zijn er een aantal standaarden die je in acht moet nemen om je werk zo overdraagbaar mogelijk te maken.

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/

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 een developer, kan een site veel te klein worden opgeleverd.

Kleuren

De kleuren die je gebruikt in je ontwerp moeten altijd RGB zijn, nooit CYMK. Dit omdat een scherm in principe maar 3 kleuren heeft, namelijk rood, groen en blauw. CMYK kleuren komen niet goed uit.

Kolommen

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.

Breedte en Responsive ontwerpen

De meeste sites werden een paar jaar terug ontworpen op 960px breed, omdat dit de meest gangbare grootte was voor de schermen van toen. Tegenwoordig hebben de meeste gebruikers grotere schermen, of schermen met een hogere resolutie en worden ontwerpen meestal gebaseerd op 1200px breed.

Als je een design maakt kun je er voor kiezen om “mobile first” te ontwerpen. Dit betekent dat je mobiel als basis neemt en vanuit daar de rest van het ontwerp uitwerkt naar tablet en desktop. Je kunt kiezen om te beginnen op de minst brede scherm waarop je kunt ontwerpen, dit is 320px breed. (iPhone 5 etc). Hou er rekening mee dat op een wat grotere telefoon de afmetingen van je elementen wat zullen uitrekken.

Hieronder een handig overzicht van formaten die je kunt aanhouden:

• App design afmetingen: 320 x 568px (iPhone 5)
• 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

Een website met veel plaatjes en grafische elementen zijn vaak de mooiste en de leukste. Wanneer je deze plaatjes exporteert als png, jpg of ander ‘standaard’ afbeeldingsformaat ziet dit er op het ene scherm heel scherp uit. Maar precies dezelfde afbeelding kan juist heel onscherp worden op schermen met een hogere resolutie. Dit komt omdat PNG en JPG afbeeldingen niet ‘vector’ zijn. 

Tegenwoordig kun je dit soort elementen ook exporteren als SVG afbeeldingen. Het voordeel is dat deze bestanden vector zijn, je kunt ze dus tot oneindig vergroten zonder dat ze onscherp worden. Een developer kan deze SVG afbeeldingen ook nog animeren en verder stylen met code.

Programma’s om mee te ontwerpen

Webdesigns kunnen in meerdere programma’s gemaakt worden elk programma heeft zijn voordeel en elk heeft zo weer zijn nadeel. Hieronder een kort en bondig overzicht van de voor- en nadelen van programma’s die we in de praktijk tegenkomen.

• Adobe Photoshop
  Pro: Veel designers kennen en gebruiken het, hebben het in hun bezit/op hun computer. Veel tutorials over te vinden. Zeer geschikt om websites mee te ontwerpen.
  Cons: Het heeft veel opties, die niet allemaal geschikt zijn voor het web.
  
• Adobe InDesign
  Pro: Voor magazines en print is dit een geweldig pakket.
  Cons: Afmetingen kunnen snel afwijken, moeilijk losse elementen te exporteren. Is niet gemaakt om web/app designs mee te maken.
  
• Adobe Illustrator
  Pro: Volledig op vector gebaseerd. SVG afbeeldingen kunnen makkelijker geëxporteerd worden
  Cons: Kan snel onoverzichtelijk worden binnen de verschillende lagen. Afmetingen kunnen snel afwijken. Is niet bedoeld om web/app designs te maken, meer bedoeld voor grafisch vormgevers.
  
• Adobe XD
  Pro: Volledig gebaseerd op web/app designs, plus je kunt binnen de applicatie al een ‘demo’ model maken. SVG afbeeldingen kunnen makkelijk en snel ge-exporteert worden.
  Cons: Nog niet veel designers werken met dit pakket.
  
• Sketch
  Pro: Volledig gebaseerd op het maken van web/app designs. Goedkoop in aanschaf. Wordt regelmatig voorzien van updates. SVG afbeeldingen kunnen makkelijk en snel geëxporteerd worden.
  Cons: Alleen beschikbaar voor macOS. Bij gebruik van veel afbeeldingen worden bestanden al snel groot.
  
• Figma
  Pro: Je kunt samen met meerdere gebruikers designs maken. Is vooral webbased. SVG afbeeldingen kunnen makkelijk en snel geëxporteerd worden.
  Cons: Werkt in de browser, je moet een internetverbinding hebben.