u krijgt nooit een tweede kans om een eerste indruk te maken-daarom is uw homepage ongetwijfeld een van de belangrijkste webpagina ‘ s op uw website.
voor een bepaald bedrijf is de homepage de virtuele voordeur. Als een nieuwe bezoeker het niet leuk vindt wat ze zien, is hun reactie om op de “terug” knop te drukken.
Dat klopt — helaas beoordelen veel mensen nog steeds een boek op zijn kaft.
wat maakt het ontwerp van de homepage van een website briljant in plaats van saai?, Er is meer voor nodig dan alleen kijken — het moet ook goed werken. Daarom scoren de meest briljante homepages op deze lijst niet alleen hoog in schoonheid, maar ook in hersenen en creativiteit.
maar voordat we in de voorbeelden duiken, laten we enkele van de best practices van homepage design ontleden.
wat maakt een goede Website?
een goede website geeft duidelijk antwoord op ” wie ik ben,” “wat ik doe,” en/of ” wat kunt u (de bezoeker) hier doen.,”Het resoneert ook met je publiek, heeft een waardepropositie, roept bezoekers op tot actie, is geoptimaliseerd voor meerdere apparaten en is altijd aan het veranderen om zich aan te passen aan nieuwe designtrends.
alle hier getoonde homepage ontwerpen gebruiken een combinatie van de volgende elementen.
niet elke pagina is perfect, maar de beste homepage ontwerpen krijgen veel van deze goed.,
77 briljante voorbeelden van Homepages, Blogs & Landing Pages
vertel ons hieronder een beetje over uzelf om vandaag toegang te krijgen:
het ontwerp geeft duidelijk antwoord op “wie ik ben”, “wat ik doe” en/of “wat kunt u (de bezoeker) hier doen.”
Als u een bekend merk of bedrijf bent (d.w.z.,, Coca-Cola) u kunt in staat zijn om weg te komen met het niet te beschrijven wie je bent en wat je doet; maar de realiteit is, de meeste bedrijven nog steeds nodig om deze vragen te beantwoorden, zodat elke bezoeker weet dat ze op de “juiste plaats.”
Steven Krugg vat het het beste samen in zijn bestverkopende boek, Laat me niet denken: als bezoekers niet kunnen identificeren wat je binnen enkele seconden doet, zullen ze niet lang blijven hangen.
het ontwerp resoneert met de doelgroep.
een homepage moet nauw gericht zijn — met de juiste mensen in hun taal spreken., De beste homepages te vermijden “corporate gobbledygook,” en elimineren de pluis.
het ontwerp communiceert een overtuigende waardepropositie.
wanneer een bezoeker op uw homepage aankomt, moet het hen dwingen om te blijven. De homepage is de beste plek om nagel uw value proposition, zodat prospects ervoor kiezen om te blijven op uw website en niet navigeren naar uw concurrenten’.
het ontwerp is geoptimaliseerd voor meerdere apparaten.,
alle hier vermelde homepages zijn zeer bruikbaar, wat betekent dat ze gemakkelijk te navigeren zijn en er zijn geen “flitsende” objecten die het browsen in de weg staan, zoals flash banners, animaties, pop-ups, of te ingewikkelde en onnodige elementen. Velen zijn ook geoptimaliseerd voor mobiele apparaten, wat een ongelooflijk belangrijke must-have is in de mobiele wereld van vandaag.
het ontwerp omvat calls-to-action (CTA ‘ s).
elke hier vermelde homepage gebruikt effectief primaire en secundaire calls-to-action om bezoekers naar de volgende logische stap te leiden., Voorbeelden zijn “gratis proefperiode”, “een Demo plannen”, “Nu kopen” of ” meer informatie.”
onthoud, het doel van de homepage is om bezoekers te dwingen om dieper in uw website te graven en ze verder naar beneden te verplaatsen in de trechter. CTA ‘ s vertellen hen wat ze moeten doen zodat ze niet overweldigd of verloren raken. Belangrijker, CTA ‘ s Zet uw homepage in een verkoop of lead-generatie motor, en niet alleen brochure-slijtage.
het ontwerp verandert altijd.
de beste homepages zijn niet altijd statisch. Sommigen van hen veranderen voortdurend om de behoeften, problemen en vragen van hun bezoekers te weerspiegelen., Sommige homepages veranderen ook van A / B testen of dynamische content.
het ontwerp is effectief.
een goed ontworpen pagina is belangrijk voor het opbouwen van vertrouwen, het communiceren van waarde, en het navigeren van bezoekers naar de volgende stap. Als zodanig maken deze homepages effectief gebruik van lay-out, CTA-plaatsing, witruimte, kleuren, lettertypen en andere ondersteunende elementen.
nu, maak je klaar om te leren over uitstekende homepage ontwerp door middel van de volgende 23 real-life voorbeelden.,
FreshBooks
BEKIJK de GEHELE HOMEPAGE
Waarom Het Briljant is
- Het is gemakkelijk om te consumeren., Er is veel discussie over de vraag of korte of lange homepages beter werken. Als je ervoor kiest om het laatste te doen, moet je het gemakkelijk maken om te scrollen en te lezen — en dat is precies wat deze site doet. Het gedraagt zich bijna als een verhaal.
- Er is veel gebruik van contrast en positionering met de primaire calls-to-action-Het is duidelijk wat het bedrijf wil dat je omzet wanneer je aankomt.
- de kopie die gebruikt wordt in de calls-to-action “Get Started for Free” is erg overtuigend.
- FreshBooks gebruikt getuigenissen van klanten op de homepage om verhalen uit de echte wereld te vertellen waarom het product moet worden gebruikt.,
- de sub-headline is ook geweldig: “doe mee met meer dan 10 miljoen eigenaren van kleine bedrijven die FreshBooks gebruiken.”FreshBooks maakt vakkundig gebruik van sociaal bewijs-10 miljoen is een groot aantal – om zijn doelgroep te dwingen om hun collega’ s te sluiten en probeer de tool.
Airbnb
bekijk de volledige homepage
waarom het briljant is
- Het bevat het zoekformulier voor bestemming en datum dat de meeste bezoekers komen op zoek naar, recht vooruit, het begeleiden van bezoekers naar de logische volgende stap.,
- het zoekformulier is “smart”, wat betekent dat het automatisch de laatste zoekopdracht van de gebruiker zal invullen als ze ingelogd zijn.
- de primaire call-to-action (“Search”) contrasteert met de achtergrond en valt op; maar de secundaire call-to-action voor hosts is ook zichtbaar boven de fold.
- Het biedt suggesties voor excursies en uitjes Airbnb-gebruikers kunnen boeken op dezelfde site als hun accommodatie om bezoekers meer enthousiast te maken over het boeken van hun reis op de site. Het laat ook zien welke van deze aanbiedingen zijn het meest populair onder andere gebruikers.,
Pixelgrade
waarom het briljant is
- – u weet meteen wat ze allemaal over: WordPress thema ‘ s. De grote titel, gevolgd door een beschrijvende ondertitel, laat de bezoekers weten wat ze kunnen verwachten.
- het ontwerp is eenvoudig en de kleurencombinatie zorgt ervoor dat de oproep tot actie opvalt.
- de rechterkant helpt een glimp op te vangen van hoe hun WordPress thema ‘ s eruit zien, zonder dieper te hoeven scrollen of graven.,
Mint
bekijk de volledige homepage
waarom het briljant is
- Het is een super eenvoudig ontwerp met een sterke, no-jargon headline en sub-headline.
- de homepage geeft een veilige maar easy-going vibe, wat belangrijk is voor een product dat financiële informatie verwerkt.
- Het bevat ook eenvoudige, directe en meeslepende call-to-action copy: “Sign up free.”Het CTA-ontwerp is ook briljant – het beveiligde slotpictogram raakt opnieuw de veiligheidsboodschap.,
Dropbox (Business)
bekijk de volledige homepage
waarom het briljant is
- Dropbox draagt zijn eenvoudige ontwerp over en brandmerken. Het bevat alleen wat belangrijk is: een grote, relevante afbeelding met ondersteunende kopie, en een “probeer gratis 30 dagen” call-to-action button
- Dropbox ‘ s homepage en website is het ultieme voorbeeld van eenvoud. Het beperkt het gebruik van kopieën en visuals en omarmt witruimte.,
- de sub-headline is eenvoudig, maar krachtig: “de veilige oplossing voor het delen en opslaan van bestanden die werknemers en IT-beheerders vertrouwen.’Het is niet nodig om jargon te decoderen om erachter te komen wat Dropbox echt doet.
4 Rivers Smokehouse
Why It ‘ s Brilliant
- kwijl. Dat denk ik ook als ik op de website van 4 Rivers Smokehouse aankom. Gecombineerd met geweldige fotografie, de kop ” Brisket. 18 jaar tot meester. Van jou mag je genieten.”klinkt als een ervaring die het proberen waard is.,
- de parallax scrolling begeleidt u op een tour door de diensten, menu, en mensen die een geweldige tijd-een groot gebruik van deze populaire design trend.
- de enige negatieve? Ik woon niet dicht genoeg bij deze plek. Boe.
Cobb Pediatric Therapy Services
bekijk de volledige homepage
waarom het briljant is
- de kop en sub-kop aantrekkingskracht op de emotionele kant van de bezoekers: “werk met een bedrijf dat het krijgt”; “vertrouw ons. Wij zijn er ook geweest! We zullen banen vinden waar je kunt gedijen.,”Die waardepropositie is uniek en meeslepend.
- het is moeilijk te zeggen uit de screenshot hierboven, maar de kop staat op een draaimolen die geschikt is voor specifieke persona ‘ s, van sollicitanten tot mensen die op zoek zijn naar een therapeut voor hun school.
- Er zijn verschillende routes die bezoekers kunnen nemen wanneer ze op de pagina aankomen, maar de calls-to-action zijn goed gepositioneerd, eenvoudig geformuleerd en contrasteren met de rest van de pagina.,
Melyssa Griffin
bekijk de volledige homepage
waarom het briljant is
- Melyssa demonstreert onmiddellijk sociaal bewijs “doe mee met meer dan 200.000 anderen…”
- ze kwalificeert de reden van een bezoeker voor een bezoek aan haar website met een snelle enquãate, en elke optie linkt naar een andere inhoud aanbod.
- ze voegt een gezicht toe aan haar merk. Ze is niet zomaar een willekeurige website; Ze maakt duidelijk dat ze een mens is waarmee mensen verbinding kunnen maken.,
- de pagina gebruikt heldere kleuren zonder overweldigend te zijn en maakt het gemakkelijk om te begrijpen wat Melyssa ‘ s centrale zakelijke aanbod zijn.
Jill Konrath
bekijk de volledige homepage
waarom het briljant is
- Het is eenvoudig en komt direct ter zake. Uit de kop en sub-kop, het is duidelijk precies wat Jill Konrath doet (en hoe ze kan helpen uw bedrijf).
- Het geeft ook gemakkelijk toegang tot Jill ‘ s thought leadership materialen, wat belangrijk is voor het vestigen van haar geloofwaardigheid als keynote speaker.,
- het is gemakkelijk om je in te schrijven voor de nieuwsbrief en contact op te nemen — twee van haar primaire calls-to-action.
- het pop-up abonnement CTA gebruikt social proof om je bij haar duizenden andere fans te krijgen.
- Het bevat logo ‘ s en getuigenissen van nieuwsuitzendingen als sociaal bewijs.
Evernote
waarom het briljant is
- in de loop der jaren is Evernote van een eenvoudige app voor het opslaan van notities veranderd in een reeks zakelijke producten., Dit is niet altijd gemakkelijk over te brengen op een homepage, maar Evernote doet een mooi werk verpakken veel potentiële berichten in een paar belangrijke voordelen.
- deze homepage gebruikt een combinatie van rijke, gedempte kleuren in de video en de kenmerkende felgroene en witte highlights om conversiepaden op te laten vallen.
- na een eenvoudige kop (“onthoud alles”), leidt het oogpad je vervolgens naar de call-to-action, “meld je gratis aan.”
- Evernote biedt ook een één-klik aanmeldproces via Google om bezoekers te helpen nog meer tijd te besparen.,
Telerik by Progress
waarom het briljant is
- “Stuffy enterprise” is niet het gevoel dat je krijgt als je aankomt op de website van Telerik. Voor een bedrijf dat veel technologieproducten biedt, geven de gedurfde kleuren, leuke ontwerpen en videografie een Google-achtige sfeer. Slechts een belangrijk aspect om bezoekers zich welkom te laten voelen en hen te laten weten dat ze te maken hebben met echte mensen.
- ik hou van het eenvoudige overzicht op hoog niveau van de zes productaanbiedingen., Het is een zeer duidelijke manier om te communiceren wat het bedrijf doet en hoe mensen meer kunnen leren.
- de kopie is lichtgewicht en gemakkelijk te lezen. Het spreekt de taal van zijn klanten.
ooien
waarom het briljant is
- voor liefdes die hun grote dag plannen, is het ooien een geweldige bestemming om een aangepaste trouwwebsite te bouwen. De homepage is niet rommelig en bevat alleen de nodige elementen om mensen te krijgen om te beginnen met het bouwen van hun websites.
- de sub-headline ” meer dan 800.000 huwelijkswebsites gebouwd!,”is een groot sociaal bewijs.
- Het bevat uitstekende productvisuals, een geweldige koptekst en een call-to-action die wrijving met de kopie vermindert, ” Start website.”
Basecamp
waarom het briljant is
- gedurende lange tijd heeft Basecamp briljante homepages gehad, en hier kunt u zien waarom. Het bevat vaak geweldige koppen en slimme cartoons.
- de call-to-action is vet en boven de fold.,
- in dit voorbeeld koos het bedrijf voor een meer blog-achtige homepage (of single page site approach), die veel meer informatie over het product biedt.
- Het klant citaat is een gedurfde en nadrukkelijke getuigenis die spreekt over de voordelen en resultaten van het gebruik van het product.
liefdadigheid: water
waarom het briljant is
- Dit is niet uw typische non-profit website. Veel visuals, creatieve kopie, en het gebruik van interactieve webdesign maken dit opvallen.
- de geanimeerde headerafbeelding is een geweldige manier om de aandacht vast te leggen.,
- het maakt gebruik van grote toepassingen van video en fotografie, met name bij het vastleggen van emotie die actie veroorzaakt.
TechValidate
waarom het briljant is
- deze homepage is prachtig ontworpen. Ik hou vooral van het gebruik van witruimte, contrasterende kleuren en klantgericht ontwerp.
- de kop is duidelijk en overtuigend, net als de calls-to-action.
- Er is ook een grote informatiehiërarchie, waardoor het gemakkelijk is om de pagina snel te scannen en te begrijpen.,
Chipotle
bekijk de volledige homepage
waarom het briljant is
- de homepage is een goed voorbeeld van flexibiliteit en constante verandering. Chipotle ‘ s huidige homepage is alles over de komende vakantie, die het gebruikt als een unieke waarde propositie om u te beginnen te klikken door uw site. Als ik Chipotle denk, denk ik niet per se aan catering, maar de site is een geweldige herinnering om verschillende toepassingen te overwegen voor de burrito ‘ s die je al kent en waar je van houdt.,
- de voedselfotografie is gedetailleerd en mooi, en het maakt me hongerig als ik ernaar kijk. Dat is een effectief gebruik van visuals.
Medium
volledige homepage
waarom het briljant is
- Dit is misschien wel een van de beste toepassingen van witruimte die ik ooit heb gezien. Het laat Medium ‘ s app slogan en foto centraal te nemen, terwijl nog steeds je oog te trekken naar de donkere sectie titels op de site.
- Medium maakt het eenvoudig om je aan te melden — op de site, of met een eenvoudig sms-bericht naar je mobiele telefoon., Ik ben veel meer responsief op een tekst dan een e-mail, dus dit is een geweldige strategie om mensen bezig te houden met het aanmeldingsproces.
- de homepage gebruikt social proof om bezoekers te laten klikken: de secties” populair op Medium “en” Staff Picks ” laten me weten waar ik hoogwaardige content kan vinden.,
Digiday
volledige homepage
waarom het briljant is
- In tegenstelling tot andere online nieuwspublicaties die homepages overspoelen met zoveel mogelijk koppen en afbeeldingen, toont de eerste sectie van Digiday slechts één artikel. De aanbevolen afbeelding (in dit geval, een enge) is in het oog springende, en de kop is gewoon vragen om te worden geklikt nu dat de bezoeker heeft een idee van wat ze gaan lezen.,
- de bovenkant van de homepage, waar websites normaal gesproken een ton van verschillende secties en opties tonen om door te klikken, heeft slechts één pictogram om door te klikken — wat u naar een abonnementspagina leidt.
soort Snacks
volledige homepage
waarom het briljant is
- de vetgedrukte kleuren produceren contrast, waardoor de woorden en afbeeldingen opvallen op de pagina.
- de CTA — “Shop KIND” — is slim. Het dringt er bij de bezoeker op aan om te klikken om meer te leren, terwijl het maken van een speling op het woord “soort” – implicerend dat het een goede keuze is om daar te winkelen.,
- De slogan van KIND Snacks is ronduit briljant — toen ik het Las, resoneerde de boodschap onmiddellijk en maakte me dat ik het label van de snackbar wilde lezen.
Ahrefs
bekijk de volledige homepage
waarom het briljant is
- het kleurcontrast tussen de blauwe, witte en oranje kleuren is opvallend en zorgt ervoor dat de kop en CTA pop-up.
- de sub-headline en CTA zijn een overtuigend paar: om concurrenten gratis te kunnen volgen en overtreffen is een geweldig aanbod.,
- de homepage biedt een veelheid aan opties voor de bezoeker, maar het is niet rommelig dankzij de solide achtergrond en eenvoudige typografie.
A24 Films
bekijk de volledige homepage
waarom het briljant is
- de homepage van het filmbedrijf bestaat alleen uit trailers voor de nieuwe films. We weten dat video-inhoud Is formaat publiek willen zien meer van, en dit is een geweldige strategie om het werk van A24 presenteren in een zeer boeiende manier.,
- aan de bovenkant van de homepage biedt A24 onmiddellijk een groot aantal manieren om contact op te nemen via sociale media en e-mail-iets wat ik als bezoeker waardeer als zoveel andere sites contactinformatie onderaan de pagina begraven.
Ellevest
bekijk de volledige homepage
waarom het briljant is
- ” investeer als een vrouw: omdat geld macht is.”Deze krantenkoppen zijn krachtig en maken dat ik meer wil leren over het product – zowel als vrouw, als iemand die geïnteresseerd is in het maken van slimme financiële keuzes.,
- de afbeeldingen tonen, in plaats van te vertellen, een van de waardeproposities van het bedrijf: een desktop site en mobiele app die met je mee bewegen.
- “Get Started” is een geweldige CTA — in feite gebruiken we het zelf hier op HubSpot. Wanneer u erop klikt, neemt het bezoekers door een paar eenvoudige stappen om een profiel op te zetten en te beginnen met investeren.,
HubSpot
bekijk de volledige homepage
waarom het briljant is (als we het zelf zeggen)
- De Lego-karakters trekken uw aandacht (omdat ze schattig zijn), dan illustreren ze slim en illustreren ze versterken van de messaging in de kop en sub-kop.
- het draagt een andere opvallende” aan de slag ” CTA-met bonus microcopy detaillering onze gratis versies gebruikers kunnen kiezen om te upgraden in de toekomst.,
- op de homepage blijven onze felblauwe en oranje kleurthema ’s terugkomen om je aandacht te trekken naar links en CTA’ s.
Op zoek naar meer inspiratie? Bekijk deze ongelooflijke Over Ons pagina ‘ s.
