Visuellt innehållsriktning Vad du behöver veta
De visuell innehållsriktning är en mindre diskuterad, men viktig aspekt av högkonverterande webbdesign. Varje besökare "suger upp" en ny sida på första sidan belastningen - oavsett om de gör det medvetet eller inte.
Estetik spelar en roll, men det handlar mer om övergripande känsla av designen. Denna känsla kan påverkas av blanksteg, typografi, symmetri, men mestadels relationer mellan sidelementen.
Designers vill att besökare ska stanna på sidan och Fortsätt skrolla genom att fånga uppmärksamheten och hålla dem intresserade av webbplatsen. Design principer bör alltid fokusera på funktion före form. Detta innebär att designen ska komplettera innehållet, inte skjuta in det som en eftertanke.
I det här inlägget vill jag visa dig några tips om hur du kan förbättra dina layouter och visuella innehållsflöden på din webbplats.
Fokusera på kompositionen
Varje enskild bit av en webbplats bygger på den övergripande layouten. Denna övergripande layout skapar en komposition som följer Gestaltteoriets regler som säger att hela är alltid större än summan av delarna.
Enskilda områden på en sida kommer samman till bilda en helhet. Designelement måste bygga en dragningskraft på innehållet allt på sidan ska Naturligtvis vägleda besökare längre fram tills de når botten av sidan.
Det är därför som förhållanden mellan olika delar av innehållet (visuella bilder, text, knappar etc.) är så viktiga att designa.
Ditt mål borde vara uppmuntra människor att bläddra på webbplatsen från sin egen lutning. Det är lättare sagt än gjort, men du kan lära dig mycket av studera riktiga exempel.
Hemsidan för Monkop är ett bra exempel på visuell hierarki med både text och bild. Massor av utrymme används mellan element, och typografi kompletterar de märkta vektorillustrationerna.
När du rullar upp märker du raka horisontella sidblock delat med färger, gränser och grafik. Dessa är byggda med Design mönster i åtanke till erbjuda konsistens hela sidan.
Mot botten hittar du en två-kolumn split med bilder på ena sidan, text på den andra. Bilderna också byta sidor i ett mönster av höger-vänster-höger-vänster. Detta drar uppmärksamhet, och bryter upp monotonin av den typiska sidan medan den fortfarande är hålla ett naturligt flöde i innehållet.
en liknande design estetiska kan hittas på Picjumbos webbplats, en målsida för en bildaddonent för Photoshop och Sketch-användare.
Hemsidan placerar fokus på logotypen och förhandsgranskningsvideoen. När du bläddrar ser du anpassade animeringar som rör sig över hela sidan. Den här animationen verkligen fångar uppmärksamhet, och får betraktaren intresserad av att fortsätta bläddra.
Sammantaget känns sidan öppna och lätt att bläddra. Innehållet är uppdelad i horisontella block med skarp typografi och rena ikoner.
Tänk på hur olika sidelement är balansera ihop, mellanslag mellan element, kontrast mellan färger och olika former. Alla dessa saker spelar en roll i den övergripande kompositionen. Varje webbplats tar naturligtvis en viss vikt på innehållet.
Det finns inget absolut svar eftersom det är annorlunda för varje sajt. Till exempel, vissa navigeringslänkar ser bättre ut när de är stora och stora. Andra passar bättre när de är liten med stora bokstäver.
Jag föreslår att du studerar andra webbplatser i din nisch. Verkligen analysera hur de sätts ihop. Även försöka bygga upp layouter för att se vilka element som äntligen gör att designen "kommer ihop".
Skriv designfrågor
Sättet du utformar din typografi kommer att göra påverkar innehållsriktningen på din webbplats. Detta har att göra med typhierarki och design stilar av olika sidelement som punkter, rubriker, punktlistor, citat och speciallayoutelement som kolumner eller tabeller.
visuals kan också påverka layouten, så det är en bra idé att designa innehåll med en naturlig progression. Skriv innehåll på ett sätt som strömmar ner på sidan, och håller folk att läsa genom varje stycke.
Det största verktyget du har till ditt förfogande är ditt öga för design. Lär dig att känna igen skillnaderna i typografiska element och hur de relaterar till andra sidelement. Skapa relationer mellan sidavsnitt för att skilja innehållsområden.
Några saker du kan tänka på:
- Textstorlek
- Typsnittsfamilj
- Färgkontrast
- Sida avsnitt relationer
- Linjehöjd och punktmarginaler
- Brevavstånd och övre / små bokstav
Se till exempel på kampanjövervakarens hemsida. De övre navigeringslänkarna använder alla kepsar med små bokstäver. Andra rubriker på sidan följ samma sak alla kepsdesign som skapar en känsla av enhetlighet.
Andra större rubriker på webbplatsen är mycket mer framträdande, och de hoppar verkligen av sidan. Bara genom att titta på en typisk toppdesign, bör det vara lätt att berätta skillnaden mellan en rubrik och dess parade kroppskopia.
De typografiska designstilarna på Campaign Monitor är utsökta, och de blanda naturligt i layouten. Det krävs övning för att uppnå ett resultat så här, men ju mer du försöker desto lättare blir det.
För att lära mig lite mer rekommenderar jag starkt följande länkar:
- Designprinciper: Visuell vikt och riktning
- Arbetar med visuell vikt i dina designer
- 19 Faktorer som påverkar kompositionsbalansen
Vägledande innehåll
Förstår det olika typer av webbplatser ha olika metoder för att guida besökare via webbplatsen. Till exempel målsidor vill vägleda besökare med finesser av information, små ikoner, skärmbilder, och vittnesmål.
Andra webbplatser som bloggar leder inte vanligtvis till personer till hemsidan på en gång. De flesta landa på en artikel sida, så blogginläggslayouter är avsedda att markera rubriken, och rita människor vidare in i innehållet. Det är här där kvalitet copywriting kommer till spel eftersom du vill att läsare hänger av varje ord.
Sociala nätverk och webbapps behöver kvalitet användarupplevelse, så det är ett något annat ämne, men överväga hur Facebook-flödet är utformat för uppmuntra rullning och användarinteraktion.
De designmetoder du använder för att hålla folk surfar på webbplatsen kommer förändras över tiden. Men i allmänhet är ditt mål att vägleda besökare med en visuell innehållsriktning.
Låt oss ta en titt på a landningssida och a blogg design att upptäcka skillnaderna.
Cactus är en statisk webbplatsgenerator för OS X. Deras hemsida följer noggrant Apples designstil - gott om blankutrymme och tunna sans-serif typsnitt.
Innehållet är organiserat i kolumner, block och bitar av text med enkel grafik. Dessa samma estetik är vanligt med Apple-produkter, så Mac-användare kommer att njuta av denna designstil.
Information om produkten - inklusive funktioner och inställningar - är listade direkt på hemsidan. Sidan själv uppmuntrar till rullning genom unikt innehåll, grundläggande ikoner och ett växlande kolumnmönster av vänster / höger innehållsblock.
Målet är att ge information till befintliga användare, och att sälja nya användare idén om kaktus.
Jämför nu den här designen till hemsidan för The Next Web. Innehållet är mycket mer sporadisk på en blogg hemsida, för att det finns många olika inlägg.
Rektanglar skapar ett rutsystem som inkapslar flera inlägg i en enda layout. Målet är att få användare att läsa innehåll på plats. Det spelar ingen roll om besökare hämtar någonting, men det spelar ingen roll om de hålla fast för att läsa något.
Sättet att få folk att läsa är med suveräna foton och catchy rubriker. TNW gör ett bra jobb med detta och deras layout är byggd för att hålla folk surfar med relaterade efter miniatyrbilder i sidofältet och efter innehållsområdet.
Att vägleda besökare till en viss åtgärd är annorlunda på varje webbplats. Men du kan lära dig mycket genom att studera vilka andra framgångsrika webbplatser som gör, och lära dig hur man kopierar.
Lita på dina ögon
Individuella designegenskaper kan förklaras analytiskt, men genomförandet ändras för varje webbplats. En hjältebild med en "Scroll further" länk utför inte samma sak på alla webbplatser.
Att lära sig att designa är väldigt mycket a visuell process. Ditt öga för design är den viktigaste aspekten. Du behöver se saker ordentligt för att identifiera detta visuell hierarki. Om du kan se den på andra webbplatser så kan du kopiera den på dina egna webbplatser.
Det bästa rådet jag har är att lita bara på dina ögon. Skapa en lista med dina favoritwebbplatser, och spendera 5 minuter på att bläddra i var och en. Skriv ner dina favoritelement på sidan och hur de påverkar designen. Det här hjälper dig internalisera dessa begrepp ur ett UI / UX perspektiv, snarare än användarens perspektiv.
Också vara inte rädd för att prova saker! Ingen fick bra på designen bara genom att läsa artiklar om design. Ja, de hjälper - de kan faktiskt hjälpa till mycket. Men du behöver till skapa saker från början för att lära dig vad Arbetar och vad inte.
Trä ditt öga genom att studera webbplatslayouter du gillar och återskapa dem. Över tiden bygger du upp ett mönsterbibliotek i ditt sinne som gör det lättare för designa nya webbplatser.
Avslutar
Förhoppningsvis kommer dessa tips att komma igång och ge dig en grundläggande färdplan att följa. Det är inte lätt att bli webbdesigner, men världen behöver talent, och det har aldrig varit lättare att lära sig dessa grundläggande begrepp.
Studie De bästa exemplen på webbplatser med sidelement du tycker om. Tåg ditt öga för att känna igen relationer, och du kommer snabbt utveckla de färdigheter som krävs för att återskapa dessa relationer i ditt eget arbete.
