Share
I den forrige artikkelen introduserte jeg deg til nettverkssystemer. Med noe hell, nå bør du ha en god forståelse av hva de er og hvorfor de er et godt våpen å ha i designarsenalen din.
I dag skal jeg forklare om å velge et rutenettverk - fra å lage din egen, til å jobbe med forhåndsdefinerte CSS-rammer. Ved slutten av denne artikkelen vil du ha en god ide om hvordan du kan like å gå din tur med grid-systemer - og forhåpentligvis føler deg trygg nok til å gjøre det.
La oss begynne med å begrense tingene nedover.
Vi har to valg for oss: Går vi med et prefabrikkerte rammeverk som noen andre allerede har bygget, eller lager vi vårt eget rutenett og jobber med det? Egentlig er svaret helt ned til din personlige preferanse.
Jeg vil alltid anbefale at hvis du nettopp har begynt med å designe for nettet, kan det være mer gunstig for deg å begynne å designe med prefabrikkerte rammer. Disse designene trenger ikke å være permanent og kan i stedet være en måte å jobbe med rutenett på, slik at presset blir lettere og lar deg eksperimentere og forstå dem mer.
Med forhåndsdefinerte rammer kan du også arbeide med prototyping av et design - der vi raskt kan knytte sammen ulike elementer og moduler i et design for å se hvordan disse spilles ut når de faktisk er i en nettleser (på så realistisk måte som de kan få, være på en digital form som nettet).
Imidlertid tror jeg alltid at det er best å lage ditt eget rutenett, hvis du noen gang kan gjøre det. På denne måten har du ikke bare mye mer kontroll over utformingen og strukturen på nettverket ditt, men du kan da også ha mye mer kontroll over utgangen av nettverket ditt og hvordan dette spiller ut i utviklingsstadiet av webdesign . Og jeg vet ikke om deg (selv om jeg antar at mange utviklere vil føle på samme måte som jeg gjør), men jeg liker å ha all kontroll som jeg kan ha over koden min og hvordan den presenteres. å skape mine egne griller gjør det mulig for meg å gjøre det.
Forhåndsdefinerte rammer er funnet aplenty i webdesign verden - det som tilsynelatende startet med ett eller to grid systemer (for eksempel 960.gs) ble raskt blåst opp til oss å ha mange dusinvis, om ikke hundrevis av grid systemer tilgjengelig for oss å bruk.
Grid rammer er nyttige som de tillater oss å enkelt få en prototype eller grunnleggende nettsted på plass når vi utvikler. Men hvordan kan vi bytte det slik at de også er nyttige når vi designer?
Pre-built rammer vil ofte komme med en slags PNG eller PSD som du kan bruke når du designer - og hvis ikke, må du prøve å kopiere dette nettverket inn i designet. Bare lag et nytt lag og legg dette gridoverlegget på plass. Deretter kan du begynne å designe til rutenettet du har.
Populære grid rammer inkluderer
Akkurat som når jeg jobber med koden min, liker jeg å ha kontroll over hva jeg designer. Hvis jeg jobber med et premade grid-rammeverk, forplikter jeg meg til å jobbe med noen andres preferanser - mens hvis jeg designer mine egne nett, betyr det at jeg har all kontroll over hvordan nettverket fungerer, hvordan det gjelder mitt design og jeg vet at jeg vil ha mye mer kontroll over den endelige koden, så vel som jeg vil ha designet den.
Selv om det kan virke ganske skremmende, så lenge du er bevæpnet med litt kunnskap, kreativitet og ideer til en layout for nettstedet ditt, trenger du ikke å være så skummelt som det høres.
Å lage dine egne nett er vanskelig når du ikke har gjort det før - men det er så mange verktøy der ute for å hjelpe deg. Inntil noen av disse verktøyene kom ut, hadde jeg ikke engang prøvd å lage mine egne grids selv, og jeg var en stor fan av rammer - men å se fordelene med å kunne lage mine egne grids for hvert prosjekt jeg har gjort, har gjort meg til å føle mye mer kreativ. Jeg føler at jeg kan komme opp med mer mer innovative og unike designideer.
Først når du designer dine egne nett, går du tilbake til skisseboken din, gjør noen skisser og ideer om layout. Selv om du bare går tilbake til noen av dine første skisser som du gjorde i begynnelsen av prosjektet, kan du forestille deg hvordan disse skissene kan passe inn i et rutenett, være nyttige og gi deg en start.
Å lage dine egne griller handler også om mye teori - og altfor mye for å inkludere her, for det kan være en massiv økt med artikler selv! Men prøv å mestre grunnleggende først. Se på favorittwebområdene dine online og se om du kan velge ut et modulært eller rutenett-mønster i deres design. Se om du kan se på designene du beundrer og se hvordan forskjellige elementer justerer, hvordan gridet kan tilpasses når designet skaleres opp eller ned responsivt. Alle de små tingene vil hjelpe deg med å forstå og skape grids mye bedre.
Som sagt før er det mange, mange verktøy tilgjengelig for deg for å lage dine egne nett til bruk i webdesign. Jeg har valgt bare tre populære løsninger, som har hjulpet meg mest når jeg ruller med mine egne nett, men vær oppmerksom på at det er mange flere bare et Google-søk unna.
Gridset er et flott verktøy, opprettet av det nydelige folkemusikk ved Mark Boulton Design Studio i Sør-Wales.
I sine egne ord er Gridset bare et "verktøy for å lage grid" - og de gjør det så enkelt å gjøre det. Gridset er perfekt for alle faser av å skape og bruke dine egne grid - design, prototyping og produksjonsstadieutvikling.
For å lage dine egne grids med Gridset, oppretter du bare en gridsett og lager deretter forskjellige grids for hvert av de store bruddpunktene du tror du vil bruke i designet. Du kan endre kolonnebredde, ryggbredde og til og med endre forholdet mellom kolonnene - pluss mye mer.
Gridset gir deg et PNG-gridoverlegg du kan bruke når du designer, du kan legge klasser til HTML-en din til prototype raskt, og du kan bruke målingene som Gridset beregner i din egen markering (slik at du ikke trenger å bruke de angitte Gridset-klassene ).
Med Gridset kan du også bruke sine innebygde Sass-funksjoner - noe som gjør det enda enklere å integrere rutenettdesignet i utviklingsarbeidet ditt.
En annen flott ting om Gridset er den mengden informasjon de gir om grids. Jeg fant at jeg lærte så mye bare gjennom Gridset-bloggen og dechifrerte Gridset-eksemplene de har på sin hjemmeside.
Gridpak er et av de første virkelige interaktive responsive verktøyene jeg fant online, opprettet av Erskine Design i Nottingham.
Gridpak fungerer ved å opprette en rekke grids (ved å definere en kolonnestørrelse, kolonnepolstring og rennebredder) for dine tilpassede bruddpunkter.
Når du har opprettet alle nettene i Gridpak, får du en nedlasting med alle filene du trenger for å integrere gridene i arbeidsflyten på webområdet ditt - en PNG som skal brukes som gridoverlegg når du designer flere filer du kan bruke til Gridpak grid CSS ("vanilje" CSS for standardkursene dine, samt både en mindre og Sass-versjon), og du får også en overleggsfil for JavaScript som du kan bruke til å overlegge gridet ditt på nettstedene dine under utvikling.
Gridpak virker veldig nyttig for meg for prototyping mer enn noe - det er veldig raskt å få noen visuelle representasjoner av rutenettet ditt (ved spesielt responderende brytepunkter) og integrere disse i en rask prototype. Derfra kan vi se på å bruke mer tid på å raffinere de angitte CSS-klassene i vår egen oppmåling, slik at kvaliteten på koden vår (som alltid skal være viktig for en utvikler!) Er toppkvalitet.
Hvis du ikke vil ha alle klokkene og fløyene, og i stedet er du like etter en rask kalkulator som vil hjelpe deg med å lage noen lydhør, så vil jeg anbefale en tur til Harry Roberts Fluid Grids.
Selv om han ikke kan være vert for dette på sin egen nettside lenger (på grunn av oppsettet han nå har), har Harry snilt poppet opp den opprinnelige koden på Github. Det kan hende du må utføre litt manuell arbeid for å få dette til å fungere, men det er vel verdt innsatsen hvis du vil ha et raskt og enkelt system for å sette opp gridrammen og designen.
Nå vet du alt om rutenett og noen av verktøyene du trenger når du lager rister - Jeg vil at du skal prøve hånden din når du skal gjøre noe av deg selv! Bruke noen av verktøyene nevnt ovenfor - eller faktisk bruke din egen, hvis du allerede har utviklet en. Prøv hånden din ved å lage noen av dine egne rutenettsystemer og begynne å integrere dem med designene dine. La oss se resultatene i kommentarene!
Accentsconagua