Website-indelingen

Beste voorbeelden en ideeën voor website-indeling


De lay-out van uw website kan het succes ervan bepalen. Kies het verkeerde ontwerp en mensen zullen in de war en gedesoriënteerd raken, waardoor de gebruikerservaring wordt vernietigd. Ze missen waarschijnlijk kritieke inhoud of zien geen oproep tot actie.

Maar het belang van uw layout 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 kan de inhoud druk, moeilijk leesbaar en ongeïnspireerd worden.

De lay-out van uw website kan het succes ervan bepalen. Kies het verkeerde ontwerp en mensen zullen in de war en gedesoriënteerd raken, waardoor de gebruikerservaring wordt vernietigd. Ze missen waarschijnlijk kritieke inhoud of zien geen oproep tot actie.

Maar het belang van uw layout 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 kan de inhoud druk, moeilijk leesbaar en ongeïnspireerd worden.

Uiteindelijk hebben alle sites een rastersysteem dat onder het websiteontwerp zit. Deze kolommen en rijen zorgen voor orde in uw inhoud en leiden het oog van de gebruiker over de pagina. Binnen deze rasters kunt u een overvloed aan verschillende benaderingen creëren. Elke website heeft een onderliggend raster waarop de ontwerper de layout 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 mee te beginnen.

Het is de moeite waard om te zeggen dat u zich niet aan één benadering hoeft te houden. 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. Lay-out met één kolom

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

Ook werken lay-outs met één kolom goed voor het creëren van een geweldige leeservaring omdat het de gebruiker op de inhoud richt zonder afleiding aan beide kanten. Dat is waarom blogging site Medium keurt het goed voor al hun artikelen.

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

Ten slotte, in combinatie met afbeeldingen, kan een enkele kolomlay-out een krachtige impact hebben, omdat u die afbeeldingen zo groot mogelijk kunt weergeven. The Ocean Resort is hiervan een mooi voorbeeld in actie.

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

Met deze factoren in gedachten, overweeg dan om een ​​enkele kolomlay-out te gebruiken als u wilt dat mensen veel tijd doorbrengen met lezen op uw site of als u beelden heeft die de ruimte nodig hebben om te schitteren.

Vanwege de eenvoud zijn er weinig uitdagingen rond een enkele kolomlay-out. U moet echter wel goed nadenken over de informatiestroom. 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 behandelt om ze binnen te halen en tegen het einde een duidelijke oproep tot actie te bieden.

Bedenk ook hoe u de gebruiker naar beneden kunt laten scrollen. Lay-outs met één kolom zijn meestal langer en het is niet altijd duidelijk voor de gebruiker dat er meer inhoud onder de vouw is. Een visuele indicator, zoals een pijl, kan helpen.

Als een enkele kolomlay-out een beetje beperkend lijkt, maar u nog steeds veel inhoud heeft om te communiceren, overweeg dan om een ​​ontwerp te gebruiken dat zich richt op de inhoud.

2. Op inhoud gerichte lay-out

Webontwerpers gebruiken de op inhoud gerichte lay-out vaak op nieuwssites of blogs, en deze 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 de lijnlengte van de centrale inhoud te beheren door de breedte van zijkolommen te variëren. Dat is belangrijk omdat als de lijnlengte van de tekst te lang of te kort is, wordt deze moeilijker te lezen, dus het begrip en het bewaren van de informatie verminderen.

Als het echter goed wordt gedaan, is de inhoudgerichte 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 te verteren stukjes.

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

Bijvoorbeeld, op mijn blog, je zult merken dat mijn gemiddelde bericht wordt onderbroken door koppen, lijsten, afbeeldingen en citaten. Dit zijn allemaal technieken om de gebruiker te helpen het artikel te scannen en onderdelen te vinden die interessant zijn.

Er moet ook zorgvuldig worden nagedacht over de zijkolommen. Het is essentieel dat de webdesigner de juiste inhoud in deze kolommen plaatst en visueel de juiste weging heeft.

Het probleem is dat gebruikers verwachten dat ze secundaire inhoud in de zijkolommen zullen vinden en ze daarom minder aandacht zullen geven. Daarom, als u van plan bent iets als een call-to-action in een zijkolom op te nemen, moet het sterk genoeg zijn om de aandacht te trekken.

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

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

Niet dat de op inhoud gerichte lay-out geschikt is voor elke pagina van uw site. Websites combineren deze lay-out vaak met een tijdschriftachtig ontwerp.

3. Tijdschriftindeling

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

Geïnspireerd door de printlay-out, laten ze 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 waarom nieuwswebsites leuk vinden The Washington Post dus geef er de voorkeur aan.

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 zijn, en vereist vaak een complete verandering in ontwerp voor kleinere schermapparaten.

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 verschillende verhaalgroottes te variëren, begeleiden ze het oog van de gebruiker.

Merk bijvoorbeeld op hoe de Mode website vestigt de aandacht op het linkerbeeld door het 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 schone typografie en eenvoudige navigatiebalken. Als u de lay-out van het tijdschrift 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’ kan uitzien omdat het raster dat eronder ligt zo zichtbaar is. U kunt dit echter verzachten door u te laten inspireren door ons volgende lay-outtype.

4. Rasterbrekende lay-out

Lay-outs die hun onderliggende raster lijken te doorbreken, 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 op hun navigatiebalk vestigen door deze twee kolommen te laten overlappen.

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

Een ander praktisch gebruik van de rasteronderbrekingslay-out is om de tekst zo over een afbeelding te leggen dat de aandacht op de kopie wordt gevestigd. Wanneer een webpagina tekst over een afbeelding volledig overlapt, kan deze vaak verloren gaan. Maar als je kunt zie uit onderstaand voorbeeld, als de tekst de afbeelding gedeeltelijk overlapt, valt deze veel meer op.

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

Het nadeel van baanbrekende lay-outs is dat ze moeilijk goed te krijgen zijn, vooral wanneer websites responsief moeten zijn. In werkelijkheid zijn de meeste rasterbrekende ontwerpen helemaal niet zo. Er is nog steeds een onderliggend raster en alle schermelementen passen erin. Het is alleen dat het raster veel complexer is en dus niet zo voor de hand liggend. Dat maakt ze moeilijk te ontwerpen.

Hun inherente complexiteit is de reden waarom u ze vaak gebruikt door design-geleide bedrijven zoals ontwerpbureaus of modemerken. Ze tonen een mate van verfijning van het ontwerp die een bepaald publiek aanspreekt.

Als een rasterbrekende lay-out te gecompliceerd aanvoelt voor uw situatie, maar u toch iets innovatiever en ongebruikelijkers wilt doen, overweeg dan een ontwerp op volledig scherm.

5. Lay-out op volledig scherm

Zoals de naam al doet vermoeden, passen indelingen op volledig scherm op één scherm zonder dat de gebruiker hoeft te scrollen. Dat maakt ze ideaal voor verhalen vertellen of presentaties.

Neem bijvoorbeeld, Soorten in stukken. Deze rijke en interactieve presentatie-ervaring vertelt de verhalen van 30 betrokken soorten.

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

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

Niet dat je je strikt aan de aanpak met één scherm moet houden. Op het eerste gezicht is de Roux op de website van Parliament Square lijkt een website op volledig scherm in dezelfde zin als Species in Pieces. Hun prachtige beelden vullen de hele viewport.

Deze website gebruikt het hele kijkvenster om zijn fantastische fotografie te laten zien.

Het is echter mogelijk om verder naar beneden op de pagina te navigeren om extra inhoud te zien. Helaas wijst dat op een potentieel nadeel van deze lay-outbenadering. Gebruikers realiseren zich niet altijd dat ze kunnen scrollen en daardoor waardevolle inhoud kunnen missen.

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

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

6. Afwisselende indeling

Het afwisselende lay-outpatroon is een van de meest voorkomende op internet. U zult merken 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 de afbeelding van kant wisselt. Het eerste blok heeft dus inhoud aan de linkerkant en afbeelding aan de rechterkant, terwijl het volgende blok die lay-out omkeert.

Het is een lay-outbenadering die vooral de voorkeur geniet bij het uitleggen van de kenmerken of voordelen van een product. Bijvoorbeeld softwareproducten zoals Webydo zal de afbeelding gebruiken om een ​​functie te tonen en vervolgens de kopie om uit te leggen hoe het werkt of het voordeel dat het biedt.

Webydo wisselt tekst en afbeeldingen in verschillende inhoudsblokken 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 inhoudszijde van het element alles omvatten, van pictogrammen tot getuigenissen of oproepen tot actie.

Bijvoorbeeld, Convertkit bevat een getuigenis en oproep tot actie naast hun tekst in elk inhoudsblok.

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.

Natuurlijk kunnen uw vereisten anders zijn, 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 veelvoorkomende lay-outbenadering die u overal op internet zult zien.

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 aan 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 kaartgebaseerde lay-outs gebruiken in elke situatie waarin gebruikers uit een lijst moeten kiezen. 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 gebruikt 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 reageren, waarbij het aantal kaarten op rij langzaam afneemt naarmate de beschikbare breedte afneemt.

Er zijn echter een paar kleine nadelen aan de aanpak. Ten eerste werken kaarten het beste wanneer u de afbeelding opneemt. Dat betekent dat als u moeite heeft om geschikte foto’s te vinden voor elk van uw lijstitems, u 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 deze witruimte binnen de kaart of tussen elke rij achterlaten.

Als kaarten verschillende hoeveelheden inhoud bevatten, kan er ruimte tussen de kaarten blijven.

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

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

Desalniettemin is dit een klein probleem, wat de wijdverbreide toepassing van deze lay-outbenadering verklaart.

Een ander even populair ontwerp is de held-beeldlay-out.

8. Hero-indeling

De heldenlay-out 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 brengt de heldenlay-out nog verder door het het ontwerp van de homepage te laten domineren.
Pixave voor MacOS brengt de heldenlay-out nog verder door het het ontwerp van de homepage te laten domineren.

Wat heldenafbeeldingen zo vaak maakt, is dat ze je in staat stellen je afbeeldingen op te maken waarde voorstel op een impactvolle manier direct bij de ingang van uw website.

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

Als u duidelijk moet uitleggen wat u op uw startpagina of bestemmingspagina aanbiedt op een manier die de aandacht trekt, dan is een heldenafbeelding misschien de juiste keuze. Dat is echter waarschijnlijk de omvang van hun gebruik.

Af en toe ziet u de heldenlay-out op de volgende pagina’s. Maar in de meeste gevallen trekt het heldenbeeld gewoon de aandacht weg van meer waardevolle inhoud. Wees dus voorzichtig.

Afgezien van dat, is er een klein nadeel van het gebruik van een heldenlay-out. Ja, ze komen vaak voor, maar gebruikers zijn ermee bekend en ze zijn effectief.

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

9. Indeling van gesplitst scherm

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

Deze site gebruikt de indeling op 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 op gesplitst scherm. De website maakt duidelijk dat hun bedrijf twee kanten heeft: ontwerp en ontwikkeling.

Een soortgelijk voorbeeld is wanneer u gebruikers een duidelijke binaire keuze wilt geven. Een gesplitst scherm is in die situatie heel logisch omdat het het scherm gelijkelijk verdeelt over de twee opties.

Bijvoorbeeld het modellenbureau 62 Beheer gebruikt een gesplitst scherm om gebruikers aan te moedigen te identificeren of ze op zoek zijn naar een mannelijk of vrouwelijk model.

62 Beheer gebruikt een ontwerp met gesplitst scherm om gebruikers aan te moedigen om een ​​keuze te maken tussen twee opties.

Afgezien van dit beperkte aantal toepassingen is er helaas weinig reden om een ​​ontwerp met gesplitst scherm te gebruiken. Het is een relatief beperkende lay-outoptie en er zijn simpelweg niet zoveel scenario’s waar dit passend is. In die gevallen is het echter verreweg de beste keuze.

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

10. Asymmetrische indeling

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 indelen zoals u wilt.

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

Met het uitgangspunt van primaire en secundaire kolommen, kunt u de aanpak op meerdere manieren gebruiken. Bijvoorbeeld, Félix Lesouef gebruikt 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 site te benadrukken.

De Voeden eet website gebruikt de tweede kolom zodat u het volgende gedeelte van de website kunt zien.

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

In veel opzichten is de asymmetrische indeling 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 hoofdpijn van enkele van de andere keuzes.

Hoe u een lay-out kiest

Door dit artikel te lezen, hebt u uw eerste stap gezet in het kiezen van de juiste lay-out voor uw site. Je hebt geleerd wat voor soort opties voor jou beschikbaar zijn.

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

Bekijk in plaats daarvan sites in andere sectoren die gerelateerde soorten inhoud hebben voor uw eigen inhoud. Als je een … hebt brochureware website gericht op een B2B publiek, kijk eens naar andere soortgelijke sites. Evenzo, als u een eCommerce-site heeft, kijk dan naar eCommerce in andere sectoren.

Vanaf daar werkt u samen met uw ontwerper om te experimenteren met een aantal verschillende benaderingen. Laat ze enkele ideeën op basis van verschillende lay-outs bedraden en kijken 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 in de goede richting hebt, probeer dan de opties voor sommige gebruikers te plaatsen en hun reacties te krijgen. Vraag hen niet alleen wat ze verkiezen, maar vraag ze ook of ze kritische inhoud hebben gezien of begrepen hebben waar het bedrijf over ging.

In werkelijkheid zult u merken dat u voor verschillende delen van uw website verschillende lay-outbenaderingen kiest en kiest, en dat is prima. Want als het gaat om de lay-out van een website, is het van cruciaal belang om de juiste op het juiste moment te gebruiken.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map