5 Awesome Layout-design som du kan kopiera idag

Hemsida designlayouterLåt mig gissa – du’är inte en duktig webbplatsdesigner, och du’bygger en webbplats igen och du vill göra den fantastisk.


Du’Vi har kommit till rätt plats, min vän!

Att bygga en webbplats som ser bra ut gör det inte’Det måste vara super komplicerat. Det kan vara systematiskt och logiskt (inte lika mycket “ludd” som du’d föreställa mig) – vem som helst kan göra det!

I den här guiden, vi’Jag visar dig anatomi till fantastiska, väl utformade hemsidor. jag’Jag lägger dem ut i enkla diagram och visar levande exempel så att även icke-designers kan förstå – och kopiera!

Postavsnitt

1. Varför ska jag fokusera på min hemsida?

2. Vad är en effektiv design av hemsidan?

3. Vilket innehåll ska jag inkludera i min hemsida design?

4. Anatomi med 5 effektiva hemsida-layouter + exempelmallar du kan använda idag

Välj en webbplatsbyggare och tjäna pengar online idag

Vilken typ av webbplats vill du bygga?

bygga en webbplats bygga en onlinebutik WEBBPLATS ONLINE BUTIK

Varför ska jag fokusera på min hemsida?

Fantastiska layouter för hemsida som du kan kopiera idagDin hemsida är utan tvekan den viktigaste sidan på din webbplats.

Varför? – Därför det’s troligtvis kommer att vara den första sidan som dina webbplatsbesökare kommer att se när de landar på din webbplats.

Jag tror att vi alla kan komma överens om att första intrycket betyder mycket – rätt?

Din hemsida anger tonen för ditt företag som ett första intryck – så det är mycket meningsfullt att din hemsida fungerar effektivt.

Föreställ dig detta:

Du går in i en butik eller på ett kontor och du hälsas omedelbart av en kundtjänstrepresentant.

Kundtjänstens representant fungerade som en guide genom att hjälpa du navigera butiken / kontoret och riktar dig till personen eller produkten som kan lösa ditt problem.

Kundtjänstledaren fungerade för dig genom att visa dig var du borde leta efter det du behöver.

Processen och upplevelsen var trevlig för dig – det gjorde du inte’t behöver slösa bort tid och kämpa för att hitta det du har’åter letar efter.

När en kund besöker din webbplats är han / hon det “gående” till din butik eller kontor.

wouldn’t du vill ge dem samma nivå av erfarenhet som de skulle få om de gick in i din fysiska butik eller kontor?

Don’t du bara hatar det om du var tvungen att kämpa för att leta efter var en produkt eller information finns?

MEN – det finns ETT problem – det finns ingen levande person som hälsar dina besökare när de landar på din webbplats!

Så frågan är: “Hur kan jag rikta mina besökare till den information de behöver utan att fysiskt vägleda dem?”

Svaret, min vän, är ett effektiv design av hemsidan.

Din hemsideslayout fungerar som din kundtjänst som omsorgsfullt guider dina besökare på din webbplats.

Hur gör det så? – Enkelt:

En genomtänkt hemsida design skapar en visuell spår av brödsmulor som effektivt kan vägleda dina besökare att upptäcka dina tjänster / produkter utan problem. Sidlayouten leder också dina besökare till att veta var de ska vidta åtgärder och följa till nästa steg.

Innan vi går in på vad du ska inkludera på din hemsida och visar dig diagram över anatomin i 5 olika hemsidalayouter med verkliga exempel nedan, låt oss’definiera ordentligt vad som är en effektiv hemsidadesign.

Vad är en effektiv design av hemsidan?

Effektiva hemsidedesigner

Sidlayoutplanering hjälper dig ta reda på vilket innehåll du ska placera på din sida, var du ska placera den och vilket innehåll som ska gå först.

Att bygga en fantastisk hemsida är inte bara slumpmässigt att placera information du kan tänka på på sidan. den’är inte heller baserat på abstrakta begrepp eller hur du känner dig just den morgonen.

den’är faktiskt väldigt metodiskt och logiskt – så alla kan replikera en bra layout.

Det måste finnas en strömma så du kan guide dina besökare att upptäcka din webbplats som du vill att de ska.

Detta gör att du kan skapa en mycket riktad webbplatsupplevelse som fungerar bäst för de specifika kunder du vill locka.

När du gjort rätt (I’Jag visar hur nedan) kan du hjälpa besökare som landar på din webbplats:

  1. Identifiera enkelt vad din webbplats handlar om, vad du gör och hur du kan ge dina besökare lösningar på deras problem; och
  2. Samarbeta med ditt företag genom att ta reda på var du ska ta nästa steg. Om dina besökare inte gör det’Jag vet vad nästa steg är, de’Jag kommer förmodligen att lämna utan att vidta några åtgärder. Nästa steg kan vara att besöka en sida med produkter / tjänster, ladda ner en guide, titta på en informationsvideo, registrera dig till en nyhetsbrevsserie, skicka kontaktinformation etc..

Effektiv hemsideslayout handlar om att göra din webbplats enkel att använda och navigera. Det låter dig styra dina besökare’ fokusera på saker du vill att de ska vara extra uppmärksamma på.

Låta’s komma igång med vad som ska inkluderas i en effektiv hemsida, och vi’Jag kommer att dyka in i några specifika exempel och layouter!

Vilket innehåll ska jag inkludera i min hemsida design?

Låta’s vara ärlig – Hur många gånger har du landat på en webbplats och slutat klicka på “tillbaka” -knappen för att du inte kunde’t hitta vad du’jag letar efter om några sekunder?

Faktum är att de flesta av oss är villiga att förvänta oss att hitta det vi’jag letar efter om några sekunder. Människor blir mer och mer krävande (och otåliga) nuförtiden.

Dina besökare kommer att göra ett mycket enkelt, delat andraval när de kommer till din hemsida – stanna eller lämna.

Hur du väljer att lägga ut din hemsida kommer att påverka beslutet – och påverka ditt företags öde.

Simplistiskt är layouten på din hemsida uppdelad i två delar:

1. Ovanför vikningen – innehåll du kan se UTAN att rulla ner när din hemsida först laddas.

2. Under-The-Fold – innehåll du bara ser när du bläddrar nedåt.

100% av dina besökare kommer att se innehållet ovanför veckan, eftersom det direkt visas på deras datorskärm.

Statistiskt sett, när du bläddrar ner på sidan, kommer antalet personer som fortsätter att uppmärksamma ditt innehåll minska dramatiskt.

Det är därför det’är så viktigt att planera vilket innehåll din plats ovanför mitten och nedanför veckan.

1. TYP INNEHÅLL FÖR INSÄTTNING ovanför mitten

Det är här du vill visa alla dina Primärt innehåll – ditt viktigaste innehåll som du behöver alla dina besökare att se.

Målet med ditt primära innehåll är att övertyga dina besökare att stanna längre för att undersöka vad du har att erbjuda. Ditt primära innehåll måste vara tydligt, kortfattat och specifikt.
Hjälpsidesdesignlayouter - ovanför vikningenKälla: Hubspot.com

Primär innehållsfördelning:

1. Rubrik:

I en enda mening (högst två) måste du besvara den fråga som alla dina besökare ställer – “Vad gör ditt företag?”

En bra rubrik kommer att besvara den brinnande frågan – så den måste kort, tydlig och beskriva vad du gör perfekt.

Du vill att dina besökare ska läsa din rubrik och tänka – “Hej, det’s mig! jag behöver det här!

Här är ett bra exempel på en enkel, effektiv rubrik som säger mycket:

Exempel på hemsidesdesignKälla: Basecamp.com

Om du arbetar med ett projekt med andra människor och har samma problem kommer den här rubriken att få din uppmärksamhet.

den’Det är inget fan, men det får meddelandet perfekt.

2. Underrubrik:

Du har möjlighet att definiera din tjänst / produkt i lite mer detaljer med din underrubrik.

Den korta beskrivningen ska svara – “Vilka problem löser du för mig?”

Här är ett bra exempel på en effektiv underrubrik:

Exempel på underrubrik på hemsidanKälla: Leadpages.net

I en kort fras berättar det hur deras produkt kan hjälpa dig.

I det här exemplet kan deras användare använda sin produkt för att skapa sidor för att generera fler kunder!

3. Primär uppmaning:

En uppmaning ger vägbeskrivningar och ber / ber dina besökare att göra något – att ta nästa steg.

Det här kan vara “ring oss nu” eller “klicka för en gratis offert”.

hemsida design uppmaningVar också uppmärksam på Shopify’s rubrik och subrubrik. Väldigt effektiv! – Källa: Shopify.com

Tänk på en uppmaning som en riktningsindikator. Vi vet alla hur vi tar riktning eftersom vi gör det varje dag i den verkliga världen.

vägskylt

Detta skylt låter dig veta att du är på väg österut, och du kan komma till Redlands genom att sväng höger på avfart 40A.

Vi tycker att dessa tecken och pilar är mycket användbara i vårt dagliga liv, så varför inte använda den på din webbplats för att vägleda din publik om vad du ska göra eller vart du ska gå?

Detta gäller särskilt om de vill göra ett åtagande eftersom de resonerar med vad du har att erbjuda (din rubrik och underrubrik).

Don’förvänta dig att dina besökare ska veta vad de ska göra nästa – de gör inte’t.

Du vill att dina besökare visuellt ska se att det finns ett nästa steg som de kan ta, så var aldrig blyg för att berätta för dem vad de ska göra på ett användbart sätt.

Föreställ dig detta: Du hittar en slumpmässig restaurang och ser en meny vid dörren. Du går in och du ser värden stå där, men han gör det inte’t säga någonting. Han gör det inte’t fråga proaktivt hur många personer du har i ditt parti, och han försöker inte heller leda dig till sittplatsen.

Du slutar bara stå där och undrar – “Vad’nästa?”

Gör det att du mår bra och självförtroende för verksamheten?

Gör det för företaget att känna sig personligt och tyvärr?

Nyckeln är att aktivt engagera sig med dina besökare – berätta för dem vad de ska göra och vägleda dem att vidta åtgärder så att du kan börja bygga en relation med dem.

Detta kan öka dina chanser att vinna nya kunder avsevärt.

4. Använd bilder eller en video för att illustrera ditt meddelande:

Människor dras naturligtvis till bilder som bilder och videor, så det är ett utmärkt sätt att skapa en stämning eller visa din publik vad du handlar om.

Det är viktigt att komma ihåg att använda bilder och videor som är relevanta för din webbplats. Om de inte gör det’t tjäna något syfte eller don’t göra ett bra jobb med att förbättra ditt övergripande varumärke eller meddelanden, don’t använda dem.

Det är bättre att hålla din webbplats ren snarare än att inkludera saker som inte är användbara.

5. Logotyp:

Din logotyp måste göra ett bra jobb med att subtilt kommunicera vad ditt företag handlar om. Det antyder ditt företags DNA – oavsett om du är professionell, kreativ, aggressiv eller avslappnad.

6. Navigationsfält:

Det här är färdplanen du använder för att visa dina besökare vad’är viktigt och vart de kan gå för att få den specifika information de behöver.

Tumregel:

  • Inkludera endast nödvändiga sidor och don’t förvirra användare med för många onödiga alternativ. Dina besökare är inte intresserade (initialt) av sidor om upphovsrätt, integritet och villkor för tjänster. Så sätt in dem någon annanstans – som i din sidfot.
  • Skapa logiska grupper av relaterade länkar, med de viktigaste länkarna organiserade från vänster till höger.
  • Håll sidtitlar korta och beskrivande.
  • Placera navigeringsfältet på en framträdande plats så att det är lätt att hitta.

Sätt dig själv i dina besökares skor och fråga dig själv detta:

Vad är det minsta antalet steg jag måste vidta innan jag kan fatta ett informerat beslut att köpa din tjänst eller produkt?

2. TYP INNEHÅLL FÖR ATT INSÄTTA Under veck

Som nämnts ovan kommer inte alla att rulla ner på din hemsida för att se mer på sidan.

Dina besökare som faktiskt bläddrar ner på din hemsida för att se fler är de som är intresserade av vad du har att erbjuda efter att ha läst din rubrik och underrubrik (ditt innehåll ovanför veckan).

Annars skulle de ha lämnat din webbplats redan.

Så, typen av innehåll du vill infoga Under-The-Fold är att stödja ditt innehåll ovanför veckan (vad du erbjuder och hur du kan lösa dina kunder’ problem).

Här är de två typerna av innehåll som du bör visa nedanför veckan:

1. Sekundärt innehåll: Innehåll som inte är tillräckligt viktigt för att göra det ovanför veckan, men fortfarande är avgörande för att övertyga dina besökare att bli kunder eller lojala följare.

2. Ytterligare innehåll: Dessa är “trevligt att ha” information, men är inte kritiska för att göra din webbplats effektiv för att göra ett starkt första intryck.

Låta’s gräva i mer specifika detaljer om detta Under-The-Fold-innehåll. Efteråt vi’Jag visar dig fem effektiva hemsidalayouter som du kan imitera.

# 1) Fördelning av sekundärt innehåll:

Sekundärt innehåll förstärker ditt primära innehåll (Above-the-Fold).

Målet är att övertyga och utbilda dina besökare om vad de exakt har’Jag kommer inte att använda din tjänst eller köpa dina produkter.

1. Förmånslista:

Här’är ett vanligt misstag – de flesta webbplatser är inriktade på att lista upp många funktioner och don’t fokusera tillräckligt på att beskriva fördelarna för potentiella kunder / läsare.

Det finns ett insiktsfullt talande i marknadsföring – “Funktioner säger, fördelar säljer.”

Huvudfrågan som dina besökare kommer att ställa är, “än sen då’s i det för mig?” – “Varför ska jag äta på din restaurang?” – “Varför ska jag anställa dig som min fotograf?”

Om du landade på en webbplats och allt du ser är en stor lista med funktioner, som “vi har 20 smörgåsar, 15 sallader & 5 slags soppor….“, eller “Vi ger dig 100 bilder på en DVD & ett fysiskt album….“

Du’Jag blir bara en annan restaurang- eller fotograferingsföretag. Ingenting gör att din webbplatsbesökare vill veta mer om dig.

Fokusera på hur dina besökare kommer att dra nytta av dig – till exempel, “ekologiska ingredienser från jordbruk till bord så att du känner dig friskare och lever längre”, eller “barn växer upp för snabbt – vi’Jag hjälper dig att fånga dessa värdefulla stunder och minnen med ditt första barn.”

Lägg märke till att fördelarna utnyttjar människors känslomässiga sida – för det fungerar.

Här är ett bra exempel på att beskriva fördelarna med Basecamp’s hemsida (Basecamp är ett projekthanteringsprogram som hjälper team att hantera mycket tillbaka & framåt meddelande):

hemsida design fördelar listaKälla: Basecamp.com

De listar först upp alla huvudvärk och smärtpunkter som deras potentiella kund kan ha (för att relatera på en emotionell nivå). Sedan lovar de (fördelar) att med deras programvara kan alla dessa problem försvinna.

Beskrivning fördelar don’t måste alltid lösa ett specifikt problem. Det kan också vara inspirerande som hur bra det blir att ta en bilresa med din familj i en helt ny bil!

Nyckeln här är att visa din publik hur deras liv kommer att förändras bättre med vad du tillhandahåller dem.

2. Förtroendeindikatorer:

Förtroendeindikatorer kan vara kundens framgångshistorier, kunders vittnesmål eller offert, professionell ackreditering (branschorganisationens anknytning, Better Business Bureau-poäng), medie-offert, antalet sociala nätverksaktier och visa personliga suddigheter om dina teammedlemmar för att skapa förtroende.

Folk köper av människor eller företag de gillar och litar på.

Så genom att visa andra människor som du och ditt varumärke kan du öka din trovärdighet och pålitlighet.

Nyckeln är här är att positivt koppla ditt företag till externa parter och visa att ditt företag drivs av människor, inte robotar.

Förtroendeindikatorer är mycket kraftfulla för att hjälpa dina besökare ett steg närmare att bli kunder – särskilt när de är nära att korsa den linjen, men de behöver bara en mild nudge.

Kom ihåg – folk gillar att följa andra människor. Så när de ser andra (precis som dem) göra affärer med dig, är de mer benägna att följa. Varför tror du att vi ständigt letar upp recensioner om olika tjänster eller produkter?

3. Funktionslista:

Funktionslista hjälper dina potentiella kunder att veta exakt vad de får när de gör ett köp.

Lista dina mest övertygande funktioner som dina besökare vill ha.

Ett av de största misstagen jag ser att människor gör är att de listar upp en lång tvättlista med funktioner som inte gör’t relaterar till mig som kund.

Även när funktionerna kanske låter intressant, skulle jag kunna bry mig mindre om funktionerna inte gör det’t lösa mitt problem eller svara på mina behov.

Till exempel: När jag går vidare till Volkswagen’s webbplats för att söka efter en ny bil, jag inte’t få en förtydligande lista över funktioner som elektromekanisk servostyrning med variabel hjälp. Även om detta är en viktig funktion, är det inte något som de flesta bilköpare bryr sig om.

Istället säljs du på funktioner som oändligt måntak och 10-högtalars surroundljudsystem. Det här är de funktioner som människor bryr sig om och är vad som så småningom kommer att sälja bilen.

hemsidan design listaVolkswagen Touareg Moonroof 2016 – Källa: vw.com

Tänk på vilka funktioner som kommer att resonera med din publik och ta bort de extra funktioner som vann’t har stor inverkan på din hemsida.

# 2) Ytterligare innehållsfördelning:

Dessa är “trevligt att ha” information men är inte avgörande för att göra din webbplats effektiv för att göra ett starkt första intryck.

Till exempel bloggartiklar, företagsmeddelanden, evenemangsscheman, branschuppdateringar, kartort (om du inte är i restaurangbranschen).

Sådant innehåll har en plats på din webbplats, och om den placeras på rätt plats kan det hjälpa till att fullborda den övergripande bilden vad ditt företag handlar om. Men om de används på fel sätt kan de skapa röran och förvirring.

Nu när du vet vad du ska inkludera på din hemsida, låt’se hur du kan placera ditt innehåll för att skapa en fantastisk upplevelse för dina besökare!

Anatomi med 5 effektiva hemsida-layouter &
Exempelmallar du kan använda idag

jag’m kommer att dela 5 mycket effektiva hemsiday-outs med dig nedan. Diagrammen delar upp varje komponent ovanför vikningen och nedanför vikningen.

Du kan följa dessa layouter för att optimera din hemsida. Om du använder en dra & släpp webbplatsbyggare, kan du enkelt dra ditt innehåll runt för att imitera layouterna som visas i diagrammen nedan.

jag’Vi har också listat upp några exempelmallar nedan, där hemsidorna redan är konfigurerade effektivt. Du kan klicka igenom för att titta på de faktiska mallarna och du kan registrera dig och börja använda en direkt.

På ett sätt är att använda en av dessa mallar en genväg, eftersom det låter dig få ett försprång eftersom mallarna redan innehåller några av de bästa metoderna.’har diskuterats ovan!

Layout nr 1

Denna layout är ganska universell så den kan tillämpas på ganska mycket de flesta branscher.

hemsida design layoutKlicka för att förstora bilden

Mallexempel: Här är några mallar som har den här typen av utformning av hemsidan. Du kan klicka igenom för att se dem, registrera dig och börja använda dem direkt.

bra hemsida design wix exempel bra hemsida design shopify exempelbra hemsida design kvadratisk exempel bra hemsida design wix exempelbra hemsida design wix exempel bra hemsida design wix exempelbra hemsida design wix exempel bra hemsida design wix exempel

Layout # 2

Denna layout är också ganska universell och så den kan tillämpas på de flesta branscher.

hemsida design layoutKlicka för att förstora bilden

Mallexempel: Här är några mallar som har den här typen av utformning av hemsidan. Du kan klicka igenom för att se dem, registrera dig och börja använda dem direkt.

bra hemsida design wix exempelbra hemsida design wix exempelbra hemsida design wix exempelbra hemsida design wix exempel

Layout # 3

Denna layout är också ganska universell och så den kan tillämpas på de flesta branscher.

hemsida design layoutKlicka för att förstora bilden

Mallexempel: Här är några mallar som har den här typen av utformning av hemsidan. Du kan klicka igenom för att se dem, registrera dig och börja använda dem direkt.

bra hemsida design wix exempel bra hemsida design wix exempel
layout-3-wix-exempel-2
layout-3-wix-exempel-1

Layout 4 – Portfölj & Fotografihemsidor

Denna layout är lämplig för kreativa företag

(fotografer, designers, konstnärer, musiker och illustratörer)

hemsida designlayout för fotografiportföljsidorKlicka för att förstora bilden

Mallexempel: Här är några mallar som har den här typen av utformning av hemsidan. Du kan klicka igenom för att se dem, registrera dig och börja använda dem direkt.

bra hemsida design wix exempelbra hemsida design kvadratisk exempelbra hemsida design wix exempelbra hemsida design wix exempel

Layout 5 – Mat, hälsa & Skönhetswebbplatser

Denna layout fungerar bra för företag som drar mer nytta av visuell kommunikation (mindre än skriftligt innehåll)

(Restauranger, spa, salonger och kaféer)

hemsida designlayout för mathälsoskönhetswebbplatserKlicka för att förstora bilden

Mallexempel: Här är några mallar som har den här typen av utformning av hemsidan. Du kan klicka igenom för att se dem, registrera dig och börja använda dem direkt.

bra hemsida design wix exempel bra hemsida design wix exempelbra hemsida design wix exempel bra hemsida design wix exempel

Slutsats & Hämtmat

Fantastiska layouter för hemsida som du kan kopiera idagEffektiv design av hemsidor handlar inte bara om att se ut “Söt” – den’är ungefär hur lätt det är för dina besökare att förstå vad du gör, vilka problem du löser och hur de kan dra nytta av dina tjänster eller produkter.

Lämna ALDRIG det upp till dina besökare att gissa eller ta reda på vad de ska göra härnäst. Istället, skapa en mycket tydlig Call-To-Action på din hemsida som leder dina besökare att ta nästa steg (som att gå till din produkt- / servicesida, registrera dig för ditt nyhetsbrev, ladda ner en guide, kontakta dig osv.).

Fråga dig själv ständigt om dina besökare helt förstår vad du gör och vilka fördelar du ger dig till bordet. Fokusera på att beskriva fördelarna med hur du kan hjälpa dina besökare – undvik att dumpa en lista med funktioner som kan’t ganska ansluta till dina besökare på en emotionell nivå.

Don’t använda komplicerade ordförråd eller vaga beskrivningar – var kortfattad, var rakt fram.

Tänk på att du vann’t få den “perfekt” hemsida design vid ditt första försök. den’det är okej att fortsätta arbeta med att förbättra det. Samla feedback från människor för att se hur du kan förbättra dig.

Slutligen, titta på mallexemplen jag delade ovan – istället för att designa din egen hemsida kan dessa mallexempel ge dig ett försprång på att skapa en snygg och effektiv layout!

Dina besökare kanske inte alltid tycker att dina tjänster / produkter är till hjälp, men de bör aldrig missförstå vad ditt företag erbjuder.

Hittade den här guiden användbar?

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map