Visuel indholdsretning hvad du behøver at vide
Det visuel retning af indhold er et mindre bredt diskuteret, men afgørende aspekt af højkonverterende webdesign. Hver besøgende "suger op" et nyt websted på den første side belastning - hvad enten de gør det bevidst eller ej.
Æstetik spiller en rolle, men det handler mere om overordnet følelse af designet. Denne følelse kan påvirkes af hvide rum, typografi, symmetri, men for det meste relationer mellem sideelementer.
Designere vil have besøgende til ophold på siden og fortsæt med at rulle ved at fange deres opmærksomhed og holde dem interesseret i stedet. Design principper bør altid fokusere på funktion før formularen. Dette betyder designet skal supplere indholdet, ikke skubbe det ind som en eftertanke.
I dette indlæg vil jeg gerne vise dig nogle tips om hvordan du kan forbedre dine layouter og visuelle indholdsstrømme på dit websted.
Fokus på sammensætningen
Hvert enkelt stykke af et websted bygger på det overordnede layout. Dette overordnede layout skaber en sammensætning, der følger reglerne i Gestalt-teorien, som siger det hele er altid større end summen af delene.
De enkelte områder af en side kommer sammen til danner en helhed. Designelementer skal bygge en tyngdekraften trækker på indholdet alt på siden skal Naturligvis guide besøgende længere nede, indtil de når bunden af siden.
Det er derfor, at forhold mellem forskellige dele af indholdet (visuelle billeder, tekst, knapper osv.) Betyder så meget at designe.
Dit mål skal være opmuntre folk at gennemse webstedet fra deres egen tilbøjelighed. Det er lettere sagt end gjort, men du kan lære meget af studerer rigtige eksempler.
Hjemmesiden til Monkop er et godt eksempel på visuel hierarki med både tekst og billeder. Masser af plads bruges mellem elementer, og typografien supplerer de branded vector illustrationer.
Som du ruller, vil du bemærke lige vandrette sideblokke divideret med farver, grænser og grafik. Disse er bygget med design mønstre i betragtning af tilbyde konsistens hele siden.
Mod bunden finder du en to-kolonne split med billeder på den ene side, tekst på den anden side. Billederne også bytte sider i et mønster af højre-venstre-højre-venstre. Dette gør opmærksomheden, og bryder op monotoni af den typiske side mens den stadig er holde en naturlig strøm i indholdet.
EN lignende design æstetik kan findes på Picjumbos hjemmeside, en destinationsside for et fotoaddon for Photoshop og Sketch-brugere.
Hjemmesiden placerer fokus på logoet og preview videoen. Når du ruller op, vil du se brugerdefinerede animationer, der bevæger sig over hele siden. Denne animation virkelig fanger opmærksomhed, og får seeren interesseret i at fortsætte med at rulle.
Samlet set føles siden åben og let at gennemse. Indholdet er opdelt i vandrette blokke med skarp typografi og rene ikoner.
Overvej hvordan forskellige sideelementer balance sammen, mellemrummet mellem elementer, kontrast mellem farver og forskellige former. Alle disse ting spiller en rolle i den samlede sammensætning. Hvert websted trækker naturligvis en vis vægt på indholdet.
Der er ikke noget absolut svar, fordi det er anderledes for hvert websted. For eksempel, nogle navigationslinks ser bedre ud, når de er store og store. Andre passer bedre, når de er lille med store bogstaver.
Jeg foreslår at du studerer andre hjemmesider i din niche. Virkelig analysere, hvordan de er sat sammen. Selv prøv at genopbygge layouts for at se, hvilke elementer der endelig gør designet "komme sammen".
Skriv design spørgsmål
Den måde du designer din typografi på vil påvirke indholdsretningen på dit websted. Dette har at gøre med typen hierarki og design stilarter af forskellige sideelementer som afsnit, overskrifter, punktumlister, citater og specielle layoutelementer som kolonner eller tabeller.
visuals kan også påvirke layoutet, så det er en god idé at designe indhold med en naturlig fremgang. Skriv indhold på en sådan måde strømmer ned på siden, og holder folk læser gennem hvert afsnit.
Det største værktøj, du har til din rådighed, er dit øje til design. Lær at genkende forskellene i typografiske elementer, og hvordan de vedrører andre sideelementer. Opret forhold mellem sidestykker for at skelne indholdsområder.
Nogle ting du måske overvejer:
- Tekststørrelse
- Font familie
- Farvekontrast
- Side sektion relationer
- Linjehøjde og punktmargener
- Bogstavafstand og øvre / små bogstaver
Se for eksempel på hjemmesiden for Kampagneovervågning. De øverste navigationsforbindelser bruger alle hætter med lille bogstaver. Andre overskrifter på siden følg det samme alle caps design hvilken skaber en følelse af ensartethed.
Andre større overskrifter på webstedet er meget mere fremtrædende, og de hopper virkelig væk fra siden. Bare ved at se på et typisk header design, bør det være let at Fortæl forskellen mellem et overskrift og dets parret kropskopi.
De typografiske designstile på kampagnemonitoren er udsøgte, og de blande naturligt ind i layoutet. Det kræver praksis at opnå et resultat som dette, men jo mere du prøver, jo lettere bliver det.
For at lære lidt mere anbefaler jeg stærkt følgende links:
- Designprincipper: Visuel vægt og retning
- Arbejder med visuel vægt i dine designs
- 19 Faktorer, der påvirker kompositionsbalancen
Vejledende indhold
Forstå det forskellige typer af hjemmesider har forskellige metoder til at lede besøgende gennem webstedet. For eksempel vil destinationssider gerne lede besøgende med godbidder af information, små ikoner, skærmbilleder, og Begejstring.
Andre websteder som blogs bringer normalt ikke folk til startsiden på en gang. De fleste mennesker land på en artikelside, så blog post layouts er beregnet til fremhæv overskriften, og tegne folk længere ind i indholdet. Det er her, hvor kvalitets copywriting kommer til spil, fordi du vil have, at læsere hænger af hvert ord.
Sociale netværk og web apps har brug for kvalitet brugeroplevelse, så det er et lidt andet emne, men overvej hvordan Facebook-feed er designet til tilskynde til scrolling og brugerinteraktion.
De designmetoder du bruger til at holde folk browsing på webstedet vil ændre sig med tiden. Men generelt er dit mål at guide besøgende med en visuel indholdsretning.
Lad os tage et kig på a destinationsside og a blog design at se forskellene.
Cactus er en statisk site generator til OS X. Deres hjemmeside følger nøje Apples design stil - masser af hvide rum og tynde sans-serif skrifttyper.
Indhold er organiseret i kolonner, blokke og klumper af tekst med simpel grafik. Disse samme æstetik er fælles med Apple-produkter, så Mac-brugere vil nyde denne design stil.
Oplysninger om produktet - herunder funktioner og opsætning - er angivet direkte på hjemmesiden. Selve siden opfordrer til at rulle gennem unikt indhold, grundlæggende ikoner og et skiftende kolonne mønster af venstre / højre indholdsblokke.
Målet her er at give information til eksisterende brugere, og at sælge nye brugere ideen om kaktus.
Sammenlign nu dette design med hjemmesiden til The Next Web. Indholdet er meget mere sporadisk på en blog startside, fordi der er en masse forskellige emner.
Rektangler opretter et gittersystem, der indkapsler flere indlæg i et enkelt layout. Målet her er at få brugere til at læse indhold på siden. Det er ligegyldigt, om besøgende downloader noget, men det betyder noget, hvis de hold dig omkring for at læse noget.
Måden at få folk til at læse er med gode billeder og fængsomme overskrifter. TNW gør et godt stykke arbejde med dette, og deres layout er bygget til at holde folk browsing med relaterede post miniaturer i sidebjælken og efter indholdsområdet.
Vejledende besøgende til en bestemt handling er anderledes på hvert websted. Men du kan lære meget ved at studere, hvad andre vellykkede websteder gør, og lære at kopiere.
Stol på dine øjne
Individuelle designegenskaber kan forklares analytisk, men implementeringen ændres for hvert websted. Et helt billede med et "Scroll videre" link udfører ikke det samme på alle hjemmesider.
At lære at designe er meget en visuel proces. Dit øje til design er det vigtigste aspekt. Du skal se tingene ordentligt at identificere dette visuelt hierarki. Hvis du kan se det på andre hjemmesider, så kan du replikere det på dine egne websteder.
Det bedste råd jeg har er at stol bare på dine øjne. Lav en liste over dine yndlingswebsteder, og brug 5 minutter på at gennemse hver enkelt. Skriv ned dine yndlingselementer på siden, og hvordan de påvirker designet. Dette vil hjælpe dig internalisere disse begreber fra et UI / UX perspektiv, snarere end en brugers perspektiv.
Vær også ikke bange for at prøve ting! Ingen fik godt i design lige ved at læse artikler om design. Ja, de hjælper - de kan faktisk hjælpe meget. Men dig brug for til lav ting fra bunden for at lære hvad arbejder og hvad ikke.
Træd øjet ved at studere websider, du kan lide, og genskabe dem. Over tid vil du opbygge et mønsterbibliotek i dit sind, som gør det lettere at designe nye websteder.
Afslutter
Forhåbentlig vil disse tips komme i gang og give dig et grundlæggende køreplan at følge. Det er ikke nemt at blive webdesigner, men verden har brug for talent, og det har aldrig været nemmere at lære dig selv disse grundlæggende begreber.
Undersøgelse De bedste eksempler på hjemmesider med sideelementer, du nyder. Tog dit øje for at genkende relationer, og du vil hurtigt udvikle de nødvendige færdigheder til replikere disse relationer i dit eget arbejde.
