Design101: Bruke sterke justeringer
I dag skal vi undersøke et av de mest grunnleggende prinsippene i design: justering. Dette villedende enkle emnet er faktisk ganske sammensatt og er blant de mest mangelfulle ferdigheter hos designere i dag.
Et sterkt grep om hvordan og når du skal bruke visse justeringer vil øyeblikkelig gjøre deg til en bedre designer og vil forbli en grunnleggende byggestein for alt du lager gjennom resten av karrieren.
Utforsk Envato Elements
Introduksjon til justering
For mange kan en diskusjon om justering høres ut som en vilkårlig øvelse. En slik grunnleggende designteori er sikkert bare for individer som aldri har designet noe i livet, ikke for det profesjonelle samfunnet som frekventerer nettsteder som disse. Ikke sant?
Selv vil jeg videreføre argumentet om at en slik diskusjon er for nybegynnere ved å konstatere at et solid grep om visuell innretting er et uslåelig fundament for alle typer design. Det er den typen kunnskap, når du først har forstått det, du vil bruke på hver enkelt layout du oppretter som designer.
Til tross for ideen om at disse konseptene ligger i kjernen av det vi som designere gjør, ser justering ut til å være en primær kilde til det meste av det dårlige designet jeg ser på nettet i dag.
Selvtrente designere har ofte et intuitivt grep om hvordan man bruker justeringer, men dette kan og mislykkes uten eksplisitt kunnskap for å sikkerhetskopiere det.
Foring av ting
Den essensielle ideen om justering er tankene numbingly enkel: å stille opp ting. Utenom organisk design, som er et helt annet tema, bør hvert element som du plasserer på en side ledsages av en logisk tankeprosess med hensyn til plasseringen.
Igjen, dette er grunnleggende ting, ikke sant? Alle gjør allerede dette… ikke sant? Feil. Vurder følgende nettsted som nylig ble sendt til vårt CSS-galleri. Jeg bruker dette ikke som et meningsfylt eksempel, men som et læremiddel. Designeren er en fantastisk fyr som bare begynner. Han forbedrer ferdighetene sine daglig og er ivrig etter å lære.
Dette eksemplet er ekstremt typisk og er nøyaktig den typen ting vi ser hver dag i galleriinnleggene våre. Den estetiske verdien her er ikke dårlig. De lyse fargene og interessante teksturer fanger oppmerksomheten ganske bra. Imidlertid savnet justeringen her virkelig merket.
Problemene her kan være vanskelige for mange mennesker å oppdage. Av denne grunn anbefaler jeg alltid å forenkle et design for å undersøke de grunnleggende formene. Du vil se meg gjøre dette i flere av artiklene jeg skriver om design, og du bør absolutt prøve det på noen få av dine egne design.
Nå som vi ser de grafiske objektene i en forenklet tilstand, kan vi bedre analysere volumet av plass de opptar og løse eventuelle justeringsproblemer.
Legg merke til at plutselig elementene på siden virker spredt. Hovedinnholdsområdet nederst stemmer ikke overens med verken det hengende banneret øverst til venstre eller de spredte elementene øverst til høyre. Videre virker Facebook-logoen liten og strandet av seg selv, og overskriften er forskjøvet bort fra kanten av navigasjonen, som er forskjøvet vekk fra innholdskanten.
Selv om denne designen føltes ganske anstendig når vi bare følte den ut, ser vi nå at den kan bruke mye omstrukturering. Herfra er det to viktige ting du trenger å ta opp: Justering og negativ plass.
Disse konseptene er ekstremt tett knyttet til hverandre. Å jobbe med det negative rommet har mye å gjøre med å fokusere på hullene og bruke grunnleggende symmetri. Hvis du vil ha mer informasjon om det riktige handlingsforløpet angående det negative rommet, kan du lese Guide to Negative Space over Six Revisions.
I denne artikkelen kommer vi videre ved å fokusere mer på hvordan du bruker de grunnleggende justeringene du er kjent med i komplekse oppsett.
Senterjustering
Sentrerte oppsett er valgmetoden for omtrent enhver person på planeten ... bortsett fra designere. Av en eller annen grunn virker det å sentrere elementer på siden som det du skal gjøre. Sikkert en designer viktigste jobb er å bare sentrere elementer!
Jeg kjørte på dette problemet for noen år siden da jeg overrakte et design som jeg hadde laget til en utvikler for å kode. Da han viste meg den ferdige versjonen, hadde alt blitt flyttet fra venstre til midtlinjen! Han forklarte ganske enkelt at han alltid hadde foretrukket å samkjøre alt "så det ser fint ut."
Realiteten er at å sentrere hvert element er det svakeste justeringsvalget du kan ta.
Det er ingen harde kanter å følge, så øynene dine må gjøre mye mer arbeid for å både ta i den generelle utformingen og absorbere det spesifikke innholdet.
Når du skal bruke den
Dette er overhode ikke å si at senterinnretninger alltid bør unngås. Selv har jeg brukt dem på demonstrasjoner for nettopp dette nettstedet. Nøkkelen er å vite når du skal bruke dem.
Jeg opplever at det best mulige scenariet for en senterinnretning er når det er veldig lite på en side. Jo mer komplisert utformingen er, desto mindre fungerer senterlinjene. Hvis en gitt side ikke har mye på gang, kan senterjusteringer gi en kraftig uttalelse.
Venstre justering
Venstrejusteringer, selv om det er uten tvil kjedelig, er bunnsolid og bør være din standard, gå til rette for mye av arbeidet du gjør.
Vi er vant til å se innhold organisert på en venstrejustert måte. Crack åpne en bok eller avis, så finner du mange venstrejusteringer. Bla gjennom annonsene i søppelposten din, igjen, mange venstrejusteringer. Du vil se dem på Facebook, Googles søkeresultater, Twitter-strømmer og alle andre store nettsteder.
Venstrejusteringer styrer verden, eller i det minste de samfunnene som leser fra venstre til høyre. Du skal ikke helt være avhengig av en venstrejustering for alt, bare vite at det er den trygge ruten.
Når du skal bruke den
Brukes i alle slags situasjoner, men spesielt når det er mye tekst. Bare se på siden du leser nå. Hvis dette var midtstilt, ville det være et mareritt.
Legg merke til at, spesielt på nettet, hvis venstrejustering av noe ikke betyr at du ikke kan sentrere det. For eksempel inneholder en HTML-div ofte en haug med venstre justerte avsnitt og bilder, men blir deretter sentrert på siden ved hjelp av CSS.
Høyre justering
Rettjusteringer er sannsynligvis det sjeldneste. Siden vi leser fra venstre til høyre, føles det bare rart for noe å klamre seg fast i høyre kant.
Imidlertid er det en perfekt sterk justering som kan brukes grundig i designene dine, spesielt på trykk (det pleier å være enda mer uventet på nettet).
Når du skal bruke den
Ofte, men ikke alltid, vil en riktig justering formidle en følelse av unikhet. Hvis du designer noe som må skille seg ut og føle seg annerledes, er en riktig justering et flott sted å starte.
Begrunnelse av justeringer på nettet
Innretningen vi utelatt er åpenbart berettiget. Dette kommer sterkt inn når du binder et helt nettsted sammen som et konseptuelt element.
Det interessante med å designe for nettet er at det ofte innebærer en blanding av justeringer. Du har sikkert hørt designere foreslå at de aldri skal blande justeringer, men dette rådet fungerer bare ikke i den virkelige verden.
I stedet må du ta beslutninger for både elementene på en side så vel som sideelementene som helhet. Legg merke til hvordan jeg startet denne diskusjonen ved å se på et eksempel på å se justeringen av et nettsted som en helhet, men deretter fortsatte jeg med å diskutere individuelle elementjusteringer.
Når du har bestemt deg for en justering for teksten og bildene på siden din, innebærer det å kaste alt på siden i en rettferdig justering. Selv om du kan ha en ujevn kant, kan rettferdiggjøring av alt legge til den finpuss som ikke manglet i det originale eksemplet.
Legg merke til hvordan det på siden ovenfor er en sterk venstre justering, men alt på høyre side er også stilt opp for å skape et sammenhengende berettiget utseende. Den lille innloggingsknappen stiller opp med nettleserbildene, som stiller opp på høyre side av kalenderikonet.
Dette er ren, profesjonell design. Det passer kanskje ikke for alle prosjekter, men jeg kan ofte se designere som prøver å nå det og mislykkes, og jeg ville ta opp noen av de sannsynlige årsakene.
Dette er en av grunnene til at nettsystemer er så populære. Å kaste alt på et rutenett sikrer at justeringene dine er stive og enkle å følge.
Konklusjon
For å oppsummere, når det er mulig, bruk sterke justeringer som gjør det enkelt for øyet ditt å følge informasjonsflyten. Midtstillingsjusteringer er akseptable, men blir vanskeligere å implementere riktig etter hvert som innholdet på en side øker.
Husk at justering refererer til spesifikke elementer på en side så vel som ordningen av objektene som helhet. Bruk tid på hvert design, og pass på at alle elementene stemmer overens med alt på siden. Dette gjelder vertikalt og horisontalt langs alle kanter av designet.
