Als u op zoek bent naar rasters voor website-ontwerp, bent u hier aan het juiste adres. In dit bericht hebben we 5 verschillende ontwerprasters voor websites besproken.
Rasters vormen de ruggengraat van het ontwerp; zij helpen u bij het scheppen van orde en het ordenen van de inhoud van uw ontwerp. We zullen in dit bericht bespreken wat een raster is, waarom je er een zou moeten gebruiken in webdesign en hoe je er een kunt maken.
Je opent je favoriete ontwerpapplicatie en daar is het, een leeg canvas dat je aankijkt. Het is soms een beetje ontmoedigend.
Hoe begin je? Welke positie geef je de kop? Waar plaats je je kunstwerken en foto's? Een raster is alles wat nodig is om te beginnen.
Een raster is een structuur die wordt gebruikt om de inhoud van een ontwerp te ordenen; het brengt afstemming en orde tot stand.
Of u nu een lay-out ontwerpt om af te drukken, zoals een tijdschrift, of foto's en tekst samenvoegt om een landingspagina te maken, een raster helpt u bij het maken van ontwerpkeuzes en het bieden van een positieve gebruikerservaring.
Overweeg hoe dit ontwerp van de bestemmingspagina een raster met 12 kolommen gebruikt om de componenten te ordenen. Door gebruik te maken van een raster vervalt de mogelijkheid om willekeurige beslissingen te nemen.
In plaats van stukken willekeurig te positioneren, weet u door correct gebruik van een raster precies waar u elementen zoals een logo, menu-items, een kop, hoofdtekst en foto's moet plaatsen. Bovendien zal het helpen bij het versnellen van uw ontwerpproces.
In dit artikel vertel ik je alles wat je moet weten over het gebruik van een raster in webdesign. Dus blijf bij me tot het einde.
Inhoud
- Waar komen rasters vandaan?
- Waarom zijn rasters belangrijk in webdesign?
- 5 verschillende soorten rasters
- 4 beste praktijken voor het gebruik van rasters in webdesign
- Rasteranatomie - Wat u moet weten?
- Veelgestelde vragen: Website Design Grids 2024
- 👉 Wat is het beste raster voor webdesign?
- ✅ Wat is een rasterlay-outwebsite?
- 👉 Hoe werken websiterasters?
- 👀 Hoe verbetert een rasterlay-out het webdesign?
- ✅ Waarom gebruiken ontwerpers rasters?
- 👉 Hoeveel kolommen moet een raster hebben in webdesign?
- 💁 Waarom gebruiken we een 12-koloms raster?
- ✔️ Wat is het 12-koloms raster?
- 👉 Hoe gebruik je rastersjablonen?
- Conclusie: Website Design Grids 2024
Waar komen rasters vandaan?
Voordat we ingaan op de invloed van rasters op het huidige webdesign, laten we eerst een korte blik werpen op de geschiedenis van rasters en hoe ze werden gebruikt. Rasters zijn nodig voor de organisatie van typografie.
Rasters werden aanvankelijk gebruikt in manuscriptlay-outs om het type te bestellen. Bedenk hoe geordend deze spread van een vroege tekstpagina is.
Voor een meer diepgaande kijk op de geschiedenis van de boekdrukkunst, zie ons essay over de geschiedenis van grafisch ontwerp.
Snel vooruit naar de industriële revolutie en de komst van massaproductie, waarbij kranten, posters, advertenties en andere gedrukte artikelen in grote hoeveelheden werden geproduceerd.
Ontwerpers houden van Jan Tschichold en Josef Muller-Brockmann creëerde in de twintigste eeuw nieuwe rastersystemen, die zich ontwikkelden tot wat nu bekend staat als The Swiss-Style of The International Typographic Style.
Ze hebben een modulaire structuur opgezet met voldoende witruimte.
Waarom zijn rasters belangrijk in webdesign?
Wat betreft de toepassing ervan op het webontwerpproces, helpt het rastersysteem bij het uitlijnen van paginacomponenten met behulp van opeenvolgende kolommen en rijen.
Als deze hiërarchische basis eenmaal aanwezig is, kunnen we tekst, afbeeldingen en praktisch elk ander ontwerpelement in de interface op een consistente, geordende manier rangschikken.
Bij het ontwerpen voor het web en mobiel zijn de pagina's of interfaces die we ontwikkelen bedoeld om verschillende gebruikersstromen te faciliteren.
Rasters vergemakkelijken het proces van het ontwerpen van wireframes, sjablonen of gestandaardiseerde lay-outs voor vergelijkbare sites, aangezien gebruikersstromen vaak bestaan uit meerdere schermen of vensters die vergelijkbare ontwerpschema's en lay-outs herhalen.
Rasters maken de horizontale en verticale verdeling van pagina's door rijen en kolommen mogelijk. Rastersystemen zijn een systematische techniek die ontwerpers in staat stelt om items op een geordende manier te ordenen en om componenten voor meerdere pagina's of lay-outs modulair te ontwikkelen.
Bovendien vormen rasters een gestandaardiseerde reeks vaste meeteenheden die de grootte, tussenruimte en uitlijning van elk ontwerpelement bepalen.
Rasterlay-outs zijn ontstaan in printontwerp toen ze werden gebruikt in combinatie met typografie om handschrift op papier te ordenen, met name in boeken en kranten.
Dat gezegd hebbende, zijn veel aspecten van hedendaags design afhankelijk van en gedijen op rastergebaseerde lay-outs. Dit omvat webdesign, interface-ontwerp en, belangrijker nog, responsive design.
Voordat we ingaan op hoe en waarom op rasters gebaseerde lay-outs zo'n onschatbare tool zijn voor ons ontwerpproces als webontwikkelaars, laten we eens kijken naar de fysieke componenten waaruit een rastersysteem bestaat.
5 verschillende soorten rasters
Grids zijn ingedeeld in vijf verschillende categorieën. Hoewel sommige meer geschikt zijn voor webdesign dan andere, heb je vrijwel zeker alle vijf ooit in je creatieve carrière gebruikt.
1. Hiërarchisch raster:
Het meest voorkomende gebruik van hiërarchische rasters zit in webdesign. Het doel van deze rasters is om items te prioriteren. Ze zijn misschien meer aanpasbaar, maar ze vertrouwen nog steeds op kolommen, rijen en modules voor het organiseren.
Ze worden op natuurlijke wijze geconstrueerd door eerst de belangrijkste elementen op de pagina te rangschikken en ze vervolgens te omringen met een raster.
Nieuws- en mediagerelateerde websites gebruiken deze rasterstijl vaak om de aandacht op bepaalde artikelen en berichten te vestigen. Bedenk hoe The New York Times' homepage maakt gebruik van een hiërarchisch raster.
2. Modulair raster:
Modulaire rasters zijn vergelijkbaar met kolomrasters, maar bevatten rijen. Terwijl kranten en tijdschriften vaak gebruik maken van modulaire rasters om materiaal te rangschikken, kunnen ze ook worden gebruikt in website- en app-ontwerp, bijvoorbeeld in een productrastersectie.
Overweeg hoe Everlane zijn denimcollectie organiseert met behulp van een modulair raster. De YouTube homepage is een ander voorbeeld van een site die gebruik maakt van een modulair raster.
Hoewel ze een linkerzijbalk bevatten voor frequente links, zoals de secties trending en abonnementen, is al het videomateriaal gestructureerd in een modulair raster met vier kolommen om het aantal video's te maximaliseren dat een kijker kan bekijken tijdens het browsen op zoek naar iets om naar te kijken.
3. Kolomraster:
Kolomrasters helpen bij de organisatie van de tekst, afbeeldingen en afbeeldingen. Voor websites kan het aantal kolommen dat de breedte van een bestemmingspagina beslaat variëren van twee tot twaalf of zelfs zestien.
Tekst en afbeeldingen kunnen zich in een enkele kolom bevinden of zich uitstrekken over meerdere kolommen. De goten zijn de ruimtes tussen kolommen; ze moeten overal even groot zijn.
Kolomrasters hoeven niet symmetrisch te zijn. U kunt bijvoorbeeld een asymmetrisch kolomraster gebruiken waarin bepaalde kolommen smaller zijn dan andere, wat voordelig kan zijn, afhankelijk van de hiërarchie van uw ontwerp.
Asymmetrische kolomrasters worden vaak gebruikt op blogwebsites, waar het primaire materiaal is opgenomen in de grotere tweederdecontainer van de lay-out, terwijl het kleinere derde deel informatie over de blog en de auteur kan weergeven.
Bedenk hoe de startpagina van deze blog gebruik maakt van een asymmetrisch kolomraster.
4. Manuscriptomlijsting:
Alle boeken, kranten en tijdschriften zijn gebouwd op een manuscriptraster. Dit wordt ook wel een enkelkoloms raster genoemd. Dit is een van de eenvoudigste rasterpatronen en is zeer geschikt voor enorme doorlopende blokken tekst en afbeeldingen.
In wezen is het een enorme rechthoekige ruimte binnen de pagina die fungeert als een selectiekader voor de tekst.
5. Basislijnraster:
Een basislijnraster is iets technischer; het wordt vastgesteld door de locatie van de tekst. In wezen verwijst het naar de leiding of ruimte tussen de basislijnen.
Dit raster helpt bij het bieden van een positieve leeservaring voor de lezer, vooral wanneer er veel inhoud te lezen is. Hoewel het van vitaal belang is voor printontwerp, zoals boeklay-outs, is het even belangrijk voor online ontwerp.
Overweeg het effect van regelafstand op de leesbaarheid van een bestemmingspagina. Als de tekst te beknopt is, kan de gebruiker de site volledig verlaten. Zorg voor een passende mix van tekst en witruimte.
4 beste praktijken voor het gebruik van rasters in webdesign
Er zijn verschillende woorden en ideeën om kennis te maken en te begrijpen op het gebied van webdesign, maar niet meer dan de betekenis van rasters in webdesign.
Tussen de verschillende componenten waaruit een rasterstructuur bestaat, de talrijke beschikbare rastertypes en de cognitieve processen betrokken bij het bepalen welk rastertype het beste bij uw inhoud en ontwerp past, komt er veel bij kijken.
1. Houd u aan de regel van derden:
Een ander webdesignconcept is de Rule of Thirds, dat ontwerpers helpt bij het creëren van esthetisch uitgebalanceerde rasterlay-outs en plaatsing van afbeeldingen.
Deze benadering overlapt een raster dat het ontwerpgebied horizontaal en verticaal in drieën verdeelt. Dit verdeelt elke afbeelding of paginasectie/ruimte in negen gelijke segmenten die worden gedefinieerd door de snijpunten van de lijnen.
Volgens de regel van derden zal het plaatsen van "interessante objecten" op de "derde" van een afbeelding de aandacht van de gebruiker op een krachtigere, esthetisch aantrekkelijkere manier richten.
Bij webdesign gebruiken ontwerpers vaak de regel van derden om hen te helpen bij het maken van enkele van de meest kritische raster- en lay-outkeuzes.
2. Respecteer de gulden snede:
Talloze ontwerpers gebruiken een concept dat bekend staat als de gulden snede om de schaal, balans en lay-out van hun rasterontwerpen te optimaliseren. De gulden Snede is een verhouding die gelijk is aan 1.6180 in zijn eenvoudigste vorm.
De gulden rechthoek is een rechthoek waarvan de lengte 1.6180 keer de breedte is, gebaseerd op de gulden snede. Dit geeft aan dat als de breedte van het element 100px is, de lengte 161.80px zal zijn.
Dit geldt voor de breedte en lengte van aangrenzende afbeeldingen, objecten of vormen, maar ook voor de ontwikkeling van een enkele vorm of element.
Door gebruik te maken van de gulden snede kunnen ontwerpers onder andere bepalen hoe de beschikbare horizontale ruimte op de pagina wordt opgesplitst en hoeveel ruimte er is voor en rond elk stuk.
Een voorbeeld waarin dit kan gebeuren, is tijdens het ontwikkelen van de heldensectie van een website. Als u een lay-out over de volledige breedte kiest en deze verticaal in twee delen verdeelt: de heldenafbeelding en de heldentekst.
Bovendien moet u beslissen over de afbeeldingsgrootte, tekstgrootte, enzovoort in deze micro-ontwerpprocedure.
U moet echter eerst beslissen over een kolomverhouding, die u zal helpen bij het bepalen van de grootte van uw afbeelding en lettertype, evenals welke elementen u meer of minder wilt benadrukken, of dat u op elk een gelijke focus wilt leggen.
Dit is wanneer de beslissing om het heldengedeelte te splitsen in termen van welk onderdeel groter of prominenter moet zijn, in het spel komt. Dit is waar de gulden snede nuttig is.
Deze richtlijn houdt rekening met verschillende elementen, waaronder de paginabreedte, de inhoudsgrootte en het aantal en de grootte van modules die de inhoud op een raster nodig heeft.
In termen van toegankelijkheid leidt de Gulden Snede de aandacht van de gebruiker naar bepaalde punten of locaties op een scherm, en dat is precies wat ontwerpers willen doen bij het vaststellen en implementeren van de informatiehiërarchie van hun inhoud en ontwerpschema.
3. Maak ruimte voor witruimte:
Als webdesigners begrijpen we hoe kritisch witruimte is in termen van leesbaarheid, informatiehiërarchie, schaalbaarheid en algemene ademruimte rond en tussen ontwerpcomponenten.
Gezien de cruciale rol van witruimte bij het ontwerp van de lay-out, is het normaal dat de website en lay-outrasters deze gebruiken.
Rasterlay-outs worden in wezen niet alleen bepaald door de breedte en hoogte van hun kolommen en rijen, maar ook door de breedte en hoogte van de witruimte ertussen, ook wel spatiëring genoemd.
Een op rasters gebaseerde ontwerpmethode die webontwerpers vaak gebruiken, staat bijvoorbeeld bekend als het 8pt Grid System, een begrip dat is vastgesteld door de Material Design-richtlijnen van Google.
De Material Design-methode maakt gebruik van een raster van 8 bij 8 pt. Elk element op de website zal in de praktijk veelvouden/deelbaar zijn door acht.
Het fascinerende is dat deze regel niet alleen van toepassing is op rasteritems zoals foto's, knoppen of tekst, maar ook op witruimte-eenheden, die veelvouden van acht moeten zijn.
Daarom moet u bij het overwegen hoe u uw kolommen of rijen moet plaatsen, ook de hoeveelheid witruimte kwantificeren en specificeren, in dit geval in veelvouden van acht.
Dit laat zien hoe kritisch witruimte is in rasterontwerp, tot het punt dat de afmetingen en vereisten net zo kritisch zijn als kolommen en rijen.
De homepage van Elementor Experts illustreert hoe krachtig witruimte kan zijn, met name op de homepage van een website.
Omdat het uiteindelijke doel van de homepage is om kijkers te dwingen om te handelen en meer te weten te komen over het Experts-platform, ondersteunt witruimte dit proces door prioriteit te geven aan informatie.
Dit houdt in dat, aangezien de waardepropositie van het platform zo'n prominente plaats en 'time to shine' krijgt op de homepage, websitebezoekers onmiddellijk de toegevoegde waarde begrijpen die ze gaan ervaren.
4. Eergevoelig ontwerp:
Responsief ontwerp verwijst naar het vermogen van de lay-out en inhoud van een pagina of site om zich aan te passen aan meerdere apparaten en browserformaten. Dit houdt in dat wanneer de schermgrootte varieert, het aantal kolommen en natuurlijk hun breedte ook zal variëren.
Er is echter een intrinsiek onderscheid tussen standaard ontwerprasters en responsieve rasters.
Hoewel ontwerprasters zijn ingesteld op een basislijnraster, zijn responsieve rasters flexibel, waardoor rasterkolommen zichzelf kunnen verkleinen en verplaatsen, afhankelijk van het kijkvenster van de gebruiker.
Bij een vast raster brengt het verkleinen van de schermgrootte je automatisch naar het volgende breekpunt, en de zijmarges worden ook automatisch kleiner totdat het volgende breekpunt wordt bereikt.
Een responsief raster, of vloeiend raster, is wat u ziet wanneer items dynamisch veranderen als reactie op het krimpen van de browser/het scherm. Responsieve rasters zullen uw materiaal logisch op één lijn brengen en organiseren.
Dit houdt in dat wanneer de viewport kleiner wordt, de inhoud van de tegels en het raster ook proportioneel zal krimpen.
Rasteranatomie - Wat u moet weten?
Alle rasters in website-ontwerp, ongeacht hun grootte of complexiteit, hebben bepaalde componenten die ze kenmerken als rasterlay-outs:
1. Marges:
Marges zijn de negatieve ruimte tussen het formaat en de buitenrand van de inhoud, ook wel bekend als 'buitengoten'. Op mobiel zijn de zijmarges doorgaans 20-30px breed en variëren aanzienlijk tussen desktop en mobiel.
Margin is misschien bekend met HTML & CSS-jargon, waar het wordt gebruikt als een eigenschap om ruimte rond een ontwerpelement of container te genereren. Houd er rekening mee dat de grootte van een marge geen invloed heeft op de grootte van de aangrenzende tekst.
Het specificeert alleen de hoeveelheid ruimte rond het element, wat in de context van lay-outrasters expliciet verwijst naar de ruimte tussen het formaat en de buitenrand van de inhoud.
2. Dakgoten:
Dakgoten zijn de lijnen die de kolommen en rijen in afzonderlijke eenheden verdelen. 20px is een vrij typische gootmaat. Het doel van goten is om negatieve ruimte (van elke grootte) tussen kolommen en rijen te creëren.
In de eenvoudigste zin zijn goten het gebied tussen kolommen en rijen. Dakgoten zijn vooral belangrijk in metselwerklay-outs, waar de gootbreedte een van de meest kritische elementen is.
3. Modules:
Modules zijn de ruimtevullende eenheden gevormd door de kruising van rijen en kolommen. Modules, of inhoudsmodules, zoals ze vaak worden genoemd, zijn de bouwstenen van een pagina, aangezien elk ontwerpelement (tekst, afbeeldingen en knoppen bijvoorbeeld) past in de modules die worden geproduceerd door de rechthoekige patronen in een raster.
4. Rijen:
Zoals u wellicht aanneemt, zijn rijen de horizontale delen van het raster. Verrassend genoeg ziet webdesign vaak het belang van rijen in een raster over het hoofd. Dit is echter geen geweldige gewoonte.
5. Kolommen:
Kolommen zijn verticale stukken die de hoogte van het inhoudsgebied overspannen en worden beschouwd als de 'bouwstenen' van het raster. Wat kolommen onderscheidend maakt, is dat hoe meer kolommen in een raster, hoe flexibeler het raster wordt.
We zullen hier binnenkort nader op ingaan. Hoewel de kolombreedte altijd aan de ontwerper is, is het gebruikelijk dat 12 kolommen worden gebruikt op desktop, 8 op een tablet en 4 op mobiel.
De meeste rasters hebben kolombreedten van 60–80px. Kolombreedte heeft een aanzienlijke invloed op de breedte van uw echte inhoud.
Veelgestelde vragen: Website-ontwerprasters 2024
👉 Wat is het beste raster voor webdesign?
Bootstrap is een gelikt, rechttoe rechtaan en krachtig front-end framework voor mobiele telefoons dat webontwikkeling sneller en eenvoudiger maakt. Voor ons is dit de meest populaire keuze. Vaak twaalf kolommen met streepjes. Een gestandaardiseerde en eenvoudige methode.
✅ Wat is een rasterlay-outwebsite?
Het websiteraster is een techniek om het materiaal op een pagina te ordenen en uit te lijnen. Het dient als het skelet of het fundamentele raamwerk van uw gebruikersinterface. Website-rasters helpen ontwerpers bij het maken van ontwerpkeuzes en zorgen voor een positieve gebruikerservaring.
👉 Hoe werken websiterasters?
Rastersystemen zijn onzichtbare kaders die worden gebruikt in webdesign en die alle componenten op een pagina groeperen. Het raster fungeert als een raamwerk of armatuur waaromheen een ontwerper visuele componenten (afbeeldingen, glyphs, alinea's, enz.) Op een logische, gemakkelijk opneembare manier kan rangschikken.
👀 Hoe verbetert een rasterlay-out het webdesign?
Rasters kunnen uw ontwerptijd aanzienlijk verkorten en verlengen door als richtlijn te dienen voor het plaatsen, positioneren en schalen van objecten. In plaats van willekeurig onderdelen te plaatsen totdat u een aangename compositie krijgt, zou een raster u moeten helpen bij het vinden van een natuurlijke oplossing.
✅ Waarom gebruiken ontwerpers rasters?
Rasters maken het eenvoudiger voor ontwerpers om samen te werken aan ideeën door te schetsen waar stukken moeten worden geplaatst. Rastersystemen helpen bij het ontkoppelen van interface-ontwerpwerk door verschillende ontwerpers in staat te stellen aan verschillende componenten van de lay-out te werken, terwijl ze er zeker van blijven dat hun werk soepel en consistent zal worden geïntegreerd.
👉 Hoeveel kolommen moet een raster hebben in webdesign?
Hoewel er geen formele noodzaak is voor het aantal kolommen, gebruiken de meeste websiterasterarchitecturen een 12-kolomsraster. Bovendien bevat een websiteraster regelmatige ruimte tussen kolommen, ook wel goten genoemd, en tussenruimte buiten het raster wordt marges genoemd.
💁 Waarom gebruiken we een 12-koloms raster?
De meeste Bootstrap-versies hebben slechts 12 kolommen nodig om aan het volgende te voldoen: Het maken van lay-outs is vereenvoudigd. Mobielvriendelijke indeling. Proportionele blokken om de symmetrie te behouden.
✔️ Wat is het 12-koloms raster?
Voor websites kunnen ontwerpers tussen de twee en twaalf of zelfs zestien kolommen gebruiken om de breedte van een bestemmingspagina te dekken. Ze kunnen tekst en afbeeldingen in een enkele kolom ordenen of over meerdere kolommen.
👉 Hoe gebruik je rastersjablonen?
Het attribuut grid-template-areas definieert de gebieden van de gridlay-out. U kunt rasteritems een naam geven door ernaar te verwijzen in de eigenschap grid-template-areas via de eigenschap grid-area. Apostrofs duiden elke regio aan. Gebruik een puntsymbool om te verwijzen naar een rasterobject dat geen naam heeft.
Quick Links:
Conclusie: Website Design Grids 2024
Nu u begrijpt waarom rasters van cruciaal belang zijn bij webdesign en hoe u ze op uw website kunt gebruiken, is het tijd om te beginnen met meten en uitlijnen.
Houd er rekening mee dat dit principe van toepassing is op elk ontwerpelement: het horizontaal en verticaal uitlijnen van widgets en componenten, het uitlijnen van tekstelementen op een basislijn en het correct centreren van alle soorten inhoud op de website.
Uw ontwerpproces en het eindproduct zullen zeer op prijs worden gesteld, en we zijn benieuwd wat u in petto heeft.
