Tips & tricks voor een goed webontwerp
Het is belangrijk om een universele website te hebben zodat iedereen er makkelijk mee kan werken. Om dit voor elkaar te krijgen moet je bij het ontwerpen van je website met een aantal punten rekening houden. Hieronder bespreken wij een aantal tips die je zullen helpen om je website ontwerp zo goed mogelijk op te bouwen.
Een goede website moet als een puzzel in elkaar passen: alle onderdelen moeten goed samenwerken en goed aangesloten zijn om zo de beste website te realiseren. Door een aantal standaard design stappen te volgen (en aan te houden) bereik je je gewenste aansluiting en wordt je werk zo overdraagbaar mogelijk. Een aantal stappen die je aan kunt houden voor een goed webontwerp zijn:
Pixels en Dots per Inch
Natuurlijk zijn pixels altijd leidend in een ontwerp en maakt het aantal DPI niet uit, het zorgt er wel voor dat je bestanden niet te groot worden. Daarom is 72 Dots Per Inch (DPI) het beste om je designs aan te leveren.
Door miscommunicatie kan er ook wat misgaan en door 72 DPI te gebruiken voorkom je misverstanden met bijvoorbeeld je ontwerper die je ontwerp te klein maakt in pixels maar wel in een hogere DPI levert waardoor je website te klein wordt opgeleverd.
Kleuren
Een scherm bevat in feite maar drie kleuren: rood, groen en blauw. Gebruik daarom in je websiteontwerp nooit CYMK kleuren maar altijd RGB.
Kolommen
Voor een developer is het makkelijker om de gangbare 12 kolommen op een website te gebruiken, dit omdat er bij 12 kolommen een ‘gutter’ wordt ingesteld, oftewel een bepaalde afstand tussen kolommen en deze zijn goed te definiëren met aparte CSS-classes.
Responsive en breedte ontwerpen
Een tijdje geleden waren de meeste websiteontwerpen ontworpen op 960px breed, dit kwam omdat de meeste beeldschermen toen deze resolutie hadden. De huidige beeldschermen zijn een stuk groter of hebben een hogere resolutie en daarom worden de meeste websites nu ontworpen op 1200px breed.
Je kan voor ‘mobile first’ kiezen waarmee je je eerst focust op een ontwerp voor mobiel gebruik en daarna pas je focus verplaatsen naar tablets, laptops en computers. Het minst brede scherm waarvoor je kunt ontwerpen is de 320px breedte, dit is geschikt voor oudere smartphones en houd er dus rekening mee dat je ontwerp op een nieuwere en grotere telefoon wat zal uitrekken.
Een handig overzicht wat je kan aanhouden is:
- Desktop: 1200px
- Tablet: 768px en 1024px (portrait) – 1024x768px (landscape)
- Mobiel: 320px en 568px
‘Boven de vouw’ ontwerp of ‘Above the fold’ ontwerp
Het eerste wat je bezoekers zien tijdens het laden van je website is je ‘Above the fold’. Above the fold is alles wat zichtbaar is voor je bezoekers als ze op je website komen maar als ze nog niet naar beneden scrollen. Het kan zijn dat je designer of opdrachtgever wilt dat een bezoeker bepaalde elementen meteen ziet maar het kan zijn dat dit niet mogelijk is.
Kleinere schermen zijn redelijk op elkaar afgestemd qua breedte en hoogte, waardoor al je mobiele device bezoekers hetzelfde zien. Je weet dus behoorlijk zeker wat niet of wel zichtbaar is van je ontwerp bij het openen van je website op een mobile device.
Op een groter beeldscherm is dit helaas niet het geval, er zijn veel verschillende schermformaten (van 11 inch tot 31 inch) en dit verschilt van gebruiker tot gebruiker. Ook heeft op desktop iedereen veel meer mogelijkheden om zijn eigen browser aan te passen met bijvoorbeeld favorieten of add-ons. Wat dus zichtbaar is voor de één, is bij de ander niet zichtbaar omdat het schermformaat verschilt.
Oftewel voor een desktop is het héél moeilijk om een ‘Above the fold’ te ontwerpen en zelfs voor mobiel gebruik is het lastig.
Afstanden tussen elementen
Bij ieder webdesign zitten verschillende elementen zoals foto’s, knoppen, blokken etc. Tussen al deze elementen zit een bepaalde afstand. Gebruik geen afstanden die leiden tot inconsistentie zoals 28px en 133px maar gebruik bij elke afstand een rond getal met tussenstapjes van 5px zoals 10px, 15px, 20px, 25px etc. Inconsistente afstanden zijn meer werk voor een developer en het is moeilijker om alles ‘pixel perfect’ te krijgen.
Illustraties
Een website ontwerp met veel grafische elementen en afbeeldingen zijn vaak leuker en zien er mooier uit. Een nadeel van verschillende schermformaten is dat afbeeldingen op een mobile device scherp zijn maar op een groter formaat scherm onscherp worden. Dit is vooral als je PNG, JPG of een ander standaard afbeeldingsformaat exporteert, dit omdat deze formaten niet ‘vector’ zijn. Om onscherpe afbeeldingen te voorkomen kan je grafische elementen en afbeeldingen exporteren als SVG-afbeeldingen. SVG- Afbeeldingen kunnen oneindig vergroot worden doordat ze ‘vector’ zijn, ook kan je developer deze bestanden nog verder aanpassen en animeren.
Ontwerpprogramma’s
Je webdesign kan in meerdere ontwerpprogramma’s ontworpen worden. Elk programma heeft zijn voor- en nadelen, hieronder een kort overzicht:
Adobe Illustrator:
Pro: Werkt met SVG- afbeeldingen die makkelijk ge-exporteert kunnen worden en is volledig vector gebaseerd.
Cons: Is eigenlijk bedoeld voor grafische vormgevers en niet voor web/app design. Daardoor kan het onoverzichtelijk worden binnen verschillende lagen en kunnen afmetingen afwijken.
Adobe InDesign:
Pro: Voor print en magazines hét programma om te gebruiken
Cons: Is niet bedoeld voor web/app design. Afmetingen kunnen afwijken en het is moeilijke losse elementen te exporteren.
Adobe XD
Pro: Zeer geschikt voor web/app designs, je kan zelfs al een demo model maken en SVG-afbeeldingen kunnen snel en makkelijk ge-exporteert worden.
Cons: nog niet heel bekend dus nog niet veel designers werken ermee.
Adobe Photoshop:
Pro: Meest bekende en gebruikte programma, veel informatie over te vinden en zeer geschikt om website mee te ontwerpen.
Cons: Niet alle opties zijn geschikt voor online gebruik.
Figma:
Pro: Is webbased en je kunt met andere ontwerpers samen designs maken. SVG-afbeeldingen kunnen snel en makkelijk ge-exporteert worden.
Cons: een internetverbinding is een must doordat het programma werkt in een browser.
Sketch:
Pro: Is volledig bedoel voor het maken van web/apps design. SVG-afbeeldingen kunnen snel en makkelijk ge-exporteert worden. Vaak updates en goedkoop in aanschaf.
Cons: kan alleen gebruikt worden op macOS. Bestanden worden al snel te groot als er veel afbeeldingen gebruikt worden.
