Webdesign trends

Wat is webdesign?

Webdesign is een overkoepelende term voor het vormgeven en technisch ontwikkelen van websites. De grafische vormgeving is even belangrijk als de technische aspecten van een website. Binnen web design houd je je bezig met uitstraling, navigatie, interactie, indeling en gebruiksvriendelijkheid bij het maken van een website. Webdesign heeft veel raakvlakken met het grafisch ontwerpen van drukwerk, maar een groot verschil is het gebruik van video en audio op websites. Een goed vormgegeven website is van groot belang, aangezien jouw website het uithangbord voor jouw organisatie is! Als webdesigner is het dus een must dat je alle aspecten van webdesign onder de knie hebt.

Het mobiele web is niet meer weg te denken. Websites moeten ‘mobile-friendly’ zijn en dat vindt Google ook. Google streeft naar een sneller en mobielvriendelijk web. Voortaan zal Google in de zoekresultaten aangeven of een website mobielvriendelijk is, dus geoptimaliseerd voor mobiele apparaten. Om beter te scoren, zullen bedrijven hierin stappen moeten ondernemen. Het inzetten van mobile webdesign is daar de beste oplossing voor.

Webdesign trends

WordPress is een enorme hype geworden. Het is een Content Management Systeem (CMS) dat naar eigen wens aangepast kan worden en is simpel in gebruik. Je kan dus een eigen website maken of een WordPress webshop bouwen. De blogs worden (achter de schermen) geschreven met de programmeertaal PHP en worden opgeslagen in een MySQL-database. Maar je hoeft zelf geen kennis te hebben van HTML of PHP om WordPress te gebruiken. Dat maakt dat er sneller voor een WordPress website wordt gekozen. Ook kan je met dit CMS op een eenvoudige manier content toevoegen of bewerken.

Grafisch webdesign

Het inzetten van content wordt steeds prominenter. Het gebruik van afbeeldingen en foto’s is eigenlijk een standaard geworden. Deze worden nu ook steeds vaker ingezet als achtergrond van een website. Daarbij is het ook goed om te letten op kleurgebruik. Tegenwoordig worden niet meer de harde felle kleuren gebruikt, maar worden deze genuanceerder ingezet. Net zo merkwaardig is het gebruik van meer video’s. Ook deze worden meer ingezet als achtergrond. De genuanceerde kleuren hoeven niet meer prominent aanwezig te zijn. Dankzij het instellen van transparantie met CSS3 kunnen er diverse lagen gebruikt worden. Dat maakt het gebruik van de ‘flat design’ nog aantrekkelijker dan dat het al is. Zo kan er op een duidelijke manier teksten geplaatst worden over foto’s, met een transparante kleurlaag er tussen.

Ook iconen worden platter. Om een icon beter te laten zien en te voorkomen dat de pixels zichtbaar zijn, wordt er meer gebruik gemaakt van vectoren. Steeds meer smartphones, tablets en laptops hebben betere resoluties. Om afbeeldingen en iconen met hoge resoluties te tonen, zullen deze schaalbaar moeten zijn. Met inzet van SVG (Scalable Vector Graphics) kunnen logo’s en iconen verbeterd worden als vectoren en zullen zij er niet rafelig uitzien. Wanneer we het hebben over schalen, denken we ook meteen aan responsive web design. Met responsive design worden gehele websites geschaald voor mobiel gebruik. Elke webdesigner zou moeten weten hoe je een responsive website maakt.

Wat is responsive webdesign?

Het hebben van een responsive website wordt steeds belangrijker. Responsive design wil zeggen dat de site zich aanpast aan een bepaald mobiel apparaat. Een iPad bijvoorbeeld werkt op een andere resolutie dan een desktop computer. Een iPhone of een andere smartphone werkt weer op een andere manier. Hoe maak je nu een site die van alle markten thuis is? Responsive webdesign is het antwoord: een site die zich automatisch aanpast aan het gebruikte apparatuur.

Responsive website

Nu sites op steeds meer apparaten worden bekeken, zijn responsive websites een must-have. Een website kan met bepaalde hulpmiddelen omgezet worden naar een responsive design. Het eerste wat je hoort te doen is het instellen van een viewport. De viewport tag is een HTML code die je moet toevoegen aan de header van elke pagina. Daarmee bepaal je de breedte en schaling voor een pagina. Wanneer een viewport is ingesteld in de CSS, wordt de inhoud van de pagina dynamisch aangepast aan de schermformaten.

CSS

Browsers die geen CSS3 ondersteunen kunnen niet omgaan met media queries. Voor deze browsers kan een apart CSS bestand worden gemaakt. Media queries zorgen ervoor dat je kunt bepalen welke styles er van toepassing zijn, naar aanleiding van de eigenschappen van het medium waarop de pagina getoond wordt. CSS3 biedt de mogelijkheid om expressies binnen CSS te gebruiken om te controleren of er wordt voldaan aan bepaalde condities. Zo is het bijvoorbeeld mogelijk om te controleren hoe breed een scherm is.

Het is nuttig om een minimale en maximale breedte aan te geven voor een bepaalde scherm. Het is handiger om te werken met bepaalde percentages, in plaats van vaste pixel instellingen. Veel smartphone merken hebben namelijk verschillende groottes in schermen. Daarbij is het van belang om te letten of een scherm een ‘landscape’ of ‘portrait’ formaat heeft. Dit is met name goed om mee te nemen voor de tablets. Ook is het handig om na te denken over de diverse afbeeldingen en tekst op de pagina. Om een afbeelding er in zijn geheel op te krijgen, in plaats van een gedeelte, moet deze dus ook schaalbaar zijn. Daarnaast kan het praktisch zijn om een breekpunt in te stellen, zodat bepaalde teksten beter leesbaar zijn.

Opleiding webdesign

Wil je meer leren over alle aspecten van webdesign? Bekijk ons uitgebreide cursusaanbod voor een cursus webdesign en schrijf je in voor een opleiding Webdesign Professional! Wil je ook leren hoe je in de praktijk een website responsive maakt? Schrijf je dan in voor een cursus Responsive Webdesign!

Terug