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.
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.
... 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.
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.
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.
Hier zijn een paar eenvoudige, praktische tips voor het gebruik van rastersystemen in uw ontwerpen:
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.