Share
In het vorige artikel heb ik je aan rastersystemen voorgesteld. Met een beetje geluk zou je nu een goed begrip moeten hebben van wat ze zijn en waarom ze een goed wapen zijn om in je ontwerparsenaal te hebben.
Vandaag ga ik uitleg geven over het kiezen van een grid-systeem - van je eigen systeem maken, tot het werken met vooraf gemaakte CSS-frameworks. Aan het einde van dit artikel zul je een goed idee hebben van de manier waarop je je pad graag wilt bewandelen met rastersystemen - en hopelijk genoeg zelfvertrouwen hebt om dit te doen.
Laten we beginnen met het verfijnen van dingen.
We hebben twee keuzes voor de boeg: gaan we met een vooraf gemaakt raamwerk dat iemand anders al heeft gebouwd, of maken we ons eigen rastersysteem en werken we daarmee samen? Echt, het antwoord is helemaal afhankelijk van je persoonlijke voorkeur.
Ik zou altijd aanraden dat als je net begint met ontwerpen voor het web, het voor jou misschien voordeliger is om te gaan ontwerpen met vooraf gemaakte kaders. Deze ontwerpen hoeven niet permanent te zijn en kunnen in plaats daarvan een manier zijn om met rastersystemen te werken op een manier die de druk verlicht en u in staat stelt om te experimenteren en ze beter te begrijpen.
Met vooraf gemaakte kaders kunt u ook werken met prototypes van een ontwerp - waar we snel verschillende elementen en modules in een ontwerp kunnen samenvoegen om te zien hoe deze worden weergegeven wanneer ze zich daadwerkelijk in een browser bevinden (op een zo realistisch mogelijke manier) krijgen, op een digitale vorm zoals het web).
Ik denk echter altijd dat het het beste is om je eigen raster te maken, als je dat ooit kunt doen. Op deze manier hebt u niet alleen veel meer controle over het ontwerp en de structuur van uw raster, maar kunt u ook veel meer controle hebben over de uitvoer van uw raster en hoe dit zich afspeelt in de ontwikkelingsfase van uw websiteontwerp . En ik weet niets over jou (hoewel ik me voorstel dat veel ontwikkelaars hetzelfde zullen voelen als ik) maar ik wil graag alle controle over mijn code hebben en hoe deze wordt gepresenteerd; het creëren van mijn eigen grids stelt mij in staat om dat te doen.
Pre-made frameworks zijn te vinden in de wereld van het webontwerp - wat schijnbaar begon met een of twee grid-systemen (zoals 960.gs) ontplofte al snel met ons, met tientallen, zo niet honderden, netwerksystemen beschikbaar voor ons om gebruik.
Raster-frameworks zijn handig omdat ze ons in staat stellen om eenvoudig een prototype of basiswebsite te krijgen wanneer we ons ontwikkelen. Maar hoe kunnen we dat veranderen, zodat ze ook nuttig zijn als we aan het ontwerpen zijn?
Pre-built frameworks zullen vaak worden geleverd met een soort PNG of PSD die u kunt gebruiken tijdens het ontwerpen - en als dat niet het geval is, moet u proberen dit raster in uw ontwerp te repliceren. Maak eenvoudig een nieuwe laag en leg deze rasteroverlay op zijn plaats. Vervolgens kunt u beginnen met ontwerpen naar het rooster dat u heeft.
Populaire grid-frameworks omvatten
Net als wanneer ik met mijn code werk, wil ik graag de controle hebben over wat ik aan het ontwerpen ben. Als ik met een raamwerk voor een voorgaasraster werk, dan ben ik op een bepaalde manier mijn werk aan andermans voorkeuren bezig - terwijl als ik mijn eigen rasters ontwerp, dit betekent dat ik alle controle heb over hoe mijn raster werkt, hoe het zich verhoudt tot mijn ontwerp en ik weet dat ik ook veel meer controle heb over de uiteindelijke code-uitvoer, zoals ik die heb ontworpen.
Hoewel het behoorlijk ontmoedigend kan lijken, zolang je gewapend bent met wat kennis, creativiteit en ideeën van een lay-out voor je website, hoeft het maken van je eigen rasters niet zo eng te zijn als het klinkt.
Je eigen rasters maken is moeilijk als je het nog niet eerder hebt gedaan - maar er zijn zoveel tools om je te helpen. Totdat een paar van deze tools uitkwamen, had ik niet eens geprobeerd zelf mijn eigen rasters te maken en was ik een groot fan van frameworks - maar als ik de voordelen zag van het kunnen maken van mijn eigen rasters voor elk project dat ik doe, voelde ik me veel creatiever. Ik heb het idee dat ik meer meer innovatieve en unieke ontwerpideeën kan bedenken.
In de eerste plaats, wanneer je je eigen rasters ontwerpt, keer je terug naar je schetsboek, maak een paar schetsen en ontwerpideeën. Zelfs als je gewoon teruggaat naar enkele van je eerste schetsen die je aan het begin van het project hebt gemaakt, kan het nuttig zijn om je voor te stellen hoe deze schetsen in een raster kunnen passen, en je een voorsprong geven.
Het maken van je eigen rasters gaat ook over een hoop theorie - en veel te veel om hier op te nemen, want het zou een enorme sessie van artikelen op zich kunnen zijn! Maar probeer eerst de basis te beheersen. Bekijk uw favoriete websites online en kijk of u een modulair of rasterpatroon kunt kiezen in hun ontwerp. Kijk of je naar de ontwerpen kunt kijken die je bewondert en zie hoe verschillende elementen op één lijn liggen, hoe het raster zich kan aanpassen als het ontwerp responsief wordt opgeschaald of verlaagd - al die soorten kleine dingen zullen je helpen om het gebruik van rasters veel beter te begrijpen en te maken.
Zoals ik al eerder zei, zijn er vele, vele tools voor u beschikbaar om uw eigen rasters te maken voor uw webontwerpen. Ik heb slechts drie populaire oplossingen gekozen, die me het meest hebben geholpen bij het rollen met mijn eigen rasters, maar houd er rekening mee dat er veel meer alleen een Google-zoekopdracht is.
Gridset is een geweldige tool, gemaakt door de lieflijke folk van Mark Boulton Design Studio in South Wales.
In hun eigen woorden is Gridset gewoon een "hulpmiddel voor het maken van rasters" - en ze maken het zo gemakkelijk om dat te doen. Gridset is perfect voor alle stadia van het maken en gebruiken van uw eigen rasters - ontwerp, prototyping en productiestadiumontwikkeling.
Als u uw eigen rasters met Gridset wilt maken, maakt u eenvoudig een raster en maakt u vervolgens verschillende rasters voor elk van de belangrijkste onderbrekingspunten waarvan u denkt dat u ze in uw ontwerp zult gebruiken. U kunt de kolombreedte, de gootbreedte wijzigen en zelfs de verhouding van de kolommen wijzigen - plus nog veel meer.
Gridset biedt u een PNG-rasteroverlay die u kunt gebruiken bij het ontwerpen, u kunt klassen aan uw HTML toevoegen om snel een prototype te maken en u kunt de metingen gebruiken die Gridset berekent in uw eigen markup (u hoeft dus niet de meegeleverde Gridset-klassen te gebruiken ).
Met Gridset kunt u ook hun ingebouwde Sass-functies gebruiken - waardoor het nog eenvoudiger is om uw rasterontwerp te integreren in uw ontwikkelworkflow.
Een ander groot voordeel van Gridset is de schat aan informatie die ze bieden over rasters. Ik merkte dat ik zo veel heb geleerd via de Gridset-blog en de Gridset-voorbeelden die ze hebben op hun homepage ontcijfert.
Gridpak is een van de eerste echt interactieve, responsieve hulpmiddelen voor het maken van rasters die ik online heb gevonden, gemaakt door Erskine Design in Nottingham.
Gridpak werkt door een aantal rasters te maken (door een kolomgrootte, kolomvulling en gootbreedte te definiëren) voor uw aangepaste breekpunten.
Zodra je al je grids hebt gemaakt in Gridpak, krijg je een download met alle bestanden die je nodig hebt om je rasters in je websitewerkstroom te integreren - een PNG die je als rasteroverlay gebruikt tijdens het ontwerpen, verschillende bestanden die u kunt gebruiken voor uw Gridpak grid CSS ("vanilla" CSS voor uw standaard klassen, evenals zowel een LESS- als Sass-versie) en u krijgt ook een JavaScript-overlaybestand dat u kunt gebruiken om uw raster op uw websites te leggen tijdens de ontwikkeling.
Gridpak lijkt me echt nuttig voor het maken van prototypen, het is erg snel om een aantal visuele weergaven van je raster te krijgen (ook bij bepaalde responsieve breekpunten) en deze te integreren in een snel prototype. Van daaruit kunnen we kijken naar meer tijd besteden aan het verfijnen van de verstrekte CSS-klassen in onze eigen markup, ervoor te zorgen dat de kwaliteit van onze code (die altijd belangrijk moet zijn voor een ontwikkelaar!) Top is..
Als je niet alle toeters en bellen wilt hebben en in plaats daarvan ben je net achter een snelle rekenmachine die je helpt om wat responsieve rasters te maken, dan zou ik een reis naar Harry Roberts 'Fluid Grids aanbevelen.
Hoewel hij dit niet meer op zijn eigen website kan hosten (vanwege de setup die hij nu heeft), heeft Harry de originele code op Github verschenen. Het kan zijn dat je wat handmatig werk moet doen om dit te laten werken, maar het is zeker de moeite waard als je een snel en eenvoudig systeem wilt om je gridraamwerk en ontwerp op te zetten.
Nu weet je alles over rasters en sommige gereedschappen die je nodig hebt bij het maken van rasters - ik wil dat je zelf een handje probeert te maken! Met behulp van een van de bovengenoemde tools - of zelfs met behulp van uw eigen tools, als u er al een heeft ontwikkeld. Probeer zelf een aantal van uw eigen rastersystemen te maken en deze te integreren met uw ontwerpen. Laten we de resultaten in de reacties zien!
Accentsconagua