Przykład strony docelowej salonu piękności. Strona docelowa dla salonu kosmetycznego

Jeśli promujesz swoją firmę w Internecie, to zapewne znasz to pojęcie. Strona docelowa, zwana także „stroną docelową” lub „stroną przechwytywania leadów”, to jednostronicowa witryna, która idealnie nadaje się do przekazywania odbiorcom dobrze zdefiniowanego komunikatu. W przeciwieństwie do pełnoprawnej witryny, w której znajduje się wiele innych sekcji (o firmie, stronach produktów, kontaktach, koszyku itp.), landing page skupia uwagę odwiedzających wyłącznie na jednym komunikacie i powinien skłonić ich do wykonania pewne ukierunkowane działanie. To, jakie działanie należy podjąć, zależy od Twoich zadań. Z reguły landing page służy do zbierania danych kontaktowych potencjalnych klientów (nazywanych też „leadami”), rejestracji, przejścia na stronę produktową lub stronę główną.

Ogranicz się do jednej strony

Landing page to jedna strona w pełnym tego słowa znaczeniu. Nie myl go z małą witryną, która ma dodatkowe sekcje, w przeciwnym razie wynik będzie trudny do odczytania, zrazi odwiedzających i nie doprowadzi do wyższych konwersji.

Pisz jasne wezwania do działania

Aby skłonić użytkownika do skorzystania z linków, trzeba wziąć pod uwagę kilka czynników (podpowiemy jakie), ale decydującą rolę odgrywa wezwanie do działania. Upewnij się, że jest zwięzły, jasny i wciągający. Zwięzłość jest siostrą nie tylko talentu, ale i nawrócenia.

Spraw, aby przycisk był widoczny

Efekt wezwania do działania można wzmocnić przyciskiem. Tak, tak, używaj przycisków, w które chcesz kliknąć. Użytkownik powinien od razu zrozumieć, że jest to przycisk, że można w niego kliknąć i że w końcu gdzieś trafi. Przy okazji, upewnij się, że trafia we właściwe miejsce. W edytorze Wix możesz zmienić zwykły przycisk w dynamiczny i ekscytujący w pięć minut za pomocą edytora Wix.

Pilnować porządku

Pisaliśmy już o tym nie raz, ale na wszelki wypadek powtórzymy: porządek, zwłaszcza na landing page, jest bardzo ważny. Strona nie powinna zawierać zbyt wielu obrazów, tekstu, ikon i filmów. Korzystaj i postaw na minimalizm i przestrzegaj zasad wizualnej hierarchii.

Nie daj się ponieść czcionkom

Złota zasada projektowania to dwie, maksymalnie trzy czcionki. Rozumiemy, że w edytorze Wix jest ich więcej i chcesz wypróbować je wszystkie, ale nie rób tego. Wybierz dobrze dopasowane czcionki, które najlepiej pasują do stylu Twojej witryny.

Sprawdź, czy tekst dobrze się czyta

Jeśli wydaje Ci się, że tekst landinga jest trudny do odczytania – zwiększ go, kontrastuj, zmień na koniec czcionkę, ale nie zmuszaj czytelnika do wytężania wzroku i wpatrywania się w litery. Radzimy dokładnie sprawdzić teksty pod kątem czytelności przed publikacją strony. Dobrym sposobem na uniknięcie niepowodzenia jest udostępnienie linku do strony docelowej znajomym i zapytanie, czy jest łatwy do odczytania (funkcja Uzyskaj opinię znacznie to ułatwia).

Używaj wyrazistych obrazów

Jeśli chcesz jak najdokładniej wyrazić swój pomysł, będziesz potrzebować nie tylko słów, ale także obrazów - z ich pomocą możesz opowiedzieć przynajmniej połowę historii. Nie tak dawno temu zaczęliśmy , aby użytkownicy Wix nie musieli już zastanawiać się, gdzie znaleźć interesujący i wysokiej jakości obraz.

Skonfiguruj kotwice

Strony z nadal są wściekłe i nadal są niewygodne do czytania bez linków kotwicznych. Zdezorientowany gość jest rozczarowany i wychodzi, a to w żaden sposób nie przyczynia się do nawrócenia. Aby uniknąć takich sytuacji, korzystaj z nich – w edytorze Wix możesz je stworzyć w zaledwie kilka minut. A Darmowa aplikacja pomoże w mgnieniu oka stworzyć przycisk „W górę”.

Przymiotnik „sprzedaż” jest obecnie używany we wszystkich narzędziach marketingowych.

A dziedzina tworzenia stron internetowych nie jest wyjątkiem, tam również stale widzimy chwytliwe frazy w stylu „sprzedaż witryny” lub „sprzedaż lądowania”.

Jeśli jednak trzeźwo ocenimy ideologię tworzenia wysokiej jakości landing page’a, to przekonamy się, że słowo „sprzedaż” to zbiór wiedzy marketingowej w jednym serwisie.

Które z nich są ważne, a które są kurzem w oczach, opowiem w tym materiale.

Zmęczony kłamstwem

Często moi koledzy po kolejnej rozmowie z klientem w serwisie mówią mi oburzoną frazę: „Nikita, jesteśmy zmęczeni kłótnią z nimi. Czy możemy robić to, czego chcą?”.

Rzecz w tym, że dla zwykłego laika dobre lądowanie = dużo żetonów. I jeśli oryginalne rozwiązania nie ma go na stronie, to automatycznie witryna jest zła i nie sprzedaje.

Wszystko! Gotowany. Postawmy kropki na wszystkich punktach (mówię rozmarzonym głosem). Raz na zawsze zdefiniujemy czym jest naprawdę sprzedający się one-page site, a jak wygląda ten nonsens, który od tego ma tylko nazwę.

Będzie ciekawie i nudno, ale na pewno pożytecznie. Zacznijmy od krótkiego opisu tego terminu.

Sprzedam Lądowisko to zaprojektowany wizualnie prototyp wykonany w oparciu o marketing, copywriting, sprzedaż i psychologię, z jednym i dla określonej grupy docelowej na ich poziomie świadomości.

Każde powyższe słowo zawiera ogromną ilość szczegółów i nie chodzi o żetony, o których lubisz mówić.

To głębokie idee, które zazwyczaj są pomijane podczas treningu ze względu na ich nudę i brak „efektu wow”.

Ale my, jak skrupulatni profesorowie, przeanalizujemy każdą część sprzedawcy osobno.

Część przygotowawcza

Chciałbym od razu napisać gotowe elementy i zasady lądowania sprzedażowego, ale wtedy artykuł nie byłby kompletny i rzetelny.

Wysokiej jakości landing page sprzedażowy to projekt, który nie tylko jest tworzony zgodnie ze wszystkimi zasadami, ale także do którego odpowiednio się przygotowujesz.

Wszystko jest jak przy wystrzeliwaniu rakiety: 50% sukcesu to prawidłowe określenie współrzędnych. Więc jaka powinna być witryna sprzedaży.

1. Jeden produkt (cel)

Pierwszą rzeczą, która definiuje sprzedażową stronę docelową, jest obecność jednego i jedynego celu. Dlaczego nie dwa, trzy lub więcej?! Wszystko jest dość proste.

To samo, jeśli przyjdziesz kupić samochód w salonie, a oprócz tego sprzedam ci dom na Rublowce.

A także abonament do klubu fitness i konto premium na portalu randkowym (choć przy nowym samochodzie, drogim domu i odpicowanej karoserii to drugie może ci się nie przydać).

Możesz teraz sprzeciwić się temu, że przesadzam i nikt nigdy nie sprzedaje wszystkiego z rzędu na jednej stronie.

Po części masz rację, tylko widzisz wszystko niewyraźnie. Dla ciebie wszystkie twoje usługi lub towary są domyślnie potrzebne twojemu klientowi, ale tak naprawdę w 9 na 10 przypadków (są wyjątki) osoba przychodzi po jedną rzecz.

Opowiem ci nasze smutne doświadczenie i natychmiast zrozumiesz wszystko bez dwuznacznych przykładów. Gdy dopiero zaczynaliśmy karierę, zrobiliśmy sobie landing page do pracy w naszym mieście.

Nie posiadała dodatkowych stron, a wszystkie serwisy zostały umieszczone na stronie głównej (screen poniżej).

Kierowaliśmy się ideą, że jeśli ktoś tego potrzebuje, to on sam wybierze to, co mu odpowiada. I to był nasz największy błąd.

Faktem jest, że osoba, widząc te wszystkie usługi, może je u nas zamówić tylko wtedy, gdy została nam polecona lub jest kompletnym „głupcem”.

Bo to jak kupowanie kota w worku. NIE Dodatkowe informacje, korzyści i odpowiedzi na pytania.

A wyskakujące okienko nie jest tu rozwiązaniem, to za mało, by skutecznie przekazać informację i zamknąć wszelkie obiekcje.

Od dłuższego czasu dla każdej usługi mamy osobny landing page, na który dana osoba trafia ze strony trasy.

Dlatego robiąc stronę internetową, jasno określ dla jakiego produktu to robisz. A także okresowo zmieniaj słowo „Produkt” na „Cel”.

W końcu jedną rzeczą jest natychmiastowe sprzedawanie na czole, a drugą jest zamknięcie na pierwszym miejscu (na przykład obliczenie kosztu), a dopiero potem sprzedaż. Mieszanie celów również często nie jest tego warte.

2. Grupa docelowa

Według moich wewnętrznych obliczeń jest to 200 wzmianek na naszym blogu o grupie docelowej.

Ale na razie omówimy to na przykładzie i zaczniemy od tego, co musisz wiedzieć o swoich klientach.

Co więcej, istnieje bardzo duża różnica między tym, kto kupuje od Ciebie teraz, a kim chcesz widzieć swoich klientów.

Mając w głowie listę potencjalnych klientów (najlepiej na papierze), musisz zdecydować, dla kogo dokładnie wykonasz swoją stronę.

Całkiem możliwe jest połączenie kilku odbiorców w jedną. Aby jednak na pewno zrozumieć, czy jest to możliwe, czy nie, należy określić ich kryteria wyboru, potrzeby i obawy. Schemat będzie wyglądał mniej więcej tak.

Ponieważ w tym artykule nie uczymy się, jak stworzyć sprzedający landing page, ale przede wszystkim rozumiemy, czym jest landing page, pokażę Ci na przykładzie kryteriów wyboru, że wszyscy ludzie są różni.

Aby to zrobić, wyobraź sobie, że sprzedajesz nanomaszynę do odchudzania. Od ręki, twoi potencjalni klienci to ludzie z nadwagą. Ale mam do ciebie pytanie - czy są podobne w kryteriach wyboru?

Mam nadzieję, że odpowiedziałeś nie. Wszyscy ludzie są różni, podobnie jak kryteria ich wyboru. Jest się gotowym zapłacić każde pieniądze, aby uzyskać gwarantowany wynik.

Inny kupi tylko to, co nie zajmuje dużo wolnego czasu. A trzeci widzi tylko niskie koszty. Ta lista jest długa.

I nawet w tak wąskich niszach, jak budowanie domów z drewna, każdy ma też inne kryteria (dla lepszej asymilacji obejrzyj poniższy film).

3. Poziom świadomości

Ten temat jest już trudniejszy do zauważenia, zwłaszcza ze słuchu. Dlatego masz szczęście, że czytasz, a nie słuchasz przez telefon, jak nasi menedżerowie rozmawiają o poziomach świadomości.

Chodzi o to, że każdy na swój sposób jest na innym poziomie postrzegania problemu i rozwiązania.

W marketingu to dziwne podejście nazywa się „”. Ale nie będę cię ładował sprytnymi terminami, ale po prostu pokażę ci, jak to działa na przykładzie.

I w tym celu porównaj trzy identyczne i jednocześnie różne zapytania w szukana fraza Yandex lub Google:

1. Z czego zbudować dom parterowy?
2. Dom murowany czy z bali w budowie domów?
3. Budowa niskich domów murowanych

Wszystkie te prośby dotyczą budownictwa niskiego iw teorii wszystkie są potencjalnymi klientami dla firm budowlanych.

Ale! Sęk w tym, że ten pierwszy kompletnie nie ma pojęcia z czego budowany jest dom, drugi ma pytanie jakie rozwiązanie wybrać, a trzeci już celowo szuka gdzie zamówić konkretny dom.

Dla Ciebie podczas opracowywania oznacza to, że we wszystkich przypadkach będą na nim różne teksty i obrazy.

Na przykład w przypadku drugiego rodzaju próśb najpierw pokazujesz, dlaczego budowa domu z cegły jest lepsza niż z bala (jeśli robisz to na bazie cegły), a dopiero potem go sprzedajesz.

W trzecim typie próśb, bez długich deklaracji miłości, od razu proponujesz swoje rozwiązanie iw dużej mierze koncentrujesz się na zaletach swojej firmy w porównaniu z konkurencją.

W codziennym użytkowaniu wielu określa poziomy świadomości jako temperaturę ruchu ulicznego. Dzieli się na ciepłą, ciepłą i zimną.

Ulubieńcami wszystkich są hot, czyli osoby, które chcą kupować tu i teraz.

Ale postaram się napisać krótkie podsumowanie. Strona sprzedająca, równolegle z analizą konkurencji, musi przejść przez proces briefingu klienta.

Na którym, za pomocą specjalnej serii pytań, wyciągane jest wszystko, co się nagromadziło i wszystko, co bezpośrednio wpływa na podejmowanie decyzji przez klienta. Następnie wszystkie te znaczenia są dystrybuowane i tworzą szkielet witryny.

Nie będę też tego ukrywał i powiem, że wszystkie agencje domyślnie przeprowadzają briefing dla klienta.

Ale, jak zwykle, zdradzę jeszcze jeden sekret, który sprawia, że ​​strona się sprzedaje. Odprawa jest ustna.

Kawałek papieru nie będzie w stanie ujawnić pełnej głębi, gdy osoba podczas komunikacji może zadawać pytania wyjaśniające i poprowadzić we właściwym kierunku.

Ta odprawa trwa 1-2 godziny. A ponieważ pokazuję wszystkie karty, to przygotuj się na to, że jeśli Twoja firma jest nowa lub nic w niej nie ma, to „znaczący pakowacz” po prostu nie będzie w stanie nic wziąć, a strona na pewno NIE będzie się sprzedawać.

Oczywiście na koniec obwiniasz witrynę lub wykonawcę za wszystko, ale w rzeczywistości cały sens będzie polegał na braku twoich zmian, korzyści i funkcji.

Ważny. Agencja marketingowa oferuje dodatkowe korzyści i rozwiązania, ale z reguły wszystkie nie zmieniają globalnie sytuacji.

Aby naprawdę opracować strategię i taktykę pakowania, musisz przeprowadzić dogłębną analizę konkurencji i pamiętać, że kosztuje to więcej pieniędzy i zajmuje inny czas.

Realizacja

Po wykonaniu prac przygotowawczych (główna jest napisana powyżej), wówczas automatycznie utworzy się właściwa struktura i możesz bezpiecznie przystąpić do rozciągania ramy.

Opiera się na marketingu, sprzedaży, projektowaniu i psychologii. Nie będę dzielić tych sfer w mądry sposób, pokażę główne punkty, aby nie komplikować materiału.

Życiowa porada. Jeśli zamierzasz samodzielnie lądować, to polecam – PlatformaLP , Tilda , Bloxy .

1. Oferta

Gdy tylko osoba wejdzie na stronę, pierwszą rzeczą, którą widzi, jest Twoja oferta. w prostym języku, to jest Twoja oferta z głównymi korzyściami.

Główna oferta może mieć 4 poziomy. Wyraźna różnica jest natychmiast widoczna w przykładach.

Pierwszy poziom polega na tym, że po prostu piszesz „Wynajem samochodu w Moskwie”.
Drugi poziom brzmi bardziej interesująco - „Wynajem samochodu w Moskwie. parking premium”.

Trzeci poziom jest dla wielu bardzo trudny i opiera się na wyniku - „Wypożyczalnia samochodów premium w Moskwie. Pojedyncze egzemplarze przyciągną tysiące oczu już od 5000 rubli dziennie”.

Czy można to nazwać idealną propozycją? Oczywiście nie. Wymyśliłem to w 2 minuty dla tego artykułu.

Ale zrozumiałeś sedno i zauważyłeś, jak inny może być tytuł na pierwszym ekranie. Dlatego standardowo staramy się dotrzeć do 3, a jeszcze lepiej 4 poziomów oferty.

Co prawda ku mojemu zaskoczeniu widziałem świetne wyniki na ofertach poziomów 1 i 2, ale to raczej wyjątki lub bardzo przemyślana strategia.

Aby stworzyć swoją ofertę, musisz bardzo dobrze zrozumieć swój biznes i zrozumieć swoich klientów.

Aby ułatwić Ci życie (po to tu jesteśmy), polecam przeczytanie naszego artykułu na ten temat.

Lepiej nie tylko czytać, ale od razu tworzyć i anulować subskrypcję wyników w komentarzach.

JEST NAS JUŻ PONAD 29 000 osób.
WŁĄCZYĆ COŚ

2.

Sprzedawalność landing page'a jest również tworzona przez mistrza tekstu (copywriter). Robi to na podstawie otrzymanego od marketera prototypu, który odzwierciedla wszystkie zidentyfikowane na etapie pakowania znaczenia.

Ten proces jest czasochłonny i jest o wiele ważniejszy niż projekt. Jestem pewien, że trochę cię zaskoczyłem.

Ale to jest cała prawda. Przerażająca strona z dobrym tekstem załatwi sprawę. A złe teksty na pięknym projekcie stracą klienta.

Dobry tekst jest niedoceniany i widać to we wszystkich działaniach klienta, który większą wagę przywiązuje do designu.

Ale jeśli chcesz uzyskać wysokiej jakości stronę docelową, musisz bardzo uważać na nagłówki i teksty.

Najprawdopodobniej zrobienie tego samemu nie zadziała, ponieważ jest to cała sztuka, której musisz się nauczyć, a następnie wypełnić rękę.

Oprócz wszystkiego podam podstawowe zasady copywritingu na stronach, abyś mógł przynajmniej w przybliżeniu określić, jak dobra jest praca przed tobą.

Nie są żelbetowe, od wszystkiego są wyjątki, ale jeśli kilka punktów zostanie naruszonych jednocześnie, powinieneś pomyśleć o jakości.

1. Nie banalny tytuł. Jeśli zobaczysz nagłówek „Dlaczego warto wybrać nas?”, „O nas” lub inny oklepany wariant, który jest używany w dziesiątkach innych witryn, biegnij tak szybko, jak to możliwe.

   Witryny z banalnymi kredkami do oczu mówią o swojej bezwarunkowej stracie na tle jakiejkolwiek innej witryny.

2. zbliżasz się Im więcej nagłówków i tekstów na stronie zaczynających się od słowa „MY”, tym gorsza strona.

   O wiele ważniejsze jest, aby klient rozmawiał o nim i dla niego, a dopiero potem czyta o Was kochani.

3. Prosty język. Jeśli konsument nic nie rozumie z tego, co jest napisane na landing page lub napotyka na nieznane mu słowa.

   W tym przypadku oznacza to, że strona również wymaga ulepszenia, ponieważ musisz mówić językiem przystępnym dla klienta, a nie dla siebie.

4. w interesach. Jedna strona nie powinna zawierać tekstu dla samego tekstu, nawet jeśli jest tworzona z myślą o SEO.

   Jeśli możesz usunąć ten tekst ze strony i nic się nie zmieni, to musisz go wyciąć i skrócić.

5. Specyfika. Również oklepane frazy z serii „Indywidualne podejście”, „Elastyczny system rabatów”, „ Wysoka jakość” są piętnem.

   Jedyną rzeczą jest to, że jest to dozwolone, gdy ujawniający tekst jest w 100% konkretny, a ta fraza jest tylko eyelinerem lub nagłówkiem.

Jako osobną pozycję chcę wprowadzić takie kryterium, jak „Opracowanie zastrzeżeń”. Jest realizowany w całej witrynie we wszystkich elementach tekstu.

Mianowicie wszystkie typowe obiekcje klienta na poziomie jego świadomości powinny być wypracowane podczas całego serwisu.

Sprawdzenie tego jest dość łatwe, zbierasz listę wszystkich zastrzeżeń od wybranej grupy docelowej, a następnie sprawdzasz wszystkie, czy są odpowiedzi.

Mądra myśl. Strona sprzedająca zamyka wszelkie obiekcje, budzi emocje i przekonuje, że trzeba u nas kupować.

3. Projektowanie

Piękna witryna nie zawsze oznacza witrynę sprzedającą. To trzeba zapamiętać na zawsze. W twoim materiale

Usługi kosmetyczne — fryzjerzy, spa, prywatne kosmetyczki — to niezwykle konkurencyjna nisza. Rozważmy kilka stron docelowych TOP wyszukiwarek, po których zaprezentujemy szablon strony internetowej salonu kosmetycznego z LPgenerator.

Lądowania Runeta

Jako pierwszy rozważymy przypadek prywatnego dermatologa-kosmetologa, gdzie całkiem dobre rozwiązanie projektowe: cały zasób obsługuje jedną miłą dla oka gamma, ikony są stylowe, intuicyjne.

Prosty formularz kontaktowy z czynnikiem pilności natychmiast zwraca uwagę (promocja rabatowa ograniczona czasowo). Warto wspomnieć o dobrym wezwaniu do działania. "Tak, chcę!" dużo bardziej typowe niż standardowe, nudne „Wyślij wniosek”.

Poniżej linii zagięcia znajduje się blok społecznego dowodu słuszności. Aż strach powiedzieć to na głos, ale wygląda na to, że oto odpowiedzi prawdziwych klientów :) Ponadto „pewni siebie” marketerzy podali nawet linki do swoich konta społecznościowe. Oprócz niezawodności pole nie może pochwalić się niczym szczególnym.

Cennik jest dość ciekawy. Wycena dostosowana jest do długości strzyżenia, a modelki jasno pokazują ile będzie kosztować upragniona fryzura. Stronę uzupełnia znany już formularz zbierania danych.

Kolejne lądowanie nie jest już tak stabilne jakościowo, ale wciąż jest o czym mówić. Pierwszy ekran nie jest banalny - widzisz faceta-klienta, a za nim fryzjera. A więc - to nie jest statyczny obraz, ale krótki film zrobiony jak ukryta kamera lub film z internetu.

Pierwsze kilka sekund sprawia wrażenie transmisji na żywo z wydarzeń na sali :) Oczywiście są wady - to wideo, którego nie można zatrzymać, lekko „spowalnia” działanie.

Salon kosmetyczny nie dodał nic specjalnego do swojej strony docelowej. Pole ze zdjęciami mistrzów jest dobrze podane – co znacząco podnosi UX. Ale nie można znaleźć nic wybitnego - tylko dobrze wykonaną robotę.

Ostatnim „bohaterem” Runetu jest zasób Natalii Dunaevy, mistrzyni przedłużania włosów. Sprawę można nazwać niezwykle niezwykłą.

Pierwszy ekran wygląda po prostu dobrze. Dwa wezwania do działania: „Umów się na konsultację”, „Poproś o oddzwonienie” – swoją drogą, które z nich jest ważniejsze dla biznesu? Najwyraźniej oba połączenia prowadzą do jednego.

Jednak niewystarczająco przejrzysta oferta będzie minusem. „Luksusowe włosy” mogą oznaczać przedłużanie, fryzjerstwo, robienie peruk – po prostu puść wodze fantazji.

Być może zauważyłeś, jak bardzo marketer ma zamiłowanie do dużych obrazów tła dziewczyn z luksusowymi włosami. Prawdopodobnie ten obszar jest optymalny do takiego odbioru. Następny ekran to często zadawane pytania.

Następny jest prawdopodobnie najbardziej malowniczy zrzut ekranu. W rzeczywistości jest to standardowy blok „Korzyści”, pięknie nazwany zasadami pracy. Ważne jest, aby pamiętać: cały zasób wyróżnia się wysokiej jakości obrazami tła, dobrym copywritingiem i naprawdę stylowym rozwiązaniem. Tu kończą się plusy - ale wystarczy już ten istniejący.

Tak emocjonująca podróż kończy się wiodącą formą nagrania. Możliwość natychmiastowego wybrania odpowiedniego terminu jest niezwykle wygodna.

Przeanalizowaliśmy najwięcej ciekawe przypadki kule. Teraz przeanalizujmy stronę z naszej platformy.

LP Store oferuje jedną opcję, która pasuje do dzisiejszego tematu. Przyjrzyjmy się bliżej.

Landing page wykonany jest z przewagą niebiesko-niebieskiej kolorystyki na białym tle. Na środku pierwszego okna możesz umieścić duży obraz, ofertę. Przycisk CTA w prawym górnym rogu.

Wiktoria Kuczinowa

Główny problem większości współczesnych strony docelowe- wszystkie wydają się być wykonane pod kopią. A gdzie kreatywność, ogień, gdzie szaleństwo projektowe?

W tej kolekcji zebrałem ciekawe chipsy i niezwykłe efekty. Niektóre z nich zostały stworzone przez programistów Texterra i projektantów stron internetowych, a niektóre zostały znalezione w Runecie. Nie bez przykładów obrzydliwego dizajnu i wręcz szizy – na końcu artykułu znajdziecie znajomego z chomikiem-zabójcą i Snow Maiden z wiadrem.

Oglądaj, inspiruj się, wcielaj w życie swoje ulubione pomysły, mieszaj je z własnymi i nie zapomnij przeprowadzić testy A/B to jedyna słuszna recepta na tworzenie zabójczych stron docelowych.

I co najważniejsze, pamiętaj, że landing page nie jest narzędziem samowystarczalnym. Do konwersji, potencjalnych klientów i sprzedaży potrzebny jest ruch wysokiej jakości. I trudno to dostać zintegrowana promocja.

Rozszerzona forma

Zwykle osoby korzystające z jednej strony używają standardowego formularza wniosku z kilkoma polami. Najczęściej klient musi podać dane kontaktowe - imię, nazwisko, adres e-mail lub numer telefonu. Ale w niektórych złożonych obszarach lepiej omówić temat bardziej szczegółowo. Oto jak zrobili to w Texterra: w postaci strony docelowej dellservers.ru klient może wybrać moduł, parametry i zadania serwera. Może zresetować wartości, jeśli coś poszło nie tak.

Po co to jest? W każdym przypadku właściciel landing page’a otrzyma swoje leady – nawet jeśli w formularzu są tylko dwa, trzy pola. Ale tutaj będzie interesujące dla klienta, aby kopać głębiej. Nie tylko na zamówienie, ale także na wybór własnej opcji.

Dwa przyciski STA

Na stronie docelowej narzędzia do planowania zadań pod adresem wunderlist.com/ru znajdują się jednocześnie dwa wezwania do działania, które wzajemnie się wzmacniają: „Utwórz bezpłatny konto' i 'Pobierz Wunderlist'. Użytkownicy klikają w oba linki, konwersja rośnie, a landing page doskonale spełnia swoje zadanie.

Konkretne liczby (wyniki)

Nie jest nowy, ale nadal działa. Pokaż klientom, co osiągnąłeś w liczbach: jest to jaśniejsze niż abstrakcyjne frazy „jesteśmy najlepsi”, „mamy setki zrealizowanych projektów” i tak dalej. Zajrzyj na stronę docelową smartprogress.do: od razu zobaczysz, ile osób już dołączyło do projektu, ile postawiono sobie celów, ile osiągnięto.

Personalizacja

Strony docelowe bez twarzy - br-r, co może być nudniejszego! Ożyw swój onepager, dodaj ognia, zainteresuj potencjalnego klienta. Na przykład na stronie Usługi tworzenia stron internetowych Texterra opublikował zdjęcia pracowników, którzy są bezpośrednio w to zaangażowani. Gość wchodzi i widzi: tak, nie abstrakcyjni programiści, ale całkiem żyjący Svyatoslav, Polina, Artem i inni zajmą się moimi zasobami.

Wygodny formularz odpowiedzi

Na wielu landing page’ach i stronach internetowych możesz zadać pytanie tylko poprzez formularz. A to oznacza, że ​​​​musisz podać imię i nazwisko, zostawić numer telefonu i e-mail. Czasem trzeba nawet wpisywać captcha i kody – zgroza! Oczywiste jest, że robi się to w celu zdobycia leadów. Ale jest jeszcze jedna opcja - jak na stronie docelowej Cerebro Target. Jeśli jesteś zarejestrowany na VKontakte, nie musisz niczego wypełniać - weź to i napisz. Zarówno klientka czuje się komfortowo jak i właścicielka ma się dobrze - kontakt zostaje, można dalej pracować.

Opinie klientów

Możesz poprosić klientów o opowiedzenie o swoich doświadczeniach i opublikować otrzymane teksty na landing page. Ale haczyk polega na tym, że odwiedzający w żaden sposób nie sprawdzi, czy są to prawdziwe recenzje, czy fałszywe. Lepiej iść dalej i przekonać o tym odwiedzających. Landing page huskypark.info, który został opracowany przez Texterra, cytuje słowa klientów z Instagrama wraz z linkami do ich kont. Wszystko jest sprawiedliwe - przyjdź i zobacz.

Demonstracja wyników

Grafika 3D i rozszerzona rzeczywistość

Landing page został stworzony dla aplikacji Qubi. Jest to gra dla dzieci w wieku 3+ lat i dorosłych. Istota gry jest prosta. W pierwszym kroku użytkownik, zgodnie z zaproponowanym schematem, przykleja prawdziwą kostkę z papieru, tektury lub drewna.

Następnie instaluje aplikację, otwiera ją na smartfonie i „patrzy” na kostkę przez kamerę urządzenia.

Na ekranie smartfona lub tabletu kostka ożywa. Użytkownik gra w trójwymiarową wersję „Węża”, „2048”, „Labiryntu”. W takim przypadku musisz sterować grą za pomocą prawdziwej kostki. Aby sterować kostką dwiema rękami, potrzebujesz specjalnego stojaka na smartfona, który możesz samodzielnie złożyć.

Trójwymiarowy model sześcianu można zobaczyć na ilustracji (gif).

Czego chciał klient

Klient poprosił o wykonanie landing page'a podkreślającego cechę gry: wykorzystanie rozszerzonej rzeczywistości 3D. W szczególności chciał zobaczyć efekt poruszania się ścian trójwymiarowego sześcianu, którego aktywna ściana jest wpisana na ekran urządzenia odwiedzającego.

Co my zrobiliśmy

Zaimplementowaliśmy 3D za pomocą transformacji 3D CSS3. Przejścia między ścianami sześcianu są wykonywane przy użyciu czystego JavaScript ze śledzeniem zdarzeń przeciągania i dotykania. Dzięki nietypowym przejściom między ekranami, użytkownik stwarza wrażenie trójwymiarowości ekranu. Jest to szczególnie widoczne w wersji roboczej wstęp.

Na potrzeby ostatecznej wersji landing page’a wykonaliśmy bardziej realistyczną wersję kostki. W przeciwieństwie do wersji roboczej, w ostatecznej wersji sześcian obraca się od zewnątrz, a nie od wewnątrz. Wrażenie trójwymiarowości potęgują animacje tytułu.

Strona docelowa jest w pełni responsywna.

Interaktywny dobór kolorów wnętrz i mebli

Osobliwością strony docelowej DSK.Color jest możliwość samodzielnego wyboru koloru mebli i elementów wyposażenia wnętrz za pomocą interaktywnej palety.

Firma DSK.Color maluje dowolne powierzchnie na różne kolory. Istnieje możliwość zamówienia kolorystyki mebli, sprzęt AGD, rowery, instrumenty muzyczne i inne przedmioty. Klient może wybrać dowolny kolor.

Najczęściej zamawianą usługą jest malowanie mebli i elementów wyposażenia wnętrz. Stanowi około 80% pracy klienta.

Czego chciał klient

Klient poprosił o wykonanie jasnego i niezapomnianego lądowania „z wezwaniem do pokolorowania wszystkiego wokół”. Miał pomysły na wykonanie trójwymiarowych reprezentacji mebli, aby odwiedzający „mógł obrócić i obejrzeć malowany przedmiot pod różnymi kątami”.

Co my zrobiliśmy

Zaproponowaliśmy klientowi pomysł: dać odwiedzającemu możliwość samodzielnego wyboru koloru mebli i elementów wyposażenia wnętrz.

W tym celu strona docelowa oferowała obraz pokoju, w którym odwiedzający może malować główne obiekty za pomocą palety otwieranej po kliknięciu. Na podstawie wybranych kolorów i pozycji użytkownik może obliczyć koszt usługi. Tak wyglądał pierwszy prototyp.

Klientowi bardzo spodobał się ten pomysł, więc wykonaliśmy działający prototyp strony docelowej. Na nim główna część wyglądała już tak.

Umówiliśmy się z klientem na pozostawienie możliwości pomalowania stołu, krzeseł, drzwi i szafki kuchennej. Są to główne elementy, które firma maluje.

Po zatwierdzeniu prototypu do prac przystąpił projektant i projektant layoutu. Pierwszy narysował wszystkie elementy w svg (jest to format graficzny). Drugi uzupełnił i dodał paletę kolorów do obszarów svg. Następnie zaimplementowano okno modalne. Dzięki niemu użytkownik może dwukrotnie sprawdzić kolory i elementy oraz złożyć wniosek o usługę.

Niezwykłe i zwykłe preloadery

Za pomocą preloadera lub spinnera możesz uczynić dowolną stronę docelową wygodniejszą i atrakcyjniejszą wizualnie. W tej sekcji porozmawiamy o preloaderach i przyjrzymy się przykładom tych elementów stworzonych przez specjalistów Texterra.

Co to jest preloader i jakie zadania rozwiązuje

Preloader lub spinner to znak, który pojawia się na ekranie przed załadowaniem strony. Widzisz te elementy każdego dnia, kiedy korzystasz z Internetu. Poniżej znajduje się przykład preloadera.

Preloader rozwiązuje praktyczny problem: informuje użytkownika, że ​​strona się ładuje, a także zastępuje nieatrakcyjny wizualnie obraz ładowania. Należy to wyjaśnić.

Z powodu właściwości techniczne praca przeglądarek Strony witryn ładują się nierównomiernie. Podczas ładowania układ może „unosić się”. Jeśli strona ładuje się w kilka sekund, a nie ułamek sekundy, użytkownik przez jakiś czas widzi nieatrakcyjny obraz.

Preloadery są implementowane przy użyciu standardowych narzędzi programistycznych front-end: HTML, CSS, JavaScript oraz dodatkowych bibliotek i frameworków, takich jak jQuery, React.

Jak ulepszamy strony docelowe za pomocą modułów wstępnego ładowania

Tworzymy unikalne preloadery, w tym animowane. Oto niektóre z naszych prac.

• Qubi

Dla strony docelowej Qubi stworzyliśmy preloader, który naśladuje menu nawigacyjne. Pozwala to użytkownikowi zrozumieć, w jaki sposób strona jest zarządzana przed jej załadowaniem.

• wyrównać

Na stronie Levellen Interiors zastosowaliśmy preloader w postaci firmowego logo. To dodatkowy element brandingu strony.

Landing page zawiera informacje o najmie lokali w centrum biznesowym. Główny sekret strony docelowej znajduje się w sekcji „Biura”. Tutaj użytkownik może zobaczyć dostępność wolnych biur na każdym piętrze budynku.

Gdy najedziesz kursorem na wolne biuro, pojawi się przycisk „Szczegóły”.

Naciśnięcie przycisku kieruje użytkownika na stronę z informacjami o biurze i jego zdjęciami. Z tej strony możesz zostawić prośbę o wynajęcie pokoju.

Cechy implementacji

Nasz projektant narysował kształty przestrzeni biurowej, rysunki są w formacie svg. Rysunki te są nałożone na plany pięter. Gdy administrator serwisu w panelu kontrolnym zauważy, że gabinet jest wolny, skrypt włącza wyświetlanie obrazu na planie oraz możliwość przejścia do strony z informacjami i formularzem zamówienia. Gdy administrator zauważy, że biuro jest zajęte, skrypt wyłącza obraz na planie.

Własny projekt

W tym przykładzie nie ma skomplikowanych sztuczek technicznych i efektów projektowych - cała strona docelowa tworzy piękny obraz: tło, kolory, przepyszne zdjęcia kawioru z Astrachania. jedna strona astrahancaviar.ru– dobry przykład jak dzięki projektantowi produkt chce być kupiony. I jedz natychmiast!

Na koniec o bolesnych - kilka przykładów strasznych lądowań. Dla kontrastu facepalm, bezsilna agonia i tak dalej. Nie będę opisywał co jest z nimi nie tak - proponuję samemu rozwiązać te problemy. Ita-a-ak...