Hur man bygger en webbplats för en ny produkt (och hur vi gjorde det)

Hur Man Gör En SNYGG & PROFESSIONELL Hemsida GRATIS!

Innehållsförteckning:

Om du inte har en kreativ kort än, börja här. En kreativ kort beskriver exakt hur du planerar att prata om din produkt eller ditt företag. Det definierar ditt varumärkes tonfall, färgpalett, ditt värdeutdrag och så mycket mer. Din kreativa kort definierar hur din webbplats kommer att kommunicera med kunder.
Med din kreativa kort i hand börjar du arbeta med din webbplatskarta. En webbplatskarta är helt enkelt en översikt som listar ut alla sidor (inklusive deras syften och mål) som du planerar att inkludera på din webbplats.
En trådram är en grov layout på din webbplats. Det är inte riktigt en design, exakt. Det är ett dokument som visar ungefär var saker kommer att gå på sidan, utan att det handlar om färg eller annan grafik.
Nu är det äntligen dags att faktiskt designa och bygga din webbplats. Om du använder en frilansdesigner eller designbyrå tar de processen över härifrån.
När din nya webbplats är igång är jobbet inte gjort. Faktum är att det bara börjar! Du kanske inte vill höra det, men nu när din webbplats är live måste du ta reda på om faktiskt det kopia du skrev faktiskt fungerar. Kommer din kopia att få kunder att göra vad du vill att de ska göra? Att hitta rätt design och kopia ökar antalet kunder du har och ser till att du får ut det mesta av alla möjligheter som kommer till din webbplats.

Redaktörens anteckning: Vi lanserar en ny produkt, och vi vill ta med dig för turen. Så vi drar tillbaka gardinen för att ge en inblick i vad som verkligen händer bakom kulisserna om att bygga och lansera något nytt. När du är klar med att läsa den här artikeln, se till att även kolla in den första, andra, tredje och fjärde delarna i den här serien.

Oavsett vilken typ av verksamhet du börjar, behöver du en webbplats. Att ha en webbplats är förmodligen viktigare än att ha visitkort dessa dagar.

Vissa valda företag, som matvagnar, kan kanske komma undan med att bara ha en närvaro på Facebook och andra sociala plattformar. Men idag är det undantaget, inte regeln, och du behöver nog en dedikerad webbplats.

Och det är aldrig för tidigt att börja tänka på hur du ska bygga den. Dessa saker tar tid, ofta mer än du tror. Du måste tänka på vilken typ av webbplats du behöver och hur du ska bygga den och starta hjulen på ett tidigt stadium.

Här på Palo Alto Software är vi på väg att bygga vår nya produkt, Outpost. Vår hemsida kommer att vara det primära sättet att potentiella kunder lär sig om vår produkt och (viktigast av allt!) Det viktigaste sättet att hitta prisinformation och prenumerera på Outpost.

Vår webbplats för Outpost kommer också att vara våra kunders huvudresurs för hjälp och

Om du inte har följt med när vi har pratat om att bygga Outpost, är det en snabb uppdatering:

Outpost hjälper lag hantera delade inkorgar så att de enkelt kan spåra, samarbeta, och svara på meddelanden som skickas till generiska e-postadresser som [email protected] och [email protected]. Outpost är som missionskontroll för alla dina inkommande e-postmeddelanden och ser till att varje e-post får rätt svar och inget faller genom sprickorna.

Om du vill lära dig mer om hur vi har byggt Outpost kan du börja i början och få hela berättelsen. Eller stanna här och läs vidare för att lära dig hur vi planerade och byggde vår hemsida.

Börja med en kreativ kort

Om du inte har en kreativ kort än, börja här. En kreativ kort beskriver exakt hur du planerar att prata om din produkt eller ditt företag. Det definierar ditt varumärkes tonfall, färgpalett, ditt värdeutdrag och så mycket mer. Din kreativa kort definierar hur din webbplats kommer att kommunicera med kunder.

Du kanske redan har skrivit en kreativ kort om du har gått igenom logotypens utvecklingsprocess. Om så är fallet kan du bara återanvända det för din webbplats. Om du inte har utvecklat en kreativ kort än, är det dags att bygga en.

Lyckligtvis har jag redan skrivit en detaljerad artikel som lär dig hur du gör det, vilket inkluderar exempel från Outpost-kreativa kort, så du kan se hur vi byggt vårt. Så om du behöver arbeta med din kreativa kort, kolla in min artikel om hur vi utvecklade vår logotyp och dess kreativa kort och kom tillbaka hit när du är redo.

Skapa en webbplatskarta

Med din kreativa kort i hand börjar du arbeta med din webbplatskarta. En webbplatskarta är helt enkelt en översikt som listar ut alla sidor (inklusive deras syften och mål) som du planerar att inkludera på din webbplats.

Här är den webbplatskarta som vi utvecklat för Outpost:

Hem

: Produktöversikt och ett "samtal till handling" för att anmäla dig till en gratis provperiod. Sekundära länkar till andra sidor som beskriver funktioner. Funktionsöversikt

: En översikt över alla funktioner med länkar till detaljerade sidor. Funktionsdetaljer för funktion A: Detaljer om funktion A.

Funktionsdetaljer för Funktion B: Detaljer om funktion B.

Upprepa för alla funktioner.

Prissättning: Detaljer om prisplaner och länkar för att anmäla dig till en kostnadsfri försök.

Kunder:

Profiler av framgångsrika kunder. Om oss:

Översikt över vem vi är, vårt uppdrag och vår historia. Kontakta oss:

Kontaktinformation, timmar, plats. Jobb:

En lista över våra nuvarande jobböppningar. Sekretesspolicy:

Sekretesspolicy för Outpost. Blog:

Hemsida för bloggen som visar senaste blogginlägg. Blogginlägg:

Det kommer att finnas flera blogginlägg. Den här sidan kommer att vara mallen för dem. Hjälpcenter:

Vårt hjälpcenter drivs av Zendesk. Naturligtvis kommer din webbplats förmodligen att vara väldigt annorlunda än Outposts sitemap. Om du till exempel är en restaurang har du förmodligen en sida eller två för menyer och en sida för bokningar. Om du bygger en webbutik har du förmodligen många olika produktsidor.

Dina webbplatskartor dokumenterar, så mycket du kan, vad du tycker att din webbplats kommer att innehålla. Den här lilla planeringen kommer att göra resten av webbplatsplaneringen och utvecklingen mycket enklare, så det är värt investeringen i det här tidiga skedet.

Skriv din kopia först före designen

Du kommer att tro att jag inte gjorde det få inte ordern här. Ska du inte utforma din webbplats innan du tänker på vilka ord du kommer att lägga på sidan?

Faktum är att det bättre är att göra saker "bakåt" och tänka på din hemsida kopiera först och sedan designa runt den kopian. Varför? Eftersom det du vill kommunicera med dina kunder är mycket viktigare än den faktiska slutliga utformningen av din webbplats. Naturligtvis är designen viktig och du vill ha en webbplats som ser bra ut, men om du inte kan kommunicera dina nyckelmeddelanden till dina användare, kommer en bra design inte att göra skillnaden.

Skriva din kopia först hjälper dig också och potentiella designers förstår vad varje sida försöker kommunicera. Detta resulterar i bättre design-design som förstärker dina meddelanden. Även om du själv ska bygga din webbplats med ett verktyg som Squarespace, vet du vad varje sida måste säga innan du väljer en design kommer att vara en stor tidsbesparare.

När det är dags för din design, kanske du behöver förfina din kopia för att se till att sakerna passar ordentligt, men det blir enklare än att försöka skriva kopior för en design som inte byggdes för dina meddelanden.

För din hemsida kommer du noga att ha en rubrik som beskriver exakt vad du gör - din nyckelvärdesförslag för dina kunder. Det kommer att följas av en kortfattad utökad beskrivning av vad ditt företag gör.

Här är rubriken och expanderad beskrivning för Outpost, den produkt vi bygger:

Streamline din delade e-post

Lätt spåra, samarbeta, och svara på meddelanden som skickas till generiska e-postadresser, som support @ eller info @.

Därifrån kommer den kopia som du kommer att inkludera på din hemsida verkligen att bestämmas av vilken typ av företag du är, vem dina kunder är och vad du behöver kommunicera.

För Outpost måste vi kommunicera de viktigaste funktionerna och fördelarna med vår produkt och uppmuntra potentiella kunder att lära sig mer. Vi vill också prata om vårt kundservice team och hur bra de är.

Men det här kanske inte är rätt inställning för din hemsida. Om du är en restaurang kanske du vill ha länkar till menyerna eller information om att få en reservation. Varje företag är annorlunda, så räkna ut vad du behöver säga och skriv sedan ner det.

Oroa dig inte om att börja med en tom sida. Istället, kom med en lista över dina favoritwebbplatser i din bransch och tänk på vad du tycker om och ogillar om varje webbplats. Vilken typ av navigation använder de? Vilka sidor innehåller de? Vilken typ av bilder använder de? Du behöver inte återuppfinna hjulet, och det är ett bra sätt att komma igång med en favoritplats som hoppningspunkt.

Ett sista tips:

Mindre är vanligtvis mer. Låt dig inte frestas att skriva ändlösa stycken av kopia för din webbplats (om inte det är vad dina kunder förväntar sig!). Om du uppmärksammar hur du använder webbplatser kommer du att upptäcka att du ofta skumrar genom text, inte läser varje ord. Eftersom det är så läser de flesta online-skimming istället för att läsa varje ord. Håll din kopia kort och till den punkten. Utveckla en wireframe

En trådram är en grov layout på din webbplats. Det är inte riktigt en design, exakt. Det är ett dokument som visar ungefär var saker kommer att gå på sidan, utan att det handlar om färg eller annan grafik.

Om du jobbar med en designer för att bygga din webbplats, kommer de att producera en wireframe för dig som en del av designprocessen. Om du bygger din webbplats på egen hand, med hjälp av en tjänst som Squarespace eller Shopify, kan du enkelt bygga en wireframe själv.

Bli inte skrämd av det här steget. Du behöver inte några speciella verktyg för att bygga en wireframe. En pappersduk och en penna räcker för att skissa ut varje sida på din webbplats. Kom ihåg att du inte "designar" och en wireframe behöver inte vara söt. Det behöver bara kommunicera vad som händer var på en sida.

Om du behöver inspiration, kolla in andra webbplatser du gillar och titta på hur de strukturerar informationen på varje sida. Det är helt bra att låna layouter från andra webbplatser och hitta inspiration för din egen webbplats.

Om du använder pennor och papper inte är din sak kan du använda PowerPoint eller Keynote för att skapa wireframes. Det finns också dedikerade wireframingverktyg som Balsamiq som gör processen lätt.

Jag har tagit med Outposts hemsida wireframe nedan så att du kan få en uppfattning om vad en wireframe ser ut. Du kan också titta på den kopia som vi skapade i föregående steg och en skiss av en idé för ett grafiskt element som vi vill att en designer ska skapa.

Vårt trådframe för Outpost.

Design och bygga

Nu är det äntligen dags att faktiskt designa och bygga din webbplats. Om du använder en frilansdesigner eller designbyrå tar de processen över härifrån.

Men, förutsatt att du är som de flesta s, gör du förmodligen det själv och vill hålla kostnaderna under kontroll. Om det låter som du måste du välja en plattform för att designa och värd din webbplats.

Först överväga dina behov. Behöver du bara en enkel sida på en sida? Vill du inkludera en blogg? Kommer du att sälja dina produkter online och behöver saker som en kundvagn?

Det finns bokstavligen hundratals möjliga val, men jag listar bara några av mina favoriter så att du inte blir för boggad och väljer en plattform för din webbplats.

WordPress: Det här är en bra, låg kostnad plattform för alla enkla webbplatser. Det finns många designalternativ, och du kan komma igång gratis. Jag skulle inte rekommendera WordPress om du planerar att köra en webbutik med massor av produkter, men det är ett bra alternativ för en grundläggande informationswebbplats och blogg. Hundratusentals webbplatser använder WordPress, så du kan inte gå för långt fel med detta val. Och det finns några alternativ att lägga till handelsfunktioner på din webbplats om det behövs.

Shopify:

Om du säljer grejer online är Shopify ett utmärkt val. Du kan köra hela din webbutik på den här plattformen och få alla back-end-verktyg som du behöver för att hantera dina produkter, inventering och mer. Squarespace:

Squarespace är jacket i alla affärer. Du kan använda den för att skapa allt från en blogg till en onlinebutik. Med vackra designmallar och oändlig flexibilitet är det också ett bra val att komma igång. För Outpost ligger vi i en något annorlunda situation. Som ett befintligt företag har vi en egen designer och några ingenjörer som arbetar på vår hemsida. Men om det inte var fallet skulle jag förmodligen välja antingen WordPress eller Squarespace att bygga vår hemsida.

Test och iterera

När din nya webbplats är igång är jobbet inte gjort. Faktum är att det bara börjar! Du kanske inte vill höra det, men nu när din webbplats är live måste du ta reda på om faktiskt det kopia du skrev faktiskt fungerar. Kommer din kopia att få kunder att göra vad du vill att de ska göra? Att hitta rätt design och kopia ökar antalet kunder du har och ser till att du får ut det mesta av alla möjligheter som kommer till din webbplats.

För att räkna ut allt, måste du springa några tester. Detta kallas A / B-testning. Det är när du gropar din nuvarande webbplats (A-versionen) mot ett alternativ (B-versionen). Du mäter då vilken version som fungerar bättre. Du kan mäta framgång i ökad försäljning, öka samtal till ditt företag eller helt enkelt få kunder att klicka på en annan sida.

Jag kommer inte att gå in i en detaljerad guide till A / B-testning här, eftersom det är ett djupt ämne för en annan dag, men jag kommer att berätta att du behöver några extra verktyg för att få din testning klar.

I rekommendera antingen Konvertera experiment eller Visual Website Optimizer. Båda är fasta och prisvärda alternativ som gör testningen enkelt.

Du måste också se till att du har installerat ett analysverktyg som Google Analytics (gratis!) För att förstå vilka typer av personer som besöker din webbplats och vad de gör det när de är där.

Om du har några ytterligare frågor eller kommentarer om hur du får din webbplats igång, tveka inte att fråga mig i kommentarerna.