Enhet i webdesign

I dag skal vi se på et designprinsipp som spiller en viktig rolle i suksessen til et webdesign: Enhet. Som med mange utformede elementer i verden, kan enhet gjøre eller ødelegge et nettsteds design. Et godt "enhetlig" nettsted føles naturlig, organisk og sømløst; Hvor et sted som mangler enhet kan føle seg uensartet, diskontinuerlig og discombobulated (med andre ord, det faller bare fra hverandre visuelt). Les videre for å finne ut mer!

Introduksjon til enhet

Enhet er et interessant konsept. Hvis vi tar en titt på den tekniske definisjonen, er det noen som kan gjelde i forbindelse med webdesign? for eksempel "staten for å være forent eller samlet som en helhet" og "harmoni eller avtale mellom mennesker eller grupper". Spesielt skjønt, kan vi se på en definisjon som gjelder for dette scenariet som av de gyldne reglene for god webdesign: "Staten til å danne en komplett og behagelig helhet".

Enhet er veldig viktig fordi det bidrar til å skape en konsekvent merkevare og identitet for nettstedet ditt. Det danner en sammenheng mellom elementene dine, slik at brukerne har en enkel tid å gå mellom disse elementene, og også mellom de forskjellige sidene på nettstedet ditt. I utgangspunktet skaper konseptet enighet et sterkt forhold mellom elementene, slik at brukeren oppfatter dem som en, ikke som en gruppe.

Hvorfor er enhet viktig?

Tenk på det på denne måten. Hvis du bor i et hus laget av murstein, sier du ikke: "Jeg bor i en haug med murstein". I stedet sier du: "Jeg bor i et hus". Det er fordi du har en gruppe forskjellige elementer (nemlig mursteinene) som er forenet som et hus, og folk tar i strukturen som en enkelt bygning takket være tilkoblingene og sterke forhold mellom de (bokstavelige) byggestene.

Det samme gjelder også mange ting i den naturlige verden. Vurder bladet til høyre. Den inneholder millioner av celler og andre byggeklossestrukturer, men de fleste tenker bare på det som et blad.

Enhet holder utformingen sammen som strukturen, både visuelt og konseptuelt. Det legger til organisasjon og vil lette brukerens reise over din nettside fordi de ikke trenger å behandle hvert element enkeltvis. Dette indirekte bidrar til å skyve innholdet ut og lar brukeren fokusere på den primære meldingen til nettsiden.

Faktorer av enhet

Det er mange faktorer som bidrar til en følelse av enhet innenfor en nettside. Men før du prøver å bruke noen av dem, bør du sørge for at du forstår hva kjerneformålet med designet er. Formålet med designet skal støttes av det forenklede designet som gjør alt synlig knyttet og lettere å bli oppfattet.

• Farge - Farge er en av de største faktorene i enhets design. Derfor holder firmaene vanligvis seg til et kontrollert fargeskema; Det hjelper å forene sine produkter til en familie; Det kan også ta store kropper av desperat informasjon og få det til å føle seg kontinuerlig. Ta Apple for eksempel; de holder seg til sølv, hvite og grå produkter fordi det hjelper med å representere at deres Mac-maskiner er en del av en produktfamilie.
• Gjentakelse - Fortsett med Apple-analogien, la oss ta en titt på iOS-linjen. Hver av produktene her gjentar visse elementer, som hjemme-knappen nederst, eller kameraet øverst. Denne "mal" for deres enheter hjelper folk å gjenkjenne at de er en del av samme familie, fordi den gjentas i hele produktene. Apple forener sine produkter som et merke - eller en familie - på grunn av gjentakelsen av spesifikke elementer gjennom hele.
• Justering - Justering kan faktisk spille en rolle i enhet, siden elementer utformet rundt en felles akse kan føles mer koblet sammen. Dette er sidet mot visuell enhet, ikke konseptuell enhet.
• Nærhet - Ting ser sammen, når de er nærmere. Det er bare naturlig. Dette er ganske enkelt fordi når du setter ting sammen, ser de ut? sammen. Men hvis de ikke er sammen, kan andre faktorer (som farge) bli brukt for å fortsette følelsen av enhet.
• Kontinuitet og visuell retning - Å flytte mellom elementer hjelper enkelt til å forene følelsen og fremkalle dette gjennom taktisk visuell retning er en metode for å gjøre det. Jeg vil forklare det mer om et øyeblikk.
• Konsistens - Konsistens i andre faktorer som typografi gjør også elementene ikke så forskjellige. Å holde ting konsistent betyr at de ser ut som hverandre, og forbindelsene genereres derfra.

La oss nå forklare litt mer hvordan hver av disse faktorene kan utnyttes for å skape et sterkt forhold mellom elementene.

Farge

Som vi allerede har etablert, kan farge være en fin måte å danne en forbindelse mellom objekter på. Nesten alt stikker til et fargevalg - nettside eller ikke - siden det bidrar til å skape et forhold, spesielt når det brukes i forbindelse med et produkt eller noen ikke-web-enhet. For eksempel bruker Coca-cola nettsted (se nedenfor) primære røde og hvite farger, det samme som flaggskipproduktet. Derfor kan vår bruk av produktet umiddelbart knyttes til nettstedet på grunn av fargenes konsistens.

Enhet gjennom farge kan også genereres gjennom bare å sørge for at du følger et definert fargevalg i designene dine. Ikke å være konsekvent i denne forbindelse vil resultere i et design som føles frittliggende fordi en av de største innflytelsene i en visuell lenke vil bli savnet. Vi kan til og med gå så langt for å si at du kan skade din enhet hvis ditt valg ikke er relatert til din type produkt, som hvordan grønn kan knyttes til finansiering.

Gjentakelse og konsistens

Tilbakevendende elementer som ser ut som identiske danner en forbindelse siden hjernen din vil tenke, "hei, jeg har sett det før!". Det skaper kjennskap i designet, slik at brukerne ikke er forpliktet til å reprosere den aktuelle delen av nettstedet ditt på nytt. Den forbinder sidene med likhet, så hovedfokus er på innholdet og meldingen du vil presse.

Selvfølgelig er gjentakelsen av elementene ikke den eneste metoden for å skape enhet i utformingen. Bare ved hjelp av lignende faktorer (som farge eller typografi) kan du koble elementene i designet fordi de ser ut like. Ved hjelp av samme fargevalg, kan samme grenseformat eller bare samme skrift feste sider, eller objektene, i ditt design.

For bedre forståelse, la oss se på en analogi. Vi kan se på repetisjon fra et annet perspektiv: Mange skadelige nettsteder gjengir et populært nettsteds design, så det ser ut til brukeren som en annen side av en tjeneste de bruker hver dag. En falsk Facebook-påloggingsskjerm vil gjenskape fargeskjemaet og oppsettet til Facebook.com slik at det ser ut til den uskyldige brukeren som en offisiell side fra det sosiale nettverket. Den uutdannede brukeren tenker ikke to ganger fordi hjernen deres ikke er tvunget til å reprosessere disse elementene på siden.

Justering

Å holde en konsekvent justering bidrar til visuell enhet innenfor et element. Utforming rundt en felles akse gjør at elementene vises relaterte. En rekke stykker med samme innstilling ser ut som om de er en del av en artikkel, ikke bare forskjellige biter av tekst kastet sammen, og ender opp med å se organisert og rent posisjonert.

Flere justeringer krever bare mer innsats for å danne en tilkobling, og det er bare altfor bedre å unngå å bruke tid på å gjøre det.

Vurder hvordan et nett kan spille en rolle i tilpasning også. Som begrensning som et rutenett kan føle seg for en ny designer, gir den et solid grunnlag for å justere et bredt spekter av elementer på et enkelt rutenett. Vurder Squarespace nettsiden nedenfor:

Legg merke til hvordan det enkle tre kolonnenettet gjør en side som er full av informasjon, til en pent utformet, godt tilpasset side som føles enhetlig. Ikke dårlig riktig?

Nærhet

Nærhet er et annet konsept som bidrar til den samlede enheten i designet. Når du presser elementer nærmere, blir de lettere tatt inn som en. I et forsøk på å lage en analogi, kunne jeg bare tenke på det følgende, hvis du hadde en haug med sau sammen i et felt, kan de bli kalt en flokk. Men hvis de ble stasjonert i forskjellige felt, kan du ikke umiddelbart gjenkjenne dem som en del av samme mob (og det er en riktig kollektiv begrepet for sauer). Kanskje en mer passende analogi ville være å se på to personer som våknet nedover gaten, ler og snakker sammen. På grunn av deres nærhet til hverandre kan vi gjette at de har et tidligere forhold av sorter.

Legg merke til hvordan like forskjellige former (torgene) føler seg forenet i midten, mens sirklene på utsiden ser ut til å mangle enhet, selv om de deler samme form.

Som vi kommer til å bruke dette til webdesign, er det ikke så annerledes. Jo nærmere elementene er sammen, desto sterkere er forholdet som brukeren gjenkjenner, og jo bedre er den enheten det skaper. Hvis vi går tilbake et øyeblikk og setter pris på at all enhet virkelig betyr at samspillet mellom elementer, kan vi innse at et sterkere forhold korrelerer jevnt med nivået av samspill, og i den grad enhet.

Vi gjenkjenner øyeblikkelig at disse menneskene har en slags eksisterende forhold, bare fordi de er sammen. Forhåpentligvis er du enig i at de ser ut som en familie og i så fall hvilken annen indikasjon er det annet enn nærhet?

Visuell retning

Vi har en flott artikkel her på Tuts + i visuell retning og hvordan det kan påvirke et design. I et nøtteskall er det teorien om at vi kan påvirke en bestemt retning for en bruker over en nettside ved å skreddersy innholdet vårt til det målet. I noen grad kan vi bruke visuell retning i dette scenariet for å hjelpe brukere til å bevege seg videre til et annet element naturlig.

Jeg kan kanskje skyve det litt her, men ved å introdusere denne typen manipulasjon, kan vi skyve sammen elementene på en side for å skape sterkere obligasjoner, slik at du glir sømløst mellom hverandre, men treffer alle de områdene designeren ønsker deg å se. Dette forholdet kan brukes i sammenheng for å trekke brukerens oppmerksomhet på en annen historie på nettsiden din, eller muligens å fortsette å lese ned en side. Du kan bruke konseptet til å oppmuntre, ubevisst selvfølgelig, noen til å se og samhandle med tweet-knappen eller "Legg i handlekurven" en.

Dette er et eksempel som brukes i den visuelle retningsartikkelen. Legg merke til hvordan motivet på bildet påvirker brukeren å se i toppsenteret. Vi kan bruke dette i webdesign for å forsøke å gjøre elementene i siden flytende sammen sømløst.

Konsistens

Konsistens i webdesign er et grunnleggende prinsipp som bidrar til enhet. Et fotballag ville ikke gå ut og spille i skjorter med en annen farge per spiller. I stedet er de forenet som et lag med et enkelt design som representerer deres merkevare (eller i dette tilfellet et lag).

Konsistens oppnås ved å forsøke å holde stilen til lignende elementer like, og relaterer seg til temaer som farge, siden de er de faktorene som skaper vellykket konsistens. For å oppnå det, er det ikke mye å gjøre annet enn å holde seg til en ordning gjennom elementene dine.

Konklusjon

Enhet gjør bare ting føles tilkoblet og sammen ved at de ser ut som de burde være. Et nettsted er et nettsted, ikke en navigeringslinje, og en sidebar, en logo og et innholdsinnhold. Nei, i stedet er det en ting vi besøker: et nettsted.

Men hvis vi har for mange farger og skrifttyper, eller varene skyves vekk, eller justeringen er forskjellig i teksten din, blir bindingene ødelagte, og det føles ikke lenger koblet til. Du må kanskje spørre, hvorfor skal designet mitt være forenet? For å si det enkelt betyr det at brukeren ikke trenger å behandle hvert element, eller hver side, hver gang de møter en ny fordi den er gjenkjennelig. Det forbedrer også reisen over en side siden menyen ikke ser ut som om den er i et annet territorium til innholdet.