Visuell innholdsretning hva du trenger å vite
De visuell innholdsretning er en mindre diskutert, men viktig del av high-converting webdesign. Hver besøkende "suger opp" et nytt nettsted på første sidebelastning - om de gjør det bevisst eller ikke.
Estetikk spiller en rolle, men det handler mer om generell følelse av designen. Denne følelsen kan påvirkes av hvite rom, typografi, symmetri, men mest forhold mellom sideelementer.
Designere vil ha besøkende til bli på siden og fortsett å rulle ved å fange oppmerksomheten og holde dem interessert i området. Design prinsipper bør alltid fokusere på funksjon før skjema. Dette betyr at designet skal utfyller innholdet, ikke skyv den inn som en ettertanke.
I dette innlegget vil jeg gjerne vise deg noen tips om hvordan du kan forbedre layoutene dine og visuelle innholdsstrømmer på nettstedet ditt.
Fokus på komposisjonen
Hver eneste del av et nettsted bygger på det generelle oppsettet. Dette overordnede oppsettet skaper en sammensetning som følger reglene i Gestalt-teorien som sier det hele er alltid større enn summen av delene.
Individuelle områder på en side kommer sammen til danner en helhet. Designelementer må bygge en tyngdekraften trekk på innholdet; alt på siden skal Naturligvis lede besøkende ned lenger til de når bunnen av siden.
Dette er grunnen til at forhold mellom ulike deler av innholdet (visuelle, tekst, knapper, etc.) er så viktige å designe.
Målet ditt skal være oppmuntre folk å bla gjennom nettstedet fra sin egen tilbøyelighet. Det er lettere sagt enn gjort, men du kan lære mye av studerer ekte eksempler.
Hjemmesiden for Monkop er et godt eksempel på visuelt hierarki med både tekst og bilder. Rikelig med plass er brukt mellom elementene, og typografien utfyller de merkede vektorillustrasjonene.
Når du ruller, vil du legge merke til rett horisontale sideblokker delt med farger, grenser og grafikk. Disse er bygget med design mønstre i tankene til tilby konsistens hele siden.
Mot bunnen finner du en to-kolonne splittet med bilder på den ene siden, tekst på den andre. Bildene også bytte sider i et mønster av høyre til venstre til høyre. Dette trekker oppmerksomhet, og bryter opp monotonyen av den typiske siden mens den fortsatt er holder en naturlig strøm i innholdet.
EN lignende design estetisk finner du på nettstedet til Picjumbo, en destinasjonsside for et bilde tillegg for Photoshop og Sketch-brukere.
Hjemmesiden plasserer fokus på logoen og forhåndsvisningsvideoen. Når du ruller, vil du legge merke til egendefinerte animasjoner som beveger deg over hele siden. Denne animasjonen virkelig fanger oppmerksomhet, og får seeren interessert i å fortsette å rulle.
Samlet sett føles siden åpen og lett å bla gjennom. Innholdet er delt inn i horisontale blokker med skarp typografi og rene ikoner.
Tenk på måten forskjellige sider elementer balansere sammen, mellomrummet mellom elementer, kontrast mellom farger og forskjellige former. Alle disse tingene spiller en rolle i den samlede sammensetningen. Hvert nettsted tar naturlig vekt på innholdet.
Det er ikke noe absolutt svar fordi det er annerledes for hvert nettsted. For eksempel, Noen navigasjonskoblinger ser bedre ut når de er store og overdimensjonerte. Andre passer bedre når de er liten med store bokstaver.
Jeg foreslår at du studerer andre nettsteder i din nisje. Virkelig analysere hvordan de blir satt sammen. Prøv å gjenoppbygge layouter for å se hvilke elementer som endelig gjør at designet "kommer sammen".
Skriv inn designspørsmål
Måten du designer din typografi på vil påvirke innholdsretningen på nettstedet ditt. Dette har å gjøre med typen hierarki og design stiler av ulike sideelementer som avsnitt, overskrifter, punktliste lister, sitater og spesielle layoutelementer som kolonner eller tabeller.
Optikken kan også påvirke layoutet, så det er en god ide å designe innhold med en naturlig progresjon. Skriv innhold på en måte som strømmer ned på siden, og holder folk leser gjennom hvert avsnitt.
Det største verktøyet du har til disposisjon er ditt øye for design. Lær å gjenkjenne forskjellene i typografiske elementer, og hvordan de relaterer seg til andre sideelementer. Opprett relasjoner mellom sidestykker for å skille mellom innholdsområder.
Noen ting du kan vurdere:
- Tekststørrelse
- Font familie
- Fargekontrast
- Side seksjon relasjoner
- Linjehøyde og marginer
- Letteravstand og øvre / små bokstaver
Se for eksempel på hjemmesiden til Kampanje Monitor. De øverste navigasjonslinkene bruker alle dekslene med små bokstaver. Andre overskrifter på siden følg dette samme alle caps design hvilken skaper en følelse av ensartethet.
Andre større overskrifter på nettstedet er mye mer fremtredende, og de hopper virkelig av siden. Bare ved å se på en typisk toppdesign, bør det være enkelt å fortell forskjellen mellom en topptekst og sin parret kroppskopi.
De typografiske design stilene på Kampanje Monitor er utsøkte, og de blande naturlig inn i oppsettet. Det krever øvelse for å oppnå et slikt resultat, men jo mer du prøver, desto lettere blir det.
For å lære litt mer anbefaler jeg på det sterkeste følgende lenker:
- Designprinsipper: Visuell vekt og retning
- Arbeider med visuell vekt i designene dine
- 19 Faktorer som påvirker komposisjonssaldoen
Veiledende innhold
Forstå det forskjellige typer nettsteder ha forskjellige metoder for å lede besøkende gjennom nettstedet. For eksempel må destinasjonssider veilede besøkende med godbiter av informasjon, små ikoner, skjermbilder, og attester.
Andre nettsteder som blogger bringer vanligvis ikke folk til hjemmesiden på en gang. Folk flest lande på en artikkel side, så blogginnlegg er ment å markere overskriften, og tegne folk videre inn i innholdet. Dette er hvor kvalitet copywriting kommer inn i spill fordi du vil at leserne henger av hvert ord.
Sosiale nettverk og webapps trenger kvalitet brukeropplevelse, så det er et litt annet emne, men vurder hvordan Facebook-feedet er designet til oppmuntre rulling og brukerinteraksjon.
Designmetodene du bruker for å holde folk som surfer på nettstedet, vil endring over tid. Men generelt er målet ditt å guide besøkende med visuell innholdsretning.
La oss ta en titt på a destinasjonsside og a bloggdesign å se forskjellene.
Kaktus er en statisk nettsted generator for OS X. Deres hjemmeside følger nøye Apples designstil - rikelig med hvite rom og tynne sans-serif skrifter.
Innhold er organisert i kolonner, blokker og biter av tekst med enkel grafikk. Disse samme estetikk er vanlig med Apple-produkter, så Mac-brukere vil nyte denne designstilen.
Informasjon om produktet - inkludert funksjoner og oppsett - er oppført på hjemmesiden. Selve siden oppfordrer til å bla gjennom unikt innhold, grunnleggende ikoner og et alternativt kolonnemønster av venstre / høyre innholdsblokker.
Målet her er å gi informasjon til eksisterende brukere, og å selge nye brukere ideen om kaktus.
Sammenligne nå designet med hjemmesiden til The Next Web. Innholdet er mye mer sporadisk på en blogg hjemmeside, fordi det er mange forskjellige innleggstemaer.
Rektangler oppretter et rutenett som inkapsler flere innlegg i en enkelt layout. Målet er her få brukerne til å lese innhold på siden. Det spiller ingen rolle om besøkende laster ned noe, men det betyr noe om de hold deg for å lese noe.
Måten å få folk til å lese er med flotte bilder og fengende overskrifter. TNW gjør en god jobb med dette, og deres layout er bygget for å holde folk på nettlesing med relaterte innlegg miniatyrbilder i sidefeltet og etter innholdsområdet.
Veiledende besøkende til en bestemt handling er forskjellig på hvert nettsted. Men du kan lære mye ved å studere hvilke andre vellykkede nettsteder som gjør, og lære å kopiere.
Stol på dine øyne
Individuelle designegenskaper kan forklares analytisk, men implementeringen endres for hvert nettsted. Et heltbilde med en "Rull videre" -link Fungerer ikke det samme på alle nettsteder.
Lære å designe er veldig mye a visuell prosess. Ditt øye for design er det viktigste aspektet. Du trenger å se ting riktig å identifisere dette visuelt hierarki. Hvis du kan se den på andre nettsteder, så vil du kunne kopiere den på dine egne nettsteder.
Det beste rådet jeg har er å bare stol på øynene dine. Opprett en liste over favorittwebområdene dine, og bruk 5 minutter på å bla gjennom hver enkelt. Skriv ned favorittelementene dine på siden, og hvordan de påvirker designen. Dette vil hjelpe deg internalisere disse konseptene fra et UI / UX perspektiv, i stedet for brukerens perspektiv.
Ikke vær redd for å prøve ting! Ingen fikk det bra på design bare ved å lese artikler om design. Ja, de hjelper - de kan faktisk hjelpe mye. Men du trenge til lage ting fra bunnen av for å lære hva virker og hva ikke.
Trene øynene dine ved å studere websidelayouter du liker, og gjenskape dem. Over tid vil du bygge opp et mønsterbibliotek i tankene dine som gjør det enklere å designe nye nettsteder.
Innpakning
Forhåpentligvis vil disse tipsene komme i gang og gi deg en grunnleggende veikart å følge. Det er ikke lett å bli webdesigner, men verden trenger talent, og det har aldri vært enklere å lære deg selv disse grunnleggende konseptene.
Studere de beste eksemplene på nettsider med sideelementer du liker. Tog ditt øye for å gjenkjenne relasjoner, og du vil raskt utvikle ferdighetene som er nødvendige for gjenskape de forholdene i ditt eget arbeid.
