Alles over rastersystemen

Nu je alles weet over kleur, typografie en verschillende dingen die je zou moeten ondernemen voordat je een ontwerpproject start, is het tijd om te beginnen met vuil worden met een paar basisprincipes van het werken met rasters in je ontwerpen.
Met rasters kunt u een solide structuur en vorm inbouwen in uw ontwerpen. Net zoals we naar typografische hiërarchieën en ritme keken, kunnen we dezelfde gevoelens bewerkstelligen door een rasterstructuur te gebruiken. Net als bij codering zijn er aanbevolen manieren om modules en secties van code te organiseren, en een rastersysteem kan op dezelfde manier helpen bij het ontwerpen voor het web.


The Grid System-website

Grids zijn niet alleen nuttig voor ons als ontwerpers of ontwikkelaars - ze zijn ook goed voor de gebruiker. Tijdens deze sessie heb ik het belang benadrukt van het creëren van een goede gebruikerservaring en een goede gebruikerservaring door je ontwerpen - de gebruiker is tenslotte om je inhoud te consumeren en je wilt het een even goede ervaring voor ze maken als jij kan. Het hebben van een solide rastersysteem om te gebruiken in uw ontwerpen (en vervolgens door te voeren naar de ontwikkelingsfase) stelt u in staat om dat te doen, door consistentie en vertrouwdheid (en dus het opbouwen van vertrouwen) in uw ontwerp te creëren.

Als uw website goed is ontworpen, helpt een raster u dat vertrouwen verder bij uw gebruikers te projecteren - hoe bewust of onderbewust die projectie ook is. Het gebruik van een rastersysteem betekent niet dat uw ontwerpen ook saai of boxy moeten worden. Net zoals het is gezegd met responsief webdesign, is de verantwoordelijkheid bij u om een ​​ontwerp te maken dat uniek is en iets anders heeft - en een rastersysteem moet worden gezien als iets dat in staat stellen om dat te doen, in plaats van beperken u.


Wat is een rastersysteem?

... een structuur bestaande uit een reeks horizontale en verticale lijnen, gebruikt om inhoud te rangschikken.

In de meest elementaire termen is een rastersysteem een ​​structuur die bestaat uit een reeks horizontale en verticale lijnen die elkaar snijden en vervolgens worden gebruikt om inhoud te rangschikken. In nog meer basale termen (waardoor het gemakkelijker te begrijpen is!) Is een rastersysteem een ​​manier om een ​​systeem te bieden waarmee ontwerpers kunnen werken om inhoud en beeldmateriaal op een veel leesbaarder manier te structureren en te presenteren.

Rastersystemen worden al lang gebruikt in gedrukte publicaties, maar met hun introductie in ontwerpen voor het web en de vele, vele CSS-rasterframeworks die sindsdien zijn opgedoken, worden ze nu bijna als standaard gebruikt.

Het gebruik van een rastersysteem in uw ontwerpen is een manier om een ​​consistentieniveau te bereiken dat anders buitengewoon moeilijk te beheersen en in uw ontwerpen zou zijn. Nogmaals, uniformiteit en consistentie zijn de sleutel tot het maken van een website die uw gebruikers gemakkelijk kunnen vinden, lezen en begrijpen. Een goede gebruikerservaring wordt gecreëerd door contact te maken met uw gebruiker en vertrouwd te maken met hen - en een rastersysteem helpt u dat te doen door een solide basis te bieden waarop u uw ontwerp kunt laten groeien..

Een voorbeeldraster, de Gerstner, op de Gridset App-website.

Hoewel uw rastersysteem uiteindelijk onzichtbaar is voor uw eindgebruiker, kunt u het gebruiken om u te helpen bij het maken van lay-outs voor uw ontwerpen. Maar zoals alle regels bij het ontwerpen (en soms bij het ontwikkelen) van regels zijn gemaakt om te worden verbroken. Je hoeft niet per se bij je netvorming te blijven, maar je moet wel rastersystemen begrijpen, voordat je je kunt committeren aan het overtreden van de regels.

Op het web hebben we veel CSS-rastervakken beschikbaar, evenals vele tools die beschikbaar zijn om te rollen met onze eigen rastersystemen die we zelf kunnen maken. Het is helemaal aan jou welke van deze je zou kiezen om te gebruiken bij het ontwerpen - een CSS-raamwerk kan je bijvoorbeeld als ontwikkelaar bekend voorkomen, dus misschien wil je ook proberen er mee te ontwerpen - maar laten we eens kijken waarom ontwerpen met een rastersysteem is een goede gewoonte, en helpt ook om je te bedenken met welk rastersysteem je verder kunt gaan.

Voordelen van het gebruik van rastersystemen

Er zijn veel voordelen aan het gebruik van rastersystemen - deze kunnen starten wanneer u de website voor het eerst ontwerpt, maar kunnen ook van pas komen als u doorgaat naar de bouw- en ontwikkelingsstadia, evenals bij het beheren van zowel het ontwerp als de bouw van de website in de toekomst..

Het goede aan rastersystemen is dat ze u in staat stellen om in verhoudingen te ontwerpen, balancerend tussen alle verschillende elementen die u in uw ontwerp zou kunnen hebben. Een rastersysteem moet altijd zeer flexibel zijn, zodat u het bijna naar uw behoeften kunt draaien wanneer u de verschillende delen van uw website ontwerpt.

Een rasteroverlay met hulplijnen in Photoshop.

Het gebruik van een rastersysteem in uw ontwerp zorgt ook voor dat gevoel van uniformiteit en vertrouwdheid - terwijl het voor sommige sites mogelijk is om enorm verschillende paginaontwerpen te hebben, voor velen is dit niet het geval en wilt u een uniforme en meer gestructureerde voel aan de hoofdlay-out. Dit maakt het ook een stuk eenvoudiger wanneer u het ontwerp gaat coderen, omdat het betekent dat u de uniforme elementen in uw ontwerp kunt kiezen en dit modulaire effect op uw code en CSS-structuur kunt toepassen.

Nadelen van het gebruik van rastersystemen

Laten we voor het evenwicht eens kijken naar wat nadelen ...

Ten eerste kunnen veel mensen - met name degenen die nieuw zijn bij het ontwerpen of ontwerpen met roosters - vinden dat roostersystemen behoorlijk verstikken en de creativiteit beperken. Helaas kan dit soms gebeuren en - als je de woordspeling vergeeft - heb je soms het gevoel alsof je buiten de kaders wordt gedacht en in plaats daarvan heel duidelijke, klinische ontwerpen maakt. In dergelijke gevallen zou ik u willen aanmoedigen om een ​​stap terug te doen van het raster - in plaats daarvan spelen met de elementen op een pagina totdat ze het gevoel hebben dat ze op de juiste plaats lijken te zijn en vervolgens overschakelen naar kijken naar je raster overlapt je ontwerp (we zullen daar wat meer over vertellen) en kijken hoe je je ideeën kunt laten werken met de rasterstructuur die je hebt. Als het niet in overeenstemming is met dat rasterontwerp, is het misschien tijd om in plaats daarvan met een ander rastersysteem of ontwerp te beginnen.

Rastersystemen zijn ook echt, echt waar hard. Ze nemen niet alleen veel wilskracht om je eerste paar keer dat je ze gebruikt je hoofd rond te krijgen (hoewel je waarschijnlijk een "aha!" -Moment zult hebben, niet lang na wat goed oefenen en spelen met hen) maar ze kunnen ook soms betrekken veel wiskunde en berekeningen. Ik ben niet iemand die ooit goed kan omgaan met veel wiskunde - dus die kant van dingen die ik persoonlijk heel moeilijk kan vinden. Het is ook heel moeilijk om simpelweg het hoofd te vinden op het concept van rasters en hoe ze je ontwerp kunnen helpen - maar hopelijk zul je het effect snel zien na gebruik in je ontwerpen, net zoals je waarschijnlijk hebt gedaan met je ontwikkelingspraktijken ergens langs de lijn. En hoewel rasters verdomd hard werken zijn, zijn ze zeker de moeite waard voor het eindresultaat.


Rastersystemen gebruiken in uw ontwerpen

Hier zijn een paar eenvoudige, praktische tips voor het gebruik van rastersystemen in uw ontwerpen:

  • Stel een overlay van uw raster in op uw ontwerp. Als je het prettig vindt om in de browser te ontwerpen met je CSS-raamwerk naar keuze (een voorvertoningvoorbeeld of een van je eigen) dan is dat prima - maar anders zou ik altijd aanraden om een ​​overlay van je rastersysteem te maken voor je ontwerp. Of u nu in Photoshop of een ander favoriet grafisch programma bent, stel een bovenste laag in die uw raster weergeeft en op zijn plaats vergrendelt. Op die manier is het altijd voor u beschikbaar om aan en uit te schakelen als u dat wilt.
  • Maak een aantal handleidingen om u te helpen. Als u een overlay op zijn plaats hebt, is het volgende dat u moet doen, een aantal handleidingen maken om mij te helpen. Over het algemeen maak ik graag een handleiding voor elk begin en einde van een kolom in mijn rastersysteem. Op dit punt is het er puur als een kleine extra helper naast mijn rasteroverlay - om me te helpen de randen te definiëren waarop mijn rasterkolommen zijn.
  • Probeer te werken met beperkingen en beperkingen. Velen denken misschien dat alleen werken met een rastersysteem een ​​goed recept is om meer geforceerd te werken, maar dat is niet het geval. Werken met grid-systemen - en vooral wanneer u uw eigen systemen maakt - het is heel gemakkelijk om een ​​systeem te maken dat 16 kolommen mogelijk maakt, terwijl 6 in plaats daarvan een wijdere oplossing kan zijn. Leren ontwerpen met beperkingen - niet alleen binnen uw rastersysteem - helpt u alleen op de lange termijn, omdat u uw ontwerp kunt richten op wat het belangrijkst en relevant is voor uw gebruikers..
  • Besteed aandacht aan uw afstand. Veel van de focus in rastersystemen die we gebruiken, is de hoeveelheid kolommen die er zijn - de breedte van de kolommen, de breedte van de rugmarge tussen kolommen (de hoeveelheid ruimte tussen elke kolom) en hoeveel ruimte er rond moet worden gegeven die elementen. Vergeet echter niet de verticale ruimte die voor u beschikbaar is en zorg ervoor dat u ook uw raster gebruikt om u te helpen met de beschikbare ruimte. Het gebruik van de meting van de gootbreedte, bijvoorbeeld als een verticale afstandswaarde, kan bijvoorbeeld wonderen doen voor uw ontwerp en hoe elementen elk uit elkaar worden geplaatst.

opdrachten

Inmiddels zou je een redelijk goed idee moeten hebben over rastersystemen, wat ze zijn en bruikbare manieren om ze in je ontwerpen te gebruiken. In het volgende artikel wordt besproken hoe u uw rastersysteem kunt kiezen - en of u ervoor kiest om uw eigen rastersysteem te maken of dat u in plaats daarvan met een vooraf gemaakt raamwerk werkt.

In de tussentijd zou ik u wat meer planning moeten doen. Nogal een korte kleine opdracht (je komt hier vrij licht weg!) Maar schets rond in je blocnotes, speel met rasters en lay-out. Denk aan structuur en gebruik de kolommen als een idee om uw inhoud op het rooster te baseren. Wat je maakt kan de volgende ochtend misschien niet goed zijn, maar het zal je in elk geval helpen om je te concentreren op het denken over rasters en te zien wat je ermee kunt doen in een wegwerpformaat.


Verder lezen

  • Ontwerpen met een grid-gebaseerde aanpak: Smashing Magazine
  • Grids are Good (pdf) door Khoi Vinh en Mark Boulton