Share
Nå vet du alt om farge, typografi og ulike ting du bør gjøre før du starter et designprosjekt. Det er på tide å begynne å komme ned og skitne med noen av grunnleggende om å jobbe med rister i designene dine.
Grids gjør det mulig å bygge solid struktur og form i designene dine. I likhet med at vi så på typografiske hierarkier og rytme, kan vi effektuere de samme følelsene ved å bruke en rutenettstruktur. På samme måte som med koding, anbefales det å organisere moduler og deler av kode, og et rutenettsystem kan også hjelpe når du designer for nettet.
Gitter er ikke bare nyttige for oss som designere eller utviklere - de er også gode for brukeren. Gjennom hele denne sesjonen har jeg lagt vekt på å skape en god brukerreise og en god brukeropplevelse gjennom designene dine. Tross alt er brukeren der for å konsumere innholdet ditt og du vil gjøre det så godt en opplevelse for dem som du kan. Å ha et solidt gridsystem som skal brukes i designene dine (og deretter gjennomføre til utviklingsfasen) vil tillate deg å gjøre nettopp det ved å skape konsistens og fortrolighet (og dermed bygge tillit) i designen din.
Hvis nettstedet ditt er godt utformet, vil et rutenett hjelpe deg med å projisere denne tilliten videre til brukerne dine - men bevisst eller underbevisst kan prosjektet være. Å bruke et rutenettsystem betyr ikke at designene dine må bli kjedelige eller boxete heller. På samme måte som det har blitt sagt med responsiv webdesign, er det ansvaret for deg å skape et unikt design og har noe annerledes enn det - og et rutenett skal sees som noe som vil Aktiver du å gjøre det, heller enn begrense du.
... en struktur som omfatter en rekke horisontale og vertikale linjer, som brukes til å ordne innhold.
I sine mest grunnleggende termer er et rutenett system en struktur som omfatter en rekke horisontale og vertikale linjer som krysser og brukes til å ordne innhold. På enda mer grunnleggende vilkår (som gjør det enklere å forstå!) Et rutenett er en måte å gi et system som designere kan jobbe med for å strukturere og presentere innhold og bilder på en mye mer lesbar, overskuelig måte.
Rutenettsystemer har lenge vært brukt i trykte publikasjoner, men med sin introduksjon til design for nettet og de mange, mange CSS-gridrammene som siden har dukket opp, blir de nå brukt nesten som standard.
Å bruke et rutenett i designene dine er en måte å oppnå et konsistensnivå som ellers ville være ekstremt vanskelig å mestre og skildre i designene dine. Igjen er ensartethet og konsistens nøkkelen til å skape et nettsted som brukerne dine finner lett å navigere, lese og forstå. En god brukeropplevelse er opprettet ved å engasjere seg med brukeren og bygge en følelse av kjennskap til dem - og et rutenettsystem hjelper deg med å gjøre det ved å gi en solid base som du kan forme ditt design fra.
Et eksempel rutenett, Gerstner, på Gridset App nettsted. Selv om rutenettet ditt er noe som til slutt vil være usynlig for din endelige bruker, kan du bruke den til å hjelpe deg med å lage layouter for dine design. Men, som alle regler når du designer (og noen ganger når du utvikler), blir regler truffet for å bli ødelagt. Du trenger ikke nødvendigvis alltid å holde fast i rutenettformasjonen, men du trenger å forstå rutenettet, før du kan forplikte deg til å bryte reglene.
På nettet har vi mange CSS grid rammer tilgjengelig for oss, samt mange verktøy tilgjengelig for å rulle med våre egne grid systemer som vi kan skape oss selv. Det er helt opp til deg hvilke av disse du vil velge å bruke når du designer - for eksempel kan et CSS-rammeverk være kjent for deg som en utvikler, så du vil kanskje prøve å hånden med å designe med det også - men la oss undersøke hvorfor design med et rutenett system er god praksis, og også bidra til å gjøre tankene dine opp med hvilket rutenett system å forfølge videre.
Det er mange fordeler med å bruke rutenettsystemer - dette kan starte når du først designer nettstedet, men kan også vise seg å være nyttig når du går videre til bygg- og utviklingsstadiene, samt når du administrerer både nettstedets design og bygg i fremtiden.
Det gode ved rutenettsystemer er at de lar deg designe i proporsjoner, balansere mellom alle de forskjellige elementene du måtte ha i ditt design. Et rutenettsystem bør alltid være veldig fleksibelt, slik at du nesten kan vri den til dine behov når du designer de forskjellige delene av nettstedet ditt.
Et gridoverlegg, med guider i Photoshop. Ved å bruke et rutenettsystem i designen, kan du også sørge for den samme følelsen av enhetlighet og fortrolighet - mens det kan fungere for noen nettsteder å ha svært forskjellige sidedesigner, for mange vil det ikke være tilfelle, og du vil ha en jevn og mer strukturert føle seg til hovedoppsettet. Dette gjør det også mye enklere når du kommer til å kode opp designet, da det vil bety at du kan plukke ut de ensartede elementene i designet ditt og bruke denne modulære effekten til din kode og CSS struktur.
For balanse skyld, la oss se på noen ulempe ...
Først oppe, mange mennesker - spesielt de som er nye for å designe eller designe med grids - kan finne at rutenettsystemene er ganske kvelende og begrenser kreativiteten. Dessverre kan dette noen ganger skje, og - tilberede ordspillet - det kan noen ganger føles som om du blir forhindret i å tenke utenfor boksen og i stedet lager veldig ren, klinisk design. I slike tilfeller vil jeg oppfordre deg til å prøve å gå tilbake fra rutenettet - istedenfor å leke med elementene på en side til de føler at de ser ut som de er på rett sted, og deretter bytte til å se på Gitteret ditt overlegger designet ditt (vi snakker litt mer om det litt), og se hvordan du kan få ideene dine til å fungere som gridstruktur. Hvis det ikke samsvarer med det aktuelle nettdesignet, kan det være på tide å begynne å jobbe med et annet nettverkssystem eller -design i stedet.
Rutenettet systemer er også virkelig, virkelig hard. Ikke bare tar de mye viljestyrke for å få hodet rundt de første gangene du bruker dem (selv om du sannsynligvis vil ha et "aha!" Øyeblikk, ikke lenge etter noe bra å praktisere og leke med dem), men de kan også noen ganger involvere mange matte og beregninger. Jeg er ikke noen som noen gang klarer meg godt med å gjøre mye matematikk - så den siden av ting jeg personlig kan finne veldig vanskelig. Det er også veldig vanskelig å bare få hodet rundt grensesnittet, og hvordan de kan hjelpe designet - men forhåpentligvis begynner du å se effekten snart etter at du har brukt dem i designene dine, akkurat som du sannsynligvis har gjort med din utviklingsmetoder et eller annet sted nedover linjen. Og mens nettene er jævla hardt arbeid, er de mest verdt det for sluttresultatet.
Her er noen enkle, praktiske tips for bruk av rutenettsystemer i designene dine:
Nå skal du ha en ganske god ide om nettverkssystemer, hva de er og nyttige måter du kan begynne å bruke dem på i designene dine. Den neste artikkelen vil snakke om hvordan du skal velge om ditt nettverkssystem - og om du velger å lage din egen, eller jobbe med en forhåndsrammet ramme istedenfor.
I mellomtiden vil jeg gjøre mer planlegging. Ganske kort kort oppgave egentlig (du kommer av ganske lett her!), Men skisser rundt i notisblokkene dine, spiller med grids og layout. Tenk alt om struktur, bruk kolonnene som en ide å basere innholdet ditt rundt rutenettet. Det du oppretter kanskje ikke er noe bra, kommer neste morgen, men det vil i det minste hjelpe deg med å fokusere på å tenke på grids og se hva du kan gjøre med dem i et kasteformat.
Accentsconagua