18 príkladov vstupných stránok so zaujímavým dizajnom a neobvyklými čipmi

Hlavný problém najmodernejších pristátí - všetci sa zdali byť zhotovené s kópiou uhlíka. A kde je tvorivý, oheň, kde dizajnové šialenstvo?

V tejto kompilácii som zbieral zaujímavé kúsky a nezvyčajné efekty. Niektoré z nich boli vytvorené vývojármi a web dizajnérmi Texterry a niektoré boli nájdené v otvorených priestoroch Runet. Nie bez príkladov nechutného dizajnu a úplného shizy - na konci článku sa stretnete s vrahom škrečkov a snežnou pannou s vedrom.

Pozrite sa, buďte inšpirovaní, používajte svoje obľúbené nápady v praxi, premiešajte ich s vašimi a nezabudnite vykonať testovanie A / B - toto je jediný správny recept na vytvorenie stránok vraha pristátia.

Rozšírený formulár

Zvyčajne na jednej stránke použite štandardný formulár žiadosti s niekoľkými poliami. Najčastejšie musí klient zadať kontaktné údaje - meno, priezvisko, poštu alebo telefón. Ale v niektorých zložitých oblastiach lepšie otvoriť tému podrobnejšie. Takto to bolo v Texterre: vo forme vstupnej stránky na adrese dellservers.ru si klient môže vybrať modul, parametre, úlohy servera. Môžu resetovať hodnoty, ak sa niečo pokazilo.

Na čo slúži? Vlastník pristátia dostane svoje vedenie rovnako - aj keď sú vo formulári len dve alebo tri polia. Klient sa však bude snažiť hlbšie kopať. Nepoužívajte len objednávku, ale vyberte si vlastnú možnosť.

Dve tlačidlá CTA

Na vstupnej stránke plánovača úloh wunderlist.com/ru - dva hovory na akciu naraz, ktoré sa navzájom posilňujú: "Vytvoriť účet zadarmo" a "Stiahnuť Wunderlist". Užívatelia kliknú na obidva odkazy, konverzia rastie a vstupná stránka svoju prácu dokonale plní.

Špecifické údaje (výsledky)

Toto nie je nová, ale stále funkčná vlastnosť. Ukážte svojim klientom, čo ste dosiahli v číslach: je to jasnejšie ako abstraktné frázy „sme najlepší“, „máme stovky dokončených projektov“ a tak ďalej. Pozrite sa na vstupnú stránku smartprogress.do: môžete okamžite vidieť, koľko ľudí sa už zapojilo do projektu, koľko cieľov si stanovilo, koľko úspechov dosiahli.

Robíme pristátia s prihliadnutím na záujmy Strednej Ázie a použiteľnosť. 7 dní - a pristátie je pripravené. Kontakt!

prispôsobenie

Anonymné vzorované pristátie - br-r, čo by mohlo byť smutné! Oživte svoju jednostranovú stránku, pridajte oheň, zaujmite potenciálneho klienta. Napríklad na stránke Tvorba webových stránok spoločnosti Texterra sú fotky zamestnancov, ktorí sa na tom priamo podieľajú. Návštevník vstúpi a vidí: aha, nie abstraktné vývojári budú zapojení do môjho zdroja, ale celkom živí Svyatoslav, Polina, Artyom a ďalší.

Pohodlný formulár odpovede

Na mnohých miestach pristátia a miest môžete položiť otázku len prostredníctvom formulára. To znamená, že musíte zadať meno a priezvisko, nechať telefón a e-mail. Niekedy všeobecne musíte zadať captcha a kódy - horor! Je jasné, že sa to robí preto, aby sme sa dostali k vedúcim. Ale je tu iná možnosť - ako na pristátie "Cerebro Target." Ak ste registrovaný v "VKontakte", nemusíte nič vyplňovať - ​​vezmite si ho a napíšte. A klient je pohodlný a majiteľ je dobrý - kontakt zostáva, môžete pokračovať v práci.

Hodnotenie zákazníkov

Môžete požiadať klientov, aby im oznámili svoje dojmy a zverejnili prijaté texty na vstupnej stránke. Ale háčik je, že návštevník nebude kontrolovať žiadnym spôsobom - skutočné reakcie alebo falošné. Je lepšie ísť ďalej a presvedčiť návštevníkov. Na huskypark.info, ktorý vyvinul VelikaPlaza, sú uvedené slová zákazníkov Instagramu s odkazmi na ich účty. Všetci úprimní - choď a pozri.

Preukázanie výsledkov

Hipstamatic je aplikácia, pomocou ktorej môžete použiť rôzne filtre na fotografie vo vašom mobilnom telefóne. Pristátie je účinné predovšetkým preto, že zobrazuje krásne príklady fotografií spracovaných v tejto aplikácii. Takže užívateľ okamžite vidí výsledok a rýchlo robí rozhodnutie o nákupe.

Parallax efekt

Posúvanie paralaxa je špeciálny efekt, vďaka ktorému sa obrazy na pozadí pohybujú o niečo pomalšie ako tie v popredí. Tu je návod, ako na stránke valenkivodka.com. Proscroll Landing - fľaša vodky vás bude sprevádzať zhora nadol a pomaly sa pohybovať. Magic bubliny po celom pozadí, aby ste si pamätali veľkorysý novoročné hody. Mentálne sa ukázalo!

animácie

Všeobecne platí, že animácia funguje veľa. Pohybujúce sa obrázky a objekty priťahujú pozornosť používateľov, usmerňujú ich pohľad na najdôležitejšie prvky vstupnej stránky (tlačidlo CTA, časovač, miniaplikáciu atď.), Čiastočne nahrádzajú text. Jeden príklad je na madwell.com. Nasledujte odkaz - reťaze sa pohybujú. A nielen to, že sa pohybujú - počúvajú každý pohyb myši.

Pozor, otázka: akú funkciu má táto animácia? Môžete odpovedať v komentároch k článku.

ilustrácií

Nehovorme banálne: autorské ilustrácie dokážu oživiť najhnilejšiu šablónu pristátia, každý to vie. Je dôležité, aby obrázky spĺňali tému pristátia a očakávania cieľovej skupiny. Pozri: na webových stránkach zdravej detskej výživy marcandfisa.com obrázky sú štylizované ako detské kresby. Presný zásah v strednej Ázii - mamičky a otecki, ktorí nakupujú výrobky, by mal ísť.

Ďalší príklad na vstupnej stránke satelitu-express.ru. Ilustrácia dokonale dopĺňa titulok: "Hlavnou vecou pri cukrovke je nájsť rovnováhu."

Multilendingi

Ponuka pristátia sa mení v závislosti od požiadaviek používateľov. Skóre "predať chata" - čítať na mieste o chate. Skóroval "garáž" - o garáži. Viac o tejto technológii sme napísali v článku o tom, ako si vytvoriť vlastné vlastníctvo.

Tu je príklad multilendingu pre spoločnosť Oviont, ktorú sme urobili.

Klient plánoval vytvoriť samostatné vstupné stránky pre tri produkty: nástroje kancelárskej automatizácie.

Na prvej obrazovke je viacrýchlostný popis výrobkov. Každý blok s popisom je zdobený individuálne. Užívateľ si vyberie príslušný produkt a pokračuje v podrobnom popise.

Pre každý produkt sme vytvorili podrobné časti. Celkové množstvo obsahu na viacznačkách je približne 30 tisíc znakov. Každá stránka obsahuje podrobné sekcie:

  • opis funkčnosti;
  • ďalšie moduly;
  • často kladené otázky o používaní;
  • ceny;
  • hodnotenia.

Časť "Tarify" na stránke každého výrobku funguje odlišne. Napríklad na tarifnej stránke Kontur.Ekstern si užívateľ môže prečítať popisy troch tarifných plánov, vybrať jeden z nich a prihlásiť sa na odber jedného alebo dvoch rokov.

Využitie viacúrovňového prístupu je v tomto prípade opodstatnené, pretože návštevník okamžite vyhodnotí tri ponuky a vyberie ten správny. Ak reprezentujete každý produkt na samostatnej vstupnej stránke, niektorí používatelia ho hneď nenájdu a objednávku neuvedú.

Hover efekt

Keď prejdete kurzorom, obrázky zmenia farbu, rast, priblíženie a oddialenie. Toto robí pristátie nezvyčajným a upozorňuje na jeho jednotlivé prvky. Ak prejdete kurzorom na riadok „Fotografie a chatujte s huskymi“ - zobrazí sa fotografia psa. Na trati "Rodinný altánok-gril" - interiér tohto altánku, a tak ďalej.

Rozdelené rozloženia

Rozdelená obrazovka alebo rozdelená obrazovka - veľmi efektívna konštrukčná technika. Ide o to, aby sa pozornosť používateľa sústredila na každú časť obrazovky - aby sa informácie presne nestratili. Môžete teda inzerovať dva produkty, dve služby, dve dôležité výhody a tak ďalej. Tu je návod, ako sa to robí na vstupnej stránke baesman.com.

3D grafika a rozšírená realita

Pristátie je určené pre aplikáciu Qubi. Táto hra je určená pre deti od 3 rokov a dospelých. Podstata hry je jednoduchá. V prvom kroku užívateľ podľa navrhovanej schémy prilepí skutočný papier, kartón alebo drevenú kocku.

Potom nainštaluje aplikáciu, otvorí ju na smartfóne a "vyzerá" na kocke cez kameru zariadenia.

Na obrazovke smartfónu alebo tabletu kocka ožíva. Užívateľ hrá v trojrozmernej verzii "Snake", "2048", "Labyrint". V tomto prípade je potrebné riadiť hru pomocou skutočnej kocky. Ak chcete ovládať kocku dvoma rukami, musíte použiť špeciálny stojan pre smartfón, ktorý si môžete zostaviť sami.

Trojrozmerný model kocky je znázornený na obrázku (gif).

To, čo zákazník chcel

Klient požiadal o pristátie, ktoré zdôrazňuje rys hry: použitie trojrozmernej rozšírenej reality. Najmä chcel vidieť efekt pohybujúcich sa tvárí trojrozmernej kocky, ktorej aktívna tvár je zapísaná na obrazovke návštevníckeho zariadenia.

Čo sme urobili

Implementovali sme 3D v CSS3 3D transformáciách. Prechody medzi tvárami kocky sa robia pomocou čistého JavaScriptu so sledovaním udalostí drag and touch. Vďaka neobvyklým prechodom medzi obrazovkami vytvára užívateľ trojrozmerný obraz. To sa prejavuje najmä na pracovnej verzii vstupnej stránky.

Pre konečnú verziu pristátia sme urobili realistickejšiu verziu kocky. Na rozdiel od pracovnej verzie, v konečnom kocke rotácia prebieha zvonku, nie zvnútra. Trojrozmerný pocit je vylepšený animáciou hlavičky.

Pristátie je plne adaptívne.

Interaktívny výber farieb interiéru a nábytku

Neobvyklá vstupná stránka "DSK.Color" je schopnosť nezávisle vybrať farbu nábytku a interiérových prvkov pomocou interaktívnej palety.

Spoločnosť "DSK.Color" maľuje akýkoľvek povrch v rôznych farbách. Môžete si objednať farbenie nábytku, domácich spotrebičov, bicyklov, hudobných nástrojov a ďalších predmetov. Klient si môže vybrať akúkoľvek farbu.

Najobľúbenejšou službou je maľovanie nábytku a interiérov. Je to asi 80% práce klienta.

To, čo zákazník chcel

Klient požiadal, aby sa svetlé a pamätné pristátie "s výzvou maľovať všetko okolo." Mal nápady robiť obrazy nábytku v 3D formáte, aby návštevník "mohol otáčať a vidieť farebný objekt z rôznych strán."

Čo sme urobili

Klientovi sme ponúkli nápad: poskytnúť návštevníkovi možnosť nezávisle si vybrať farbu nábytku a interiérov.

Na tento účel bola vstupnej stránke ponúknutý obraz miestnosti, v ktorej návštevník môže maľovať hlavné objekty pomocou vyskakovacej palety. Na základe vybraných farieb a položiek môže užívateľ vypočítať náklady na služby. Prvý prototyp vyzeral takto.

Klientovi sa nápad naozaj páčil, takže sme vytvorili pracovný prototyp vstupnej stránky. Na to vyzerala hlavná časť.

Dohodli sme sa s klientom na ponechaní možnosti maľovania stola, stoličiek, dverí a kuchynských liniek. To sú hlavné položky, ktoré spoločnosť maľuje.

Po dohode o prototype sa do práce zapojil projektant a dizajnér. Prvý z nich načrtol všetky položky vo svg (toto je grafický formát). Druhá sa vrátila a pridala paletu farieb do oblastí svg. Potom bolo implementované modálne okno. S ním môže užívateľ dvakrát skontrolovať farby a objekty a poslať požiadavku na službu.

Neobvyklé a bežné preloadery

S pomocou preloader alebo spinner, môže byť každá vstupná stránka urobená pohodlnejšie a vizuálne atraktívne. V tejto časti budeme hovoriť o preloaderoch a pozrieme sa na príklady týchto elementov vytvorených expertmi Texterry.

Čo je to preloader a aké úlohy rieši

Preloader alebo spinner je znak, ktorý sa objaví na obrazovke pred načítaním stránky. Tieto prvky vidíte denne pri používaní internetu. Nižšie je uvedený príklad preloaderu.

Preloader rieši praktickú úlohu: informuje užívateľa, že sa stránka načítava, a tiež nahrádza vizuálne neatraktívny obrázok sťahovania. Toto je potrebné objasniť.

Vzhľadom na technické vlastnosti prehliadačov sa stránky stránok načítavajú nerovnomerne. Počas načítania sa môže rozloženie vznášať. Ak stránka načíta niekoľko sekúnd, nie zlomok sekundy, používateľ na chvíľu sleduje neatraktívny obrázok.

Preloadery sú implementované pomocou štandardných front-end nástrojov: HTML, CSS, JavaScript a ďalšie knižnice a framework, napríklad jQuery, React.

Ako zlepšujeme pristátie s predpínačmi

Vytvárame unikátne preloadery, vrátane animovaných. Tu sú niektoré z našich prác.

  • Qubi

Pre pristátie Qubi sme vytvorili preloader, ktorý opakuje navigačné menu. To umožňuje užívateľovi pochopiť princíp správy stránky pred jej načítaním.

  • Levellen

Na stránke Levellen Interiors sme použili preloader vo forme firemného loga. Toto je dodatočný prvok značky stránok.

  • Whalenet

Na vstupnej stránke Whalenet môžete vidieť spinner vo forme tyrkysového obdĺžnika.

  • Parielle

Miesto Parielle má klasický kruhový preloader.

  • Projectto

Na Landing Projectto sa použil preloader v tvare obdĺžnika.

Vzhľad predpínača sa zvyčajne diskutuje vo fáze návrhu vstupnej stránky.

interaktívne

Na vstupnej stránke obchodného centra spoločnosti Fidel sa nezvyčajne realizuje možnosť pozrieť sa na voľné kancelárie a požiadať o prenájom.

Ako pristávacie práce

Pristátie poskytuje informácie o prenájme priestorov v obchodnom centre. Hlavné tajomstvo vstupnej stránky je v sekcii Kancelárie. Užívateľ tu vidí dostupnosť voľných kancelárií na každom poschodí budovy.

Keď prejdete kurzorom na voľnú kanceláriu, zobrazí sa tlačidlo „Podrobnosti“.

Stlačením tlačidla sa užívateľ presmeruje na stránku s informáciami o kancelárii a jej fotografiách. Z tejto stránky môžete požiadať o prenájom priestorov.

Vlastnosti implementácie

Náš návrhár kreslil formy kancelárskych priestorov, kresby boli vyhotovené vo formáte svg. Tieto výkresy sa prekrývajú s pôdorysmi. Keď správca stránky v kontrolnom paneli zistí, že kancelária je bezplatná, skript obsahuje zobrazenie obrázka na pláne a možnosť prejsť na stránku s informáciami a objednávkovým formulárom. Keď správca zistí, že kancelária je zaneprázdnená, skript zakáže obraz obrázka v pláne.

Správny dizajn

V tomto príklade nie sú žiadne komplikované technické čipy a dizajnové efekty - celé pristátie má krásny obraz: pozadie, farby, chutné fotografie kaviáru Astrakhan. Odnostranichnik astrahancaviar.ru - Dobrým príkladom toho, ako chce dizajnér kúpiť produkt. A zjedz okamžite!

Nakoniec, o boľavých - niekoľko príkladov hrozných pristátí. Pre kontrast, feyspalma, impotentná agónia a to všetko. Nebudem popisovať, čo je v nich zlé - navrhujem, aby ste tieto problémy vyriešili sami. Ita-a-ak ...

Píšte v komentároch, že to nie je prípad týchto vstupných stránok :-) No, ak je potrebný vývoj pristávacej dosky, vyplňte formulár. Zavoláme, poradíme, pomôžeme rozhodnúť o funkčnosti.

Loading...

Zanechajte Svoj Komentár