Designa en hemsida som en webbdesigner

Numera behöver du inte lära dig att koda för att bygga en hemsida. De verktyg som finns tillgängliga på marknaden (som Wix, Wordpress, Shopify...) gör att du utifrån teman och dra-och-släpp funktioner kan gå från att inte ha en hemsida ena dagen till en publicerad hemsida den andra.

Ett problem som den enkelheten fört med sig är att webbplatser kastas ihop, utan en grund i hur man designar för en hemsida eller vad en effektiv hemsida är.

Jag har jobbat med webbdesign i över 5 år. Det har varit allt från e-handel, med hundratals sidor, till mindre hemsidor på bara ett fåtal sidor.

Mitt hopp med denna artikel är att ta det från början, så att du som företagare, får en hemsida som gynnar istället för att hålla tillbaka din verksamhet.

Allt med webbdesign grundar sig i strategin

Allt vi gör på hemsidan ska utgå från den övergripande strategin = företagsstrategin.

Strategin för företaget sätter ju målen som ska uppnås i företaget, hemsidan är knutpunkten för all din marknadsföring, och är på så sätt en stor del i att företaget uppnår de målen.

De strategiska bitarna kan vi (nästan) göra lika komplicerade som kvantfysik, men för att få resultat så behöver den inte vara svårare än...

• Vad: är det som du faktiskt säljer som lösning på ett specifikt problem.
• Varför: existerar företaget? Är du grundaren så kan du ofta hitta detta i varför du började från första början.
• Målgrupp (vem): är det som har störst användning av att köpa det du erbjuder.
• Framtiden (när): hur du på utvecklingen av företaget de närmsta 12 månaderna. Finns där några plötsliga förändringar i horisonten att navigera?

Med den målbilden tydligt klar framför oss så kan kan vi börja ta fram vilka sidor som vi behöver ha på hemsidan för att hjälpa nå de målen. Till de steget använder vi oss av en sidstruktur.

Sidstrukturen är kartan över vilka sidor och hur är de hänger ihop

Sidstrukturen är en form av karta över vilka sidor din webbplats ska ha, samt hur de länkar ihop med varandra.

Hur många sidor du har med i din sidstruktur beror på dina behov, företagets storlek och din marknadsplan.

Sidstrukturen hjälper oss även att se hur url-strukturen ser ut vilket är till fördel när vi planerar för sökordsoptimeringen.

En URL, eller Uniform Resource Locator, är adressen till en hemsida eller webbsida på nätet. Varje URL är en unik webbadress som leder dig till en specifik webbsida. Varje sida på nätet har en egen URL.

Url-strukturen kan vi se på adressen till den här artikeln. Vilket är https://www.robinhaaf.com/blogg/designa-en-ny-hemsida

För varje snedstreck ( / )som finns med går vi ett steg djupare i sidstrukturen vilket kopplar samman deras syfte. I det här fallet så är den här artikeln en del av min blogg.

Här är frågor du kan ställa dig för att hjälpa ta fram vilka sidor du ska ha med i din sidstruktur: 

• Hur många tjänster erbjuder du?
• Tänker du använda dig utav content marketing via en blogg? 
• Behöver de ha dedikerade sidor för att visa upp projekt du gjort?
• Behöver kollegorna ha profilsidor?
• Ska du ha landningssidor som erbjuder lead magnets?

Är bara några av frågorna att tänka på när du tar fram din sidstruktur.

Här är några sidor som vanligtvis dyker upp i en sidstruktur 

• Startsida
• Om oss
• Produkt/tjänstesida
• Integritetspolicy
• 404'a
• Kontakt

Med sidstrukturen på plats så har du nu klart för dig vilka sidor det är du behöver designa.

Dessa stegen (strategin + sidstrutkuren) är de lättare bitarna av designandet av en ny hemsida, nu når vi steget som företagare gärna hoppar över... 👇

Sidans syfte avgör innehållet på de olika sidorna

Varje sida har ett unikt syfte. Det syftet avgör vad det är som vi erbjuder en besökare som nästa steg (call to action), vad innehållet handlar om och i vilken ordning vi presenterar den informationen.

Utan en tanke på sidans syfte (i linje med strategin) gör att själva sidan faller platt i att matcha vad besökaren letar efter.

Vad vi har med för innehåll på sidan hänger ihop med var besökare är i sin kundresan.

Vilket snabbt går att fräscha upp ditt minne om genom att se den delen av min video vid 2.40 > "Att Skapa Nya kunder Genom Marknadsföring" < där jag går igenom just den.

Först när vi har klart för oss: 

• Vad själva sidans syfte är
• Vem den önskade besökaren är
• Vad de behöver veta för att ta nästa steg...

Exempel på sidor och dess syfte:

• Startsidan ska ge en överblick av företaget och erbjuda enkel navigering för besökare så att de snabbt kan hitta vart de ska.
• Säljsida ska ge övertygande fakta till varför besökaren borde ta beslutet om att köpa.
• Produktsida ska gå igenom alla fördelar med produkten, användningsområden och visa upp social proof från tidigare kunder (helst som är lika besökaren) specifikt för den produkten.

Då tar vi steget in i Wireframe (sett till höger i bilden nedan) det är när vi kollar på flödet av innehåll på hemsidan.

Detta gör vi för att folk inte scrollar så långt på sidorna. Det viktigare innehållet behöver vi ha högt upp så att fler får chans att se det. Samtidigt vill vi göra själva sidan så engagerande att de faktiskt tar sig igenom hela sidan.

En Wireframe är så avskalad som den kan bli för att vi inte ska fokusera på saker som lätt fångar vår uppmärksamhet färger, fonts, bilder när det är flödet vi försöker att fixa.

Det är först när vi är klar med wireframe som vi tar steget in att designa själva hemsidan.

Det är nu som färg, bilder och texterna får ta plats på hemsidan. Vilket är steget jag tror många tänker är det som innebär med att "designa en ny hemsida" och som många hoppar direkt till.

Om du har gjort ett bra jobb i de tidigare stegen, så är det här steget det enklaste, men blir lätt det svåraste om du inte har grunden att stå på.

Efter att du lanserat din hemsida, så är du inte riktigt klar, än...

När du designat klart din hemsida, tryckt "publicera" och är på väg att stänga locket på din laptop för att börja fokusera på annat... så behöver jag tyvärr säga att det här är bara början 🙈

Din hemsida är en viktig spelare i ditt marknadsföringsteam, den binder samma alla andra kanaler och gör helheten i din marknadsföring ännu effektivare.

För att få full effekt utav din hemsida så vill du analysera det som ger dig värdefull information om dina besökare. Hur navigerar de hemsidan? Finns det ett naturligt nästa steg efter att de landat i ett blogginlägg? Hur konverterar din landningssida efter annonser från Meta? 

Den Informationen använder du sen för att göra hemsidan bättre = konvertera fler besökare till kunder.

Här har du 3 analysprogram som du kan använda, helt gratis, för dig om du börjar med din hemsida.

• Google Search Console - är till för att analysera hur hemsidan ter sig med sökordsoptimering och de ord som de olika sidorna rankar för.
• Google Analytics - använder vi för att skapa konverteringar (tillsammans med Google Tag Manager) för att kunna hur hög konverteringsgrad hemsidan har och blir en utgångspunkt för ett nuläge.
• Heatmaps - vi använder oss utav Hotjar för att analysera vår egen och våra kunders hemsidor. Det oss värdefull information för att förbättra de olika sidorna till att fungera bättre.

⚠️ Tänk på att Google Analytics och Heatmaps kräver GDPR consent för att köra sina cookies!

Att strukturera hemsidan, ha klart ett syfte för sidorna på din hemsida är ett faktum att det gör din hemsida effektivare i att få fler till att bli leads.

Det är dock fortfarande en gissning i hur den faktiskt används eller tas emot av dina besökare.

Genom att analysera för att fortsätta att optimera din hemsida tillsammans med din andra marknadsföring så sätter du dig över alla andra småföretagare som ser sin hemsida som statisk.

För de kunder jag har till min webbyrå som har hemsida på prenumeration så gör jag ett tiotal ändringar varje månad.

• Ändrar bilder
• Titlar / H1
• Texter anpassas
• Flyttar om sektionerna
• Lägger till nya sidor

Allt för att finslipa hemsidan till att generera ännu fler besökare och ännu fler leads. För jag vet effekten det har på ett företag när de får in fler leads än de behöver... det tar företaget till skyarna!