Website-indeling is het proces waarbij een webpagina wordt gemaakt door inhoud te coderen en te structureren, zodat deze kan worden weergegeven en interactief is in een webbrowser. Het gaat om het stylen van tekst, afbeeldingen, video's, links, formulieren en andere elementen op een pagina om een samenhangende en boeiende visuele ervaring voor gebruikers te creëren.
Het ontwerp en de lay-out van de site omvatten de volgende hoofdaspecten:
-
HTML (Hypertext Markup-taal):
- HTML wordt gebruikt om de structuur van een webpagina te creëren. Het definieert de koppen, alinea's, lijsten, afbeeldingen, links en andere elementen die de kern vormen van de inhoud op een pagina.
-
CSS (cascaderende stijlbladen):
- CSS wordt gebruikt om HTML-elementen op te maken en hun uiterlijk te bepalen. Met CSS kunt u kleuren, lettertypen, grootten en plaatsing van elementen op de pagina instellen.
-
Website-indeling. Reagerend ontwerp:
- Responsief ontwerp omvat het gebruik van CSS en andere technologieën om webpagina's te maken die correct kunnen worden weergegeven op verschillende apparaten en schermresoluties, zoals computers, tablets en smartphones.
-
javascript:
- JavaScript kan worden gebruikt om interactiviteit aan webpagina's toe te voegen. Met deze programmeertaal kunt u dynamische elementen maken, communiceren met gebruikers en de pagina-inhoud wijzigen zonder dat u deze opnieuw hoeft te laden.
-
Website-indeling. Compatibiliteit tussen browsers:
- Bij de lay-out wordt ook rekening gehouden met compatibiliteit tussen browsers, zodat webpagina's correct worden weergegeven in verschillende webbrowsers (bijvoorbeeld Google Chrome, Mozilla Firefox, Safari, Microsoft Edge).
-
имизация оизводительности:
- Een belangrijk aspect van de lay-out is prestatie-optimalisatie, zoals het verkleinen van afbeeldingen, het gebruik van caching en andere technieken om ervoor te zorgen dat pagina's snel worden geladen.
Boeklay-outgeneratoren: 5 GRATIS tools.
Om ervoor te zorgen dat u een website krijgt die uw bezoekers niet zullen verlaten, hebben we deze handleiding samengesteld ontwerp basisprincipes website-indeling. We leggen de basisprincipes uit van wat er moet gebeuren goed design, belangrijke technieken voor het creëren van een effectieve website-indeling en de meest voorkomende typen website-indelingen.
Doelen. Website-indeling
Hoe eenvoudig het ook mag klinken, het enige doel van de lay-out van een website is het ondersteunen van de doelstellingen van de website, of het nu gaat om conversie, узнаваемость, amusement of ander doel. Maar de doelpunten website komen tot uiting in de inhoud, en het lay-outontwerp beschrijft hoe u die inhoud effectief kunt leveren. Dat gezegd hebbende, zijn hier enkele veelvoorkomende functies die een website-indeling kan uitvoeren:
- Informatieweergave . Een goede website-indeling organiseert informatie op een manier die een voor de hand liggende volgorde volgt, gemakkelijk te scannen is, gewicht geeft aan de belangrijkste elementen en ervoor zorgt dat gebruikerstools intuïtief te vinden en te gebruiken zijn.
- Gebruikersbetrokkenheid: Een goede website-indeling maakt de pagina visueel aantrekkelijk, vestigt de aandacht van de gebruiker op interessante plaatsen en moedigt hem aan om door de site te blijven navigeren.
- merknaam: Een goede website-indeling speelt ook een rol bij branding, waarbij spatiëring, uitlijning en schaling worden gebruikt om bij het merk van het bedrijf te passen.
Deze doelstellingen op hoog niveau zijn de drijvende kracht achter het ontwerp van de website-indeling, maar voordat we naar specifieke website-indelingen kijken, laten we eerst bespreken hoe deze doelen in meer detail kunnen worden geïmplementeerd.
Het proces van het ontwikkelen van een website-indeling. Website-indeling
Het lay-outproces van de website moet vroeg in het creatieproces van de website plaatsvinden, wat enige tijd is nadat u uw websitestrategie heeft ontwikkeld, maar voordat u in een grafisch programma springt om de interface te maken.
De lay-out van een website wordt gevisualiseerd met behulp van een wireframe, een eenvoudige wireframe-kaart die laat zien hoe de inhoud in elkaar past. Het is belangrijk om wireframe-ontwerp te onderscheiden van webontwerp, dat is het geheel het proces van het creëren van interface-graphics en andere visuele elementen voor een webpagina. Het ontwerp van de website-indeling is een groot onderdeel van webontwerp en het begint met het wireframe. Idealiter zou het visuele ontwerp moeten aansluiten bij de lay-out van het draadframe, zodat grafische elementen strategisch worden geplaatst en niet gebaseerd zijn op vluchtige esthetische voorkeuren.
Hierna volgen hier de stappen om een website-indeling te maken:
-
Website-indeling. Definieer alle inhoudsgebieden.
Wireframes vertegenwoordigen inhoud doorgaans als eenvoudige vierkanten en rechthoeken, of het nu een afbeelding of een tekstblok is. Het is belangrijk om van tevoren te weten hoeveel inhoud je hebt en wat de geschatte grootte van elk stuk is (of het aantal woorden), zodat je de elementen nauwkeurig in elkaar kunt passen.
-
Maak een reeks wireframes en prototypes.
De lay-out kan zo eenvoudig zijn als tekenen met pen en papier, maar er zijn ook veel programma's beschikbaar (bijv. grillig ), ontworpen om het proces te optimaliseren. Omdat wireframes geen gedetailleerde kunstwerken hoeven te zijn, kunt u er meerdere tegelijk maken. Zelfs als je verliefd wordt op je eerste idee, zou je meer wireframes moeten ontwikkelen om je verbeeldingskracht te vergroten en jezelf opties te geven. Zonder fraaie afbeeldingen die u afleiden, kunt u zich concentreren op de gebruikerservaring en ontdekken welke lay-out voor hen het meest intuïtief is. Zorg ervoor dat u rekening houdt met alle schermformaten; het is aan te raden om met een lay-out te beginnen mobiele toestellen, en bouw het dan op.
-
Test, verzamel feedback en herhaal.
Zodra u een paar opties heeft, zorg ervoor dat u feedback verzamelt van uw collega's. Toepassingen zoals invision и Figma, kunt u interactieve prototypes maken, zodat u eenvoudig knoppen en navigatie kunt testen zonder een echte webpagina te maken. Als proefgebruikers zichzelf op het scherm opnemen terwijl ze door het prototype navigeren, kan dit UX-struikelblokken aan het licht brengen. Zodra u een paar aantekeningen heeft, gaat u terug naar stap twee en herhaalt u dit totdat u het perfecte resultaat krijgt.
Hoewel dit de letterlijke stappen zijn om een website-indeling te maken, kan het lastig zijn om te begrijpen wat een indeling wel of niet effectief maakt als je net begint. In het volgende gedeelte bekijken we specifieke methoden die u kunt gebruiken om ontwerpbeslissingen te nemen.
Belangrijke methoden voor het creëren van effectieve. Website-indeling
Het ontwerpen van website-indelingen is een praktijk die al tientallen jaren bestaat, wat betekent dat er door de jaren heen een aantal ontwerpconventies en -principes zijn opgesteld om ontwerpers in hun vak te begeleiden. Hieronder staan enkele van de nuttigste van deze technieken:
Visuele hiërarchie
Visuele hiërarchie is een manier om zes ontwerpelementen te stileren om het contrast te vergroten, zodat bepaalde delen van de inhoud boven andere uitsteken. Om dit te bereiken zijn de belangrijkste delen van de lay-out de delen die de gebruiker onmiddellijk moet identificeren, afhankelijk van het doel van de pagina. Ze bevatten meestal krantenkoppen, waardevoorstellen, oproepen tot actie en gebruikerstools zoals navigatie.
Visuele hiërarchie kan zich op veel manieren manifesteren, bijvoorbeeld door het lettertype te kiezen (grootte, gewicht en zelfs verschillende lettertypecombinaties), belangrijke elementen hoger op de pagina uit te lijnen of complementaire kleuren te gebruiken om elementen te markeren.
Patronen lezen. Website-indeling
Leespatronen beschrijven de meest gebruikelijke manieren om pagina's te scannen door gebruikers en worden weergegeven als gerichte lijnen (vectoren, voor wiskundigen). Omdat uit onderzoek blijkt dat 79% van de websitebezoekers de pagina alleen maar vluchtig bekijkt, is het belangrijk om het scannen zo eenvoudig mogelijk te maken. Een effectieve manier om dit te doen is door de lay-out te ontwerpen met een specifiek leespatroon in gedachten.
Het opnemen van leespatronen in uw lay-outs houdt in dat u elementen strategisch langs de zichtlijnen van de kijker plaatst. De meest voorkomende patronen om te overwegen zijn het Z-patroon (zigzagvector; handig voor lay-outs met veel afbeeldingen) en het F-patroon (lijnvector; handig voor lay-outs met veel tekst).
Boven of onder de vouw. Website-indeling
Bij webontwerp is de "vouw" de lijn waarop een webpagina wordt afgesneden vanwege beperkingen op de schermgrootte. Inhoud die zichtbaar is wanneer een pagina wordt geladen, wordt ‘boven de pagina’ genoemd, terwijl inhoud waarbij gebruikers naar beneden moeten scrollen om deze te openen, ‘onderaan de pagina’ wordt genoemd.
Als het gaat om het ontwerp van de website-indeling, moet de belangrijkste en/of meest aantrekkelijke inhoud (zoals de waardepropositie en call-to-action) veilig bovenaan de pagina worden geplaatst, zodat gebruikers er niet naar hoeven te zoeken. Deze ruimte is 1000 x 600 pixels voor de meeste schermformaten. Dat gezegd hebbende, kunnen ontwerpers de vouw ook gebruiken om intrigerende afbeeldingen af te snijden en te kopiëren om gebruikers te verleiden naar beneden te scrollen terwijl ze hun interactie met de webpagina voortzetten.
Rastersystemen. Website-indeling
Een rastersysteem is een indeling gebaseerd op harde metingen en richtlijnen. Het raster bestaat uit kolommen (aangewezen ruimtes om inhoud te plaatsen) en goten (de lege ruimtes tussen de kolommen).
Lege ruimte
Witte ruimte, ook wel negatieve ruimte genoemd, is eenvoudigweg een gebied van een ontwerp zonder enige inhoud, d.w.z. lege ruimte. Hoewel het gemakkelijk over het hoofd wordt gezien en vaak verleidelijk is om deze met inhoud te vullen, kan witruimte het belangrijkst zijn bezit in de website-indeling.
Deze website-mockup trekt de aandacht met effectieve witruimte.
Bedenk eens hoe een regel tekst op een lege pagina veel effectiever uw aandacht zal trekken dan op een pagina vol met inhoud. Voldoende witruimte creëert nadruk, waardoor de hele compositie minder moeilijk leesbaar wordt. In tegenstelling tot gedrukte pagina's is de lengte van een webpagina niet beperkt, waardoor ontwerpers veel meer vrijheid krijgen in de strategie en het gebruik van witruimte.
Veel voorkomende typen website-indelingen. Website-indeling
Website-indelingen worden zelden helemaal opnieuw gemaakt; Sterker nog, er wordt vaak gezegd dat dit niet het geval is. De meeste moderne websites zijn gebaseerd op algemene lay-outschema's die consistent, met kleine variaties, op internet worden gebruikt.
Hoewel een zekere mate van originaliteit belangrijk is in elk ontwerp, zijn websites zo ontworpen dat ze onmiddellijk begrepen en gebruikt kunnen worden. Dus als gebruikers in de loop der jaren gewend raken aan bepaalde soorten lay-outs, is het logisch dat ontwerpers zich daaraan houden. Houd er rekening mee dat de lay-out uiteindelijk praktisch moet zijn, en dat hoe minder tijd gebruikers besteden aan het leren van een nieuwe lay-out, hoe meer tijd ze zullen besteden aan het daadwerkelijk gebruiken van de site. Afgezien daarvan zijn hier enkele van de meest voorkomende website-indelingen:
Indeling met enkele kolom
Een lay-out met één kolom is een lay-out waarbij de inhoud opeenvolgend in één kolom wordt geplaatst, vaak gecentreerd.
Veel webpagina-indelingen beginnen hier, aangezien mobile-first-ontwerp al lang wordt aanbevolen en mobiele websites vanwege groottebeperkingen vaak in één kolom worden opgemaakt. Deze lay-out is vooral handig voor landingspagina's of kanaalgebaseerde inhoud, zoals sociale netwerken en blogs omdat het het aantal pagina-elementen vermindert en het scrollen bevordert.
Indeling met twee kolommen. Website-indeling
In een lay-out met twee kolommen, soms in een gesplitste schermweergave, wordt de inhoud naast elkaar weergegeven.
Dit is handig om dichotomieën tussen twee elementen te benadrukken (bijvoorbeeld verschillende doelgroepen op kledingsites, stijl voor/na service of dubbele opties prijzen). Het is ook handig voor het balanceren van afbeeldingen met kopiëren, en ondersteunt op subtiele wijze het lezen van Z-patronen.
Indeling met meerdere kolommen. Website-indeling
Een lay-out met meerdere kolommen wordt vaak een lay-out voor kranten of tijdschriften genoemd. Het past zware website-inhoud op één pagina.
Een raster wordt doorgaans gebruikt om de orde en hiërarchie te behouden door een bredere kolomruimte te bieden voor belangrijkere elementen, zoals de hoofdinhoud, terwijl minder belangrijke elementen, zoals een navigatiemenu, zijbalk of banneradvertentie, minder evenredige ruimte krijgen. Dit is handig voor startpagina's van bedrijven, afbeeldingen- of videosites, online publicaties, aangepaste dashboards en winkelwebsites: websites met veel inhoud en categorieën waar gebruikers naartoe kunnen worden verwezen.
Asymmetrische indeling. Website-indeling
Er is sprake van een asymmetrische lay-out wanneer elementen op ongelijke schaal en nabijheid zijn gerangschikt - simpel gezegd: geen symmetrisch. Maar hoewel het het tegenovergestelde is van een rastersysteem, betekent asymmetrie niet chaos.
Balans is belangrijk in elk ontwerp, en een asymmetrische lay-out bereikt dit eenvoudigweg op onverwachte manieren, zoals het combineren van grootschalige weergave aan de ene kant met veel kleinere elementen aan de andere kant. Dit is handig om nadruk te leggen door sommige elementen (via letterlijke grootte, kleur of plaatsing) boven andere te overdrijven. Het kan ook aangepaste leespatronen ondersteunen (in tegenstelling tot de eerder genoemde reguliere).
Merken die het zich kunnen veroorloven een onconventionele ontwerpbenadering te hanteren, zullen deze lay-outstijl ideaal vinden, dat wil zeggen websites die zich richten op kunst, een avontuurlijk publiek hebben of een innovatief of baanbrekend product onder de aandacht willen brengen.
Website layout volledig opgemaakt
Een geweldig ontwerp van de website-indeling maakt het niet alleen visueel aantrekkelijk, maar maakt het ook intuïtief. Dit is de eerste stap om een eerste indruk op gebruikers te maken en hen te verleiden om te blijven en alle inhoud van uw site te bekijken. Website-indeling
Hoewel deze basisprincipes van het ontwerp van de website-indeling u een startpunt kunnen bieden, moet u ernaar streven al het mogelijke te doen om uw sitebezoekers een uitzonderlijke ervaring te bieden. En de beste manier om een modern website-indelingsontwerp te krijgen, is door samen te werken met een professionele ontwerper.
АЗБУКА «
Laat een reactie achter