Et koskaan saa toisen mahdollisuuden tehdä ensimmäinen vaikutelma-se on miksi etusivulle on epäilemättä yksi tärkeimmistä web-sivuja sivustosi.
mille tahansa yritykselle kotisivu on sen virtuaalinen etuovi. Jos Uusi vierailija ei pidä näkemästään, hänen polvitaklausreaktionsa on lyödä ”takaisin”-nappia.
se on oikein — valitettavasti moni vielä tuomitsee kirjan kansikuvan perusteella.
mikä tekee sivuston etusivusuunnittelusta möläytyksen sijaan nerokasta?, Se vaatii enemmän kuin pelkän ulkonäön — sen pitää myös toimia hyvin. Siksi kaikkein loistava kotisivut tässä luettelossa ei ole vain pisteet korkea kauneuden, mutta myös aivoja ja luovuutta.
mutta ennen kuin sukellamme esimerkkeihin, leikellään joitakin kotisivujen suunnittelun parhaita käytäntöjä.
millainen on Hyvä Verkkosivusto?
hyvä sivusto vastaa selkeästi ”Who I am”, ”What I do,” ja/tai ”What can you (the visitor) do here.,”Se myös resonoi yleisön kanssa, on arvolupaus, kutsuu kävijöitä toiminta on optimoitu useita laitteita, ja on jatkuvasti sopeutua uusia suunnittelun trendejä.
kaikki tässä esitetyt kotisivumallit käyttävät seuraavien elementtien yhdistelmää.
kaikki sivut eivät ole täydellisiä, mutta parhaat kotisivumallit saavat monet näistä oikeiksi.,
77 Loistavia Esimerkkejä Kotisivut, Blogit & aloitussivu
Kerro meille hieman itsestäsi alla päästä tänään:
suunnittelu selkeästi vastaukset ”Kuka minä olen”, ”Mitä teen,” ja/tai ”Mitä voit (vierailija) tehdä täällä.”
Jos olet tunnettu brändi tai yritys (esim, Coca-Cola) voit ehkä saada pois, joilla ei ole kuvata, kuka olet ja mitä teet, mutta todellisuus on, useimmat yritykset vielä vastata näihin kysymyksiin niin, että jokainen kävijä tietää, että he ovat ”oikeassa paikassa.”
Steven Krugg kiteyttää parhaiten hänen myydyin kirja, Älä Tee Minut Ajattelemaan: Jos kävijöitä ei voi tunnistaa, mitä se on sinun tehdä muutamassa sekunnissa, ne eivät tartu noin pitkä.
muotoilu resonoi kohdeyleisön kanssa.
kotisivut on keskitettävä suppeasti eli puhuttava oikeille ihmisille heidän kielellään., Parhaat kotisivut välttävät ”corporate gobbledygook”, ja poistaa fluff.
muotoilu viestii pakottavasta arvolupauksesta.
kun vierailija saapuu kotisivullesi, sen on pakotettava heidät jäämään. Kotisivu on paras paikka kynsien arvolupaus niin, että mahdollisuudet valita pysyä teidän verkkosivuilla ja navigoida kilpailijoiden.
malli on optimoitu useille laitteille.,
Kaikki kotisivut lueteltu tässä ovat erittäin käyttökelpoinen, eli ne on helppo navigoida ja ei ole ”flashy” esineitä, jotka saavat tavalla selailu, kuten flash-bannerit, animaatiot, pop-up, tai liian monimutkaisia ja tarpeettomia elementtejä. Monet ovat myös mobiilioptimoituja, mikä on uskomattoman tärkeä must-have nykypäivän mobiilimaailmassa.
suunnittelussa on mukana calls-to-action (CTAs).
jokainen tässä lueteltu Kotisivu käyttää tehokkaasti ensisijaisia ja toissijaisia käyntejä ohjatakseen kävijät seuraavaan loogiseen vaiheeseen., Esimerkkejä ovat” ilmainen kokeiluversio”,” ajoittaa Demo, ”” Osta nyt ”tai” Lue lisää.”
muista, että kotisivun tavoitteena on pakottaa kävijät kaivautumaan syvemmälle sivustoosi ja siirtämään ne suppiloa alemmas. Ctat kertovat heille, Mitä tehdä seuraavaksi, jotta he eivät hukkuisi tai eksyisi. Vielä tärkeämpää on, että CTAs muuttaa kotisivusi myynti-tai johtotason moottoriksi eikä vain esitteen kulumiseksi.
muotoilu muuttuu aina.
parhaat kotisivut eivät aina ole staattisia. Jotkut heistä muuttuvat jatkuvasti vastaamaan kävijöidensä tarpeita, ongelmia ja kysymyksiä., Jotkin kotisivut muuttuvat myös A / B-testauksesta tai dynaamisesta sisällöstä.
muotoilu on tehokas.
hyvin suunniteltu sivu on tärkeää luottamuksen rakentaminen, kommunikointi-arvo, ja navigointi kävijöitä seuraavaan vaiheeseen. Sellaisenaan, nämä kotisivut tehokkaasti käyttää asettelua, CTA sijoitus, whitespace, värit, fontit, ja muut tukevat elementit.
nyt, valmistaudu oppimaan erinomaisesta kotisivujen suunnittelusta seuraavien 23 tosielämän esimerkin kautta.,
FreshBooks
katso KOKO KOTISIVU
Miksi Se on Loistava
- Se on helppo kuluttaa., On paljon keskustelua siitä, toimivatko lyhyet tai pitkät kotisivut paremmin. Jos päätät tehdä jälkimmäisen, sinun täytyy tehdä helppo vierittää ja lukea-ja juuri niin tämä sivusto tekee. Se melkein toimii kuin tarina.
- on hyvä käyttää kontrastia ja paikannus ensisijainen calls-to-action-se on selvää, mitä yritys haluaa voit muuntaa, kun saavut.
- calls-to-action-kappaleessa ”Get Started for Free” käytetty kopio on erittäin vakuuttava.
- FreshBooks käyttää asiakkaiden suosittelut etusivulle kertoa tosielämän tarinoita siitä, miksi käyttää tuotetta.,
- osa-otsikko on myös suuri: ”Liity yli 10 miljoonaa pienten yritysten omistajat käyttää FreshBooks.”FreshBooks työllistää asiantuntevasti sosiaalisia todisteita – 10 miljoonaa on suuri määrä-pakottaakseen kohdeyleisönsä liittymään vertaisiinsa ja kokeilemaan työkalua.
Airbnb
katso koko kotisivu
Miksi Se on Loistava
- Se sisältää kohde ja päivämäärä haku muodossa, että useimmat kävijät tulevat etsimään, oikea eteen, ohjaa kävijöitä looginen seuraava askel.,
- hakulomake on ”smart” eli se täyttää käyttäjän viimeisen haun automaattisesti, jos he ovat kirjautuneet sisään.
- ensisijainen call-to-action (”Haku”) kontrastit taustaan ja erottuu, mutta toissijainen call-to-action isännät on näkyvissä taitteen yläpuolella, liian.
- Se tarjoaa ehdotuksia retkiä ja lomille Airbnb käyttäjät voivat varata samassa paikassa kuin heidän majoittui saada kävijöitä enemmän innoissaan varaat matkan päällä. Se myös osoittaa, mitkä näistä tuotteista ovat suosituimpia muiden käyttäjien keskuudessa.,
Pixelgrade
Miksi Se on Loistava
- – tiedät heti, mitä he ovat kaikki noin: WordPress Teemoja. Iso otsikko, jota seuraa kuvaileva tekstitys, kertoo kävijöille, mitä odottaa.
- muotoilu on yksinkertainen, ja väriyhdistelmä tekee hyvää työtä, kun call to action erottuu joukosta.
- oikealla puolella auttaa vilauksen miten heidän WordPress teemoja näyttää, ilman vierittää tai kaivaa syvemmälle.,
Minttu
katso koko kotisivu
Miksi Se on Loistava
- Se on super yksinkertainen muotoilu voimakas, ei-jargon otsikko ja osa-otsikoihin.
- Kotisivu antaa varman mutta helpon fiiliksen, mikä on tärkeää taloudellista tietoa käsittelevälle tuotteelle.
- se sisältää myös yksinkertaisen, suoran ja pakottavan call-to-action-kopion: ”Rekisteröidy ilmaiseksi.”CTA: n muotoilu on myös loistava-varmistettu Lukko-ikoni osuu jälleen kerran kotiin turvaviestin.,
Dropbox (Liike)
katso koko kotisivu
Miksi Se on Loistava
- Dropbox kuljettaa yli sen yksinkertainen muotoilu ja brändäys. Se sisältää vain sen, mikä on tärkeää: suuri, asiaa kuvaa tukevat kopioida, ja ”Kokeile ilmaiseksi 30 päivän ajan” call-to-action-painike
- Dropbox on kotisivu ja sivusto on äärimmäinen esimerkki yksinkertaisuus. Se rajoittaa kopioinnin ja visuaalisuuden käyttöä ja kattaa valkotavaran.,
- sen alaotsikko on yksinkertainen, mutta tehokas: ”turvallinen tiedostonjako-ja tallennusratkaisu, johon työntekijät ja IT ylläpitävät luottamusta.”Ei tarvitse purkaa jargon selvittää, mitä Dropbox todella tekee.
4 Joet Tupakointitilan
Miksi Se on Loistava
- Kuolaa. Sitä mieltä olen, kun saavun verkkosivuilla 4 Rivers Smokehouse. Yhdistettynä loistavaan valokuvaukseen otsikko ” Brisket. 18 vuotta mestariksi. Sinun nautittavaksesi.”kuulostaa kokeilemisen arvoiselta kokemukselta.,
- parallaksi vieritys opastaa sinut kiertueella palveluiden kautta, valikko, ja ihmiset ottaa hauskaa-suuri käyttää tätä suosittu muotoilu trendi.
- ainoa negatiivinen? En asu tarpeeksi lähellä tätä paikkaa. Boo.
Cobb Pediatric Therapy Services
katso koko kotisivu
Miksi Se on Loistava
- otsikko ja osa-otsikoihin valittaa vierailijoiden emotionaalista puolta: ”Työskennellä Yritys, Joka Saa Sen”; ”Luota meihin. Mekin olemme olleet siellä! Löydämme työpaikkoja, joissa voit menestyä.,”Tuo arvolupaus on ainutlaatuinen ja vakuuttava.
- Se on vaikea sanoa, kuvakaappaus edellä, mutta otsikko on pyörivä karuselli, joka palvelee erityisiä persoonia, työ hakijoiden ihmiset etsivät terapeutti niiden kouluissa.
- On olemassa useita reittejä kävijät voivat ottaa, kun he saapuvat sivulla, mutta calls-to-action on sijoitettu hyvin, muotoiltu yksinkertaisesti, ja kontrasti muun sivun.,
Melyssa Griffin
katso koko kotisivu
Miksi Se on Loistava
- Melyssa välittömästi osoittaa, sosiaalinen todiste ”Liity yli 200000 muut…”
- Hän täyttää kävijän syy vierailemalla hänen verkkosivuilla a quick survey, ja jokainen vaihtoehto on linkkejä eri sisältöä tarjota.
- hän lisää Kasvot brändiinsä. Hän ei ole vain satunnainen sivusto, hän tekee selväksi, että hän on ihminen, johon ihmiset voivat liittää.,
- sivu käyttää kirkkaita värejä olematta ylivoimainen ja on helppo ymmärtää, mitä Melyssa central business tarjoukset ovat.
Jill Konrath
katso koko kotisivu
Miksi Se on Loistava
- Se on helppoa ja saa suoraan asiaan. Alkaen otsikko ja osa-otsikoihin, se on selvää, mitä Jill Konrath ei (ja miten hän voi auttaa yritystäsi).
- se antaa myös helpon pääsyn Jillin ajatusjohtajamateriaaleihin, mikä on tärkeää hänen uskottavuutensa vakiinnuttamiseksi pääpuhujana.,
- on helppo tilata uutiskirje ja ottaa yhteyttä — kaksi hänen ensisijaista puhelua-to-action.
- pop-up-tilaus CTA käyttää sosiaalinen todiste saada sinut liittymään hänen tuhansia muita faneja.
- se sisältää news outlet-logot ja suosittelut sosiaalisena todisteena.
Evernote
Miksi Se on Loistava
- Yli vuotta, Evernote on muuttunut yksinkertainen huomautus säästävä sovellus osaksi suite yritysten tuotteita., Tämä ei ole aina helppoa välittää kotisivulla, mutta Evernote tekee mukavaa työtä pakkaamalla monia mahdollisia viestejä muutamaan keskeiseen hyötyyn.
- Tämä kotisivu käyttää yhdistelmä rikas, hillityt värit video ja sen allekirjoitus kirkkaan vihreä ja valkoinen kohokohtia tehdä muuntaminen polut erottuvat.
- yksinkertaisen otsikon (”muista Kaikki”) jälkeen silmäpolku johdattaa sinut sen kutsumukseen, ”Rekisteröidy ilmaiseksi.”
- Evernote tarjoaa Googlen kautta myös yhden klikkauksen kirjautumisprosessin, joka auttaa kävijöitä säästämään vielä enemmän aikaa.,
Telerik Edistyksen
Miksi Se on Loistava
- ”Tukkoinen enterprise” ei ole tunne saat, kun saavut Telerik: n verkkosivuilla. Yhtiölle, joka tarjoaa monia teknologiatuotteita, sen rohkeat värit, hauskat mallit ja videografia antavat pois Googlen kaltaisen tunnelman. Vain yksi tärkeä näkökohta saada vierailijat tuntemaan tervetulleiksi ja kertoa heille, että he ovat tekemisissä todellisten ihmisten kanssa.
- i love the simple, high-level overview of its six product offers., Se on hyvin selkeä tapa viestiä, mitä yritys tekee ja miten ihmiset voivat oppia lisää.
- kappale on kevyt ja helppolukuinen. Se puhuu asiakkaidensa kieltä.
eWedding
Miksi Se on Loistava
- niille, jotka rakastavat lintuja suunnittelu niiden suuri päivä, eWedding on hyvä kohde rakentaa mukautetun häät verkkosivuilla. Kotisivu ei ole sekainen ja sisältää vain tarvittavat elementit, jotta ihmiset alkavat rakentaa verkkosivustojaan.
- alaotsikko ” yli 800 000 hääsivustoa rakennettu!,”on suuri sosiaalinen todiste.
- Se on mukana erinomainen tuote grafiikka, suuri otsikko, ja call-to-toiminta, joka vähentää kitkaa kopioi, ”Aloittaa verkkosivuilla.”
Basecamp
Miksi Se on Loistava
- pitkään, Basecamp on ollut loistava kotisivut, ja täällä voit nähdä, miksi. Siinä on usein mahtavia otsikoita ja näppäriä piirrettyjä.
- call-to-action on lihavoitu ja sen yläpuolella.,
- tässä esimerkki, yhtiö valitsi enemmän blogi-kuten kotisivu (tai yhden sivun sivuston lähestymistapa), joka tarjoaa paljon enemmän tietoa tuotteesta.
- asiakas lainaus on rohkea ja empaattinen suosittelu ottaen hyödyt ja tulokset käyttämällä tuotetta.
charity: water
Miksi Se on Loistava
- Tämä ei ole tyypillinen ei-voittoa verkkosivuilla. Monet visuaalit, luova kopio ja interaktiivisen web-suunnittelun käyttö tekevät tästä erottuvan.
- animoitu otsikkokuva on loistava tapa vangita huomiota.,
- se käyttää paljon videota ja valokuvausta, erityisesti toimintaa aiheuttavien tunteiden vangitsemisessa.
TechValidate
Miksi Se on Loistava
- Tämä kotisivu on kauniisti suunniteltu. Rakastan erityisesti whitespacen käyttöä, kontrastivärejä ja asiakaslähtöistä muotoilua.
- otsikko on selkeä ja vakuuttava, samoin kutsut toimia.
- siellä on myös suuri informaatiohierarkia, jonka avulla sivua on helppo skannata ja ymmärtää nopeasti.,
Chipotle
katso koko kotisivu
Miksi Se on Loistava
- kotisivu on hyvä esimerkki siitä, ketteryys ja jatkuva muutos. Chipotlen nykyinen Kotisivu kertoo tulevasta lomasta, jota se käyttää ainutlaatuisena arvolupauksena saadakseen sinut aloittamaan sivuston klikkaamisen. Kun ajattelen, Chipotle, en välttämättä ajattele, catering, mutta sivusto on hyvä muistutus harkita eri käyttötarkoituksiin burritos tiedät jo ja rakkautta.,
- ruokakuvaus on yksityiskohtaista ja kaunista, ja se itse asiassa saa minut nälkäiseksi sitä katsoessa. Se on tehokasta visuaalista käyttöä.
Medium
katso koko kotisivu
Miksi Se on Loistava
- Tämä on ehkä yksi parhaita käyttötapoja välilyönnillä olen nähnyt. Sen avulla Medium n app tagline ja kuva ottaa keskellä vaiheessa, kun vielä piirustus silmäsi tummempi osio otsikot päällä.
- Medium helpottaa rekisteröitymistä — sivustolle tai pelkällä tekstiviestillä matkapuhelimeen., Olen paljon paremmin tekstiä kuin sähköpostia, joten tämä on hyvä strategia pitää ihmiset mukana kirjautumisen yhteydessä.
- kotisivu käyttää sosiaalinen todiste saada kävijöitä alkaa klikkaamalla ympäri: ”Suosittu on Medium” ja ”Henkilökunnan valinnat” kohdat, kerro minulle, mistä löytää laadukasta sisältöä.,
Digiday
katso koko kotisivu
Miksi Se on Loistava
- toisin Kuin muut online-uutisia julkaisuja, jotka peittävät alleen kotisivut niin paljon otsikoita ja kuvia kuin mahdollista, Digiday on ensimmäinen osa esittelee vain yksi artikkeli. Sen varustellun kuva (tässä tapauksessa, pelottava yksi) on katseenvangitsija, ja otsikko on vain pyytää napsautetaan nyt, että kävijä on käsitys siitä, mitä he aikovat lukea.,
- alkuun kotisivu, jossa sivustot yleensä esitellä paljon erilaisia osia ja vaihtoehtoja valitse läpi, on vain yksi kuvake napsauttamalla-joka johtaa sinut tilaus-sivulla.
AIKA Välipaloja
katso koko kotisivu
Miksi Se on Loistava
- rohkeita värejä tuottaa kontrastia, jolloin sanat ja kuvat erottuvat sivulla.
- CTA — ”Shop KIND” — on nokkela. Se kehottaa kävijä klikkaa oppia lisää samalla pelata sana ”tavallaan” — mikä tarkoittaa, että se on hyvä valinta tehdä ostoksia siellä.,
- YSTÄVÄLLINEN Välipaloja’ mainoslause on suoraan ylös loistava-kun luin sen viestin heti ymmärsi ja sai minut haluamaan lukea snackbaari etiketti.
Ahrefs
katso koko kotisivu
Miksi Se on Loistava
- väri kontrasti sininen, valkoinen, ja oranssi väri on katseenvangitsija ja tekee otsikon ja CTA pop.
- alaotsikko ja CTA ovat vakuuttava pari: mahdollisuus aloittaa seuranta ja päihittää kilpailijat ilmaiseksi on hyvä tarjous.,
- kotisivu esittelee lukuisia vaihtoehtoja kävijälle, mutta se ei ole sekainen ansiosta vankka tausta ja yksinkertainen typografia.
A24 Elokuvia
katso koko kotisivu
Miksi Se on Loistava
- elokuva-yhtiön kotisivu koostuu vain perävaunut sen uusia elokuvia. Tiedämme videosisältö on formaatti yleisöt haluavat nähdä enemmän, ja tämä on hyvä strategia esitellä A24: n työtä erittäin mukaansatempaava tavalla.,
- yläreunassa etusivulle, A24 heti tarjoaa lukemattomia tapoja saada yhteyttä kautta sosiaalisen median ja sähköpostin-jotain arvostan niin vieras, kun niin monet muut sivustot haudata yhteystiedot alareunassa sivun.
Ellevest
katso koko kotisivu
Miksi Se on Loistava
- ”Sijoittaa Kuin Nainen: Koska raha on valtaa.”Nämä otsikot ovat voimakkaita ja saavat minut haluamaan oppia lisää tuotteesta-sekä naisena että ihmisenä, joka on kiinnostunut tekemään älykkäitä taloudellisia valintoja.,
- kuvat näytä, pikemminkin kuin kertoa, yksi yrityksen arvolupauksia: työpöydän sivusto ja mobiili sovellus, joka muuttaa sinun kanssasi.
- ”Get Started” on suuri CTA-itse asiassa käytämme sitä itse täällä Hubspotissa. Kun napsautat, se vie kävijöitä läpi muutaman yksinkertaisen askeleen perustaa profiilin ja alkaa investoida.,
HubSpot
katso koko kotisivu
Miksi Se on Loistava (Jos Emme Sano Niin Itsellemme)
- LEGO merkkiä kiinnitettyä huomiota (koska ne ovat söpöjä), sitten he taitavasti havainnollistaa ja vahvistaa viestien otsikko ja osa-otsikoihin.
- sillä on toinen silmäänpistävä ”Get Started” CTA — bonusmikroskopialla, jossa ilmaisversiomme käyttäjät voivat halutessaan päivittää tulevaisuudessa.,
- Koko kotisivu, meidän kirkas sininen ja oranssi väri teemat palaavat kiinnittää silmän linkkejä ja cta: t.
etsitkö lisää inspiraatiota? Katso näitä uskomattomia Tietoja meistä sivuilta.
