du får aldrig en andra chans att göra ett första intryck-det är därför din hemsida utan tvekan är en av de viktigaste webbsidorna på din webbplats.
för ett visst företag är hemsidan dess virtuella ytterdörr. Om en ny besökare inte gillar vad de ser, är deras knä-jerk reaktion att slå” tillbaka ” – knappen.
det är rätt-tyvärr dömer många fortfarande en bok efter omslaget.
vad gör en webbplats hemsida design lysande istället för intetsägande?, Det krävs mer än ser ensam — det måste också fungera bra. Det är därför de mest briljanta hemsidorna på den här listan inte bara gör höga poäng i skönhet, men också i hjärnor och kreativitet.
men innan vi dyker in i exemplen, låt oss dissekera några av de bästa metoderna för hemsida design.
Vad gör en bra webbplats?
en bra webbplats svarar tydligt ”vem jag är”, ”vad jag gör” och/eller ”vad kan du (besökaren) göra här.,”Det resonerar också med din publik, har ett värdeförslag, kallar besökare till handling, är optimerad för flera enheter och förändras alltid för att anpassa sig till nya designtrender.
alla startsidans mönster som visas här använder en kombination av följande element.
inte varje sida är perfekt, men de bästa startsidan mönster få många av dessa rätt.,
77 lysande exempel på hemsidor, bloggar & målsidor
berätta lite om dig själv nedan för att få tillgång Idag:
designen svarar tydligt ”vem jag är,” ”vad jag gör” och/eller ”vad kan du (besökaren) göra här.”
om du är ett välkänt varumärke eller företag (dvs.,, Coca-Cola ) du kanske kan komma undan med att inte behöva beskriva vem du är och vad du gör; men verkligheten är, de flesta företag behöver fortfarande svara på dessa frågor så att varje besökare vet att de är på ”rätt plats.”
Steven Krugg sammanfattar det bäst i sin bästsäljande bok, få mig inte att tänka: om besökare inte kan identifiera vad det är du gör inom några sekunder, kommer de inte att stanna länge.
designen genljuder med målgruppen.
en hemsida måste vara snävt fokuserad — tala till rätt personer på deras språk., De bästa hemsidorna undviker ”corporate gobbledygook” och eliminerar fluffen.
designen kommunicerar ett övertygande värde proposition.
När en besökare kommer till din hemsida måste den tvinga dem att stanna kvar. Hemsidan är det bästa stället att spika ditt värde proposition så att utsikterna väljer att stanna på din webbplats och inte navigera till dina konkurrenter’.
designen är optimerad för flera enheter.,
alla hemsidor som listas här är mycket användbara, vilket innebär att de är lätta att navigera och det finns inte ”flashiga” objekt som kommer i vägen för att surfa, till exempel flash banners, animationer, popup-fönster eller alltför komplicerade och onödiga element. Många är också mobiloptimerade, vilket är ett otroligt viktigt måste i dagens mobila värld.
designen innehåller Call-to-action (CTAs).
varje hemsida som listas här använder effektivt primära och sekundära samtal till handling för att rikta besökare till nästa logiska steg., Exempel inkluderar ”Free Trial”, ”schemalägga en Demo”, ”Köp nu” eller ” Läs Mer.”
Kom ihåg att målet med hemsidan är att tvinga besökare att gräva djupare in på din webbplats och flytta dem längre ner i tratten. CTAs berätta vad de ska göra härnäst så att de inte blir överväldigade eller förlorade. Ännu viktigare, CTAs förvandla din hemsida till en försäljning eller lead-generation motor, och inte bara broschyr-slitage.
designen förändras alltid.
de bästa hemsidorna är inte alltid statiska. Några av dem förändras ständigt för att återspegla deras besökares behov, problem och frågor., Vissa hemsidor ändras också från A / B-testning eller dynamiskt innehåll.
designen är effektiv.
en väl utformad sida är viktig för att bygga förtroende, kommunicera värde och navigera besökare till nästa steg. Som sådan använder dessa hemsidor effektivt layout, CTA-placering, blanksteg, färger, teckensnitt och andra stödjande element.
nu, gör dig redo att lära dig om Utmärkt hemsida design genom följande 23 verkliga exempel.,
Freshbooks
visa hela hemsidan
varför det är lysande
- Det är lätt att konsumera., Det finns mycket debatt om huruvida korta eller långa hemsidor fungerar bättre. Om du väljer att göra det senare måste du göra det enkelt att bläddra och läsa-och det är precis vad den här webbplatsen gör. Det fungerar nästan som en historia.
- Det finns stor användning av kontrast och positionering med de primära samtal till handling-det är klart vad företaget vill att du ska konvertera på när du anländer.
- kopian som används i Call-to-action ”komma igång gratis” är mycket övertygande.
- FreshBooks använder kundreferenser på hemsidan för att berätta verkliga historier om varför du ska använda produkten.,
- underrubriken är också stor: ”gå med i över 10 miljoner småföretagare med FreshBooks.”FreshBooks använder sakkunnigt socialt bevis-10 miljoner är ett stort antal – för att tvinga sin målgrupp att gå med i sina kamrater och prova verktyget.
Airbnb
visa hela hemsidan
varför det är lysande
- Det innehåller destinations – och datumsökningsformuläret som de flesta besökare kommer att leta efter, rätt fram och vägleda besökare till det logiska nästa steg. – herr talman!,
- sökformuläret är ”smart”, vilket betyder att det automatiskt fyller användarens senaste sökning om de är inloggade.
- den primära call-to-action (”Sök”) kontrasterar mot bakgrunden och sticker ut; men den sekundära call-to-action för värdar är synlig ovanför luckan också.
- Det erbjuder förslag på utflykter och getaways Airbnb-användare kan boka på samma plats som sina logi för att få besökarna mer glada över att boka sin resa på webbplatsen. Det visar också vilka av dessa erbjudanden är mest populära bland andra användare.,
Pixelgrade
varför det är lysande
- – du vet precis utanför fladdermusen vad handlar de om: WordPress Teman. Den stora titeln, följt av en beskrivande undertext, låter besökarna veta vad som väntar.
- designen är enkel, och färgkombinationen gör ett bra jobb med att göra uppmaningen till handling sticker ut.
- den högra sidan hjälper till att få en glimt av hur deras WordPress-teman ser ut, utan att behöva bläddra eller gräva djupare.,
Mint
visa hela hemsidan
varför det är lysande
- Det är en super enkel design med en stark, ingen jargong rubrik och underrubrik.
- hemsidan ger en säker men lättsam känsla, vilket är viktigt för en produkt som hanterar finansiell information.
- den innehåller också enkel, direkt och övertygande call-to-action copy: ”registrera dig gratis.”CTA-designen är också lysande – den säkrade låsikonen träffar hem säkerhetsmeddelandet igen.,
Dropbox (Business)
visa hela hemsidan
varför det är lysande
- Dropbox bär över sin enkla design och branding. Den innehåller bara vad som är viktigt: en stor, relevant bild med stöd för kopia och en” prova gratis i 30 dagar ” call-to-action-knapp
- Dropbox hemsida och hemsida är det ultimata exemplet på enkelhet. Det begränsar dess användning av kopia och grafik och omfattar blanksteg.,
- dess underrubrik är enkel, men ändå kraftfull: ”den säkra fildelning och lagringslösning som anställda och IT administratörer litar på.”Inget behov av att avkoda jargong för att ta reda på vad Dropbox verkligen gör.
4 Rivers Smokehouse
varför det är lysande
- dregla. Det är vad jag tror när jag kommer till webbplatsen för 4 Rivers Smokehouse. Kombinerat med bra fotografi, rubriken ”Brisket. 18 år att bemästra. Din att njuta.”låter som en upplevelse värt att försöka.,
- parallax rullning guidar dig på en turné genom tjänster, meny och människor som har en bra tid-en stor användning av denna populära design trend.
- Det enda negativa? Jag bor inte tillräckligt nära det här stället. Bu.
Cobb Pediatric Therapy Services
visa hela hemsidan
varför det är lysande
- rubriken och underrubriken vädjar till besökarnas känslomässiga sida: ”arbeta med ett företag som får det”; ”lita på oss. Vi har också varit där! Vi hittar jobb där du kan trivas.,”Detta värde proposition är unik och övertygande.
- Det är svårt att säga från skärmdumpen ovan, men rubriken är på en roterande karusell som vänder sig till specifika personas, från arbetssökande till personer som söker efter en terapeut för sina skolor.
- Det finns flera vägar besökare kan ta när de anländer på sidan, men samtal till handling är placerade väl, formulerade enkelt, och kontrast med resten av sidan.,
Melyssa Griffin
visa hela hemsidan
varför det är lysande
- Melyssa demonstrerar omedelbart sociala bevis ”gå över 200,000 andra…”
- hon kvalificerar en besökares anledning att besöka sin webbplats med en snabb undersökning, och varje alternativ länkar till ett annat innehåll erbjudande.
- hon lägger till ett ansikte till sitt varumärke. Hon är inte bara en slumpmässig webbplats; hon gör det klart att hon är en människa som människor kan ansluta till.,
- sidan använder ljusa färger utan att vara överväldigande och gör det enkelt att förstå vad Melyssas centrala affärserbjudanden är.
Jill Konrath
visa hela hemsidan
varför det är lysande
- Det är enkelt och blir rakt på sak. Från rubriken och underrubriken är det klart exakt vad Jill Konrath gör (och hur hon kan hjälpa ditt företag).
- Det ger också enkel tillgång till Jills tankeledarmaterial, vilket är viktigt för att etablera sin trovärdighet som huvudtalare.,
- Det är lätt att prenumerera på nyhetsbrevet och komma i kontakt-två av hennes primära samtal till handling.
- popup-prenumerationen CTA använder sociala bevis för att få dig att gå med i hennes tusentals andra fans.
- den innehåller nyheter outlet logotyper och vittnesmål som sociala bevis.
Evernote
varför det är lysande
- genom åren har Evernote förvandlats från en enkel anteckningsbesparande app till en svit av affärsprodukter., Detta är inte alltid lätt att förmedla på en hemsida, men Evernote gör ett bra jobb förpackning många potentiella meddelanden till några viktiga fördelar.
- denna hemsida använder en kombination av rika, dämpade färger i videon och dess signatur ljusgröna och vita höjdpunkter för att göra konverteringsvägar sticker ut.
- efter en enkel rubrik (”kom ihåg allt”) leder ögonvägen dig till sin call-to-action, ”registrera dig gratis.”
- Evernote erbjuder också en enkelklicksregistreringsprocess via Google för att hjälpa besökare att spara ännu mer tid.,
Telerik by Progress
varför det är lysande
- ”Stuffy enterprise” är inte känslan du får när du kommer till Teleriks hemsida. För ett företag som erbjuder många teknikprodukter, ger dess djärva färger, roliga mönster och videografi en Google-liknande vibe. Bara en viktig aspekt för att få besökare att känna sig välkomna och låta dem veta att de har att göra med riktiga människor.
- jag älskar den enkla, hög nivå översikt över sina sex produkterbjudanden., Det är mycket tydligt sätt att kommunicera vad företaget gör och hur människor kan lära sig mer.
- kopian är lätt och lätt att läsa. Det talar sina kunders språk.
eWedding
varför det är lysande
- för de älskar fåglar som planerar sin stora dag, eWedding är en bra destination för att bygga en anpassad bröllop webbplats. Hemsidan är inte rörig och innehåller bara de nödvändiga elementen för att få människor att börja bygga sina webbplatser.
- underrubriken ” över 800,000 bröllop webbplatser byggda!,”är bra sociala bevis.
- Det ingår utmärkt produkt grafik, en stor rubrik, och en uppmaning till handling som minskar friktionen med kopian, ”Start webbplats.”
Basecamp
varför det är lysande
- under lång tid har Basecamp haft briljanta hemsidor, och här kan du se varför. Det har ofta fantastiska rubriker och smarta teckningar.
- call-to-action är fet och ovanför fold.,
- i det här exemplet valde företaget en mer bloggliknande hemsida (eller en sida site approach), som ger mycket mer information om produkten.
- kundens offert är en djärv och eftertrycklig testimonial som talar till fördelarna och resultaten av att använda produkten.
charity: water
varför det är lysande
- detta är inte din typiska ideella webbplats. Massor av grafik, kreativ kopia och användning av interaktiv webbdesign gör detta sticker ut.
- den animerade huvudbilden är ett bra sätt att fånga uppmärksamhet.,
- Det använder stor användning av video och fotografi, särskilt för att fånga känslor som orsakar handling.
TechValidate
varför det är lysande
- denna hemsida är vackert utformad. Jag älskar särskilt användningen av blanksteg, kontrasterande färger och kundcentrerad design.
- rubriken är tydlig och övertygande, liksom samtal till handling.
- Det finns också en bra informationshierarki, vilket gör det enkelt att skanna och förstå sidan snabbt.,
Chipotle
visa hela hemsidan
varför det är lysande
- hemsidan är ett bra exempel på smidighet och ständig förändring. Chipotles nuvarande hemsida handlar om den kommande semestern, som den använder som ett unikt värdeförslag för att få dig att börja Klicka via din webbplats. När jag tror Chipotle, jag inte nödvändigtvis tänka på catering, men platsen är en stor påminnelse om att överväga olika användningsområden för burritos du redan känner och älskar.,
- matfotografiet är detaljerat och vackert, och det gör mig faktiskt hungrig och tittar på det. Nu är det en effektiv användning av visuella.
Medium
visa hela hemsidan
varför det är lysande
- detta är kanske en av de bästa användningarna av blanktecken jag har sett. Det gör att mediets app tagline och foto att ta mitt stadium medan du fortfarande ritar ögat till de mörkare sektionstitlarna på webbplatsen.
- Medium gör det enkelt att registrera dig-på webbplatsen, eller med ett enkelt textmeddelande till din mobiltelefon., Jag är mycket mer lyhörd för en text än ett e-postmeddelande, så det här är en bra strategi för att hålla människor engagerade i registreringsprocessen.
- hemsidan använder social proof för att få besökare att börja Klicka runt: sektionerna ”Popular on Medium” och ”Staff Picks” låter mig veta var man kan hitta högkvalitativt innehåll.,
Digiday
visa hela hemsidan
varför det är lysande
- till skillnad från andra online nyhetspublikationer som översvämma hemsidor med så många rubriker och bilder som möjligt, visar Digidays första avsnitt bara en artikel. Dess presenterade bild (i det här fallet en skrämmande) är iögonfallande, och rubriken ber bara att klickas nu när besökaren har en uppfattning om vad de ska läsa.,
- överst på hemsidan, där webbplatser normalt visar upp massor av olika sektioner och alternativ att klicka igenom, har bara en ikon att klicka på-vilket leder dig till en prenumerationssida.
KIND Snacks
visa hela hemsidan
varför det är lysande
- de djärva färgerna ger kontrast, vilket gör att orden och bilderna sticker ut på sidan.
- CTA — ”Shop KIND” — är smart. Det uppmanar besökaren att klicka för att lära sig mer samtidigt som man spelar på ordet ”snäll” – vilket innebär att det är ett bra val att handla där.,
- KIND Snacks ’ tagline är rakt upp lysande-när jag läste det, resonerade meddelandet omedelbart och fick mig att vilja läsa snackbarens etikett.
Ahrefs
visa hela hemsidan
varför det är lysande
- färgkontrasten mellan de blå, vita och orange färgerna är iögonfallande och gör rubriken och CTA pop.
- underrubriken och CTA är ett övertygande par: för att kunna börja spåra och överträffa konkurrenter gratis är ett bra erbjudande.,
- hemsidan presenterar en mängd alternativ för besökaren, men det är inte rörigt tack vare den solida bakgrunden och enkel typografi.
A24 filmer
visa hela hemsidan
varför det är lysande
- filmbolagets hemsida består av endast trailers för sina nya filmer. Vi vet att videoinnehåll är format målgrupper vill se mer av, och detta är en bra strategi för att visa upp A24 arbete på ett mycket engagerande sätt.,
- högst upp på hemsidan erbjuder A24 omedelbart en myriad av sätt att komma i kontakt via sociala medier och e-post-något jag uppskattar som besökare när så många andra webbplatser begraver kontaktinformation längst ner på sidan.
Ellevest
visa hela hemsidan
varför det är lysande
- ”investera som en kvinna: eftersom pengar är makt.”Dessa rubriker är kraftfulla och får mig att vilja lära mig mer om produkten-både som kvinna och som någon intresserad av att göra smarta ekonomiska val.,
- bilderna visar, i stället för att berätta, en av företagets värdeförslag: en stationär webbplats och mobilapp som rör sig med dig.
- ”komma igång” är en stor CTA-i själva verket använder vi det själva här på HubSpot. När du klickar, det tar besökare genom några enkla steg för att ställa in en profil och börja investera.,
HubSpot
visa hela hemsidan
varför det är lysande (om vi säger Det själva)
- LEGO tecken fånga din uppmärksamhet (eftersom de är söta), då de skickligt illustrera och förstärka meddelanden i rubriken och underrubriken.
- Det bär en annan iögonfallande ”komma igång” cta — med bonus microcopy beskriver våra gratis versioner användare kan välja att uppgradera i framtiden.,
- under hela hemsidan fortsätter våra ljusblå och orange färgteman att återvända för att dra ditt öga till länkar och CTAs.
letar du efter mer inspiration? Kolla in dessa otroliga om oss sidor.
