Good Mood

soha nem kap egy második esélyt, hogy az első benyomás – ezért a honlap kétségtelenül az egyik legfontosabb weboldalak a honlapon.

bármely adott vállalat számára a kezdőlap a virtuális bejárati ajtó. Ha egy új látogató nem tetszik, amit látnak, a térd-bunkó reakció az, hogy elérje a” Vissza ” gombot.

Ez így van-sajnos sokan még mindig a borítója alapján ítélnek meg egy könyvet.

mi teszi a weboldal honlapjának kialakítását ragyogóvá a bland helyett?, Ez több, mint úgy néz ki, egyedül – ez is jól működik. Ezért a lista legbriliánsabb honlapjai nem csak a szépségben, hanem az agyakban és a kreativitásban is magas pontszámot érnek el.

de mielőtt belemerülnénk a példákba, vizsgáljuk meg a honlaptervezés legjobb gyakorlatait.

az itt látható összes honlapterv a következő elemek kombinációját használja.

nem minden oldal tökéletes, de a legjobb honlap minták sok ilyen jogot kapnak.,

A design egyértelműen választ, hogy “Ki vagyok én, Mit teszek,” és/vagy “Mit tud (a látogató) itt.”

Ha egy jól ismert márka vagy cég (azaz,, Coca-Cola) lehet, hogy megúszhatja, hogy nem kell leírnia, hogy ki vagy, és mit csinálsz; de a valóság az, hogy a legtöbb vállalkozásnak továbbra is válaszolnia kell ezekre a kérdésekre, hogy minden látogató tudja, hogy a “megfelelő helyen vannak.”

Steven Krugg összefoglalja a legjobban a legkelendőbb könyvében, ne gondolkodj: ha a látogatók nem tudják azonosítani, hogy mit csinálsz másodperceken belül, akkor nem fognak sokáig maradni.

A design rezonál a célközönséggel.

a honlapot szűken kell összpontosítani – a megfelelő emberekkel beszélni a nyelvükön., A legjobb weboldalak elkerülik a” vállalati gobbledygook ” – ot, majd kiküszöbölik a bolyhokat.

A terv egy kényszerítő értékajánlatot közöl.

amikor egy látogató megérkezik a honlapjára, arra kell kényszerítenie őket, hogy maradjanak. A honlap a legjobb hely, hogy köröm az érték javaslat, hogy a kilátások úgy dönt, hogy maradjon a honlapon, nem pedig keresse meg a versenytársak.

a kialakítás több eszközre van optimalizálva.,

az itt felsorolt összes weboldal rendkívül használható, ami azt jelenti, hogy könnyen navigálhatók, és nincsenek” feltűnő ” objektumok, amelyek a böngészés útjába állnak, például flash bannerek, animációk, felugró ablakok vagy túlságosan bonyolult és felesleges elemek. Sokan mobilra optimalizáltak is, ami hihetetlenül fontos must-have a mai mobil világban.

A tervezés magában foglalja a cselekvésre való felhívásokat (CTA-k).

minden itt felsorolt honlap hatékonyan használja az elsődleges és másodlagos cselekvésre való felhívásokat, hogy a látogatókat a következő logikai lépéshez irányítsa., Ilyenek például az “ingyenes próbaverzió”, a “bemutató ütemezése”, a “Vásárlás most” vagy a “További információ”.”

ne feledje, hogy a honlap célja, hogy arra késztesse a látogatókat, hogy mélyebben ássanak a webhelyére, és tovább vigyék őket a tölcsérbe. A CTA-k megmondják nekik, mit tegyenek, hogy ne legyenek túlterheltek vagy elveszettek. Ennél is fontosabb, hogy a CTA-k értékesítési vagy ólomgenerációs motorokká alakítják a honlapot, nem csak a brosúra-kopás.

A tervezés mindig változik.

a legjobb honlapok nem mindig statikusak. Némelyikük folyamatosan változik, hogy tükrözze a látogatók igényeit, problémáit, kérdéseit., Egyes honlapok az A/B tesztelésről vagy a dinamikus tartalomról is változnak.

A tervezés hatékony.

egy jól megtervezett oldal fontos a bizalom kiépítéséhez, a kommunikáció értékéhez, valamint a látogatók navigálásához a következő lépéshez. Mint ilyen, ezek a weboldalak hatékonyan használják az elrendezést, a CTA elhelyezést, a szóközt, a színeket, a betűtípusokat és más támogató elemeket.

most készülj fel a kiváló honlaptervezésre a következő 23 valós példán keresztül.,

Dropbox (Üzleti)

4 Folyók Füstölő

Cobb Gyermek Terápiás Szolgáltatások

Melyssa Griffin

Jill Konrath

Evernote

Telerik által Elért

eWedding

Basecamp

jótékonysági: víz

TechValidate

Chipotle

Közepes

Digiday

KEDVES Snack

Ahrefs

A24 Filmek

Ellevest

HubSpot

FreshBooks

tekintse meg TELJES HONLAP

Miért Zseniális

• könnyű fogyasztani., Sok vita folyik arról, hogy a rövid vagy hosszú honlapok jobban működnek-e. Ha úgy dönt, hogy nem az utóbbi, meg kell, hogy könnyen görgetni, olvasni – és pontosan ez az, amit ezen az oldalon nem. Szinte úgy viselkedik, mint egy történet.
• a kontraszt és a pozícionálás jól használható az elsődleges cselekvésre való felhívásokkal-egyértelmű, hogy mit akar a vállalat, hogy átalakuljon, amikor megérkezik.
• a “Get Started for Free” akcióhívásokban használt másolat nagyon meggyőző.
• a FreshBooks az ügyfél ajánlásait használja a honlapon, hogy elmondja a valós történeteket arról, hogy miért használja a terméket.,
• az alcímsor is nagyszerű: “csatlakozzon több mint 10 millió kisvállalkozáshoz a FreshBooks használatával.”A FreshBooks szakszerűen alkalmaz társadalmi bizonyítékot – a 10 millió nagy szám -, hogy arra kényszerítse célközönségét, hogy csatlakozzon társaikhoz, és próbálja ki az eszközt.

Airbnb

A teljes honlap megtekintése

miért zseniális

• tartalmazza a leginkább használt cél-és dátumkeresési űrlapot a látogatók jönnek keres, jobbra elöl, irányadó látogatók a logikus következő lépés.,
• a keresési űrlap “okos”, ami azt jelenti, hogy automatikusan kitölti a felhasználó utolsó keresését, ha be van jelentkezve.
• az elsődleges cselekvésre való felhívás (“keresés”) ellentétben áll a háttérrel, és kiemelkedik; de a házigazdák másodlagos cselekvésre való felhívása is látható a hajtás felett.
• kirándulási és kiruccanási javaslatokat kínál az Airbnb-felhasználók ugyanazon a webhelyen foglalhatnak szállást, hogy a látogatók jobban izguljanak a webhelyen tett utazásuk foglalásával kapcsolatban. Azt is megmutatja, hogy ezek közül az ajánlatok közül melyik a legnépszerűbb a többi felhasználó között.,

Pixelgrade

miért ragyogó

• – tudod rögtön a denevérről, hogy miről szólnak: WordPress témák. A nagy cím, amelyet egy leíró felirat követ, lehetővé teszi a látogatók számára, hogy tudják, mire számíthatnak.
• a design egyszerű, a színkombináció pedig nagyszerű munkát végez a cselekvésre való felhívás kiemelésében.
• A jobb oldal segít bepillantást szerezni a WordPress témáikba, anélkül, hogy mélyebbre kellene görgetniük vagy ásniuk.,

Mint

tekintse meg a teljes honlapot

miért zseniális

• ez egy szuper egyszerű kialakítás, erős, nem zsargon címsorral és alcímmel.
• a honlap biztonságos, de könnyen kezelhető hangulatot biztosít, ami fontos a pénzügyi információkat kezelő termék számára.
• ez is tartalmaz egyszerű, közvetlen, kényszerítő call-to-action copy: “regisztráció ingyenes.”A CTA kialakítása is ragyogó – a biztonságos zár ikon ismét eléri a biztonsági üzenetet.,

Dropbox (Business)

tekintse meg a teljes honlapot

miért zseniális

• a Dropbox egyszerű kialakítású és branding. Csak azt tartalmazza, ami fontos: egy nagy, releváns kép támogató másolattal, és a” Try free for 30 days ” call-to-action gomb
• a Dropbox honlapja és weboldala az egyszerűség végső példája. Korlátozza a másolatok és a látványok használatát, és átöleli a szóközt.,
• alcíme egyszerű, mégis erőteljes: “a biztonságos fájlmegosztási és tárolási megoldás, amelyet az alkalmazottak és az informatikai adminisztrátorok megbíznak.”Nem kell dekódolni a zsargont, hogy kitaláljuk,mit csinál a Dropbox.

4 Rivers Smokehouse

miért zseniális

• Drool. Ez az, amit gondolok, amikor megérkezik a honlapon 4 Rivers Smokehouse. Kombinálva nagy fotózás, a főcím”szegy. 18 év a mesterhez. A tiéd, hogy élvezd.”úgy hangzik, mint egy élmény, amelyet érdemes kipróbálni.,
• a parallax görgetés végigvezeti Önt egy túrán a Szolgáltatások, menü, és az emberek, akik egy nagy idő-egy nagy használja ezt a népszerű design trend.
• az egyetlen negatív? Nem élek elég közel ehhez a helyhez. Boo.

Cobb Gyermek Terápiás Szolgáltatások

tekintse meg teljes honlap

Miért Zseniális

• A főcím pedig al-főcím fellebbezést a látogatók érzelmi oldalon: “a Munka egy Cég, Amely Megkapja a”; “Bízz bennünk. Mi is ott voltunk! Olyan munkahelyeket fogunk találni, ahol boldogulni tudsz.,”Ez az értékajánlat egyedülálló és lenyűgöző.
• nehéz megmondani a fenti képernyőképről, de a címsor egy forgó körhintán található, amely bizonyos személyekre vonatkozik, az álláskeresőktől az iskolájukhoz terapeutát kereső emberekig.
• számos olyan útvonal van, amelyet a látogatók megtehetnek, amikor megérkeznek az oldalra, de a cselekvésre való felhívások jól vannak elhelyezve, egyszerűen megfogalmazva, és ellentétben állnak az oldal többi részével.,

Melyssa Griffin

tekintse meg a teljes honlapot

miért ragyogó

• Melyssa azonnal bizonyítja a társadalmi bizonyítékot ” csatlakozzon több mint 200 000 másikhoz…”
• egy gyors felméréssel minősíti a látogató weboldalának látogatásának okát,és minden opció más tartalomajánlatra mutat.
• hozzáad egy arcot a márkájához. Ő nem csak egy véletlenszerű weboldal; világossá teszi, hogy ő egy ember, akivel az emberek csatlakozhatnak.,
• az oldal élénk színeket használ anélkül, hogy elsöprő lenne, így könnyen érthető, hogy mi a Melyssa központi üzleti kínálata.

Jill Konrath

tekintse meg a teljes honlapot

miért zseniális

• egyszerű és egyenesen a ponthoz jut. A címsorból és az alcímből kiderül, hogy pontosan mit csinál Jill Konrath (és hogyan segíthet az Ön vállalkozásában).
• könnyen hozzáférhet Jill gondolatvezetési anyagaihoz is, ami fontos ahhoz, hogy hitelességét vitaindító előadóként megalapozza.,
• könnyű feliratkozni a hírlevélre és felvenni a kapcsolatot-két elsődleges cselekvésre való felhívása.
• a pop-up előfizetés CTA használ szociális bizonyíték arra, hogy csatlakozzon hozzá ezer más rajongók.
• ez magában foglalja a news outlet logók és beszámolók, mint a társadalmi bizonyíték.

Evernote

miért ragyogó

• az évek során az Evernote egy egyszerű jegyzetmegtakarító alkalmazásból üzleti termékek sorozatává vált., Ez nem mindig könnyű közvetíteni a honlapon, de Evernote csinál egy szép munka csomagolás sok potenciális üzeneteket néhány kulcsfontosságú előnyöket.
• ez a honlap gazdag, elnémított színek kombinációját használja a videóban, valamint aláírásával élénk zöld-fehér kiemeléseket, hogy a konverziós utak kiemelkedjenek.
• egy egyszerű címsor (“Emlékezz mindenre”) után a szemút ezután a cselekvésre való felhíváshoz vezet, “iratkozzon fel ingyen.”
• az Evernote egy kattintásos regisztrációs folyamatot is kínál a Google-on keresztül, hogy még több időt takarítson meg a látogatók számára.,

Telerik by Progress

miért zseniális

• “fülledt vállalkozás” nem az az érzés, amikor megérkezik Telerik honlapján. Egy olyan cég számára, amely számos technológiai terméket kínál, merész színei, szórakoztató tervei és videográfiája Google-szerű hangulatot kölcsönöz. Csak egy fontos szempont, hogy a látogatók jól érezzék magukat, és tudatják velük, hogy valódi emberekkel foglalkoznak.
• szeretem a hat termékkínálatának egyszerű, magas szintű áttekintését., Nagyon világos módja annak, hogy kommunikáljuk, mit csinál a vállalat, és hogyan tudnak az emberek többet megtudni.
• a másolat könnyű és könnyen olvasható. Az ügyfelek nyelvét beszéli.

eWedding

miért ragyogó

• azoknak a szerelmes madaraknak, akik nagy napot terveznek, az eWedding nagyszerű célpont egy egyedi esküvői weboldal építéséhez. A honlap nem zsúfolt, csak a szükséges elemeket tartalmazza, hogy az emberek elkezdjék építeni a weboldalaikat.
• a ” több mint 800 000 esküvői weboldal épült!,”nagyszerű társadalmi bizonyíték.
• ez tartalmazza a kiváló termék látvány, egy nagy címsor, és egy call-to-action, amely csökkenti a súrlódást a másolás, ” Start website.”

Basecamp

miért zseniális

• hosszú ideig a Basecamp briliáns honlapokkal rendelkezett, és itt látható, hogy miért. Gyakran tartalmaz félelmetes címoldalára, okos rajzfilmek.
• a cselekvésre való felhívás félkövér és a hajtás felett van.,
• ebben a példában a vállalat egy blogszerű honlapot (vagy egyoldalas webhely-megközelítést) választott, amely sokkal több információt nyújt a termékről.
• az ügyfél idézet egy merész és hangsúlyos ajánlólevél, amely a termék használatának előnyeiről és eredményeiről szól.

jótékonyság: víz

miért zseniális

• ez nem a tipikus non-profit weboldal. Sok látvány, kreatív másolás és interaktív Webdizájn használata teszi ezt kiemelkedővé.
• az animált fejléc kép egy nagyszerű módja annak, hogy elfog a figyelmet.,
• ez foglalkoztat nagy Felhasználási videó, Fényképezés, különösen elfog érzelem, ami cselekvést okoz.

TechValidate

miért zseniális

• ez a honlap gyönyörűen megtervezett. Különösen szeretem a használata whitespace, kontrasztos színek, valamint az ügyfél-központú design.
• a címsor egyértelmű és meggyőző, csakúgy, mint a cselekvésre való felhívás.
• van egy nagyszerű információs hierarchia is, ami megkönnyíti az oldal gyors beolvasását és megértését.,

Chipotle

tekintse meg a teljes honlapot

miért zseniális

• a honlap nagyszerű példa az agilitásra és az állandó változásra. A Chipotle jelenlegi honlapja a közelgő ünnepről szól, amelyet egyedülálló értékajánlatként használ, hogy elindítsa a webhelyére való kattintást. Amikor azt hiszem, Chipotle, nem feltétlenül gondolok vendéglátás, de a helyszínen egy nagy emlékeztető, hogy fontolja meg a különböző felhasználási burritos már tudja, és a szerelem.,
• az ételfotózás részletes és szép, és valójában éhessé tesz, ha ránézek. Most ez a látvány hatékony használata.

Medium

tekintse meg a teljes honlapot

miért ragyogó

• ez talán az egyik legjobb felhasználási whitespace láttam. Lehetővé teszi, hogy a Medium alkalmazáscímkéje és fotója a középpontba kerüljön, miközben még mindig felhívja a figyelmét a webhely sötétebb szakaszcímeire.
• Medium megkönnyíti, hogy iratkozzon fel – az oldalon, vagy egy egyszerű szöveges üzenetet a mobiltelefon., Sokkal jobban reagálok egy szövegre, mint egy e-mailre, tehát ez egy nagyszerű stratégia, hogy az emberek részt vegyenek a regisztrációs folyamatban.
• a honlap a Social proof használatával arra kéri a látogatókat, hogy kezdjenek el kattintani: a” Popular on Medium” és a “Staff Picks” szekciók tudatják velem, hogy hol találhatok kiváló minőségű tartalmat.,

Digiday

tekintse meg teljes honlap

Miért Zseniális

• Ellentétben a többi online hírek publikációk, hogy elönt a honlapok annyi főcím képek, amennyire csak lehetséges, Digiday első szakasz bemutatja, csak egy cikk. A Kiemelt kép (ebben az esetben egy ijesztő) szemet gyönyörködtető, és a főcím csak azt kéri, hogy kattintsanak most, hogy a látogató van egy ötlete, hogy mit fognak olvasni.,
• a honlap tetején, ahol a weboldalak általában egy csomó különböző szakaszt és lehetőséget mutatnak be a kattintásra, csak egy ikonra kell kattintani – ami előfizetési oldalra vezet.

KEDVES Snack

tekintse meg teljes honlap

Miért Zseniális

• A merész színek előállítására kontraszt, hogy a szavak, a képek kiemelkedik az oldalon.
• a CTA – “Shop KIND” – okos. Sürgeti a látogatót, hogy kattintson, hogy többet, miközben egy játék a “kedves” – ami azt jelenti, hogy ez egy jó választás, hogy vásárolni ott.,
• KIND Snacks ‘ szlogen egyenesen zseniális — amikor elolvastam, az üzenet azonnal rezonált, és arra késztetett, hogy elolvassam a büfé címkéjét.

Ahrefs

teljes honlap megtekintése

miért ragyogó

• a kék, fehér és narancssárga színek közötti színkontraszt szemet gyönyörködtető, és a CTA pop.
• az alcímet és a CTA egy kényszerítő pár: ahhoz, hogy elkezdhesse a versenytársak ingyenes nyomon követését és rangsorolását, nagyszerű ajánlat.,
• a honlap számos lehetőséget kínál a látogató számára, de a tömör háttérnek és az egyszerű tipográfiának köszönhetően nem zsúfolt.

A24 Filmek

teljes honlap megtekintése

miért zseniális

• a filmgyár honlapja csak pótkocsikból áll új filmjeihez. Tudjuk, hogy a videotartalmak formátuma a közönség többet szeretne látni, és ez egy nagyszerű stratégia az A24 munkájának rendkívül vonzó módon történő bemutatására.,
• a honlap tetején az A24 azonnal számtalan lehetőséget kínál a közösségi médián és e-mailen keresztül történő kapcsolattartásra-amit látogatóként nagyra értékelem, amikor oly sok más webhely eltemeti az oldal alján található elérhetőségi információkat.

Ellevest

teljes honlap megtekintése

miért zseniális

• ” befektetni, mint egy nő: mert a pénz hatalom.”Ezek a főcímek hatalmasak, és arra késztetnek, hogy többet tudjak meg a termékről-mind nőként, mind pedig olyan személyként, aki érdeklődik az intelligens pénzügyi döntések meghozatala iránt.,
• a képek nem árulják el a cég egyik értékajánlatát: egy asztali oldalt és egy mobilalkalmazást, ami veled mozog.
• a “kezdés” egy nagyszerű CTA-valójában mi magunk használjuk itt a HubSpot-on. Ha rákattint, tart a látogatók néhány egyszerű lépésben, hogy hozzanak létre egy profilt, majd indítsa el a befektetés.,

HubSpot

tekintse meg teljes honlap

Miért Zseniális (Ha azt Mondom Magunkat)

• A LEGO karakter fog a figyelmet (mert aranyosak), aztán ügyesen illusztrálására, valamint erősíti az üzenetek a főcím pedig al-cím.
• egy újabb szemet gyönyörködtető “Kezdés” CTA-a bonus microcopy részletezi az ingyenes verziók a felhasználók választhatnak, hogy frissíteni a jövőben.,
• az egész honlap, a világos kék, narancssárga színű témák folyamatosan visszatér, hogy felhívja a szemét, hogy linkeket, CTA-k.

további inspirációt keres? Nézze meg ezeket a hihetetlen Rólunk oldalak.