Hoe je website in te delen (voorbeelden) - DeLaatbusiness
customer servcice chatbots

Hoe je website in te delen (voorbeelden)

13 min


97

De lay-out van uw website kan het succes bepalen. Als u het verkeerde ontwerp kiest, zullen mensen in de war en gedesoriënteerd raken, wat de gebruikerservaring tenietdoet. Ze missen waarschijnlijk kritieke inhoud of zien geen oproep tot actie.

Maar het belang van uw lay-out gaat verder. Het ontwerp moet passen bij de inhoud van uw site. Met de juiste lay-out kan uw inhoud schitteren, maar met de verkeerde inhoud kan de inhoud overvol, moeilijk te lezen en ongeïnspireerd worden.

Uiteindelijk hebben alle sites een rastersysteem dat onder het website-ontwerp zit. Deze kolommen en rijen zorgen voor orde in uw inhoud en leiden het oog van de gebruiker door de pagina. Binnen deze rasters kun je een overvloed aan verschillende benaderingen creëren. Elke website heeft een onderliggend raster waarop de ontwerper de lay-out heeft gebouwd.

Als het echter gaat om het kiezen van het juiste lay-outontwerp voor uw site, zijn er verschillende algemene uitgangspunten die u kunt gebruiken om te beginnen.

Het is de moeite waard om te zeggen dat u niet bij één benadering hoeft te blijven. U kunt eenvoudig meerdere lay-outs combineren op uw site of zelfs op een enkele pagina, zoals een bestemmingspagina .

Dat gezegd hebbende, laten we eens kijken naar de meest voorkomende lay-outopties die voor u beschikbaar zijn.

We beginnen met het meest eenvoudige lay-outpatroon van allemaal, de enkele kolom.

1. Enkele kolom layout

Hoewel het de meest ongecompliceerde lay-out is die u zult vinden, is het aanzienlijk in populariteit gestegen sinds de groei van het mobiele web. Dat komt omdat de website hetzelfde ontwerp kan gebruiken op mobiele apparaten, tablets en desktops, waardoor de ontwikkeltijd wordt verkort.

Lay-outs met één kolom werken ook goed om een ​​geweldige leeservaring te creëren, omdat de gebruiker hierdoor wordt gefocust op de inhoud zonder afleiding aan beide kanten. Daarom gebruikt blogsite Medium het voor al hun artikelen.

Medium gebruikt een indeling met één kolom om de leeservaring te verbeteren.

Ten slotte, in combinatie met afbeeldingen, kan een lay-out met één kolom een ​​krachtige impact hebben omdat u die afbeeldingen zo groot mogelijk kunt weergeven. Het Ocean Resortis hier een goed voorbeeld van in actie.

Het Ocean Resort gebruikt de volledige breedte van het ontwerp met één kolom om de impact van de beelden te maximaliseren.

Houd rekening met deze factoren en overweeg een indeling met één kolom te gebruiken als u wilt dat mensen veel tijd besteden aan het lezen op uw site of als u beeldmateriaal heeft dat de ruimte nodig heeft om te schitteren.

Vanwege de eenvoud zijn er weinig uitdagingen rond een lay-out met één kolom. U moet de informatiestroom echter zorgvuldig overwegen. Welke volgorde heeft de gebruiker nodig om uw inhoud te zien?

Het is bijvoorbeeld handig om gebruikers een samenvatting te geven van wat de pagina bovenaan beslaat om ze naar binnen te halen en tegen het einde een duidelijke oproep tot actie te bieden.

Bedenk ook hoe u ervoor kunt zorgen dat de gebruiker naar beneden scrolt. Indelingen met één kolom zijn doorgaans langer en het is voor de gebruiker niet altijd duidelijk dat er meer inhoud onder de vouw zit. Een visuele indicator, zoals een pijl, kan hierbij helpen.

Als een lay-out met één kolom een ​​beetje beperkend lijkt, maar je hebt nog steeds veel inhoud om te communiceren, overweeg dan om een ​​ontwerp te kiezen dat zich richt op de inhoud.

2. Op inhoud gerichte lay-out

Webontwerpers gebruiken vaak de inhoudgerichte lay-out op nieuwssites of blogs , en het heeft meestal een primaire kolom voor inhoud en een of meer zijkolommen voor aanvullende informatie.

Het voordeel van deze lay-out is dat het u kan helpen bij het beheren van de regellengte van de centrale inhoud door de breedte van de zijkolommen te variëren. Dat is belangrijk, want als de regellengte van de tekst te lang of te kort is, wordt deze moeilijker te lezen , waardoor het begrip en het vasthouden van de informatie afneemt.

Als je het echter goed doet, is de op inhoud gerichte lay-out ideaal voor elke op kopiëren gerichte website. Het geheim is om de inhoud binnen deze lay-out op te splitsen in kleine, gemakkelijk verteerbare stukjes.

De berichten op Boagworld verdelen de inhoud met koppen, lijsten, afbeeldingen en uittrekbare citaten.

Bijvoorbeeld, op mijn blog , zult u merken dat mijn gemiddelde bericht wordt onderbroken door koppen, lijsten, beelden en trek quotes. Dit zijn allemaal technieken om de gebruiker te helpen het artikel te scannen en onderdelen te vinden die van belang zijn.

Ook aan de zijkolommen moet zorgvuldig worden gedacht. Het is essentieel dat de webdesigner de juiste inhoud in deze kolommen plaatst en dat ze visueel de juiste weging hebben.

Het probleem is dat gebruikers verwachten secundaire inhoud in de zijkolommen te vinden en ze dus minder aandacht geven. Daarom, als u van plan bent om zoiets als een oproep tot actie op te nemen in een zijkolom, moet deze sterk genoeg zijn om de aandacht te trekken.

Merk bijvoorbeeld op hoe Smashing Magazine een kleurrijke afbeelding van een kat gebruikt om de aandacht te vestigen op hun aanmeldingsformulier voor de nieuwsbrief in de rechterkolom.

Smashing Magazine gebruikt de zijkolommen om secundaire informatie over de post te geven.

Niet dat de inhoudgerichte lay-out geschikt is voor elke pagina van uw site. Websites koppelen deze lay-out vaak aan een ontwerp in tijdschriftstijl.

3. Tijdschriftlay-out

Zoals de naam al aangeeft, wordt deze lay-outbenadering veel gebruikt in tijdschriften of nieuwssites om een ​​groot aantal verschillende verhalen te laten zien.

Ze zijn geïnspireerd op de afdruklay-out en laten de combinatie van koppen en afbeeldingen toe om verhalen te introduceren. Dat kan een boeiende manier zijn om over te brengen wat in wezen een lijst met links is.

Het is ook een uitstekende lay-out om inhoud te markeren die regelmatig verandert. Dat is de reden waarom nieuwswebsites zoals The Washington Post er zo de voorkeur aan geven.

Nieuwswebsites geven de voorkeur aan de lay-out in tijdschriftstijl.

De indeling is echter niet zonder nadelen. Een tijdschriftlay-out kan een uitdaging zijn om responsief te maken, en vereist vaak een complete verandering in het ontwerp voor apparaten met een kleiner scherm.

Deze lay-outstijl van de website kan ook enigszins overweldigend zijn, met een groot aantal afbeeldingen en koppen die om aandacht schreeuwen.

De meest effectieve manier om dit probleem aan te pakken, is door een duidelijke visuele hiërarchie te creëren. Met andere woorden, maak sommige ‘verhalen’ groter dan andere.

Door de verhaalgroottes te variëren, begeleiden ze het oog van de gebruiker.

Merk bijvoorbeeld op hoe de Vogue- website de aandacht vestigt op de linkerafbeelding door deze aanzienlijk groter te maken. Ze vertellen de gebruiker effectief waar hij eerst moet kijken.

Het helpt ook dat de rest van de gebruikersinterface eenvoudig is, met duidelijke typografie en eenvoudige navigatiebalken. Als u de tijdschriftlay-out gaat gebruiken, moet u hard werken om de zaken eenvoudig te houden.

Een ander potentieel nadeel van de lay-out van het tijdschrift is dat het er ‘boxy’ uit kan zien omdat het raster dat eronder ligt zo zichtbaar is. U kunt dat echter verminderen door inspiratie te halen uit ons volgende lay-outtype.

4. Grid Breaking Layout

Lay-outs die hun onderliggende raster lijken te breken, kunnen visueel veel interessanter zijn dan meer traditionele benaderingen. Ze zijn ook uitstekend geschikt om de aandacht te vestigen op bepaalde schermelementen die uit de gebruikelijke kolommen breken.

Neem bijvoorbeeld de website van VR Arles Festival . Merk op hoe ze uw aandacht vestigen op hun navigatiebalk door deze twee kolommen te laten overlappen.

Het VR Arles Festival vestigt de aandacht op hun navigatiebalk door deze twee kolommen te laten overlappen.

Een ander praktisch gebruik van de rasterafbrekende lay-out is om deze te gebruiken om tekst op een afbeelding zodanig te bedekken dat de aandacht op de kopie wordt gevestigd. Wanneer een webpagina de tekst volledig over een afbeelding legt, kan deze vaak verloren gaan. Zoals u echter aan het onderstaande voorbeeld kunt zien , valt deze veel meer op als de tekst de afbeelding gedeeltelijk overlapt.

Dit ontwerp vestigt de aandacht op de tekst en roept op tot actie door deze gedeeltelijk met de afbeelding te bedekken.

Het nadeel van rasterdoorbrekende lay-outs is dat ze moeilijk goed te krijgen zijn, vooral wanneer websites responsief moeten zijn. In werkelijkheid zijn de meeste rasterdoorbrekende ontwerpen niets van dien aard. Er is nog een onderliggend raster en alle schermelementen passen daarin. Het is alleen dat het raster veel complexer is en dus niet zo duidelijk. Dat maakt ze moeilijk te ontwerpen.

Door hun inherente complexiteit zie je ze vaak worden gebruikt door door design geleide bedrijven zoals ontwerpbureaus of modemerken. Ze tonen een mate van verfijning in het ontwerp die een bepaald publiek aanspreekt.

Als een lay-out voor het doorbreken van een raster te gecompliceerd aanvoelt voor uw situatie, maar u toch iets innovatiever en ongebruikelijks wilt doen, overweeg dan een ontwerp op volledig scherm.

5. Indeling op volledig scherm

Lay-outs op volledig scherm passen, zoals de naam al doet vermoeden, op een enkel scherm zonder dat de gebruiker hoeft te scrollen. Dat maakt ze ideaal voor het vertellen van verhalen of presentaties.

Neem bijvoorbeeld Soorten in Stukken . Deze rijke en interactieve presentatie-ervaring vertelt de verhalen van 30 geëngageerde soorten.

Species and Pieces is een rijke, interactieve ervaring die allemaal plaatsvindt zonder te hoeven scrollen.

Zoals u kunt zien, zijn lay-outs op volledig scherm het beste wanneer ze worden vergezeld van krachtige beelden. Dat maakt ze een uitstekende keuze voor websites die rijk zijn aan fotografie, illustraties of video.

Niet dat u zich strikt aan de benadering met één scherm hoeft te houden. Op het eerste gezicht lijkt de website van Roux at Parliament Square een website op volledig scherm in dezelfde zin als Species in Pieces. Hun prachtige beelden vullen de hele viewport.

Deze website gebruikt de volledige viewport om zijn uitstekende fotografie te laten zien.

Het is echter mogelijk om verder op de pagina te navigeren om aanvullende inhoud te zien. Helaas benadrukt dat een mogelijk nadeel van deze lay-outbenadering. Gebruikers realiseren zich niet altijd dat ze kunnen scrollen en zo waardevolle inhoud missen.

U moet ook goed overwegen hoe de lay-out zich bij verschillende formaten zal aanpassen. Werkt de benadering op volledig scherm bijvoorbeeld op een mobiel apparaat? Worden afbeeldingen ook bijgesneden als de schermgrootte verandert of worden ze gewoon kleiner? U kunt snel de brandpunten vinden van afbeeldingen die bij kleinere formaten uit het zichtbare gebied worden bijgesneden.

Dat gezegd hebbende, als je verbluffende afbeeldingen hebt om mee te pronken, zul je moeite hebben om een ​​beter lay-outontwerp te vinden. Maar als u de optie wilt hebben om naast die afbeeldingen een beschrijving en call-to-action toe te voegen, kunt u een alternatieve lay-out overwegen.

6. Afwisselende lay-out

Het afwisselende lay-outpatroon is een van de meest voorkomende patronen op internet. U zult zien dat het bestaat uit een reeks inhoudsblokken, die elk een indeling met twee kolommen hebben. De blokken bestaan ​​meestal uit een afbeelding aan de ene kant en tekst aan de andere kant.

Wat het zijn naam geeft, is dat het beeld van kant wisselt. Het eerste blok heeft dus links inhoud en rechts een afbeelding, terwijl het volgende blok de lay-out omkeert.

Het is een lay-outbenadering die met name de voorkeur geniet bij het uitleggen van de kenmerken of voordelen van een product. Softwareproducten zoals Webydo gebruiken bijvoorbeeld de afbeelding om een ​​functie weer te geven en vervolgens de kopie om uit te leggen hoe het werkt of welk voordeel het biedt.

Webydo wisselt tekst en afbeeldingen in verschillende inhoud af op de startpagina.

Niet dat deze inhoudsblokken beperkt zijn tot afbeeldingen en tekst. Soms vervangen sites de afbeelding door een video. Evenzo kan de inhoudskant van het element alles omvatten, van pictogrammen tot getuigenissen of oproepen tot actie.

Bijvoorbeeld, Convertkit is voorzien van een getuigenis en oproep tot actie naast hun tekst in elk inhoudelijk blok.

Convertkit bevat getuigenissen en oproepen tot actie naast hun afbeeldingen.

Een deel van de reden waarom afwisselende blokken zo vaak voorkomen, is dat ze een eenvoudige lay-outbenadering zijn met weinig nadelen. Als u meerdere verkoopargumenten moet communiceren, is dit bijna altijd een betrouwbare lay-outoptie.

Uw vereisten kunnen natuurlijk verschillen, dus een andere optie om te overwegen is de op kaarten gebaseerde lay-out.

7. Op kaarten gebaseerde lay-outs

Op kaarten gebaseerde paginalay-outs zijn een andere veelgebruikte lay-outbenadering die u overal op internet tegenkomt.

Op kaarten gebaseerde lay-outs zijn een geweldige manier om mensen een reeks opties te geven waaruit de gebruiker kan kiezen, waarbij ze voldoende informatie over elke keuze krijgen om een ​​beslissing te nemen.

Dat maakt ze een populaire keuze voor de productvermeldingspagina’s van eCommerce-sites. Hiermee kan de website een afbeelding van het product, een beschrijving en de prijs weergeven. U kunt zelfs functionaliteit toevoegen zoals “opslaan voor later”, zoals u kunt zien op de Asos-website .

E-commercesites zoals Asos geven de voorkeur aan op kaarten gebaseerde lay-outs om productvermeldingen weer te geven.

U zult echter websites vinden die op kaarten gebaseerde lay-outs gebruiken in elke situatie waarin gebruikers een keuze moeten maken uit een lijst. Een ander typisch gebruik is bijvoorbeeld het weergeven van een lijst met artikelen op een blog of nieuwssite.

Met een op kaarten gebaseerde lay-out kunt u een afbeelding van het verhaal, de titel en de beschrijving weergeven, evenals eventuele aanvullende details over het bericht dat u wilt opnemen. Awwwards blog is een uitstekend voorbeeld van dit soort gebruik in actie.

Awwwards gebruiken een op kaarten gebaseerde lay-out om de berichten op zijn blog weer te geven.

Het beste van alles is dat op kaarten gebaseerde lay-outs goed responsief werken, waarbij het aantal kaarten op een rij langzaam afneemt naarmate de beschikbare breedte afneemt.

Er zijn echter een paar kleine nadelen aan de aanpak. Ten eerste werken kaarten het beste als u de afbeelding opneemt. Dat betekent dat als je moeite hebt om geschikte foto’s te vinden voor elk van je lijstitems, je misschien beter bent met een ander ontwerp.

Het andere kleine probleem is met verschillende hoeveelheden inhoud. Als de ene kaart meer inhoud heeft dan de andere, kan er witruimte overblijven binnen de kaart of tussen elke rij.

Als kaarten verschillende hoeveelheden inhoud hebben, kan er ruimte tussen de kaarten achterblijven.

Een manier om dit probleem te verhelpen, is door niet te proberen kaarten in dezelfde rij te houden, zoals in het onderstaande voorbeeld wordt getoond.

Door kaarten de lege ruimte te laten vullen, krijg je een esthetischer ontwerp.

Dit is echter een ondergeschikt probleem, wat de brede acceptatie van deze lay-outbenadering verklaart.

Een ander even populair ontwerp is de lay-out van de heldenafbeelding.

8. Heldenlay-out

De lay-out van de held is vernoemd naar heldenafbeeldingen, die grote afbeeldingen met tekstoverlays die de homepages op zoveel websites domineren. Apple maakt goed gebruik van het klassieke heldenbeeld.

Apple maakt goed gebruik van het klassieke heldenbeeld.
Pixave voor MacOS tilt de lay-out van de held nog verder door het het ontwerp van de homepage te laten domineren.
Pixave voor MacOS tilt de lay-out van de held nog verder door het het ontwerp van de homepage te laten domineren.

Wat heldenafbeeldingen zo wijdverbreid maakt, is dat ze u in staat stellen om uw waardevoorstel op een impactvolle manier op te maken, direct bij het beginpunt van uw website.

Zoals je kunt zien op de Pixave- en Apple- websites hierboven, bestaan ​​ze meestal uit een grote achtergrondafbeelding, een titel of strapline en een beschrijving. Heldenlay-outs komen ook vaak met een prominente oproep tot actie.

Als je duidelijk moet uitleggen wat je aanbiedt op je startpagina of bestemmingspagina op een manier die de aandacht trekt, dan is een hero-afbeelding misschien wel de juiste keuze. Dat is echter waarschijnlijk de omvang van hun gebruik.

Af en toe zie je de hero-layout die op volgende pagina’s wordt gebruikt. Maar in de meeste gevallen trekt het heldenbeeld de aandacht gewoon weg van waardevollere inhoud. Wees dus voorzichtig.

Afgezien daarvan is er een klein nadeel aan het gebruik van een hero-indeling. Ja, ze komen vaak voor, maar gebruikers zijn ermee bekend en ze zijn effectief.

Een aanzienlijk minder gebruikelijke lay-outoptie is de lay-out met gesplitst scherm.

9. Indeling gesplitst scherm

Net als de lay-out op volledig scherm, is een gesplitst scherm een ​​geweldige manier om de aandacht te trekken wanneer gebruikers voor het eerst op uw website komen, zoals u kunt zien op de homepage van het webdesignbedrijf hieronder.

Deze site gebruikt de lay-out met gesplitst scherm om de twee delen van hun aanbod uit te leggen.

Wat het bovenstaande voorbeeld zo effectief maakt, is dat er een duidelijke reden is voor de indeling met gesplitst scherm. De website maakt duidelijk dat er twee kanten aan hun bedrijf zijn: ontwerp en ontwikkeling.

Een soortgelijk voorbeeld is wanneer u gebruikers een duidelijke binaire keuze wilt geven. Een gesplitst scherm heeft in die situatie veel zin, omdat het scherm gelijkmatig over de twee opties wordt verdeeld.

Het modellenbureau 62 Management gebruikt bijvoorbeeld een split-screen om gebruikers aan te moedigen vast te stellen of ze op zoek zijn naar een mannelijk of vrouwelijk model.

62 Het management gebruikt een split-screen ontwerp om gebruikers aan te moedigen een keuze te maken tussen twee opties.

Helaas is er, afgezien van dit beperkte aantal toepassingen, weinig reden om een ​​split-screen-ontwerp aan te nemen. Het is een relatief beperkte lay-outoptie, en er zijn simpelweg niet zoveel scenario’s waar het geschikt is. In die gevallen is dit echter verreweg de beste keuze.

Een vergelijkbare optie die wat meer flexibiliteit zou bieden, is de asymmetrische lay-out.

10. Asymmetrische lay-out

Terwijl de lay-out met gesplitst scherm een ​​gelijke splitsing in het midden van de viewport afdwingt, kunt u met een asymmetrisch ontwerp het scherm naar eigen inzicht verdelen.

Het voordeel van deze lay-out ten opzichte van een gesplitst scherm is dat u hiermee de nadruk kunt leggen op een bepaalde kant van de pagina. Hoe meer onroerend goed een kant heeft, hoe meer focus u erop legt. Dat stelt u op zijn beurt in staat om primaire en secundaire inhoud te identificeren.

Met het uitgangspunt van primaire en secundaire kolommen, kunt u de aanpak op meerdere manieren gebruiken. Zo gebruikt Félix Lesouef de methode op zijn site om onderscheid te maken tussen inhoud en navigatie.

Félix Lesouef gebruikt een asymmetrische lay-out om de navigatie van zijn sites te benadrukken.

De Nourish Eats- website daarentegen gebruikt de tweede kolom om u het volgende gedeelte van de website te laten zien.

Nourish Eats gebruikt deze lay-outbenadering om secundaire inhoud prominenter weer te geven.

De asymmetrische lay-out is in veel opzichten een uitstekende keuze. Het is flexibel, relatief eenvoudig te implementeren en minder gebruikt. Het is een handige manier om uw website er anders uit te laten zien zonder de kopzorgen van sommige andere keuzes.

Hoe u een lay-out kiest

Door dit artikel te lezen, heeft u uw eerste stap gezet bij het kiezen van de juiste lay-out voor uw site. U heeft geleerd welke opties voor u beschikbaar zijn.

Vervolgens moet u een idee krijgen van welke opties mogelijk geschikt zijn voor uw site. Een manier om dit te doen, is door naar uw concurrenten te kijken. Ik zou echter adviseren om daar niet te stoppen. Het gevaar is dat je ze kopieert, en dat zet je altijd een stap achter.

Kijk in plaats daarvan eens naar sites in andere sectoren die verwante soorten inhoud hebben aan die van u. Als je een brochureware-website hebt die is gericht op een B2B-publiek , kijk dan eens naar andere vergelijkbare sites. Evenzo, als u een e-commerce-site heeft, kijk dan naar e-commerce in andere sectoren.

Werk van daaruit samen met uw ontwerper om te experimenteren met een aantal verschillende benaderingen. Laat ze een aantal ideeën bedraden op basis van verschillende lay-outs en kijk wat het beste bij uw inhoud past.

Als je merkt dat je niet in staat bent om een ​​beslissing te nemen of als je geen vertrouwen hebt in de juiste richting, probeer dan de opties voor te leggen aan sommige gebruikers en krijg hun reacties. Vraag ze niet alleen aan welke ze de voorkeur geven, maar vraag ze ook of ze kritische inhoud hebben gezien of begrepen waar het bedrijf over ging.

In werkelijkheid zult u waarschijnlijk merken dat u verschillende lay-outbenaderingen voor verschillende delen van uw website kiest en kiest, en dat is oké. Omdat als het gaat om de lay-out van de website, het gebruik van de juiste op het juiste moment van cruciaal belang is.


What's Your Reaction?

hate hate
0
hate
confused confused
0
confused
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Erwin@delaatbusiness.com
Dag, Hulp nodig met internet marketing of websites maken? neem dan contact op

0 Comments

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Choose A Format
Personality quiz
Series of questions that intends to reveal something about the personality
Trivia quiz
Series of questions with right and wrong answers that intends to check knowledge
Poll
Voting to make decisions or determine opinions
Story
Formatted Text with Embeds and Visuals
List
The Classic Internet Listicles
Countdown
The Classic Internet Countdowns
Open List
Submit your own item and vote up for the best submission
Ranked List
Upvote or downvote to decide the best list item
Meme
Upload your own images to make custom memes
Video
Youtube, Vimeo or Vine Embeds
Audio
Soundcloud or Mixcloud Embeds
Image
Photo or GIF
Gif
GIF format