18 primjera odredišnih stranica s zanimljivim dizajnom i neobičnim čipovima

Glavni problem većine modernih slijetanja - čini se da su svi napravljeni s kopijom. A gdje je kreativna, vatra, gdje je dizajn mahnitost?

U ovoj kompilaciji sam prikupio zanimljive komade i neobične efekte. Neke od njih izradili su developeri i web dizajneri Texterre, a neki su pronađeni u otvorenim prostorima Runeta. Ne bez primjera odvratnog dizajna i otvorenog shizyja - na kraju članka susrest ćete se s hrčkom ubojicom i Snow Maiden s kantom.

Pogledajte, budite nadahnuti, primijenite svoje omiljene ideje u praksi, pomiješajte ih s vašim i ne zaboravite provesti A / B testiranje - to je jedini ispravan recept za stvaranje ubojitih odredišnih stranica.

Prošireni oblik

Obično na jednoj stranici koristite standardni obrazac za prijavu s nekoliko polja. Najčešće, klijent mora odrediti kontaktne podatke - ime, prezime, poštu ili telefon. Ali u nekim teškim područjima bolje je otvoriti temu detaljnije. Tako je to učinjeno u Texterri: u obliku odredišne ​​stranice na dellservers.ru, klijent može odabrati modul, parametre, zadatke poslužitelja. Moguće je vratiti vrijednosti ako je nešto pošlo po zlu.

Što je to? Vlasnik slijetanja će ionako dobiti svoje tragove - čak i ako u obrascu postoje samo dva ili tri polja. Ali klijent će biti zainteresiran za dublje kopanje. Nemojte samo naručivati, već odabrati i vlastitu opciju.

Dva gumba CTA

Na odredišnoj stranici raspoređivača zadataka wunderlist.com/ru - dva poziva na akciju odjednom, koji se međusobno pojačavaju: "Stvori besplatan račun" i "Preuzmi Wunderlist". Korisnici kliknu na obje veze, konverzija raste, a odredišna stranica savršeno radi svoj posao.

Specifične brojke (rezultati)

Ovo nije nova, ali još uvijek radna značajka. Pokažite svojim klijentima što ste postigli u brojkama: to je jasnije od apstraktnih fraza "mi smo najbolji", "imamo stotine dovršenih projekata", i tako dalje. Pogledajte odredišnu stranicu smartprogress.do: odmah možete vidjeti koliko se ljudi već pridružilo projektu, koliko su ciljeva postavili, koliko su postignuća postigli.

Mi vršimo slijetanje uzimajući u obzir interese Srednje Azije i upotrebljivost. 7 dana - i slijetanje je spremno. Kontakt!

Personalizacija

Bezlični uzorci - br-r, što bi moglo biti tužno! Oživite svoju jednu stranicu, dodajte vatru, zainteresirajte potencijalnog klijenta. Na primjer, na stranici za izradu web stranica Texterra nalaze se fotografije zaposlenika koji su izravno uključeni u ovo. Posjetitelj ulazi i vidi: aha, a ne izlagači sažetaka bit će uključeni u moj resurs, ali sasvim živi Svjatoslav, Polina, Artyom i drugi.

Praktičan obrazac za odgovor

Na mnogim izletima i mjestima možete postaviti pitanje samo putem obrasca. To znači da morate navesti ime i prezime, ostaviti telefon i e-poštu. Ponekad općenito morate unijeti captcha i kodove - užas! Jasno je da se to radi kako bi se došlo do tragova. No, postoji još jedna mogućnost - kao na slijetanju "Cerebro Target". Ako ste registrirani u "VKontakte", ne morate ispuniti ništa - uzmi ga i napiši. A klijent je udoban, a vlasnik je dobar - kontakt je ostavljen, možete nastaviti raditi.

Recenzije kupaca

Možete zamoliti klijente da ispričaju svoje dojmove i objave primljene tekstove na odredišnoj stranici. Ali ulov je da posjetitelj neće ni na koji način provjeriti - stvarne odgovore ili lažne. Bolje je ići na to i uvjeriti posjetitelje. Na huskypark.info, koji je razvio Veliku Plazu, pružene su riječi Instagram korisnika s poveznicama na njihove račune. Svi iskreni - idite i vidite.

Prikaz rezultata

Hipstamatic je aplikacija s kojom možete primijeniti različite filtre na fotografije na mobilnom telefonu. Slijetanje je učinkovito, prije svega zato što prikazuje lijepe primjere fotografija obrađenih u ovoj aplikaciji. Tako korisnik odmah vidi rezultat i brzo donosi odluku o kupnji.

Učinak paralakse

Pomicanje paralakse je poseban efekt zbog kojeg se pozadinske slike pomiču sporije od onih u prvom planu. Evo kako na stranici valenkivodka.com. Proscroll Landing - boca vodke će vas slijediti od vrha do dna, polako se kreće. Čarobni mjehurići u cijeloj pozadini prisjećaju se velikodušne novogodišnje gozbe. Mentalno se ispostavilo!

animacija

Općenito, animacija funkcionira puno. Pokretne slike i objekti privlače i zadržavaju pažnju korisnika, usmjeravaju njihov pogled prema najvažnijim elementima odredišne ​​stranice (gumb CTA, timer, widget, itd.), Djelomično zamjenjujući tekst. Jedan primjer je na madwell.com. Slijedite vezu - lanci se pomiču. I ne samo da se kreću - oni slušaju svaki pokret miša.

Pažnja, pitanje: koju funkciju obavlja ova animacija? Možete odgovoriti na komentare na članak.

ilustracije

Nemojmo govoriti banalno: autorove ilustracije mogu oživjeti najtužniji predložak, svatko to zna. Važno je da slike odgovaraju temi slijetanja i očekivanjima ciljane publike. Vidi: na web stranici zdrave dječje hrane marcandfisa.com slike su stilizirane kao dječji crteži. Točan pogodak u srednjoj Aziji - mame i tate koji kupuju proizvode trebali bi ići.

Drugi primjer na odredišnoj stranici satelita. Ilustracija savršeno nadopunjuje naslov: "Glavna stvar kod dijabetesa je pronaći ravnotežu."

Multilendingi

Ponuda slijetanja mijenja se ovisno o zahtjevima korisnika. Postignut "prodati vikend" - pročitati na mjestu o kućici. Postignuta "garaža" - o garaži. Više smo pisali o ovoj tehnologiji u članku o tome kako sami napraviti multi-posjedovanje.

Evo primjera multilendinga za tvrtku Oviont, što smo i učinili.

Klijent je planirao napraviti zasebne odredišne ​​stranice za tri proizvoda: alate za automatizaciju ureda.

Na prvom ekranu višestruko se prikazuju kratki opisi proizvoda. Svaki blok s opisom uređen je pojedinačno. Korisnik bira odgovarajući proizvod i nastavlja s detaljnim opisom.

Za svaki proizvod napravili smo detaljne dijelove. Ukupna količina sadržaja na multi-označavanju iznosi približno 30 tisuća znakova. Svaka stranica ima detaljne odjeljke:

  • opis funkcionalnosti;
  • dodatni moduli;
  • najčešća pitanja o korištenju;
  • stope;
  • mišljenja.

Odjeljak "Tarife" na stranici svakog proizvoda radi drugačije. Primjerice, na tarifnoj stranici Kontur.Ekstern korisnik može pročitati opise triju tarifnih planova, odabrati jedan od njih i pretplatiti se na jednu ili dvije godine.

Korištenje višestrukih rješenja u ovom slučaju je opravdano, budući da posjetitelj odmah procjenjuje tri ponude i bira pravu ponudu. Ako predstavljate svaki proizvod na zasebnoj odredišnoj stranici, neki korisnici neće odmah pronaći onaj koji vam je potreban i neće izvršiti narudžbu.

Hover efekt

Kada pomaknete pokazivač, slike mijenjaju boju, rastu, povećavaju i smanjuju prikaz. To čini slijetanje neobično i skreće pozornost na njegove pojedinačne elemente. Ako pokazivač miša držite na retku "Fotografije i čavrljaj s mužjacima" - pojavit će se fotografija psa. Na liniji "Family arbor-grill" - unutrašnjost ovog sjenica, i tako dalje.

Podijeli izgled

Split screen, ili split screen - vrlo učinkovita tehnika dizajna. Svrha je privući pažnju korisnika na svaki dio zaslona - tako da informacija nije potpuno izgubljena. Dakle, možete oglašavati dva proizvoda, dvije usluge, dvije važne prednosti i tako dalje. Evo kako se to radi na odredišnoj stranici baesman.com.

3D grafika i proširena stvarnost

Slijetanje je dizajnirano za aplikaciju Qubi. Ova igra je za djecu stariju od 3 godine i odrasle. Bit igre je jednostavna. U prvom koraku korisnik prema predloženoj shemi lijepi pravi papir, karton ili drvenu kocku.

Zatim instalira aplikaciju, otvara je na pametnom telefonu i "gleda" kocku kroz fotoaparat uređaja.

Na zaslonu kocke pametnog telefona ili tableta oživi. Korisnik svira u trodimenzionalnoj verziji "Zmije", "2048", "Labirint". U tom slučaju morate upravljati igrom pomoću prave kocke. Da biste kontrolirali kocku s dvije ruke, morate koristiti poseban stalak za pametni telefon koji možete sami sastaviti.

Trodimenzionalni model kocke može se vidjeti na slici (gif).

Što je kupac želio

Klijent je tražio da napravi slijetanje, što naglašava značajku igre: korištenje trodimenzionalne proširene stvarnosti. Posebno je želio vidjeti učinak pomicanja lica trodimenzionalne kocke, čije je aktivno lice upisano na zaslon uređaja posjetitelja.

Što smo učinili

Implementirali smo 3D u 3D transformacijama. Prijelazi između lica kocke napravljeni su pomoću čistog JavaScripta sa praćenjem događaja povlačenja i dodira. Zahvaljujući neobičnim prijelazima između zaslona, ​​korisnik stvara osjećaj trodimenzionalnog zaslona. To je osobito izraženo na radnoj verziji odredišne ​​stranice.

Za konačnu verziju slijetanja napravili smo realniju verziju kocke. Za razliku od radne verzije, u završnoj rotaciji kocke odvija se izvana, a ne iznutra. Trodimenzionalni osjećaj je poboljšan animacijom zaglavlja.

Slijetanje je potpuno prilagodljivo.

Interaktivni izbor boja interijera i namještaja

Neobična odredišna stranica "DSK.Color" je mogućnost samostalnog odabira boje namještaja i interijera pomoću interaktivne palete.

Tvrtka "DSK.Color" boji svaku površinu u različitim bojama. Možete naručiti bojenje namještaja, kućanskih aparata, bicikala, glazbenih instrumenata i drugih predmeta. Klijent može odabrati bilo koju boju.

Najpopularnija usluga je slikanje namještaja i interijera. On čini oko 80% posla klijenta.

Što je kupac želio

Klijent je tražio da napravi svijetlu i nezaboravnu Landing "s pozivom da sve oboji." Imao je ideje da napravi slike namještaja u 3D formatu, tako da bi posjetitelj "mogao iskriviti i vidjeti obojeni predmet s različitih strana".

Što smo učinili

Klijentu smo ponudili ideju: omogućiti posjetitelju da samostalno odabere boju namještaja i interijera.

Da biste to učinili, na odredišnoj stranici ponuđena je slika sobe u kojoj posjetitelj može slikati glavne objekte pomoću pop-up palete. Na temelju odabranih boja i stavki korisnik može izračunati cijenu usluge. Prvi prototip je izgledao ovako.

Klijentu se ta ideja doista svidjela, pa smo napravili radni prototip odredišne ​​stranice. Na njemu je glavni dio izgledao ovako.

Dogovorili smo se s klijentom da ostavimo mogućnost bojanja stola, stolica, vrata i kuhinjskih elemenata. To su glavne stvari koje tvrtka slika.

Nakon dogovora o prototipu, dizajneru i dizajneru dizajna pridružio se rad. Prva je skicirala sve stavke u svg (ovo je grafički format). Drugi je valjan i dodao paletu boja na svg područja. Nakon toga je implementiran modalni prozor. S njim korisnik može dvaput provjeriti boje i objekte i poslati zahtjev za uslugom.

Neobični i obični pretovarivači

Uz pomoć preloadera ili spinera, bilo koja odredišna stranica može biti praktičnija i vizualno atraktivnija. U ovom poglavlju ćemo govoriti o preloaderima i pogledati primjere tih elemenata koje su stvorili stručnjaci Texterre.

Što je preloader i koje zadatke rješava

Preloader ili spinner je znak koji se pojavljuje na zaslonu prije učitavanja stranice. Ove elemente možete vidjeti svaki dan kada koristite internet. U nastavku je primjer preloadera.

Preloader rješava praktičan zadatak: informira korisnika da se stranica učitava, te zamjenjuje vizualno neugodnu sliku preuzimanja. To treba razjasniti.

Zbog tehničkih značajki preglednika stranice stranica učitavaju se neujednačeno. Tijekom učitavanja raspored može plutati. Ako stranica učita nekoliko sekundi, a ne djelić sekunde, korisnik neko vrijeme gleda neatraktivnu sliku.

Preloaderi se implementiraju pomoću standardnih razvojnih alata: HTML, CSS, JavaScript i dodatne knjižnice i okviri, primjerice jQuery, React.

Kako poboljšavamo slijetanje s preloaderima

Stvaramo jedinstvene preloaders, uključujući i one animirane. Evo nekih naših radova.

  • Qubi

Za Qubi slijetanje napravili smo preloader koji ponavlja navigacijski izbornik. To omogućuje korisniku da razumije princip upravljanja stranicom prije učitavanja.

  • Levellen

Na web stranici tvrtke Levellen Interiors koristili smo preloader u obliku logotipa tvrtke. To je dodatni element brendiranja web-lokacije.

  • Whalenet

Na odredišnoj stranici Whalenet možete vidjeti predionik u obliku tirkiznog pravokutnika.

  • Parielle

Stranica Parielle ima klasični preloader u obliku kruga.

  • Projectto

Na Projektu slijetanja koristio se pretovarivač u obliku pravokutnika.

O izgledu preloadera obično se raspravlja u fazi projektiranja odredišne ​​stranice.

interaktivni

Na odredišnoj stranici poslovnog centra Fidel, neobično se provodi mogućnost pregleda slobodnih ureda i podnošenja zahtjeva za najam.

Kako radi slijetanje

Usluga slijetanja pruža informacije o iznajmljivanju prostora u poslovnom centru. Glavna tajna odredišne ​​stranice nalazi se u odjeljku "Uredi". Ovdje korisnik može vidjeti dostupnost slobodnih ureda na svakom katu zgrade.

Kada postavite pokazivač na slobodni ured, pojavljuje se gumb "Detalji".

Pritiskom na gumb korisnik prelazi na stranicu s informacijama o uredu i njegovim fotografijama. Na ovoj stranici možete ostaviti zahtjev za najam prostora.

Značajke implementacije

Naš dizajner nacrtao je oblike uredskog prostora, crteži su izrađeni u svg formatu. Ovi crteži se nadovezuju na tlocrte. Kada administrator web-mjesta u upravljačkoj ploči zapiše da je ured besplatan, skripta uključuje prikazivanje slike na planu i mogućnost odlaska na stranicu s informacijama i obrascem narudžbe. Kada administrator zapazi da je ured zauzet, skripta onemogućuje sliku slike na planu.

Pravilan dizajn

U ovom primjeru nema kompliciranih tehničkih čipova i dizajnerskih efekata - cijelo slijetanje ima predivnu sliku: pozadinu, boje, ukusne fotografije kulisa Astrahan. Odnostranichnik astrahancaviar.ru - Dobar primjer kako dizajner želi kupiti proizvod. I odmah jesti!

Konačno, o bolovima - nekoliko primjera strašnih slijetanja. Za razliku, feyspalma, impotentna agonija i sve to. Neću opisati što je u njima pogrešno - predlažem da sami riješite ove probleme. Ita-a-ak ...

Napišite u komentarima da to nije slučaj s ovim odredišnim stranicama :-) Pa, ako je potreban razvoj odbora za slijetanje, ispunite obrazac. Nazovimo, posavjetovat ćemo se, pomoći ćemo u odlučivanju o funkcionalnosti.

Pogledajte videozapis: Самый удобный конструктор #Landing Page для увеличения продаж. (Listopad 2019).

Ostavite Komentar