Hodnocení: „Nejlepší tvůrce vstupní stránky. Příklady vstupní stránky: tipy pro vytváření nejlepších příkladů vstupní stránky


Vstupní stránky rychle pronikly do světa internetového marketingu a vytlačily tradiční webové stránky. Pokud se dříve používaly pouze 2 typy vstupní stránka– jednostránkové a vícestránkové, nyní podtypy vstupních stránek vyrůstají jako houby po dešti.

Abychom nezdržovali materiál (článek je již dlouhý), podívejme se okamžitě na příklady 15 typů vstupních stránek, které dnes v RuNetu existují. Výběr využívá jak díla z internetu obecně, tak příklady hotových vstupních stránek z Panda Copywriting.

Chcete-li zobrazit příklady vstupních stránek v ZOBRAZENÍ V PLNÉ VELIKOSTI musíte kliknout 2x. Nejprve na obrázek a poté, když se obrázek „objeví“, přesuňte myš do spodní části vstupní stránky a klikněte na křížek, který se objeví.

Zobrazit 1. Vstupní stránku „O nás“

Začněme seznam příkladů vstupními stránkami „O nás“. Souhlasíte, je to mnohem lepší: namísto nudného textu o několika odstavcích vytvořte v odpovídající části webu plnohodnotnou vstupní stránku.

Je to jako pas v krásném obalu – řekne vám o hlavních výhodách/úkolech/cenách a přitáhne pozornost.

Vstupní stránka v podobě produktového katalogu je vhodná pro ty obchody, které nenabízejí příliš široký sortiment. Pokud máte hodně produktů nebo chcete udělat vstupní stránku konkrétní model, tento typ jednostránkového webu pro vás není vhodný.

Ale pokud je produktů příliš mnoho, existuje také řešení: můžete v katalogu uvést například jen některé TOP produkty nebo zobrazit různé výběry pomocí kódu.

Příklady vstupních stránek s katalogy

Stránka katalogu čajové společnosti:

Další typ vstupní stránky s katalogem. Tentokrát masné výrobky:


Trik: produkt je okamžitě přetažen do košíku ze vstupní stránky

Je optimální, pokud katalog přistání obsahuje následující prvky:

    1. Ne více než 12 produktů, ne více než 11 kategorií.Pro více Je lepší vytvořit samostatný katalog zboží, jinak hrozí zmatení návštěvníka stránek.
    2. Pohodlné rolování.Je důležité, aby vstupní stránka nebyla přeplněná pozicemi, které oslňují vaše oči.
    3. Vyskakovací tlačítka „Koupit/Objednat“pod každým produktem.
    4. Transparentní dodací a platební podmínky .

A:

  • Zajímavá řešení pro nákupní košík nebo popisy produktů.

Informativní vstupní stránky

Dobrá informační vstupní stránka nejčastěji zahrnuje:

  1. . Jsou vhodné pro výpis faktů, trendů, zdrojů. Místo plátna s textem vypadají lépe očíslované bloky. Jedním slovem, čísla vládnou jako v informační článek a na vstupní stránce.
  2. Grafika. Čím více ikon, fotografií, gifů, tabulek a dalších vizuálních materiálů, tím zajímavější je číst informační vstupní stránku. Často jsou představeny zajímavé rolovací efekty, flash animace a video na pozadí.
  3. Podnadpisy. Navzdory skutečnosti, že vstupní stránka je vizuálně rozdělena do bloků, nelze se obejít bez prostorných a stručných podnadpisů. Řeknou, o čem je vstupní stránka, pokud ji čtenář přelétne.

Informační vstupní stránka je jako infografika, kterou můžete procházet a obsahuje více textu. Tyto vstupní stránky můžete použít k popisu produktů, zejména pokud je produkt relativní, a před vytvořením vstupní stránky, která se uzavírá pro prodej, je to důležité.

Níže uvedený příklad ukazuje vstupní stránku pro web prodávající 3D pera. Díky interaktivním prvkům si můžete přečíst o každém detailu designu a na videu vidět kliku v akci. Jedním slovem – maximum informací, minimum reklamy.

A také - info stránky jsou vhodné pro formátování článků ve firemní resp osobní blog. Například vstupní stránky s informacemi o online vzdělávání, jako je příklad níže, by byly vhodné pro blog společnosti, která nabízí online kurzy.

Příklad informační vstupní stránky pro prezentaci nová platforma mediální plánování:

Jasná struktura a prodejní prvky. Tato vstupní stránka vypadá velmi lakonicky.

Optimální je, pokud informační vstupní stránka obsahuje následující prvky:

    1. podrobný popis produktu nebo služby,která kryje námitky kupujícího.
    2. Produktové video(pokud se jedná o web pro prodej jednoho produktu).
    3. Zajímavá fakta o produktu/službě, výhody.
    4. Minimální reklama.
    5. Jedno nebo dvě tlačítka s neagresivní výzvou k akci(například „Přejít do katalogu“, „Objednat na webu“).

Vstupní stránky pro zachycení olova. Hlavní stránka

Přistání je jednou z nejpohodlnějších platforem pro generování potenciálních zákazníků. Vytvořte jednostránkový web se skutečně užitečnými bonusy a klientskou základnou (nebo spíše adresami elektronické schránky, telefony atd.) – do kapsy!

Zadání vaší e-mailové adresy je mnohem snazší než projít registrační procedurou, ale nikdo se jen tak nevzdá své adresy nebo telefonního čísla. Nabídněte bezplatné výhody pro získání kontaktů.

Také mnoho vstupních stránek tohoto typu, jako v příkladu níže, nabízí zadání vašeho e-mailu výměnou za užitečný newsletter.

V závislosti na situaci můžete na vstupní stránce potenciálního zákazníka nastavit následující pole:

  1. Zadejte své telefonní číslo a jméno (pokud nabízíte např. bezplatnou konzultaci, bezplatné ošetření v salonu atd.)
  2. Vstoupit emailová adresa a jméno. Tyto údaje pak mohou být použity pro zasílání poštou. Pro obdržení e-mailu musí vstupní stránka nabízet potenciálnímu klientovi „dobroty“ – průvodce, kurzy a webináře, demo verze softwaru atd.
  3. Pro zadání pohlaví, věku a dalších osobních údajů. Vhodné například pro vstupní stránky, které shromažďují uživatelskou základnu pro seznamku.

Příklad stránky pro získávání potenciálních zákazníků od Tinkoff Bank: malý blok s výhodami vyplňování dotazníku.

A další příklad, tentokrát z magazínu Tinkoff: výhody, minimum grafiky a recenzí. Mnohem přesvědčivější.

Je optimální, pokud vstupní stránka pro získávání potenciálních zákazníků obsahuje následující prvky:

  1. Titul.
  2. Titulky.
  3. Obrázek nebo videokterá přitáhne pozornost.
  4. Registrační formulář(aka zachycení olova).
  5. Praktická hodnota,je to přínos i pro návštěvníka. Pro člověka je důležité vědět, co dostane výměnou za svá data. Můžete nabízet slevy, užitečné zpravodaje, bonusy atd.

A dál:

  • Interaktivní:malá zajímavá anketa, soutěž.
  • Minimální obsah textu.
  • Minimální počet polí k vyplnění ve formuláři.
  • Silná výzva k akci.

Jednostránkové stránky pro zboží

Často je vstupní stránka vytvořena buď pro konkrétní produkt nebo pro jeho model. Například na nové auto, nový pokrm v nabídce vyhlášené kavárny nebo rychlého občerstvení. To je výhodné, protože pozornost potenciálního kupce není rozptýlena napříč celým sortimentem.

Před očima – pouze konkrétní výhody, ceny, fotografie a tipy na používání konkrétního produktu.

Příklad jednostránkové stránky pro prodej hoverboardu:

V textu s příkladem jsou všechny námitky čtenáře uzavřeny. Existuje pouze jedno tlačítko výzvy k akci, ale ve skutečnosti na správném místě– na konci cílové stránky, kde by měla být po tak výkonném podání.

Optimální je, pokud vstupní stránka pro jeden produkt obsahuje tyto prvky:

  1. Vysoce kvalitní fotografie a videa produktu v akci.
  2. Tipy pro použití.
  3. Recenze(jen ne falešné, čtenáři to cítí).
  4. Tlačítka výzvy k akci.
  5. Prodejní styl textu.
  6. Výhody produktu.

Jednostránkový web pro službu

Vstupní stránka pro konkrétní službu je vytvořena na stejném principu – jednostránková stránka je přidělena pouze pro ni, žádná další fakta ani zbytečná reklama nebude rozptylovat pozornost uživatele.

Níže uvedený příklad ukazuje vstupní stránku služby manikúry v kosmetickém salonu. Salon zároveň poskytuje i další služby (malování, líčení atd.), ale jsou pro ně vyčleněny buď sekce webu, nebo jiné jednostránkové stránky.

Další příklad stránky služeb kosmetického salonu: prodej textu s formulářem pro zachycení potenciálního zákazníka a lukrativní nabídkou:

Optimální je, pokud vstupní stránka služby obsahuje:

  1. Jasný název(čtenáři odcházejí, pokud okamžitě nepochopí, jakou službu jim nabízíte).
  2. Video o službě.
  3. Sociální důkaz.
  4. Formulář pro zachycení potenciálních zákazníků.I když někdo není připraven službu nyní používat, váš newsletter mu vás může připomenout, až se dostane do správné kondice.

Vícestránkové firemní vstupní stránky

Za „klasickou“ vstupní stránku se považuje jednostránkový web, proto se často nazývá jednostránkový web. Dnes je však toto místo velmi sebevědomě obsazeno vícestránkovými weby, které slouží jako oficiální webové stránky pro společnosti.

Existuje několik typů takových stránek. Například weby s přistávacími sekcemi nahoře. Nevedou na jednotlivé stránky-sekce webu, ale jednoduše převedou uživatele do odpovídajícího bloku v rámci stránky.

Příklad jasné vstupní stránky od společnosti „The honey“:

Pokud kliknete na sekci nabídky „Produkce“, dostanete se na stejnou stránku, pouze níže:

Web společnosti může vypadat jako běžná vstupní stránka, mít stejné bloky, ale zároveň může být zcela plnohodnotným portálem se sekcemi „,“ a tak dále.

Dnes jsou takové stránky velmi sebevědomě na vrcholu, pokud jde o frekvenci používání.

V níže uvedeném příkladu je jednostránkový web společnosti Pitaron, který má blok se stručným popisem, seznamem služeb a výhodami (jako na typické vstupní stránce). Po výběru sekce „Web-design“ se ale ocitneme na další vstupní stránce, která je „natočená“ čistě pro webdesignové služby od stejné společnosti.

Podívejme se níže: sekce „Web-design“, do které můžete přejít z předchozí vstupní stránky

Důležitým rozdílem mezi vstupními stránkami v rámci jedné vícestránkové vstupní stránky je použití typických prvků (chytlavá hlavička, plusy, portfolio, kontaktní pole a další). A podotýkám, že jsou jedinečné pro každou stránku, ačkoli jsou vytvořeny v rámci stejného webu.

Optimální je, pokud vícestránková vstupní stránka obsahuje následující prvky:

  1. Dodržuje pravidla:jedna stránka – jedna služba nebo produkt.
  2. Méně viditelné boční menumísto hlavního menu v jeho klasické podobě.
  3. Každá stránka vícestránkové vstupní stránkyobsahuje všechny prvky klasické jednostránkové stránky:USP, nabídka, výhody, recenze a tlačítko výzvy k akci.
  4. Seznam kontaktů.

Vícenásobné přistání

Vícenásobné vstupní stránky pomohou několikanásobně zvýšit konverzní poměr jednostránkového webu díky flexibilnímu přizpůsobení dotazu zadanému uživatelem. Geolandings jsou skvělé pro společnosti, které mají několik poboček v zemi.

Například řetězce restaurací nebo holičství propagují své služby pomocí jedné vstupní stránky, není třeba vytvářet samostatnou jednostránkovou stránku pro každé město. Veškerou práci udělá automatické nahrazení města v záhlaví a změna kontaktního bloku.

Příklad geolandingu pro holičství. Níže je jednostránková stránka pro ty, kteří zadali žádost s městem Moskva.

A takhle vypadá klobouk pro Jekatěrinburg – změnily se jen kontakty a město.

Pokud firma nabízí služby posilovny, bazénu, fitness trenérů atd. a uživatel zadá do vyhledávače „fitness room in St. Petersburg“, vygeneruje se stránka pouze o fitness. Všechna nepotřebná data o ostatních službách jsou odstraněna – magie, a to je vše!

Jedním slovem je to jako geolanding, který se přizpůsobí městu, do kterého uživatel vstoupil vyhledávací dotaz, pouze se přizpůsobí službě.

Podívejme se na příklady. Cestovní společnost propaguje své služby pomocí vstupních stránek, na kterých se mění turistická místa, ale město Kemerovo se nemění.

V závislosti na zadaném požadavku dynamická vstupní stránka „přestaví“ svůj obsah

Na vstupní stránce se mohou změnit nejen nabídky, jako v příkladu výše, ale také spouštěče, blok s kontakty atd.

Příklad vícenásobného přistání pro síť fitness klubů:

Použití příkladů stránek Apk a patička stránek se nemění, liší se však údaje o počtu klubů, mapě a službách jednotlivých poboček v závislosti na městě uvedeném ve vyhledávacím dotazu.

Optimální je, pokud má vícenásobné přistání následující prvky:

  1. Plné přizpůsobení požadavku klienta v PS: obrázky, nabídky, výzvy k akci, USP, kontakty.
  2. Úprava vyskakovacích oken, formuláře předplatného(pokud se klient již přihlásil k odběru newsletteru, můžete mu nabídnout něco jiného).
  3. Pouze jednoduché prvkyabyste se vyhnuli potížím při výměně obsahu.

Zaměstnavatele dnes málokdy zajímají banální životopisy, a pokud chcete jasně vyniknout v očích HR oddělení a poté svých šéfů, pak je vstupní stránka ve formě životopisu určitě vaší volbou.

Tento typ vstupní stránky v podstatě „prodává“ vaše dovednosti. Proto je postavena podle stejného schématu jako jednostránková prodejní stránka pro společnost nebo službu. Níže uvedený příklad ukazuje kombinaci životopisu a webové stránky vizitky. Jednostránková stránka obsahuje příběh „O mně“, seznam dovedností, portfolio, blok s kontakty, widgety – opravdu skvělá prezentace sebe sama!

A níže uvedený příklad popisuje možnosti, jak navrhnout životopis na vstupní stránce. Pohodlné ikony, dovednosti, vzdělání - to vše lze velmi pohodlně prezentovat, vezměte na vědomí :)

Příklad vstupní stránky životopisu návrháře:

Příklad funkce životopisu: video popisující pracovní proces. Prezentovat se tímto způsobem vytváří důvěru a pocit profesionality. Můžete vzít na vědomí.

Optimální je, pokud životopis ve formě vstupní stránky obsahuje následující prvky:

  1. Odkazy na profily na sociálních sítích.
  2. Nestandardní obsah,vizualizace, vlastní styl.
  3. Fotografie nebo video s vlastníkem stránky.
  4. Pracovní příklady.
  5. Kontakty.
  6. Recenze.

Vstupní stránky-prezentace

Někdy jsou vstupní stránky vytvořeny bez časovačů, spouštěčů nebo nepodložených nabídek. Jsou navrženy tak, aby jednoduše prezentovaly práci firmy nebo osoby a nejpohodlnější je to udělat formou interaktivní vstupní stránky. V RuNetu tento typ jednostránkového webu zatím není příliš běžný, ale v zahraničí jej již aktivně využívají firmy spojené s designem, uměním atp.

V ruskojazyčném segmentu však již došlo k velmi vážnému pokroku. Pokud lze obyčejné vícestránkové stránky jednoduše procházet a zavírat, pak takový trik nebude fungovat s prezentací vstupní stránky. Zdržují se.

K popisu produktů nebo služeb lze využít i vstupní stránky prezentace, prezentace je vhodná například pro aplikace, které jsou potřeba pro zpracování fotografií. V níže uvedeném příkladu se bloky posouvají nejen dolů a nahoru, ale také do stran a představují typy softwaru a příklady zpracovaných fotografií.

Příklady kreativních vstupních stránek a prezentací:

Zajímavá animace, také stylizovaná jako komiks. Okamžitě je zřejmé, že zde pracují kreativní lidé.

Optimální je, pokud vstupní stránka ve formě prezentace obsahuje následující prvky:

  1. Animace.Vždy přitahuje pozornost a umožňuje uživatelům zůstat na webu déle.
  2. Autorské kresby.S jejich pomocí můžete vyjádřit individualitu a „uchytit“ návštěvníka webu.
  3. Interaktivní.Otázky, hledání, malé testování – to vše vzbuzuje zájem a motivuje ke zhlédnutí.
  4. Nestandardní text.
  5. Horizontální rolování.

Wiki vstupní stránky pro VK

Barevná jednostránková stránka, která se otevře po kliknutí na popis příspěvku, vám pomůže krásně popsat obchod, prezentovat službu a produkt a samozřejmě zvýšit tržby a. A to vše vám to umožňuje.

Mimochodem, Peter Panda byl jedním z prvních copywriterů v Runetu, který začal psát texty pro vstupní stránky VKontakte.

Příklad vstupní stránky VK od Petera Pandy

Jednostránkový web od Panda-copywriting

A příklad ze sítě: text je rozdělen do krátkých bloků, objemově podobný malým příspěvkům na VK.

Je optimální, pokud taková vstupní stránka Wiki obsahuje následující prvky:

  1. Podrobné informace o firmě, servisu.
  2. Větší grafické prvkyaby nezatěžoval oči čtenáře.
  3. Zboží(pro internetový obchod s malým sortimentem). Uživatelé sociálních sítí neradi vyhledávají produkty v albech, proto je lepší je umístit na vstupní stránku.
  4. Krátké textové bloky.
  5. Fotografie.Protože se vstupní stránka stále nachází v sociální síť, potřebujete, aby uživatelé viděli, kdo jim poskytuje služby nebo prodává zboží.

Vstupní stránka na hlavní stránce

Další lídr mezi vstupními stránkami. Na hlavní stránku se musí vejít hodně dat - Stručný popis, minikatalog nebo popis více produktů, výhody, možná i ceny, kontakty, widgety. Aby čtenáře tato řada informací neunavila, je třeba počítat s interaktivitou vstupních stránek.

Níže uvedený příklad je vstupní stránka, která se bude líbit i dětem. Proto vzbuzuje důvěru mezi rodiči, kteří za představení zaplatí.

Kromě jasných barev a fotografií šťastných dětí existuje několik typů scénářů, videorecenzí atd. Zbývající podsekce („Více informací“, které popisují typy představení, ceny atd.) již nelze vytvořit formou vstupní stránky.

A další příklad takové vstupní stránky:

Příklad vynikající jasné vstupní stránky na hlavní stránce:

Výborný design, minimum informací, které zároveň plně vysvětlí, v čem je specialita této firmy. Věnujte pozornost regálům, nejsou vystaveny, ale dávají představu o stavu společnosti.

Optimální je, pokud hlavní stránka ve formě vstupní stránky obsahuje takové prvky, jako jsou:

  1. Jednoduchý obsah -minimální užitečné informace o společnosti nebo produktu.
  2. 1-2 neagresivní akční tlačítka.
  3. Klíčové výhody a výhody.
  4. Kontakty.
  5. Zajímavé názvy, popisy,vtáhnout čtenáře a vést k němu nutná akce(přejděte do katalogu, zavolejte, přihlaste se).
  6. Nedostatek textového pole.

Vstupní stránky-hry

Takové stránky nebudou mít katalog, popisy výhod značky ani blok s kontakty. Jsou vytvořeny pro nepřímou reklamu nebo jednoduše pro rozpoznání značky. Skvělé flash hry si uživatel určitě zapamatuje.

Pokud chcete zvýšit důvěru v produkt nebo zahřát svou cílovou skupinu, vezměte na vědomí.

Na příkladu hry „Eat the Bomb“ to uživatele nijak zvlášť nezatěžuje a je návykové. Navíc jde o nenápadný reklamní trik The FWA.

Pokud se uživatel na vašem webu dostane na špatnou stránku, něco krásného, ​​vtipného nebo dokonce hravého ho určitě přiměje pokračovat v procházení webu.

Nabídněte uživateli odkazy na jiné části webu. Tímto způsobem je pravděpodobnější, že stránku nezavře. Níže uvedené příklady ukazují nejen skvělou grafiku, ale také schopnost přejít na domovská stránka nebo jiné stránky webu.

Drobnost, samozřejmě, ale úspěch se skládá z maličkostí!

Příklad skvělé stránky s chybou 404: ano možnost nahlásit chybu, tlačítka pro přechod na web, video.

Optimální je, pokud stránka 404 obsahuje následující prvky:

  1. Užitečné odkazy,možnost přejít na domovská stránka místo.
  2. Jasná a srozumitelná zprávao tom, proč uživatel na tuto stránku přišel.
  3. Možnost nahlásit problém.
  4. hledací řádek,aby čtenář neodcházel, ale přesto na vašem webu našel to, co potřebuje.
  5. Interaktivní prvky.

Vstupní stránky – události

Pokud chcete, aby vaše cílové publikum vědělo o události, vytvořte vstupní stránku. , program akce atd. vypadá to velmi nudně, je-li vytvořeno jako souvislé plátno, a ani seznamy s odrážkami nepomohou udržet čtenářovu pozornost až do konce.

Budete moci vzbudit zájem blok od bloku, aniž byste ztratili čtečku, ukázat program a reproduktory ve formě pohodlných bloků, zdůrazňujících výhody pomocí ikon. A „třešničkou na dortu“ budou fotografie z předchozích akcí s animovanými přechody a dalšími multimediálními technikami.

A nezapomeňte na spouštěče - sleva za registraci před určitým datem nebo za doporučení přítele nebude zbytečná.

Níže je uveden příklad dlouhé vstupní stránky, která poskytuje spoustu koncentrovaných informací, takže neztratíte své cílové publikum a oni se dostanou až na konec textu.

A další příklad dlouhé, ale správné vstupní stránky:

Světlý design, navržený ani ne tak pro rodiče, jako pro děti. Skvělý motivační slogan: „Let do vesmíru za cenu lístku do kina.“ Navíc jsou možné námitky čtenářů pokryty pomocí FAQ.

Optimální je, pokud vstupní stránka věnovaná události obsahuje následující prvky:

  1. Časovačs odpočítáváním do začátku akce.
  2. Místo a časudálosti, umístěné na prominentním místě.
  3. Několik tlačítek s výzvou k akci.Nebo jako možnost „lepící“ tlačítko CTA.
  4. Světlý design,připomínající plakáty.
  5. kontakty,umístěna na nápadném místě.

Propagační stránka je nástroj pro propagaci produktu, služby nebo image firmy na internetu, který ovlivňuje určitou část cílová skupina.

Úkolem propagačního webu je zaujmout cílové publikum tím, že ukáže vlastnosti propagovaného předmětu (produktu nebo služby), jeho výhody, vytvoří „správné asociace“ a zadní kanál interakce s publikem, tvoří spotřebitelskou komunitu. V konečném důsledku je vytvoření propagačního webu vždy zaměřeno na zvýšení prodeje.

Co děláme pro vyřešení těchto problémů?

Propagační stránka je obvykle spojena s bohatým a sofistikovaným designem, hojným využitím animačních efektů a různých dynamické prvky, ale ve skutečnosti vše závisí na specifikách cílového publika, propagovaného objektu a prodejních kanálů.


Propagační web design je klíčový. Při vývoji koncepce designu je důležité dodržovat firemní styl a obecnou koncepci propagace, včetně zohlednění budoucích událostí, aby se na stránky přilákalo publikum.

Na základě marketingového a vizuálního konceptu propagace značky (produktu, služby) vytváříme vizuální sérii, která tvoří základ pro design propagačního webu. Na základě stávajícího obsahu vytváříme kompletně hotové, kompletní webové stránky. Pokud není dostatek obsahu, v případě potřeby se podílíme na jeho tvorbě (fotografie, videa, texty).

Jsme také připraveni nabídnout služby pro tvorbu kreativních a propagačních konceptů ve spolupráci s marketingovým a obchodním oddělením klientské společnosti.

Proč my

Kvalitní design propagačního webu mohou vytvořit pouze kvalifikovaní specialisté. Máme takové specialisty a kromě toho:

Široký profil: vytváření různého obsahu pro web

Organizujeme fotografování, natáčení videa, studio nebo on-site, se speciálním vybavením (technika, osvětlení). Vytvoříme ilustrace, provedeme retuše, vytvoříme scénář animovaného videa a mnoho dalšího.

Zkušenosti a portfolio

Máme zkušenosti se spoluprací s předními značkami a interakcí s významnými reklamními agenturami. Jsme schopni pracovat v extrémním režimu, poskytovat rychlou zpětnou vazbu, zpracovávat velké množství počátečních dat, získávat rezervy a produkovat požadované množství výsledků kvalitně a včas.

Komplexní analytika, strategie propagace

N Ve fázi tvorby webu se do procesu zapojí kolegové z příbuzných oblastí, aby vypracovali strategii rozvoje webu, stanovili optimální kanály publikum, správné přidělení rozpočtu, kontrolní body a ukazatele pro analýzu výsledku. Pokud jste plánovali propagační aktivity v offline prostředí, pak bude naše strategie logickým rozvojem a pokračováním obecného marketingového konceptu.

Velké množství vstupních stránek v RuNetu je velmi monotónní a vždy je potřeba vytvořit něco nového a neobvyklého.

Níže se podíváme na TOP 10 prodejních vstupních stránek, které jsou dobře sestavené a stojí za to je analyzovat, a poté tyto triky aplikovat na vaše prodejní vstupní stránky.

Existuje určitá struktura vstupní stránky, která funguje. Mohou to být buď dlouhé vstupní stránky, nebo se vejdou na 2 obrazovky.

Konsenzus neexistuje a nemůže být. V každém případě je nutné vycházet z cílového publika na webu.

Zde jsou příklady 10 prodejních vstupních stránek, které byste si rozhodně měli prostudovat:

Nemám přístup ke statistikám vstupní stránky, takže nemohu říci, jak dobře převádějí návštěvníky na odběratele a odběratele na kupující.

Jedná se spíše o společnost a prodejní prvky na stránkách jsou dobře vyvinuté, takže stojí za to je provádět podrobná analýza tyto prodejní vstupní stránky.

Pokud si chcete ze svého webu udělat nejen krásný obrázek, ale také aby fungoval, pak doporučuji si to nastudovat. Dokáže produkovat více aplikací s menším rozpočtem. Určitě studujte!

Příklady nejprodávanějších vstupních stránek

1 Shopify

Velmi krátká vstupní stránka, která nabízí vyzkoušení produktu na 14 dní zdarma.

Název: krátký a výstižný, skládá se z několika slov.

Výhody: prezentovány ve formě 3 bodů, kde jsou čísla (to je velmi důležité, protože přitahuje pozornost a poskytuje konkrétní údaje, bez „vody“)

Formulář žádosti krok za krokem: neukážou formu hned.

Prvním krokem je vyplnění emailového pole:

Druhý krok - požádají vás o vyplnění dalších 2 polí s heslem a názvem vašeho internetového obchodu:

Věnujte prosím pozornost pořadí plnění. Nezobrazují vám všechna pole najednou, protože to snižuje konverzi, ale postupně vám zobrazují další pole, jako v kvízu.

Co ještě je: na konci stránky je další výzva k akci:

2 Duolingo

Naším dalším testovacím předmětem je jazyková výuka Duolingo.

Název: Velmi krátký název, stejně jako předchozí příklad.

Formulář žádosti krok za krokem: první má také 2 tlačítka.

První tlačítko vám umožní okamžitě začít studovat (brzy však uvidíme, jak vás do procesu zapojí) a vytvořit si účet, druhé pak přihlášení těm, kteří se do systému zaregistrovali.

A nyní začíná zábava, když kliknete na tlačítko „Start“:

Dostáváte se k otázce, kde je potřeba zvolit jazyk.

Tato otázka je velmi přirozená a snadno se na ni odpovídá, když máte v úmyslu studovat cizí jazyk.

Poté si musíte vybrat cíl učení jazyka:

V závislosti na tom vám bude sestaven tréninkový program.

Další otázkou je, kolik času denně můžete věnovat studiu:

Další otázka, kde si musíte odpovědět, zda jste začátečník nebo jste se již něco naučili:

Nezobrazují vám formulář, kde je třeba odpovědět na 7-8 otázek na jedné stránce, ale postupně je do procesu zapojují a otázky vám ukazují.

Důležité také je, že otázky jsou psány v logickém pořadí a nedochází k nedorozuměním, je velmi snadné na ně odpovědět.

Kvízové ​​kvízy na webových stránkách se používají kdekoli, důležité je pouze je vidět. Přečtěte si také naše. Takže pochopíte, co to je a jak to aplikovat ve vašem podnikání.

3 Airbnb

Jak již víte, jakékoli informace na vstupní stránce mohou být prezentovány ve velmi pohodlné formě krok za krokem.

Ale nejen prodejní informace, ale také když chcete říct a ukázat svůj produkt.

Mnoho lidí je stále nuceno číst na prodejních stránkách velký počet text (a to není ve formě vyprávění).

Na tomto příkladu z Airbnb uvidíte, jak můžete člověku stručně ukázat spoustu informací a provést krátký školicí kurz.

Toto je jedna ze služeb Airbnb, kde můžete svým hostům poskytnout více než jen prohlídku (říkají tomu „zážitek“).

Chcete-li se zaregistrovat do tohoto programu, musíte kliknout na tlačítko „Začít“ a budete přesměrováni na úplný začátek:

A teprve poté nabízejí registraci a vytvoření vašeho „dojmu“:

Stejné informace by mohly být umístěny ve formě textu, který je rozdělen do bodů, ale je mnohem jednodušší a zajímavější studovat ve formátu krok za krokem.

4 Černý zápor

Charakteristickým rysem tohoto webu nad všemi ostatními je jeho nestandardní rolování. Jak jste si mohli všimnout, je horizontální. K pohybu dochází také přetažením obsahu doleva. Ale co je ještě působivější, je počet efektů v každém bloku: , , stejně jako vertikální rolování bloků. Video na pozadí je trochu matoucí, ale přesto je vše udělané docela originálně a neobvykle.

5 Super přísně tajné

Zde bych vás chtěl upozornit nikoli na efekty vznášení, ale na pozadí. Po úplném načtení webu se při pohybu kurzorem myši na pozadí objeví pruhy jako voda. Kliknutím se také vytvoří skvrny a tento efekt působí vynikajícím dojmem. To neuvidíte na každém webu.

6 NEJSME PLASTOVÉ

Při posouvání se na stránce objevují (kreslí) různé ikony a nadpisy. Aniž si to uvědomujete, začnete se dívat na proces kreslení a čekáte, co se tam objeví na konci, a tím čtete text, který byl nakreslen. Pokud vás zajímá, jak tento efekt vzniká a chcete stejný efekt vytvořit i na vašem webu nebo vstupní stránce, pak si prostudujte tyto články: a.

7 ANTON & IRENE

8 BLITZ

9 Loď

Pokud je pro vás při čtení knihy těžké si představit, co se tam děje, pak je tato stránka určena právě vám :) Protože zde můžete okamžitě číst a vidět děj, protože to, co je napsáno v textu, se děje na pozadí. To znamená, že jak posouváte stránku a čtete text, mění se pozadí webu.

Zajímavý nápad. Kdo ví, možná se v blízké budoucnosti začnou takové příběhy objevovat ve velkém. Tento přístup má samozřejmě klady a zápory, ale neexistují žádné stížnosti na to, že to bylo provedeno kreativně.

Bonusová vstupní stránka

*Deiner Page

Toto není úplně prodejní vstupní stránka, ale abychom vás trochu inspirovali a nasměrovali vaše myšlenky ke kreativitě, tento klip musíte vidět!

Když se dostanete na tuto stránku, musíte pro spuštění podržet mezerník.

Jsou zde vyprávěny 2 příběhy a musíte posbírat všechny prvky, abyste zjistili pravdu :) Jste jako detektiv, kde potřebujete nejen vidět krásný obrázek, ale také pochopit, co se za ním skrývá.

Víc vám neřeknu, pokračujte a uvidíte sami. Nápad je to skvělý, určitě do komentářů napište, zda se vaše předpoklady na začátku sledování a na konci shodovaly.

A ano, abyste viděli různé konce, budete se muset na toto video podívat několikrát 😉 .

Závěr

Viděli jste 9 stránek, které se liší od těch, které všichni vidíme na RuNetu. Vytváří je profesionální tým designérů. Webové stránky mají mnoho interaktivních prvků, které komunikují s uživatelem a umožňují mu zůstat na stránce ještě déle. Doufám, že pomocí těchto stránek najdete inspiraci pro své projekty.

Vývoj designu vstupní stránka princip „chci to jako jeho“ zůstal i v roce 2014, kdy byla efektivita prodejní stránky odhalena na maximum a firmy si uvědomily, že pomocí landing page mohou nejen rychle prodat produkt/službu, ale také odhalit se z kreativního hlediska. Moderní vstupní stránky nejsou jen prodejní strukturou, ale také skvělou příležitostí, jak vytvořit u návštěvníka WOW efekt, obdivovat myšlenku stránky a její implementaci.

Pokud se nechcete obtěžovat, můžete si stáhnout prototyp „ideální vstupní stránky“ a vytvořit stránku podle pravidel, napsat nadpis, nabídku, výhody a výhody, vložit blok důvěry a výzvu -akční tlačítko a jděte spát s myšlenkou, že práce je hotová "pět." Pokud však chcete překonat očekávání své cílové skupiny, a přiznejme si, že i vaše vlastní očekávání, použijte příklady vstupní stránky, které jsme považovali za nejlepší.

Všechno 9 příkladů, shromážděné z internetu, jsme si mysleli, že jsou cool. Jednoduchost, v souladu s principem vstupní stránky, pohodlnost a zohlednění základních požadavků obsažených ve vstupní stránce, jsou příklady prodeje vstupních stránek s vysokou konverzí.

Příklad prodejního místa č. 1

První přistání, které zvážíme, má neuvěřitelně atraktivní a stylový design, ale špatně promyšlenou marketingovou složku a copywriting. Na první obrazovce vidíme jasný banner bez jedinečné prodejní nabídky, důraz je kladen na jasnou fotografii. Při návštěvě jednostránkového webu není zpočátku jasné, zda je věnován jednomu unikátnímu produktu nebo celé sérii, což klienta v počáteční fázi mate.

Každý člověk má konkrétní cíl, proč potřebuje produkt nebo službu. V tomto bloku budeme dodržovat kritéria suchého výběru, nikoli však konečnou potřebu. Zároveň ukazatele „od a do“ mohou klienta zmást. V tomto případě je lepší zaměřit se na maximální vlastnosti. Popis produktu ve stylu „stručnost je sestra talentu“ vyvolává jistou otázku ohledně kompetence.

Podstatou bloku by mělo být získání rady od profesionála, který o produktu ví vše a je připraven o produktu náležitě poradit v závislosti na provozních podmínkách klienta.

Je těžké si představit, jak může být nejjednodušší přistávací blok tak složitý a nepochopitelný. Texty navíc musí být psány stylem oslovování klienta. Ne „zanechat žádost“, ale „zanechat žádost“.

Příklad vstupní stránky č. 2

Díky skvělé struktuře vstupní stránky, firemnímu designu a úžasné práci obchodníka se tato vstupní stránka stala naší oblíbenou. Je vidět, že klient se k výběru videí a fotek pro vývojářské studio postavil zodpovědně. Na první obrazovce vidíme unikátní prodejní nabídku, bylo splněno několik potřeb a kritérií. Nejvýkonnějším a nejkrásnějším prvkem je místo toho video Pozadí, která odhaluje podstatu tréninku a vybavení posilovny.

Zájem podnítí kritéria.

Profesionální a jasné fotografie a video materiály dále podněcují zájem o službu.

Na návštěvníka „tlačíme“ řadou výhod a pokrýváme potřeby, vzbuzujeme „touhu“.

Logickou závěrečnou částí struktury AIDA je blok „akční“.

Příklad vstupní stránky č. 3

Jedinečný obrázek, stylová vložka s USP, navigační menu, světlý design prvního bloku a nadpis ve stylu odvolání v celkové kombinaci vás nutí přihlásit se na zkušební trénink. Přispívá k tomu i tlačítko s výzvou k akci. Chybí navigační šipka, která by měla ukázat, že je zde také a nová informace. Dalším blokem jsou výhody v podobě kritérií. Vyrobeno ve formě ikon se stručným popisem.

Výborným řešením bylo umístění bloku s výzvou k akci se slevovou nabídkou a časovým limitem. Fotografie vzbuzují v návštěvníkovi důvěru, motivují a jsou také nevšedním a stylovým doplňkem designu.

Výborný blok s motivací na první lekci. Velkým mínusem je postava jiné národnosti.

Příklad vstupní stránky demonstruje styl a výstižnost designu, ale zároveň motivuje čtenáře k hlavní akci kvůli absenci rušivých detailů a minimu barev.

Příklad vstupní stránky č. 4

Dobrá landing page vyvinutá naším web studiem, která se může stát vzorem a inspirací pro ostatní vývojáře a klienty. Jednostránkový web odhalí problém cílového publika (v našem případě žen s velkým poprsím) a rovnou ho řeší kvalitní nabídkou.

Každý blok je přesným zásahem do bolesti cílového spotřebitele. Bezprostředně za tím je správné a kompetentní řešení prožitků klientů na základě jejich nepohodlí.

Bonusem pro návštěvníka i landing page z hlediska generování leadů je blok benefitů a výhod doplněný reálnými fotografiemi jasně demonstrujícími výsledek.

Skvělý způsob komunikace přináší výhody nejen verbálně, ale i vizuálně. Všechny informace jsou tak vnímány lépe.

Sociální důkaz využívá dva silné marketingové prvky. Video, které opět tlačí na problém a mluví o výhodách správně vybraného spodního prádla.

A fotku ředitele společnosti s adresou na klienta.

Velké množství negativního bílého prostoru, díky kterému se pozornost soustředí na obsah, stejně jako poměrně jednoduchý design obsahu, vytvářejí dojem stylového a moderního designu. Vstupní stránka zaujme svým konceptem a díky kompetentnímu marketingu mění návštěvníky na klienty.

Příklad vstupní stránky č. 5

Stylový příklad vstupní stránky zaměřené na prodej služby - návrh a výstavba luxusních soukromých domů a chat. Vstupní stránka byla vyvinuta podle marketingové strategie AIDA – klasika, která neúnavně demonstruje svou efektivitu.

Každý blok demonstruje integrovaný přístup obchodníka, copywritera a designéra. Silné a motivující výzvy k akci, originální a stylové grafické obrázky a prodejní text nenechává návštěvníkovi jedinou šanci kromě toho, že ho přiměje k akci, která se od něj očekává.

Hlavním cílem jednostránkového webu je vytvořit pozitivní dojem o společnosti a její pověsti, která se stává hlavním motivátorem pro cílovou skupinu, kterou jsou bohatí spotřebitelé. Tato skupina cílového publika se méně zajímá o otázku ceny, více se zajímá o image a schopnosti výkonné společnosti. Cílová stránka si proto klade za cíl zvýraznit výhody stavební firmy.

Celkově je spotřebiteli pomocí tohoto prodejního jednostránkového webu poskytnuto řešení jeho problému při hledání spolehlivého a profesionálního dodavatele. Vstupní stránka plně odhalí vše silné stránky společnosti, které se stávají motivací ke spolupráci.

Příklad úspěšné cílové stránky č. 6

Zde je vynikající příklad krásné a funkční vstupní stránky. Moderní design s tematickými obrázky, vyvinutý v kombinaci tmavých a světlých tónů s jasnými akcentovými vložkami, vytváří příjemný dojem noblesy.

Tato vstupní stránka má charakteristický rys, kterou jiní vývojáři používají jen zřídka. Co nejvíce odhaluje otázku ceny a zve uživatele, aby si nezávisle zvolil cenové rozpětí a zvážil možnosti, které si může dovolit.

Jedná se o velmi pohodlnou a praktickou funkci, která uživateli online vizuálně ukazuje všechny nabídky, které jsou za danou cenu vhodné. Další výhodou jednostránkového webu je jeho zaměření na všechny požadavky cílového kupujícího. Pomocí této vstupní stránky může návštěvník získat radu, zadat objednávku, získat představu o ceně kuchyňské soupravy a také získat odhad své objednávky. Každá příležitost přichází s výzvou k akci.

Celkově projekt vzbuzuje důvěru ve společnost. A to je to hlavní, co by měl jednostránkový web nabízející služby pro potenciálního kupce tvořit. Vždyť právě na důvěře v interpreta se klient proměňuje z potenciálního na skutečného.

Příklad vstupní stránky č. 7

Tento příklad vstupní stránky jsme vybrali, protože se zásadně liší od běžných tradičních jednostránkových stránek.

Stránka je věnována službě rozvozu mléka. Je ale natočený v komiksové podobě a cílí jen na malou skupinu cílového publika.

Po přečtení vyprávění, kterým začíná jednostránková stránka, je jasné, že je zaměřeno na mladé lidi, kteří se zajímají o slang.

Chybí zde prodejní struktura nebo rozpracování problémů, jak je vidět na předchozích krásných ukázkách vstupních stránek. Poselství webu je však jasné a zajímavé, takže místo má i samotná vstupní stránka.

Velké množství informačního obsahu, který je prezentován „pro zábavu“, abyste se usmívali, doplňuje funkce přehrávání zvuku, která navíc dodává stránce humor. Když se však posuneme o něco níže, uvidíme blok s výzvou k akci, typický pro „klasické“ prodejní vstupní stránky.

Neexistuje žádný sociální důkaz, žádný blok důvěry, žádné bloky výhod a výhod. Ale recept na řízky existuje :-)

Je těžké říci o účinnosti této vstupní stránky. Je zřejmé, že stránka je zajímavá, s výborným designem a „školním“ humorem. A přestože jsou takové projekty v oblasti internetového marketingu ojedinělé, stojí za to existovat, protože si své publikum rozhodně najdou.

Příklad vstupní stránky prodejního webu č. 8

Ukázka další naší práce, která si zaslouží pozornost. Vstupní stránka prodává službu prodeje nebo pronájmu mobilních stojanů/fotozón. Pomocí této jednostránkové stránky najde potenciální klient všechny odpovědi na své otázky.

Vynikající řešení pro ty, kteří chtějí službě porozumět do detailu. Pro každou kategorii služeb existují jedinečné fotografie, cena každé s možností okamžitého výběru té, o kterou máte zájem. Pro ty, kteří si nemohli vybrat, nabízí vstupní stránka službu individuální objednávky s uvedením osobních požadavků ve formátu výzvy k akci.

Blok výhod se zaměřuje na pohodlí spolupráce.

Blok benefitů je doplněn blokem firemních výhod, které společně vytvářejí silnou motivaci klienta k jednání.

Zajímavé designové řešení, které kombinuje bílou a tmavě šedou s červenými prvky pro vytvoření stylového dochucení při prohlížení vstupní stránky. Na rozdíl od jiných vstupních stránek, které řeší problémy cílového publika a nabízejí jejich řešení, tento projekt odhaluje všechny výhody služeb společnosti a také pomáhá klientovi najít odpovědi na všechny jeho otázky.

Příklad vstupní stránky č. 9

Tato vstupní stránka, kterou vyvinulo naše webové studio, upoutá pozornost návštěvníka od prvního otočení obrazovky a motivuje ho k akci. Vstupní stránka věnovaná prodeji návrhových a stavebních služeb otevírá klientovi spoustu příležitostí. Potvrzuje to formulář zpětná vazba, což vám umožní okamžitě si objednat individuální projekt nebo si zdarma stáhnout příklad projektu.

Při výběru dodavatele potřebuje potenciální klient pověst a zkušenosti společnosti. Právě na těchto informacích si spotřebitel vytváří výhody pro sebe.

Speciálním bonusem pro návštěvníka jsou reálné fotografie projektů vytvořených společností. Jasné, krásné a atraktivní fotografie se stávají plusem pro důvěru návštěvníků.

Následuje blok „dobrot“. Bonusem, který konkurence nabízí jen zřídka, je možnost klienta podívat se na domy postavené firmou na vlastní oči. Tato služba nezavazuje návštěvníka k objednání služby. Ale pomocí formuláře pro zpětnou vazbu se již návštěvník stává leadem.


Výsledkem je, že klientovi jsou prezentovány webové stránky s originálním designem, promyšlenou strukturou a koncepcí a kompetentním obsahem, který komplexně působí na konverzi stránek a vede k vysoké efektivitě.

Slova na rozloučenou

Moderní uživatel, propracovaný s nesčetným množstvím prodejních stránek, které ho zaujmou, je již unavený stejným typem. Dnes přichází do módy jedinečnost, čím zajímavější a neobvyklejší je vstupní stránka, tím vyšší je pravděpodobnost, že upoutá pozornost uživatele. Navíc dobrý a exkluzivní design je vždy plusem: jak překvapit návštěvu, tak potěšit sebe. A příjemně překvapený návštěvník je minimálně +10 % ke konverzi. Přejeme vám originální a chutné nápady! A pokud s tím budete mít nějaké potíže, vždy si můžete objednat vstupní stránku z našeho webového studia.

Přihlaste se k odběru blogu a sledujte naše aktualizace.

Viktorie Kuchinová

Hlavním problémem většiny moderních vstupních stránek je to, že se všechny zdají být kopiemi. Kde je kreativita, oheň, kde jsou designérské šílenosti?

V této kolekci jsem shromáždil zajímavé funkce a neobvyklé efekty. Některé z nich vytvořili vývojáři a webdesignéři Texterra, některé byly nalezeny na internetu. Nechybí ani ukázky ohavného designu a vyloženě hlouposti – na konci článku se seznámíte s křečkem zabijákem a Sněhurkou s kýblem.

Sledujte, inspirujte se, uvádějte nápady, které se vám líbí, do praxe, kombinujte je s vlastními a nezapomeňte provádět A/B testování – to je jediný správný recept na vytváření zabijáckých vstupních stránek.

A co je nejdůležitější, nezapomeňte, že přistání není soběstačný nástroj. Konverze, potenciální zákazníci a prodeje vyžadují kvalitní provoz. A je těžké ho získat bez komplexní propagace.

Rozšířená forma

Jednostránkové webové stránky obvykle používají standardní formulář žádosti s několika poli. Nejčastěji klient potřebuje uvést kontaktní údaje – jméno a příjmení, email nebo telefon. Ale v některých složitých oblastech je lepší téma rozvést podrobněji. Zde je návod, jak to udělali v Texterra: ve formě vstupní stránky dellservers.ru si klient může vybrat modul, parametry a úlohy serveru. Může resetovat hodnoty, pokud se něco pokazí.

K čemu to je? Vlastník vstupní stránky obdrží své potenciální zákazníky v každém případě – i když jsou ve formuláři pouze dvě nebo tři pole. Klient ale bude mít zájem kopat hlouběji. Nejen objednávat, ale vybrat si vlastní variantu.


Dvě tlačítka CTA

Na vstupní stránce plánovače úloh wunderlist.com/ru jsou dvě výzvy k akci, které se vzájemně posilují: „Vytvořit zdarma účet“ a „Stáhnout Wunderlist.“ Uživatelé kliknou na oba odkazy, zvýší se konverze a cílová stránka odvede svou práci na výbornou.


Konkrétní čísla (výsledky)

Toto není nová funkce, ale stále funguje. Ukažte klientům, čeho jste dosáhli v číslech: to je jasnější než abstraktní fráze „jsme nejlepší“, „máme stovky dokončených projektů“ a tak dále. Podívejte se na úvodní stránku smartprogress.do: okamžitě vidíte, kolik lidí se již do projektu zapojilo, kolik cílů si stanovili, kolik úspěchů dosáhli.


Personalizace

Vstupní stránky šablon bez tváře - brrr, co může být nudnějšího! Oživte svůj jednostránkový web, přidejte oheň a zaujměte svého potenciálního klienta. Například na stránce služeb tvorby webových stránek Texterra jsou fotografie zaměstnanců, kteří se na tom přímo podílejí. Přijde návštěvník a vidí: ano, můj zdroj nevyvinou abstraktní vývojáři, ale zcela žijící Svyatoslav, Polina, Artem a další.


Pohodlný formulář odpovědi

Na mnoha vstupních stránkách a webech můžete položit otázku pouze prostřednictvím formuláře. To znamená, že musíte uvést své jméno a příjmení, zanechat své telefonní číslo a e-mailem. Někdy dokonce musíte zadat captchas a kódy - hrůza! Je jasné, že se to dělá za účelem získání potenciálních zákazníků. Ale je tu ještě jedna možnost – jako na vstupní stránce Cerebro Target. Pokud jste registrováni na VKontakte, nemusíte nic vyplňovat - stačí napsat. Je to výhodné pro klienta i pro majitele – kontakt zůstal a můžete pokračovat v práci.


Hodnocení zákazníků

Můžete požádat klienty, aby řekli o svých dojmech a publikovali přijaté texty na vstupní stránce. Háček je ale v tom, že návštěvník si nijak neověří, zda jsou recenze pravé nebo falešné. Je lepší jít dál a přesvědčit o tom návštěvníky. Vstupní stránka huskypark.info, kterou vyvinula společnost Texterra, obsahuje slova od klientů z Instagramu s odkazy na jejich účty. Všechno je fér - přijďte a přesvědčte se sami.


Demonstrace výsledků



3D grafika a rozšířená realita

Vstupní stránka byla vytvořena pro aplikaci Qubi. Toto je hra pro děti od 3 let a dospělé. Podstata hry je jednoduchá. V prvním kroku uživatel slepí dohromady skutečnou papírovou, kartonovou nebo dřevěnou kostku podle navrženého schématu.


Poté si nainstaluje aplikaci, otevře ji na svém smartphonu a „podívá se“ na kostku přes kameru zařízení.


Kostka ožije na obrazovce chytrého telefonu nebo tabletu. Uživatel hraje trojrozměrnou verzi „Snake“, „2048“, „Labyrint“. V tomto případě musíte hru ovládat pomocí skutečné kostky. Pro ovládání kostky oběma rukama je potřeba použít speciální stojánek na smartphone, který si sami sestavíte.


Na obrázku (gif) je vidět trojrozměrný model krychle.


Co klient chtěl

Klient požádal o vytvoření vstupní stránky, která zdůrazňuje rys hry: použití 3D rozšířené reality. Zejména chtěl vidět efekt pohybujících se ploch trojrozměrné krychle, jejíž aktivní plocha je vepsána na obrazovku zařízení návštěvníka.

Co jsme udělali

Implementovali jsme trojrozměrnost pomocí 3D transformací CSS3. Přechody mezi plochami krychle se provádějí pomocí čistého JavaScriptu se sledováním událostí přetažením a dotykem. Díky neobvyklým přechodům mezi obrazovkami získá uživatel pocit hlasitosti obrazovky. To je zvláště výrazné na pracovní verze vstupní stránka.


Pro konečnou verzi vstupní stránky jsme vytvořili realističtější verzi krychle. Na rozdíl od pracovní verze se ve finální verzi krychle otáčí zvenčí, nikoli zevnitř. 3D pocit umocňují animace titulků.


Vstupní stránka je plně responzivní.

Interaktivní výběr barev interiéru a nábytku

Jedinečnost vstupní stránky DSK.Color je schopnost nezávisle si vybrat barvu nábytku a interiérových předmětů pomocí interaktivní palety.

Společnost DSK.Color natírá jakýkoli povrch v různých barvách. Můžete si objednat lakování nábytku, domácích spotřebičů, jízdních kol, hudebních nástrojů a dalších předmětů. Klient si může vybrat libovolnou barvu.

Nejoblíbenější službou je malování nábytku a interiérových předmětů. Tvoří asi 80 % práce klienta.

Co klient chtěl

Klient požádal, aby vytvořil jasnou a zapamatovatelnou vstupní stránku „s výzvou k vybarvení všeho kolem“. Měl nápady na 3D ztvárnění nábytku, aby se návštěvník „mohl otočit a podívat se na malovaný kus z různých úhlů“.

Co jsme udělali

Navrhli jsme klientovi nápad: dát návštěvníkovi možnost samostatně si vybrat barvu nábytku a interiérových předmětů.

K tomu nabízela vstupní stránka obrázek místnosti, ve které si návštěvník mohl namalovat hlavní objekty pomocí palety, která se otevřela kliknutím. Na základě vybraných barev a položek si uživatel může spočítat cenu služeb. První prototyp vypadal takto.


Klientovi se nápad velmi líbil, a tak jsme vytvořili funkční prototyp vstupní stránky. Na něm už hlavní část vypadala takto.


S klientem jsme se dohodli na ponechání možnosti lakování stolu, židlí, dveří a kuchyňské linky. To jsou hlavní předměty, které firma maluje.

Po odsouhlasení prototypu se do práce zapojil designér a designér layoutu. První nakreslil všechny objekty v svg (toto je grafický formát). Druhý rozložil a přidal barevnou paletu do oblastí svg. Poté jsme implementovali modální okno. S jeho pomocí může uživatel znovu zkontrolovat barvy a položky a odeslat požadavek na službu.


Neobvyklé a obyčejné preloadery

Pomocí preloaderu nebo spinneru můžete libovolnou vstupní stránku učinit pohodlnější a vizuálně atraktivnější. V této části budeme hovořit o preloaderech a podíváme se na příklady těchto prvků vytvořených specialisty Texterra.

Co je to preloader a jaké problémy řeší?

Preloader nebo spinner je znak, který se objeví na obrazovce před načtením stránky. Tyto prvky vidíte každý den, když používáte internet. Níže je uveden příklad preloaderu.


Preloader řeší praktický problém: informuje uživatele, že se stránka načítá, a zároveň nahrazuje vizuálně neatraktivní obrázek načítání. To je potřeba vysvětlit.

Vzhledem k technickým vlastnostem prohlížečů se webové stránky načítají nerovnoměrně. Při načítání může rozložení „plavat“. Pokud se stránka načte během několika sekund, nikoli během zlomku sekundy, uživatel bude na nějakou dobu působit neatraktivním dojmem.


Preloadery jsou implementovány pomocí standardních front-end vývojových nástrojů: HTML, CSS, JavaScript a dalších knihoven a frameworků, například jQuery, React.

Jak vylepšujeme vstupní stránky pomocí preloaderů

Vytváříme unikátní preloadery, včetně animovaných. Zde jsou některá z našich prací.

  • Qubi

Pro vstupní stránku Qubi jsme vytvořili preloader, který replikuje navigační nabídku. To umožňuje uživateli porozumět tomu, jak je se stránkou manipulováno, než se načte.


  • Levellen

Na webu Levellen Interiors jsme použili preloader v podobě firemního loga. Toto je další prvek značky webu.

Vstupní stránka poskytuje informace o pronájmu prostor v obchodním centru. Hlavní tajemství vstupní stránky je v sekci „Kanceláře“. Zde si uživatel může zobrazit dostupnost volných kanceláří v jednotlivých podlažích budovy.


Když umístíte kurzor na volnou kancelář, zobrazí se tlačítko „Další podrobnosti“.


Kliknutím na tlačítko se uživatel dostane na stránku s informacemi o kanceláři a jejími fotografiemi. Z této stránky můžete odeslat žádost o pronájem pokoje.


Funkce implementace

Náš designér nakreslil tvary kancelářských prostor, výkresy vznikly v formátu svg. Tyto výkresy jsou překryty na půdorysech. Když správce webu na ovládacím panelu zaznamená, že kancelář je volná, skript obsahuje zobrazení obrázku na plánu a možnost přejít na stránku s informacemi a objednávkovým formulářem. Když administrátor zaznamená, že kancelář je zaneprázdněná, skript vypne obrázek výkresu na plánu.

Vlastně design

V tomto příkladu se nejedná o žádné složité technické triky nebo designové efekty – celou vstupní stránku zabírá nádherný obrázek: pozadí, barvy, lákavé fotografie astrachaňského kaviáru. Jednostránkový astrahancaviar.ru– dobrý příklad toho, jak si díky designérovi chcete produkt koupit. A hned to sněz!


Na závěr o bolavém místě – pár příkladů příšerných vstupních stránek. Pro kontrast, facepalm, bezmocná agónie a tak dále. Nebudu popisovat, co je s nimi špatně - navrhuji, abyste tyto problémy vyřešili sami. To-jak...