Дизайнът на началната страница (или началната страница) е визуалният и структурен дизайн на първата страница на уебсайт, който посетителите виждат, когато посещават сайта за първи път. Началната страница играе ключова роля в създаването на първото впечатление за сайта и помага на посетителите да намерят необходимата информация или да навигират по-нататък в ресурса.

 

1. Дизайн на началната страница на Shopify

Подобно на много други целеви страници в тази публикация, примерната целева страница Shopify прави го просто. Например фокусираното върху потребителя заглавие е само няколко думи, а страницата разчита на прости водещи символи, а не на абзаци, за да предаде подробностите и ползите от изпитанието. Има само няколко полета, които трябва да попълните, преди да започнете. Всичко това ви улеснява да продавате онлайн с вашия инструмент.

Регистрация на целевата страница на Shopify

 

2. Дизайн на началната страница на муцуната

Целевите страници помагат на потребителите да решат дали вашият продукт или услуга си струва ценното им време и енергия. Какъв по-добър начин да съобщите своето предложение за стойност ясно и директно от това да съпоставите посетителите си със самия проблем, който приложението ви решава?

Коментарите в Instagram получават повече

намордникПриложение за Mac, което заглушава известията на екрана, напълно покрива това показвай, без да казваш манталитет на тяхната минимална целева страница. Посетителите на тази страница са посрещнати от бърз огън от неудобни известия в горния ляв ъгъл на екрана. Анимацията е не само забавна, но и убедително предава полезността на приложението без дълги описания.

Дизайн на начална страница 11

 

 

3. Дизайн на началната страница на TransferWise

TransferWise ви позволява да изпращате и получавате пари в множество валути, а целевата му страница, показана по-долу, разбива всяко отделно действие, така че да не се разсейвате от опции, които не се отнасят за вас.

Ако искате да изпратите пари, можете да попълните формуляра за превод. За да получите пари, просто отидете в средния раздел и за да се регистрирате за TransferWise с помощта на вашата дебитна карта, отидете в най-десния раздел.

Всеки раздел на тази целева страница създава свой собствен призив за действие в зависимост от това за какво се регистрирате - всеки с яркозелена рамка, за да подчертае следващата ви стъпка след три възможни начални точки.

Дизайн на началната страница на TransferWise

 

4. Дизайн на началната страница на Airbnb

За да помогнете за превръщането на посетителите в домакини, Airbnb предлага някои изкусителни персонализации: груба оценка на средните приходи въз основа на вашето местоположение. Можете да въведете допълнителна информация за вашето потенциално разположение в полетата, за да получите още по-персонализирана оценка.

Ако вече сте посетили страница, в която сте се убедили, ясен призив за действие в горната част на страницата улеснява конвертирането на място.

Дизайн на началната страница на Airbnb

 

5.Teambit

странно обикновено не е първата дума, която идва на ум, когато мислите за софтуер за човешки ресурси, но визуалната целева страница на Teambit е точно това. Проста форма с едно поле е придружена от очарователен офис, пълен с животински герои - всичките много доволен от Teambit, ако се интересувате. До всяка информационна секция на целевата страница се появява анимационно животно, което примамва посетителите да превъртят надолу, за да научат повече. Дизайн на начална страница

Целева страница Teambit е чудесно доказателство, че не е необходимо да имате „забавен“ продукт или услуга, за да създадете забавна целева страница.

Целева страница на Teambit с CTA

 

 

6. Дизайн на началната страница на Wistia

На първо място, това е целевата страница Wistia за техния безплатен акаунт в Wistia. Веднага забелязвате формуляра с едно поле за създаване на акаунт - синият фон с минимален дизайн контрастира добре с ярко бялото поле на формуляра.

Дължината на полето на формуляра, комбинирана с видно разположение, елиминира почти всички проблеми при създаването на акаунт... но ако се съмнявате, винаги можете да превъртите по-долу, за да прочетете ЧЗВ. Като разделя двете със силен цветови контраст, Wistia прави процеса на преобразуване много по-лесен.

wisita-landing-page

 

7. Webflow. Дизайн на начална страница

Webflow, инструмент за проектиране за уеб разработчици, пакетира много информация в GIF и три полета на формуляр. Би било хубаво целият формуляр за регистрация да е на един ред - това не само прави страницата по-къса, но и попълването на всяко поле отляво надясно показва на потребителите колко близо са до това да щракнат върху четвъртия син бутон и да започнат безплатно.

Анимираният GIF под формуляра се показва в същата рамка на уебсайта, така че потребителите да могат да видят как работи продуктът. и регистрирайте се без превъртане или отиване на нова страница.

Webflow. Дизайн на начална страница

 

Дизайн на началната страница на електронната книга

8. Дизайн на началната страница на Nauto

Науто, платформа за данни за самоуправляващи се автомобили, помага да се направи автономното шофиране по-безопасно за компании, които управляват автопаркове. Естествено, клиентите му ще имат нужда от цялата информация, за да продават на тази платформа. Nauto го прави супер просто електронна книга, чиято целева страница ви предоставя кратък формуляр за контакт и преглед на статистика, за да докажете защо този ресурс е толкова важен.

Целева страница на Nauto book

 

Зеленият бутон „Изтеглете сега“ може дори да е бил нарочно (зеленото означава „отидете“ в крайна сметка).

Превъртете надолу и ще видите друга CTA „Вземете електронна книга“, за да напомните на потребителите какво предстои. Ще видите и три потресаващи статистически данни за автомобилни произшествия, за да насърчите потребителите да научат повече. Вижте го по-долу.

nauto-book-airborne-page-STA-1

 

9. Дизайн на началната страница на Industrial Strong Marketing

Тази целева страница веднага ме привлича със своето неустоимо, силно заглавие: „Не ме карай да увеличавам“. Това говори директно за общото изживяване, което повечето от нас имат, когато скролваме през нашите телефони или таблети - и също е малко нахално.

Но това не е единственото нещо, което ме заинтересува в тази целева страница. Забележете как червеният цвят е стратегически поставен в горната и долната част на формуляра, привличайки ви още по-близо до събитието за реализация.

маркетинг на индустриално ниво

 

Освен това този дизайн е мета за зареждане: изглежда и работи страхотно мобилни устройства. Имайте предвид, че много посетители ще имат достъп до вашите целеви страници на своите смартфони или таблети и ако дизайн на вашия уеб сайт не им подхожда, може да се откажат и да напуснат страницата ви.

Специалистите по маркетинг на индустриалната сила направиха полето шрифтове и е достатъчно голям, за да не се налага посетителите например да увеличават, за да четат и взаимодействат със съдържанието.

индустриално ниво marketing-mobile-landing-page

 

 

10. Velaro чат на живо

Понякога най-малките детайли правят най-голямата разлика. Например, те са тези, които правят целевата страница Velaro чат на живо невероятно.

Този малък PDF символ над изображението на елемента помага да се определи в какъв формат ще бъде изтеглянето. Стрелка преди подзаглавието помага допълнително да привлече вниманието към важното копие, което посетителите искат да прочетат. Подобно на IMPACT, те също имат автоматично отметнато квадратче за абонаменти към бюлетина на техния формуляр - което, ако се превърне в допълнително квадратче за отметка, е чудесен начин да увеличите броя на абонатите си. Всички тези малки, на пръв поглед незначителни детайли спомагат за създаването на солиден, невероятен дизайн на целевата страница. Дизайн на начална страница

Пример за целева страница Velaro

 

11. IMPACT Брандиране и дизайн / Дизайн на начална страница

 Дом IMPACT отдавна са източник на вдъхновение за дизайнерите. Харесвам опростеното оформление на страницата, от голямото копие на заглавието и детайлното изображение, до контура, който заобикаля формата, до цветовете и шрифтовете, които са много приятни за окото.

Безплатното ръководство, което IMPACT предлага за изтегляне тук, също не подчертава самото изтегляне в синия бутон, който ви позволява да изпратите попълнения формуляр. По-скоро IMPACT ви кани да „генерирате повече реализации“, като се фокусирате върху това, което можете да спечелите от четенето на ръководството.

IMPACT Брандиране и дизайн/Дизайн на начална страница

 

Целеви страници, за да научите повече

12. Unbounce

Нищо чудно това Unbounce е на върха на този списък - те наистина написаха книгата за създаване на целеви страници с висока реализация. Въпреки че има много невероятни неща за тази целева страница, две, които наистина харесвам, са: 1) използването на поле за чат вместо класически формуляр и 2) подробната - но добре пакетирана - информация под формуляра/Начало Дизайн на страница

Първият помага да се насочи вниманието към целта на страницата - да попълните формуляр - по начин, който е ненатрапчив и не се чувства като скучна работа. Второто дава на тази страница SEO тласък (търсачките ще имат повече съдържание за обхождане) и премахва безпокойството от хората, които трябва да знаят повече за част от съдържанието, преди да изпратят информацията си, без да отвлича вниманието на хората от прозореца за чат.

 

13. Bills.com. Дизайн на начална страница

Хората често смятат целевите страници за статични страници на вашия уебсайт. Но с правилните инструменти можете да ги направите интерактивни и персонализирани.

Вземете примера по-долу с Bills.com. За да разберете дали бихте се възползвали от тяхната консултация, отговорете на три въпроса, преди да ви бъде показан формулярът. Започва с това:

 

След това отговаряте на още два въпроса като този по-долу:

 

И ето последния формуляр за целева страница, където попълвате информацията си:

Дизайн на начална страница 33

 

Не съм сигурен как работи алгоритъмът (или дали изобщо има такъв), но докато го попълвах, имах някои притеснения относно не квалификации. След като разбрах какво съм направил, бях развълнуван да попълня формуляра, което съм сигурен, че правят повечето хора, които имат дългове и използват този инструмент. Като направим тази оферта по-ексклузивна, преди формулярът да се появи на целевата страница, обзалагам се, че Bills.com ще го направи значително повишена конверсия.

14. Дизайн на начална страница на Trulia

Trulia направи нещо много подобно на Bills.com с неговата целева страница. Започва с проста форма, която иска „адрес“ (което звучи по-малко страховито от „вашият адрес“, въпреки че това е, което имат предвид). Под това просто поле на формуляра има ярко оранжев бутон, който контрастира добре с изображението на героя зад формуляра и подчертава, че оценката ще бъде персонализирана за вашия дом.

Разбира се, самият адрес не е достатъчен, за да се оцени стойността на къщата. Той просто обозначава околностите на къщата. Ето защо следващата страница включва допълнителни въпроси за самия имот, като брой легла и бани. По-долу можете да видите копие на „Кажете ни къде да изпратим отчета“ – с отказ от отговорност, че с въвеждането на тази информация се съгласявате да се свържете с агента по недвижими имоти. Това е чудесен пример за това как една компания цени своите посетители от самото начало, като същевременно определя очакванията на посетителите какво ще се случи в резултат.

Trulia-целева страница

 

15. Дизайн на началната страница на Landbot

земенбот, услуга, която създава целеви страници, базирани на chatbot, поставя свой собствен продукт в центъра на своята целева страница, базирана на чат. Посетителите са посрещнати от приятелски настроен бот, пълен с емотикони и GIF файлове, който ги насърчава да предоставят информация в разговорен формат, а не в традиционната форма.

landbot дизайн на начална страница

 

16. Уеб печалби

За малко контраст... какво ще кажете за дългите целеви страници? Само с няколко трика можете да направите дори най-дългата целева страница да изглежда къса. Целевата страница на Webprofits по-долу показва как да направите това. Дизайн на начална страница

Горе вдясно има изпъкнал CTA бутон, за да научите повече - с добър контраст на фона, за да се открои, и стрелка надолу за насърчаване на превъртането. Като не поставят полето на формуляра отпред, те помагат за намаляване на триенето и дават възможност на посетителите да научат повече, преди да им бъде представена опция за преобразуване.

Те също ви позволяват да разберете какво е наистина делает Webprofits Останалата част от страницата предоставя подробности за това какво ще получите, когато изпратите информацията си. Освен това включва стратегически CTA, които да ви помогнат да се върнете обратно към върха, за да попълните формуляра, като например „Нека поговорим“.

Дизайн на начална страница 67

 

17. Х.БЛУМ

Понякога просто трябва да спрете и да се полюбувате на целевата страница колко красива е тя. Когато използвате снимка с висока разделителна способност и много бяло пространство на целевата страница Х.БЛУМ приятно за гледане.

Освен красотата си, страницата има някои страхотни елементи за преобразуване: горен формуляр, ясно и кратко описание на това, което ще се случи, когато попълните формуляра, и дори ярко оранжев бутон „Изпращане“. Единственото нещо, което ще променим? Копиране на бутона за изпращане – това може да е по-конкретно за предлаганото предложение. Дизайн на начална страница

hbloom Дизайн на начална страница

 

18. Лаборатория за преобразуване

Въпреки че не бих включил примерна публикация с формуляр в публикация за целеви страници, този сайт е специален. Начална страница е целият сайт - навигационните връзки просто ще ви отведат до информацията по-долу. Дизайн на начална страница

Когато щракнете върху „Получаване на помощ за целеви страници“, целият сайт се премества, за да освободи място за формуляра. Ето как изглежда преди да щракнете:

целева страница на лаборатория за преобразуване

 

И когато щракнете върху тази CTA, вижте как изглежда формулярът:

Дизайн на начална страница 121

 

Харесва ми, че не е необходимо да напускате страницата, за да попълните формуляра, но формулярът няма да бъде натрапчив за случайните посетители на сайта.

Идеи/Дизайн на начална страница

Добре оптимизираната начална страница може да превърне клиентите в потенциални клиенти чрез улавяне на информация, която ще ви помогне да разберете по-добре, да продавате и да зарадвате посетителите си. Тъй като целевите страници са от решаващо значение за реализациите, важно е да се уверите, че са добре планирани, проектирани и изпълнени. Ето няколко неща, които трябва да имате предвид, когато създавате насочени страници: Атрактивна естетика: Само цветът на вашата целева страница и чистият потребителски интерфейс могат да помогнат. Посетителите ще искат да научат повече за вашите продукти и да видят доказателства за стойността, която предлагате. Разгледайте #10 в нашия списък, Inbound Emotion, за страхотен пример за страхотна уеб страница.
По-малкото е повече: Оставете изречението или изображенията да говорят по-голямата част, но не забравяйте да включите всякакви описателни заглавия и подкрепящ текст, за да направите вашата целева страница ясна и завладяваща. Това се отнася за почти всеки компонент на страницата: бяло пространство, просто копие и по-кратки форми.

Дизайн на начална страница

Задръжте посетителите на страницата: Като премахнете основната навигация или каквито и да е разсейващи обратни връзки, е по-малко вероятно да има някакъв вид триене при генериране на потенциални клиенти, което да накара посетителите да изоставят страницата ви.
Споделяне в социалните мрежи. Лесен начин да привлечете посетители към вашата целева страница е чрез използване на бутони за споделянесоциални мрежи, за да могат да разпространяват вашето съдържание сред своите последователи в социалните медии. В крайна сметка клиентите са центърът на вашия маркетингов маховик.
A/B тестване: Важно е целевите страници да работят правилно и тъй като психологията на потребителите понякога може да бъде изненадваща, винаги е най-добре да експериментирате с различни версии на страниците си, за да видите коя има най-висок процент на реализация (CVR). Проверете позиционирането на офертата, видовете CTA или дори цветовата схема.
Call-to-Action: CTA, където основното е на целевата страница, или повратната точка, където е перспективата да станете контакти. CTA могат да помолят посетителите да се абонират, да изтеглят, да попълнят формуляр, да споделят социални мрежи и т.н., но като цяло CTA са необходими, за да ангажирате аудиторията си по-активно с вашата оферта. За да генерират потенциални клиенти, CTA трябва да са смели и ангажиращи, но най-важното е, че те трябва да предават стойност ефективно.

АЗБУКА