Om Forfatteren
Steven Bradley er forfatter av Design Fundamentals: Elementer, Attributter, & Prinsipper og CSS-Animasjoner og Overganger for det Moderne Nettet., Når du ikke er …Mer aboutSteven Bradley↬
- 10 min lese
- Inspirasjon,Design,Kreativitet,Design Prinsipper
- Lagrede for offline lesing
- Del på Twitter LinkedIn
Design er et arrangement for både former og plass. For å arbeide mer effektivt med plass, må du først bli bevisst på det og lære å se it — lære å se figurene plass skjemaer og hvordan plass kommuniserer. Dette er andre del av en serie på design prinsipper for nybegynnere. Den første delen omfattet en introduksjon til gestalt; resten av serien (inkludert dette innlegget) vil bygge på de gestalt prinsipper og vise hvordan mange av de grunnleggende prinsippene vi jobber med designere som har sin opprinnelse der.,
– Figur-Bakken Forholdet
Den gestalt-prinsippet som gjelder mest for plass er det av figur-bakken. Alt i et design av deg vil bli sett på som det ene eller det andre, og forholdet mellom dem er gjensidig utelukkende. Heller ikke kan oppfattes bortsett fra i forhold til den andre, og endrer man er umulig uten å endre andre også.
figur-bakken forholdet er også komplementære. Figur bakken og kan øke eller avviker fra hverandre, og å organisere de to i forhold til hverandre er ett av flere viktige aspekter i design., Det setter en kontekst for hvordan design kommuniserer og hvordan det skal tolkes.
«White space er å anse som et aktivt element, ikke en passiv bakgrunn.»
— Jan Tschichold
I tredje panel, to av de svarte linjene har blitt fjernet. Dette aktiverer plass, slik at det ser ut til å bli sittende på toppen av det grå feltet., Bakken har blitt figuren og gir mer dybde til design.
Det er tre typer av figur-bakken relasjoner:
- Stabil (over til venstre)
Det er tydelig hva som er figur og hva som er grunnen. Den ene eller den andre vanligvis dominerer sammensetningen. - Reversible (over midten)
Både figur og bakken tiltrekke seg brukerens oppmerksomhet likt., Dette skaper spenninger, der du enten kan kjøre forbi den andre, fører til en dynamisk design. - Tvetydig (over til høyre)
– Elementer kan vises å være både figur og bakken samtidig. De danner like interessante former, og viewer er igjen å finne sin egen inngangspunkt til sammensetning.
Avhengig av hvilket forhold du har satt opp og hvordan du balansere både figur og bakken, kan du direkte publikum til å se på ulike deler av design og tolke det de ser i ulike sammenhenger.,
Figur-bakken er ikke den eneste gestalt-prinsippet der plass spiller en fremtredende rolle. To andre er disse:
- Nærhet
Nærhet bruker plass til å koble til og separate elementer ved å kapsle noen elementer i rommet. Et eksempel vi kan ta for gitt, er avsnitt av teksten på siden. Avstanden mellom avsnittene er større enn avstanden mellom linjer av tekst i et avsnitt. - Nedleggelse
Dette gjør bruk av plass som mellomrom mellom elementer. Seerne fylle ut hullene med sin egen informasjon for å fullføre en hel fra deler. For mye plass, og ingen nedleggelse oppstår., For lite plass og ingen stenging er nødvendig. Bare den riktige balansen mellom plass og fylt ut i verdensrommet for å aktivere space og føre til nedleggelse.
Plass Som Et designelement
Tenk om musikk for et øyeblikk. Hvis hver eneste tone eller akkord ble spilt på samme tid, du ville ikke ha musikk. Du vil ha støy. Musikk oppstår når lyden er kontrastert mot stillhet. Varierende mønster av lyd og stillhet skaper rytme og melodi., Uten stillheten, det er ingen musikk.
Plass utfører samme funksjon visuelt. Det gir positive elementer rom til å puste. Det gir øyet frihet til å bevege seg gjennom et design og å oppdage elementer det er på utkikk etter. Det positive er bare sett i kontrast med det negative. Uten plass, trenger du ikke har design. Du har visuell støy.
med Mindre støy er hva du prøver å kommunisere, lene mot verdensrommet. Folk er mindre sannsynlighet for å klage om for mye plass enn om for lite.,
Plass kan du gjøre følgende:
- etablere kontrast, vekt og hierarki;
- generere drama og spenning;
- sørge for visual hvile mellom grupper av elementer.
Som figur-bakken forhold tilsier, du har plass bare når noe er til stede inne i den. Før tillegg av positive elementer, plass er udefinert. Figuren bakken forholdet må være etablert før plassen kan eksistere og kommunikasjon begynner.
En av de viktigste funksjonene på plass for å forbedre lesbarheten og lesbarhet., Makro-plass gjør teksten mer innbydende. Micro-plass gjør det mer forståelig.
- Micro-plass
Dette er plass innen elementene i en gruppe. Det er mellomrom mellom bokstaver, ord og avsnitt. - Makro-plass
Dette er mellomrom mellom store elementer. Det separate elementer eller grupper av elementer og gir muligheter for øye å følge og steder å hvile mellom elementer.
Plass korrelerer til kvalitet. Mer plass innebærer færre elementer eller en sjeldenhet av elementer. Sammenlign high-end og over butikker., Som en vanligvis har mer plass inne i, og som man pakker produkter i hver bit av tilgjengelig plass? Hva gjør plass kommunisere til deg?
Plass kan også formidle andre attributter enn kvalitet, for eksempel:
- raffinement,
- enkelhet,
- luksus,
- renslighet,
- ensomhet,
- åpenhet.
Du kaster bort plass når du ikke klarer å vurdere det. Kan du kaste bort plass ved overfylling det. Kan du kaste bort plass av fangst det inne elementer av en design, og ikke slik at det å koble til andre plass i design.,
Design er i siste instans et arrangement av former, og som omfatter former dannet av plass. Ikke vær redd for å bruke plass. Se på det som et viktig designelement under din kontroll.
Få Eksempler På Plass I Nettsteder
for Å bedre bruken plass, må du først bli bevisst på det. Lære å gjenkjenne plass i forskjellige design. Legg merke til den form det former, og tenke på hva plassen er å kommunisere. Til slutt, la oss se på utformingen av noen nettsteder, for å merke av hvor plassen er brukt.,
Old Guard
design av Tom Johnson Old Guard bruker massevis av hvite mellomrom, noe som gir tekst og andre elementer rom til å puste. Det er ingen tvil om hva som er figur og hva som er grunnen.
Informasjon finnes og er atskilt av mellomrom (husker prinsippet om nærhet), skille grupper av elementer., Du kan enkelt fortelle hvor det ene innlegget slutter og den neste begynner, utelukkende av avstanden mellom dem.
Den viktigste innhold er litt off-center på siden, med god plass på hver side. Denne plassen er tidvis avbrutt av elementer, aktiverer du både plass og avbryte elementer. Dette bidrar til å trekke oppmerksomhet til området og spesielt elementene innenfor.
Heroku er Status Side
bildet nedenfor viser en del av status-siden for Heroku så blir det meste plass., Jeg skjedd å fange nettstedet på en spesielt god dag, fordi flere positive elementer ville bety flere rapporterte hendelser på plattformen. Her, mer hvitt plass betyr bedre service.
legg Merke til hvordan den hvite plass trenger ikke å være hvit. Mens siden er altfor raus med plass, du er usannsynlig å klage over at det er for mye av det., Viktig informasjon — i dette tilfellet, status oppdateringer og rapporter om hendelser — avbryte plass.
Innføring i Romanen
Den plassen på toppen av å Innføre Romanen er asymmetrisk og aktiv. Legg merke til hvor stor blokk av plass på venstre fører øyet direkte til innholdet. Hvis du klikker gjennom nettstedet, og bla ned fra toppen, vil du se at plassen er også brukt til å skille, og gruppen av informasjon.
Tynne lyse linjer er også brukt til å gruppere og skille disse blokkene. Når du ser på nettstedet, legg merke til hvordan linjene ikke alltid touch, og gir plass til å flyte rundt dem og koble til andre plass. Dette hindrer verdensrommet på, fra å bli fanget.
Elliot Jay Aksjer
nettstedet til Elliot Jay Aksjer bør være kjent for alle, siden han er bak utformingen av denne. Asymmetrisk plass på Elliot ‘ s hjemmeside igjen fører til aktiv plass.,
Det store bildet på toppen av denne siden potensielt kan stå som en midlertidig sperre for å få tilgang til innholdet nedenfor; imidlertid, en generøs mengde plass ved siden av bildet gir god og innbydende rom for øyet å flytte rundt det., Hvis sidepanelet på venstre hadde samme bakgrunnsfarge som er det viktigste innholdet, så ville det sannsynligvis være lettere for øyet å flytte rundt bildet, men endring i farge neppe gjør det vanskelig.
Som med nettstedene ovenfor, kan plassen brukes til både anførselstegn og separate grupper av distinkte informasjon, slik at hver gruppe skiller seg ut og lar øyet for å finne ut hva de ønsker og å hvile i mellom.
Phil Coffman
innholdet på Phil Coffman hjemmeside danner en enkelt form som sitter i det meste tomme rommet., Fravær av mange positive elementene øker viktigheten av at de som er til stede.
Selv innenfor de fargede rektangulære bakgrunner, og tekst har nok plass rundt den til å være lett å lese, og for ikke å bli forvekslet med en annen kategori av teksten på siden.,
Den positive formen (og formen på plass) justerer responsively til annen nettleser bredder, men mønsteret av én stor form omgitt av er det fortsatt god plass.
Nye Eventyr i Web Design
Som mange av nettstedene her, 2013 nettstedet for Nye Eventyr i Web Design conference etterlater sjenerøs plass rundt elementer. Distinkte grupper av informasjonen som finnes av plass, og plassen er aktiv i hele det design.
Noe interessant å merke seg er grå sirkulær piler mellom bildet øverst til venstre, og det viktigste innholdet til høyre.
Gjør disse pilene blokkerer flyten av plass? Fordi de ikke berør og siden alle er stiplet hvor det avbryter plass, plassen kan strømme gjennom, selv om det er klart mer begrenset i flyt.
Den lysere grå farge hjelper. Det hindrer piler fra dominerer, og det er ikke vanskelig å forestille seg space flyter over linjene.,
I rettferdighet, hvis nettleseren min var større når jeg tok screenshot, pilene ville ikke overlapper med de viktigste innhold. Men, rundt 1280 punkter og ned til hvor design blir en enkelt kolonne, de gjøre. Totalt sett, det fungerer, men jeg lurer på om plass ville flyte bedre uten pilene til stede.
Noen Eksempler På Logoer
jeg vil forlate deg med noen logoer der plass er innarbeidet som en integrert del av design. I stedet for å peke på bruken av plassen i hver, vil jeg gjøre et par generelle kommentarer, og deretter kan du utforske mellomrom for deg selv.,
Merke til hvordan logoene nedenfor gjøre bruk av figur-bakken forhold. Med litt, til du ser både figur og bakken, kan du ikke se det i full logo. Begge er nødvendige bidragsytere til det som formidles.
Flere av disse logoene stole på prinsippet om stenging. Det du er ment å se er egentlig ikke det, men du ser det likevel. Noen av disse logoene også spille rundt med figur og grunn. Hva er figur når du tar i det hele logoen mot sin bakgrunn blir bakken for en mindre figur innenfor., Dette reversible figur-bakken forhold er sentrale for hva som blir kommunisert.
- Cloud Bed
- Black Cat Lounge
- Skift
- Dolphin & Seal Logo Designer
- Dental Implantater Guide
- Wineforest
Oppsummering
jeg håper du tar bort to viktigste ting fra dette innlegget., Først er det sammenheng mellom bruk av plass i design og gestalt-prinsippet i figur-bakken. Gestalt prinsipper underly mye av det vi gjør som designerne.
for det Andre, og kanskje enda viktigere, gjør en innsats for å tilbringe tid på å observere hvordan plassen er brukt i design. Ikke la space være et biprodukt av dine positive elementer. Lære å designe plass så mye som, om ikke mer enn positive elementer. Layouten på en side er til syvende og sist en organisasjon på plass.
Bevisst analysere denne plassen, og bevisst bruke det til å opprette en bedre design. Ikke la det være det som er igjen over., Se på det som et viktig designelement, og deretter vise forholdet mellom plass og positive elementene som et designelement som du former.
Neste gang, vil vi legge til mer gestalt prinsipper til mix og utforske hvordan knutepunkter, videreføring og felles skjebne føre oss inn ideer, for eksempel visual vekt og kompositoriske balanse.
- Sinnet Ditt Eget Og lange Tankestreker: Typografiske Etikette
- Design Prinsipper: Visuell Vekt Og Retning
- Hvordan Geometri Påvirkninger Logo Design
- Om Kunsten
(al, ml, il)