Bygg konsistens og relasjoner til dine design

En viktig del av sammensetningen er å forstå hvordan du bygger konsistens i designene dine og hvordan du viser forholdet mellom hver av elementene på siden.


Bygge Consis- Hva?

Først må en av dine hovedmål med hvilken som helst nettside være å bygge forholdet mellom brukeren og nettsiden. Årsaken er å skape tillit med brukeren, slik at de føler seg komfortabel med å navigere og samhandle med nettsiden. Gjennom design og funksjonalitet kan du da tilby brukerne en bedre opplevelse.

Bygningskonsistens i designene bidrar også til å styrke merkevaren din og holde merkevarens melding tydelig. For en klient er det viktig for virksomheten at merkets melding (enten online, offline eller i noe annet medium) er konsekvent som det igjen vil bygge tillit til kunden. Hvis en merkets melding er inkonsekvent, forvirrende eller vanskelig å forstå, kan dette være off-putting til kunder og kan til og med påvirke salg og henvendelser, noe som til slutt har en skadelig effekt på kundens virksomheter.

Selv deg selv, som individ, trenger å forstå betydningen av konsistens i din merke. Du selv er et merke. Selv om du har en personlig blogg, setter du deg selv på nettet og bør bryr deg om ditt merke og bilde. Noen ganger, spesielt i nettbransjen, er det enda viktigere å bygge en merkevarekonsekvens for deg selv, da det bidrar til å sette deg fra hverandre og gjøre deg unik.

Bygningskonsistens og forhold til designene dine handler også om å bygge relasjoner mellom de mindre, individuelle elementene i designene dine.


Gov.uk-nettstedet er ekstremt konsistent, noe som gjenspeiler tonen og profesjonaliteten som forventes av Govenment-nettsiden.

Hvorfor dette er viktig

Bare fordi du jobber på nettet, betyr det ikke at verdiene som ses i tradisjonell, offline markedsføring og design, bør forsvinne. I stedet bør du gjøre overgangen sømløs.

For eksempel, hvis du jobber på et nettsted for en tradisjonell butikk (som har faktiske butikklokaler!), Bør du bære det merket gjennom det designet du lager for deres hjemmeside. Du vil at brukerne skal føle seg lykkelige og komfortable når de surfer på nettstedet, og vet at det er kjent for dem - selv om de aldri har besøkt det før. Alt i alt gir design med konsistens i tankene et mer solid, pålitelig design- og designsystem.

Designing med konsistens har også en fordel for deg som utvikler. Har du noen gang hatt et design levert til deg som var inkonsekvent, med mye forskjellig margin, skrift og mellomrom størrelser? Det er veldig irriterende, ikke sant? Hvis du i stedet designer med konsistens, kommer du til å kunne få øye på mønstre i ditt design som vil hjelpe deg når du er i utviklingsstadiene, og dermed øke utviklingsarbeidet og redusere mengden tid du må bruke på å finne ting ute.

Det er også viktig å tenke på konsistens i det hele tatt. Snarere enn å tenke visuelt om hvordan ting kan se ut og hvordan du holder disse tingene konsekvent, i stedet også tenk på interaksjonene og oppførselsmønstrene i designene dine. Tenk på hvordan brukeren vil samhandle med nettstedet ditt, tenk på animasjoner og hvordan ulike elementer kan reagere på brukerens innspill. Hvis du endrer disse mønstrene drastisk fra side til side, vil du bare forvirre brukerne.


Ved ink, er det en klar visuell stil som representerer merkevaren på hele deres nettside veldig bra.

Hvordan designe med konsistens

Design med konsistens i tankene bør være ganske enkelt. Som vi tidligere har forklart, bidrar konsistensen til å holde et merke visuelt sterkt og forholdet mellom en merkevare og dets brukere eller kunder til et høyt nivå.

En eldgammel markedsføringsteknikk er å designe ved å gjenta meldingene dine for å hjelpe brukerne til å huske ting. Selv om dette kan utnyttes i designene dine, er det konsistent på en annen måte som jeg vil at du skal tenke på mer.

Tenk på måten du designer alle elementene på i designet, for eksempel:

  • farge (fokus, sekundære farger)
  • visuelle bilder (bilder, bilder, ikoner, knapper)
  • typografi (størrelse, hierarki, posisjonering)
  • størrelse (med innhold, bilder, relasjoner)

Tenk på den visuelle stilen til disse elementene og hvordan de spiller mot hverandre. Du har lært hvordan du bruker farge, størrelse og et visuelt hierarki for å låne fokus på bestemte elementer, nå vil jeg at du skal prøve og tenke på hvordan du kan gjøre alle disse elementene konsistente på en eller annen måte. På samme måte som vi ikke ville (normalt!) Bruke åtte forskjellige skrifttyper i ett avsnitt eller område av vårt design, bør vi være det samme med våre andre designelementer.

Bygningskonsistens i designene handler om de små detaljene som mest muligens kan bli ubemerket, men selv da vil de ubevisst gi dem en bedre opplevelse. Men det er de små detaljene som vil bli verdsatt av de som gjøre Legg merke til ekstra tid og oppmerksomhet som har blitt brukt på disse ekstra tingene.

Sørg også for å være konsekvent fra side til side (med mindre det er spesielt en del av designet som har et annet design for hver side, for eksempel på en kunstrettet blogg). Men selv da er det super viktig å være konsekvent i elementene som er mer sannsynlig å forbli det samme - som for eksempel logoen eller navigasjonen er plassert. Det er viktig å ikke forlate alle aspekter av ditt design og å bygge opp kjenthet i de områdene som er mer egnet til å være konsistente.

OnSite-nettstedet har et flott merke, med en enkel design som stikker sant gjennom hjemmesiden og andre toppnivå sider.

Bygg relasjoner i dine design

Farge

Som forklart i tidligere artikler i denne sesjonen har farge en massiv innvirkning på mennesker og deres oppfatning av design. Mens du ikke kan fokusere på hver enkelt persons personlige forhold til farge, kan du bruke farger i bredere forstand til å bygge et forhold mellom et sannsynlig målgruppe og design.

Farge har en innvirkning på mennesker personlig - både mentalt, gjennom følelser eller følelser og også fysisk - og dette kan komme over i merkevaren, forhåpentligvis bygge sterkere forhold mellom brukerne og nettsiden dersom meldingen holdes konsekvent.

Tone & Character

Tone er viktig i ethvert design og gir et stort inntrykk på brukerne. Tone kan komme over hvert aspekt av designet, fra innholdet til bildene og andre visuelle stilarter du har.

Å legge personlighet til et merke er også helt fint, og du kan gjøre det gjennom det du har lært om farge og typografi. Subtile beslutninger som dette viser gjennom i personligheten som du kan forbedre gjennom innhold og bilder, bygge en konsistent visuell stil i designen din.

Brukeroppfattelser

Tenk også på hvordan en bruker kan forbinder med merkevaren din, og hvordan de ville føle om det. Tenk på hvordan du kan vil Brukerne dine skal føle seg når de knytter seg til merkevaren og prøver å reflektere dette i designet. Ta disse følelsene og oppfatninger som du vil at brukerne skal ha, og bruk konsistens i designelementene dine for å projisere disse følelsene gjennom nettstedet.

WooThemes har en flott visuell stil og tone som er satt gjennom hele sitt nettsted - noe som kan være vanskeligere å gjøre når du har større nettsteder som dette.

Verktøy for byggekonsistens

Det er mange verktøy du kan lage selv, eller gi kundene dine hjelp til å forstå viktigheten av konsistens.

Stil guider

En stilguide er nesten som en vanlig design- og merkevareretningslinje som du kanskje kan jobbe med, men i stedet for å være relatert til bare merkevaren, er det i stedet knyttet til noen av nøkkelstiler og designelementer i webdesign.

Se: Stilfliser for videre ideer.

Mønsterbiblioteker

Mønsterbiblioteker er som et skritt foran en stilguide; de er et dokument av alle mulige stilelementer som er inkludert i webdesignen din. Fra tekststiler, knappestiler for å vise stiler og bildemønstre, kan disse mønsterbibliotekene være veldig nyttige for fremtidig vedlikehold av et webdesign og for å sikre at konsistensen holdes i fremtidige endringer..

Jeg liker å tenke på mønsterbiblioteker for tre hovedområder: designmønstre, oppslagsmønstre og innholdsmønstre.

  • Design mønstre: Ethvert designelement som du har på nettstedet ditt. Dette blir et dokument som inneholder alle stiler for tekst, overskrifter, knapper, ikoner osv.
  • Markeringsmønstre: Dette er en HTML og CSS kopi av Design Patterns Library - med riktig HTML (og relevant CSS-klasse om nødvendig) for fremtidig vedlikehold av å legge til seksjoner på nettstedet.
  • Innholdsmønstre: Disse bidrar til å diktere stilen og tonen i innholdet som skal brukes på nettstedet. Selv om det ikke er sannsynlig at du vil kunne gi nøyaktig innhold (som du ikke vet hvordan nettstedet kan utvides i fremtiden), kan du i det minste hjelpe til med å angi tonen for fremtidig arbeid. Selv om innholdet kanskje ikke er noe du har gitt for en klient, kan det være en ide å sikre at de forstår at innholdet bare er en del av å gjøre nettstedet ditt mer konsistent - og mens du kan gi design og utvikling sider, det Det kan være vanskelig å ha disse funksjonene også med innhold som ikke samsvarer med resten av nettstedet.

Sjekklister lister~~POS=HEADCOMP

Jeg er en stor fan av lister, og jeg synes det er en veldig enkel ting å gjøre for å sjekke hvordan konsekvente ting er i ditt design, er å lage en enkel og enkel sjekkliste.

  1. Først opp, hvordan er typografien utforming? Er det konsistent? Er overskriftene konsistente fra side til side? Faller typen inn i en fin vertikal rytme over hele siden? Faller den vertikale rytmen ut av sted med introduksjon av bilder? Eller ser alt bra ut?
  2. Imagery / visuell konsistens; hvordan ser bildene ut? Er alt en lignende stil og tone, eller er det helt forskjellige stilarter av bildet? Er alt beskåret eller formet på samme måte, eller er alt for annerledes? Er bildestørrelsen lik eller har størrelser over hele designet? Er ikonene like store når det passer? Har knappene samme polstring og hvite plass til dem?
  3. Farge konsistens; hvordan ser fargene ut? Fargene fungerer godt fra side til side? Er fargene passende? Fargene fungerer godt med hverandre? Er fargene nøyaktig det samme hvor de brukes mer enn en gang?

oppdrag

Alt ovenfor skal hjelpe deg når du prøver å skape et design som har mer konsistens og vil hjelpe deg å bygge relasjoner mellom hver av elementene dine. Jeg vil at du skal bruke sjekklisten på slutten (eller lag din egen!) For å se hvor konsistent ditt design er. Hvis det ikke er det, ta deg tid til å bygge den konsistensen i designene dine.