Share
Justering er en av de tingene som kommer hånd i hånd når du arbeider med rutenett. Emnet for tilpasning er ikke bare et spørsmål om å velge om du vil justere tekst eller bilder til venstre eller høyre for et design (selv om disse beslutningene åpenbart fortsatt betyr noe), bruker vi justering for å forbedre våre design. Riktig justering i designene gjør dem visuelt mer tiltalende, og vil også gjøre det lettere for brukerne å skanne over en side, og medbevisst tilbyr også en roligere leseopplevelse..
Alle elementene i designet ditt må være justert på en eller annen måte, om dette bare er ren tekst på siden din, bilder blandet i teksten (eller til og med header eller heltbilder), videoer, knapper og ring til handlinger, koblinger (i teksten eller i moduler som en navigasjonsseksjon) eller andre elementer du måtte ha.
Rutenettene vil gå litt for å hjelpe deg med å løse justeringsproblemer eller beslutninger i ditt design, men det vi trenger å fokusere på her, er hvordan de forskjellige elementene, elementgruppene eller bestemte moduler i ditt design samarbeider. Jeg har fra begynnelsen lagt vekt på viktigheten av en sammenhengende brukeropplevelse, og å få justering rett er en av de virkelig viktige tingene som kan bidra til å forbedre brukeropplevelsen.
Tilpasning tillater oss også å ta bevisste beslutninger om hvor elementene er plassert og hvordan de samhandler med hverandre. Å skape god tilpasning broer det visuelle gapet mellom hvert element i ditt design, og hjelper oss til å skape forhold mellom elementene vi har. Ellers ville vi ha et design som har blokker av tekst og bilder over alt, noe som gir liten følelse uten struktur.
Som forklart i de forrige gridartiklene, ser det ut til at mange mennesker ikke liker grids fordi de finner dem begrensende. at de ofte knuse noen sjanser for kreativitet i et design.
Dette er helt forståelig. Gitter er en haug med kolonner og rader som i hovedsak hjelper oss med å lage blokker; CSS legger generelt element i en boksarrangement. Det kan imidlertid være vanskelig å anerkjenne en passende tid til å bryte fra nettet.
Ikke alt på webdesignet ditt må justeres. Noen ganger, avhengig av utformingen eller måten du jobber på, kan dette virkelig kvele kreativiteten. I stedet tenk på hvordan du kan blande dine tilpasninger. På denne måten sørger du fortsatt for at det finnes et mønster for hvert element eller modul på nettstedet ditt, men ved å blande justeringene sikrer du at du fremdeles lager noe av visuell interesse som vil holde brukerne dine ute på nettstedet.
Blandingsjusteringer betyr også at du kan leke med layouter og ruter litt mer - i stedet for å bruke et 6-kolonne rutenett, hvorfor ikke også introdusere et annet rutenett som du kan overlappe med - for eksempel et 4-kolonne rutenett.
Et eksempel på gridoverlegg - seks kolonner med fire kolonneoppsett overlaid. Innebygd Gridset App. Mens du ikke strenger bryter helt fra nettet, legger du i stedet et nytt rutenett som du kan jobbe fra, og tilbyr enda mer justering og layoutalternativer i designene dine..
Blandingsjusteringer betyr ikke bare at du introduserer nye griller, kolonner eller statister til strukturen din. I stedet bruker du ditt nåværende rutenett for å blande hvilke elementer som stemmer overens med hvilke kolonner. For eksempel kan du ha topptekstelementene justert til kantene i de første og siste kolonnene - men du kan da bestemme å justere hovedtekstteksten til de første og siste kolonnene. Den gode tingen er at et rutenett gir deg en nesten uendelig mengde justeringsalternativer, selv med noe så lite som en 4-6 kolonne rutenett.
Blandingsjusteringer er en måte å holde brukerne interessert og varslet mens du surfer på et nettsted. I stedet for å holde elementer like, introduserer det et annet nivå av fokus på elementene i designet ditt, men underbevisst det kan være.
De viktigste justeringsalternativene du har for teksten, ligner veldig på alternativene som er tilgjengelige i CSS: venstre, høyre, sentrert eller begrunnet. Ganske selvforklarende virkelig; Hvis du vender ut teksten din, vil den gå til venstre, hvis du justerer teksten på riktig måte, vil den grave til høyre.
I stedet, hva du vil tenke på, er hvor passende disse justeringene er for teksten og hvordan de sitter i designet. For eksempel kan små mengder tekst fungere godt i en sentrert justering, selv om dette vil være mer forvirrende og vanskelig å lese på større tekststykker. På samme måte, med overskrifter kan det fungere godt i design for å justere dem sentralt, selv om dette avhenger av størrelsen på teksten og hvor den plasseres. For eksempel kan en sentraljustert overskrift ikke fungere bra når den har en stor del av tekst som er venstrejustert umiddelbart under.
Du må også tenke på kulturer som kan bli utsatt for design og nettside. I noen kulturer leser du fra høyre til venstre, men i de vestlige kulturer er det fra venstre til høyre og topp til bunn.
.innhold retning: rtl; tekstjustering: høyre;
På grunn av den vestlige kulturen for lesing fra venstre til høyre, vil det sannsynligvis være vanskelig å ha en stor mengde tekst på høyre side. I stedet bruker du de justeringer som kan være vanskeligere å lese i svært små mengder, i mer av en designfunksjon, for eksempel i en footer for adresse eller kontaktinformasjon, eller i en header med en liste over navigasjonslinker.
Justering av bilder kan være vanskelig, fordi justeringen du bør bruke for hvert bilde, er i forhold til størrelsen på bildet. Mindre bilder er naturlig lettere å plassere i innholdet ditt på en måte som ikke forstyrrer innholdet, mens større bilder har en tendens til å forstyrre lesestrømmen mer og derfor er vanskeligere å plassere i innholdet ditt.
Du har to alternativer; enten plasser bildene dine utenom innholdsstrømmen (for eksempel mellom avsnittene eller i begynnelsen eller slutten av innholdet), eller du kan finne ut hvordan du sparer bildene dine inn i rutenettet.
Det første alternativet er ganske enkelt å implementere. Uten å forstyrre tekstflyten, kan du plassere bilder på enten full bredde eller egendefinert bredde og senter innenfor det området teksten normalt er i. Dette er enkelt nok og ser fortsatt bra ut, mens det fungerer bra når vi skaler ned et nettsted hvis det er responsivt.
Det andre alternativet kan bli litt mer komplisert, avhengig av hvordan du bestemmer deg for å plassere bildene i innholdet ditt. Du har flere alternativer. Du kan først få bildene til å passe perfekt (til venstre eller høyre) med teksten, eller du kan få bildene til å ligge litt forbi kanten av innholdet.
På denne måten kan bildene plasseres en full kolonnebredde i innholdet, med innholdet som strømmer rundt bildet. Dette forstyrrer ikke lesestrømmen så mye som om bildet ble plassert helt inne i innholdsområdet, men det legger også interesse for designet - for du lager et annet område for justering for elementene som vil holde designet ditt visuelt friskere og mer engasjerende.
Aligning bakgrunnsbilder er en av de små tøffene - og igjen er det alt i forhold til design og motiv, samt størrelsen på bakgrunnsbildet selv.
Som med tekstjusteringene, kan justeringen av bakgrunnsbildene dine veldig mye matche CSS-reglene dine. fast, absolutt, til toppen eller til bunnen, til venstre eller til høyre? Virkelig, dette avhenger av ditt design og hvordan bakgrunnsbildet passer inn med det. Hvis mønsteret ditt har et mønster, tenk på hvordan mønsteret retter seg mot elementene dine - du vil sørge for at den justerer seg fint med elementene dine, ellers kan det kaste hele designet helt ut.
Tenk også på hvordan det ser ut hvis du har et stort fokusbasert bakgrunnsbilde og hvordan det passer inn i ditt design. Hvis de er store og ganske store fokuser, kanskje tenk på hvordan dine andre elementer og moduler kan passe inn i det designet. Kan for eksempel hovedtekstteksten tilpasse seg designens kanter? Det handler om å stille spørsmål til hvordan bildene dine fungerer sammen med de andre delene av designet og hvordan du kan jobbe med dem for å gjøre designet mer polert og samarbeide mye bedre.
Når jeg beskriver en elementgruppe, tenker jeg på det som veldig forskjellig fra det jeg ville beskrive som en modul.
Når tenker i form av moduler-i både design og når jeg utvikler nettstedet design-jeg tenker på dem som en gruppe av elementer som er relatert til hverandre, som ligger i umiddelbar nærhet til hverandre. Eksempler på moduler for meg er en gruppe lenker, et heltbilde og overlegg av tekst eller overskrift; Alt som kan grupperes, er et repeterbart mønster eller frittstående modul.
Imidlertid en element gruppe er en gruppe av elementer i ditt design, som ikke gjør det nødvendigvis må være nær hverandre. For eksempel kan en elementgruppe være både topptekstene dine (f.eks. Logoer og navigasjonsforbindelser), så vel som dine bunntekstelementer (kanskje et annet sett med linker sammen med en opphavsrettserklæring). Disse er elementgrupper, og du kan deretter justere disse elementgruppene sammen i designet. Selv om toppteksten og bunnteksten kanskje ikke er synlig på samme skjermplass som hverandre, vil disse subtile bruken av justering gjøre for en sterkere, mer visuelt tiltalende og mye mer konsekvent design.
Andre eksempler på elementgrupper er ganske enkelt både teksten og bildene av hovedkopien din på en side, eller kan til og med være så enkelt som ett sett med navigasjonsforbindelser eller elementer. For eksempel, i en mer komplisert navigasjon kan du ha hovedtekstlinkene, men også en mindre "underrubrik" til lenken. På toppen av dette kan du ha et ikon over eller under lenketeksten. Selv om disse er alle individuelle biter, og de tre bitene utgjør en kobling, kan alle disse individuelle linkene utgjør en kompleks navigasjonsmodul, men kan også settes sammen som en elementgruppe, som du deretter kan justere med andre grupper i designen.
Nå vet du alt om justering i designene dine (og med nettene). Jeg vil at du skal begynne å se på designene dine og se på hvordan alle elementene retter seg. Prøv å gruppere ulike elementer, elementgrupper og se på å tilpasse teksten og bildene i designene dine.
Se hva du kan gjøre for å skape et bedre design ved å riktig tilpasse hvert element i designet. Ved hjelp av rutenettet fra din siste oppgave, jobber du med å justere alle elementene i designet ditt ved hjelp av tipsene som er gitt i dagens innlegg.
Accentsconagua