Trends moderne webdesign voor layout ontwerp en vormgeving

Om u een handje te helpen, hebben wij een handig overzicht gemaakt van enkele populaire elementen en moderne trends in webdesign.

---

Grote heldere en unieke typografie

Het is al enkele jaren (eenvoudig) mogelijk om eigen unieke fonts te gebruiken. Lettertypes zijn uitermate geschikt voor het creëren van uw look-and-feel en vormen een belangrijk onderdeel van uw huisstijl. Typografie is een belangrijk herkenningspunt voor uw bezoekers. Neem bijvoorbeeld The New Yorker, dit bekende tijdschrift is onmiddellijk herkenbaar aan hun unieke lettertype “NY Irvin” in combinatie met “Adobe Caslon Pro”. Of kijk naar KPN die al jaren hun eigen “KPN Sans” gebruiken.

Waarom grote heldere en unieke typografie gebruiken?

Door typografie te gebruiken kunt u uw bezoekers de weg wijzen naar verschillende delen van uw website. Door verschillende lettertypes en lettergroottes te gebruiken kunt u aangeven wat u belangrijk vindt voor uw bezoekers om te zien of te lezen. Bij het creëren van uw (online) bedrijfsidentiteit kan de keuze van de typografie een subtiele aanwijzing zijn over wat voor soort merk u bent. Ben je serieus of niet? Functioneel of informatief? Welk lettertype u ook kiest, zorg ervoor dat het geschikt is voor zowel gedrukte als digitale toepassingen.

---

Grote & Responsive Header afbeeldingen

Een trend die veel gezien wordt op moderne websites zijn grote headerfoto’s. Sinds medium.com is het een gebruikelijke methode. Door de nadruk te leggen op een opvallende foto en een korte maar krachtige tekst wordt een visuele ervaring gecreëerd die ervoor zorgt dat je verder naar beneden blijft scrollen. Grote headerfoto’s worden vaak gebruikt als achtergrond met tekst en andere inhoud erbovenop zoals Apple webdesign (voorbeelden uitgelegd). Hoe je het ook toepast, grote foto’s helpen om een (visueel) verhaal te vertellen zonder alleen afhankelijk te zijn van tekst.

---

Plat ontwerp (flat design)

In 2013 is Apple overgestapt op flat design, en sindsdien is het een veelvoorkomende trend. Eenvoudig uitgelegd is flat design een volledig vlakke vormgeving. Het heeft geen elementen die een driedimensionaal gevoel geven, zoals een schaduw. Flat design is niet alleen gemakkelijker te begrijpen voor uw bezoekers, maar het is ook veel sneller te laden op een website.

Flat design is ook veel gemakkelijker responsive te maken. In navolging van Apple zijn veel kleine en grote organisaties overgestapt op een plat, eenvoudig ontwerpprincipe. Maar sinds enige tijd hebben bedrijven zoals Google het platte ontwerp geëvolueerd naar een meer driedimensionale lay-out met behulp van animaties en subtiele schaduwen.

Een plat ontwerp helpt uw bezoekers uw inhoud sneller te begrijpen, en door diepte toe te voegen (zoals Google) komt de inhoud tot leven. Of u het ontwerp nu vlak houdt of schaduwen en animaties toevoegt, het belangrijkste is om deze elementen consequent op uw site toe te passen.

---

Hamburger menu

Het hamburgermenu is bijzonder populair geworden sinds mensen mobiele telefoons zijn gaan gebruiken om op het web te surfen. Op kleine schermen is er gewoon minder ruimte voor alle menu-items.

Wat is een hamburgermenu?

Het hamburgermenu is het menu dat je herkent aan 2 of 3 streepjes. Meestal rechtsboven. Waarschijnlijk hebben de meeste websites die u bezoekt lange menustructuren met veel verschillende opties, die nuttig zijn omdat ze u snel naar datgene brengen waarnaar u op zoek bent. Het is gewoon niet zo handig dat het zo veel ruimte inneemt, vooral op kleinere schermen. Hier komt het hamburgermenu om de hoek kijken. Het hamburger menu was al een gangbare methode in software voordat het zijn intrede deed in web design. Kijk in de rechterbovenhoek van uw Chrome browser.
Bron: MovementUX

Waarom het hamburgermenu gebruiken?

Je wilt de lay-out van je website rustig houden op elk schermformaat, een rustige lay-out zorgt voor een betere gebruikerservaring, hogere conversie en een duidelijkere focus op wat je wilt dat je bezoeker doet. Hamburger menu’s behoren nu tot de standaard sets van elementen die bijna elke bezoeker begrijpt. Meer over conversie:

Meer handleidingen over menu’s en WordPress

• Pictogrammen, icoontjes icons toevoegen WordPress plugin
• Handleiding voor opzetten van een WordPress site
• WordPress Menu maken dropdown volgorde tekst kleur
• Submenu-items bewerken WordPress-menu code parent

---

Kaartontwerp met thumbnails (Card design)

Met de komst van Pinterest zijn ontwerpers en marketeers gefascineerd door thumbnails. Dit zijn kleine afbeeldingen. Elke thumbnail helpt om kleine stukjes informatie over te brengen zonder te worden overweldigd door te veel informatie. Door op een kaart te klikken, krijgt de bezoeker vaak meer informatie.
Door informatie op te splitsen in kleine stukjes content, ondersteund door afbeeldingen, kunnen uw bezoekers kiezen van welke informatie ze meer willen lezen. Zo blijft uw website schoon en overzichtelijk. B2B sites omdat het helpt grote hoeveelheden informatie over te brengen in kleine, behapbare brokjes. Maak uw ontwerp ook responsive, zodat ze er op elk scherm goed uitzien.
Als je mijn portfolio bekijkt zie je dat ik dit vaak toepas. Enkele voorbeelden van websites:

• WordPress product website Trilogy
• WordPress webdesign Exsion
• WordPress webdesign Q-Assurance
• WordPress webdesign HB Software

---

Korte video’s van producten en kenmerken

Naast achtergrondvideo’s maken bedrijven steeds vaker gebruik van korte product- of feature-video’s om specifieke kenmerken te belichten. Deze video’s zijn goed om producten of oplossingen tot leven te brengen, zonder de bezoeker te overweldigen met veel informatie. Veel website bieden korte illustratieve video’s om te laten zien hoe eenvoudig hun product te gebruiken is.

Waarom korte video’s gebruiken?

Volgens het tijdschrift Inc. bekijkt 92% van alle B2B-klanten online video’s en bekijkt 43% van de B2B-klanten online video als onderdeel van hun zoektocht naar nieuwe producten of diensten. Daarom is het goed dat B2B-bedrijven video’s maken waarin ze hun producten uitleggen, wat een belangrijke factor kan zijn in het besluitvormingsproces van de koper. Deze korte video’s stellen potentiële klanten in staat om snel de waarde van uw product te begrijpen, zonder lange verhalen te hoeven lezen.

---

Eindeloos scrollen

Sinds de komst van mobiele telefoons wordt scrollen in het algemeen niet meer als storend gezien. Een andere opkomende trend is eindeloos scrollen. Sites als Pinterest en Facebook hebben een oneindige lengte, elke keer als je naar beneden scrollt worden er nieuwe elementen geladen. In plaats van naar een andere pagina te navigeren om meer inhoud te bekijken, kan de gebruiker gewoon blijven scrollen. Het is aangetoond dat deze methode ervoor zorgt dat bezoekers dit soort websites langer blijven bezoeken.

Steeds meer mediawebsites gebruiken deze methode om lezers langer bezig te houden. Als je een artikel leest, is het volgende artikel al geladen. Je scrollt van het ene artikel naar het andere. Dit zorgt ervoor dat de gebruiker onmiddellijk verder kan lezen, maar het is belangrijk dat het volgende artikel verband houdt met het onderwerp. De krant AD bijvoorbeeld maakt gebruik van oneindig scrollen om je het gevoel te geven dat er veel te beleven is.

Waarom Eindeloos scrollen gebruiken?

U steekt waarschijnlijk veel tijd in het bijhouden van uw blog. Elke week schrijf je nieuwe verhalen. Eindeloos scrollen kan een geweldige manier zijn om uw bezoekers meer blogs te laten lezen. Naast deze methode kan ook eindeloos scrollen worden gebruikt om bezoekers langer op je website te houden. Dit is weer handig voor SEO en Google Core Web Vitals.

---

WordPress cursus of training volgen om een moderne website te maken

Wil je leren hoe je een goede hippe moderne website kunt maken en zelf bouwen. Dat kan. Je kan dan het beste een designcursus volgen. Dit zijn de trainingen die je kunt volgen:

• WordPress Pop-up Bootcamp spoedcursus op maat
• Designcursus WordPress voor ontwerpers en vormgevers
• WordPress Bootcamp all-in one spoedcursus
• Cursus WordPress op maat beginners & gevorderden
• WordPress Designcursus ontwerp en vormgevingstraining