Басты бет (немесе басты бет) дизайны – келушілер сайтқа алғаш кірген кезде көретін веб-сайттың бірінші бетінің көрнекі және құрылымдық дизайны. Басты бет сайт туралы алғашқы әсерді қалыптастыруда маңызды рөл атқарады және келушілерге қажетті ақпаратты табуға немесе ресурс арқылы әрі қарай шарлауға көмектеседі.
1. Shopify басты бет дизайны
Осы жазбадағы көптеген басқа қону беттері сияқты бастапқы бет үлгісі Shopify қарапайым етеді. Мысалы, пайдаланушыға бағытталған тақырып бірнеше сөзден тұрады және бет сынақтың егжей-тегжейлері мен артықшылықтарын жеткізу үшін абзацтарға емес, қарапайым таңбаларға сүйенеді. Бастамас бұрын толтыру қажет бірнеше өрістер бар. Мұның бәрі құралды пайдаланып онлайн сатуды жеңілдетеді.
2. Басты бет дизайны
Қондырылған беттер пайдаланушыларға сіздің өніміңіз немесе қызметіңіз құнды уақыт пен күш-қуатқа лайықты екенін анықтауға көмектеседі. Келушілеріңізді қолданбаңыз шешетін мәселемен сәйкестендіруден гөрі құндылық ұсынысыңызды нақты және тікелей жеткізудің қандай жақсы жолы бар?
Instagram пікірлері көбірек болады
ЖұмбақЭкрандағы хабарландырулардың дыбысын өшіретін Mac қолданбасы мұны толығымен қамтиды айтпай көрсету менталитет олардың минималды қону бетінде. Бұл бетке келушілерді экранның жоғарғы сол жақ бұрышындағы ыңғайсыз хабарландырулардың жылдам оты қарсы алады. Анимация тек көңілді ғана емес, сонымен қатар ұзақ сипаттамаларсыз қосымшаның пайдалылығын сенімді түрде жеткізеді.
3. TransferWise басты бет дизайны
TransferWise бірнеше валютада ақша жіберуге және алуға мүмкіндік береді және төменде көрсетілген оның бастапқы беті сізге қатысты емес опцияларға алаңдамау үшін әрбір жеке әрекетті бөледі.
Егер сіз ақша жібергіңіз келсе, аудару формасын толтыра аласыз. Ақшаны алу үшін жай ғана ортаңғы қойындыға өтіңіз және дебеттік картаңызды пайдаланып TransferWise жүйесіне тіркелу үшін оң жақ шеткі қойындыға өтіңіз.
Осы қону бетіндегі әрбір қойынды өзін жасайды әрекетке шақыру не үшін тіркелгеніңізге байланысты - үш ықтимал бастапқы нүктеден кейін келесі қадамыңызды бөлектеу үшін әрқайсысында ашық жасыл жақтау бар.
4. Airbnb басты бетінің дизайны
Келушілерді хостқа айналдыруға көмектесу үшін, Airbnb кейбір тартымды жекелендіруді ұсынады: орналасқан жеріңізге негізделген орташа табыстың шамамен болжамы. Одан да жекелендірілген бағалауды алу үшін өрістерге ықтимал орналастыру туралы қосымша ақпаратты енгізуге болады.
Егер сіз бұған дейін көз жеткізген бетке кірген болсаңыз, беттің жоғарғы жағындағы нақты әрекетке шақыру оны орнында түрлендіруді жеңілдетеді.
5. Teambit
қызық HR бағдарламалық жасақтамасы туралы ойлағанда, әдетте бірінші сөз емес, бірақ Teambit-тің визуалды бастапқы беті дәл осы. Бір өрісі бар қарапайым пішін жануарлардың кейіпкерлеріне толы сүйкімді кеңсемен бірге жүреді - олардың барлығы өте Егер сізді қызықтырса, Teambit-ке ризамын. Қону бетіндегі әрбір ақпарат бөлімінің жанында мультфильм жануары пайда болады, бұл келушілерді көбірек білу үшін төмен айналдыруға итермелейді. Негізгі бет дизайны
Қондырғы бет Teambit күлкілі қону бетін жасау үшін сізге «көңілді» өнім немесе қызмет қажет емес екендігінің тамаша дәлелі.
6. Wistia басты бетінің дизайны
Ең алдымен, бұл бастапқы бет Wistia тегін Wistia тіркелгісі үшін. Тіркелгіні жасау үшін бір өрісі бар пішінді бірден байқайсыз - минималды дизайны бар көк фон ашық ақ пішін өрісімен жақсы контраст.
Көрнекті орналастырумен біріктірілген пішін өрісінің ұзындығы тіркелгіні жасау кезінде барлық дерлік үйкелісті болдырмайды... бірақ күмәніңіз болса, жиі қойылатын сұрақтарды оқу үшін әрқашан төмен айналдыра аласыз. Екеуін күшті түсті контрастпен бөлу арқылы Wistia түрлендіру процесін айтарлықтай жеңілдетеді.
7. Webflow. Негізгі бет дизайны
Веб ағымы, веб-әзірлеушілерге арналған дизайн құралы GIF және үш пішін өрісіне көптеген ақпаратты жинайды. Бүкіл тіркеу формасы бір жолда болғаны жақсы болар еді – бұл бетті қысқартып қана қоймайды, сонымен қатар әрбір өрісті солдан оңға қарай толтыру пайдаланушыларға төртінші көк түймені басып, тегін бастауға қаншалықты жақын екенін көрсетеді.
Пішіннің астындағы анимациялық GIF веб-сайтта сол жақтауда көрсетіледі, осылайша пайдаланушылар өнімнің қалай жұмыс істейтінін көре алады. и жылжусыз немесе жаңа бетке өтпей-ақ тіркеліңіз.
Электронды кітаптың басты бетінің дизайны
8. Nauto негізгі бетінің дизайны
Науто, өздігінен басқарылатын көлік деректері платформасы автопарктерді басқаратын компаниялар үшін автономды жүргізуді қауіпсіз етуге көмектеседі. Әрине, оның клиенттеріне осы платформада сату үшін барлық ақпарат қажет болады. Nauto бұл өте қарапайым электрондық кітап, оның ашылу беті қысқаша байланыс пішінін және бұл ресурстың неге соншалықты маңызды екенін дәлелдеу үшін алдын ала статистиканы береді.
Жасыл «Қазір жүктеп алу» түймесі әдейі болған болуы мүмкін (жасыл түс «бару» дегенді білдіреді).
Төмен айналдырсаңыз, пайдаланушыларға дүкенде не бар екенін еске салу үшін басқа «Электрондық кітапты алу» CTA көресіз. Пайдаланушыларды көбірек білуге ынталандыру үшін сіз сондай-ақ үш көлік апаты статистикасын көресіз. Оны төменде тексеріңіз.
9. Industrial Strong Marketing Басты бет дизайны
Бұл бастапқы бет мені бірден «Мені үлкейтуге мәжбүрлеме» деген сөзсіз, тартымды тақырыбымен тартады. Бұл біздің телефондар немесе планшеттер арқылы айналдыру кезіндегі көпшілігіміздің жалпы тәжірибемізге тікелей қатысты - және бұл да аздап ұятсыз.
Бірақ мені осы қону бетіне қызықтырған жалғыз нәрсе емес. Қызыл түстің пішіннің жоғарғы және төменгі жағында стратегиялық түрде қалай орналастырылғанына назар аударыңыз, бұл сізді түрлендіру оқиғасына жақындатады.
Сондай-ақ, бұл дизайн жүктеуге арналған мета болып табылады: ол көрінеді және тамаша жұмыс істейді мобильді құрылғылар. Есіңізде болсын, көптеген келушілер смартфондарындағы немесе планшеттеріндегі бастапқы беттеріңізге кіретін болады және егер веб-сайтыңыздың дизайны оларға сәйкес келмейді, олар бас тартып, сіздің парақшаңызды тастап кетуі мүмкін.
Industrial Strength Marketing мамандары алаңды жасады қаріптер және келушілерге, мысалы, оқу және мазмұнмен әрекеттесу үшін масштабтауды қажет етпейтіндей үлкен пішіндер.
10. Velaro тікелей чаты
Кейде ең кішкентай бөлшектер ең үлкен айырмашылықты тудырады. Мысалы, олар қондыру бетін жасайтын адамдар Velaro тікелей чаты таңқаларлық.
Элемент кескінінің үстіндегі кішкентай PDF белгісі жүктеп алудың қандай форматта болатынын анықтауға көмектеседі. Ішкі тақырыптың алдындағы көрсеткі келушілер оқығысы келетін маңызды көшірмені одан әрі бөлектеуге көмектеседі. IMPACT сияқты оларда да автоматты түрде белгіленетін құсбелгі бар жазылымдар олардың пішініндегі ақпараттық бюллетеньге - бұл қосымша құсбелгіге айналса, жазылушылар санын арттырудың тамаша тәсілі. Осы кішкентай, елеусіз болып көрінетін бөлшектердің барлығы қатты, таңғажайып қону бетінің дизайнын қосуға көмектеседі. Негізгі бет дизайны
11. IMPACT Брендинг және дизайн / Басты бет дизайны
Басты бет IMPACT ұзақ уақыт бойы дизайнерлер үшін шабыт көзі болды. Маған беттің қарапайым орналасуы ұнайды: үлкен тақырып көшірмесі мен егжей-тегжейлі кескіннен бастап пішінді қоршап тұрған контурға, көзге өте ұнайтын түстер мен қаріптерге дейін.
Мұнда жүктеуге арналған тегін нұсқау IMPACT сонымен қатар толтырылған пішінді жіберуге мүмкіндік беретін көк түймеде жүктеп алудың өзін ерекшелендірмейді. Керісінше, IMPACT нұсқаулықты оқудан не алуға болатынына назар аудару арқылы «көбірек түрлендірулерді жасауға» шақырады.
Қосымша ақпарат алу үшін бастапқы беттер
12. Тоқтату
Бұған таңқаларлық емес Unbounce бұл тізімнің басында - олар шынымен де жоғары түрлендіретін беттерді жасау туралы кітап жазды. Бұл қону бетінде таңғаларлық нәрселер көп болса да, маған ұнайтын екі нәрсе: 1) классикалық пішіннің орнына чат терезесін пайдалану және 2) пішін/Үйдің астындағы егжей-тегжейлі, бірақ жақсы оралған ақпарат Бет дизайны
Біріншісі беттің мақсатына назар аударуға көмектеседі — пішінді толтыру үшін — көзге көрінбейтін және жұмыс сияқты сезілмейтін етіп. Екіншісі бұл бетке SEO-ны күшейтеді (іздеу жүйелерінде мазмұн көбірек болады) және ақпаратты жібермес бұрын мазмұнның бір бөлігі туралы көбірек білуі керек адамдардан алаңдаушылықты жояды, адамдарды сөйлесу терезесінен алаңдатпайды.
13. Bills.com. Негізгі бет дизайны
Адамдар көбінесе қону беттерін веб-сайтыңыздағы статикалық беттер деп санайды. Бірақ дұрыс құралдардың көмегімен сіз оларды интерактивті және жекелендірілген ете аласыз.
Төмендегі мысалды алыңыз Bills.com. Олардың кеңесі сізге пайдалы болатынын білу үшін пішінді көрсетпес бұрын үш сұраққа жауап беріңіз. Ол былай басталады:
Содан кейін сіз төмендегідей тағы екі сұраққа жауап бересіз:
Міне, ақпаратыңызды толтыратын соңғы бет пішіні:
Алгоритмнің қалай жұмыс істейтінін білмеймін (немесе бар болса), бірақ мен оны толтырып жатқанда менде біраз алаңдаушылық болды. емес біліктілік. Мен не істегенімді білгеннен кейін, мен пішінді толтыруға қуаныштымын, мен қарызы бар және осы құралды пайдаланатын адамдардың көпшілігі жасайтынына сенімдімін. Пішін бастапқы бетте пайда болғанға дейін бұл ұсынысты эксклюзивті ету арқылы, мен Bills.com сайтына айтарлықтай әсер ететініне сенімдімін. түрлендірудің жоғарылауы.
14. Trulia басты бетінің дизайны
Trulia қону бетімен Bills.com сайтына өте ұқсас нәрсе жасады. Ол «мекен-жайды» сұрайтын қарапайым пішіннен басталады («сіздің мекен-жайыңыз» дегеннен гөрі қорқынышты естіледі, дегенмен олар осылай білдіреді). Осы қарапайым пішін өрісінің астында пішіннің артындағы кейіпкер бейнесіне жақсы қарама-қайшы келетін және бағалау сіздің үйіңізге жекеленетінін баса көрсететін ашық қызғылт сары түйме бар.
Әрине, үйдің құнын бағалау үшін мекенжайдың өзі жеткіліксіз. Бұл жай ғана үйдің айналасын білдіреді. Сондықтан келесі бетте кереуеттер мен ванналар саны сияқты мүліктің өзі туралы қосымша сұрақтар бар. Төменде сіз «Есепті қайда жіберу керектігін айтыңыз» көшірмесін көре аласыз - бұл ақпаратты енгізу арқылы сіз жылжымайтын мүлік агентімен байланысуға келісесіз. Бұл компания келушілерді ең басынан қалай бағалайтынының тамаша мысалы, сонымен бірге келушілердің нәтижесінде не болатынын күтеді.
15. Landbot басты бетінің дизайны
Ландбот, чат-ботқа негізделген бастапқы беттерді жасайтын қызмет, өзінің өнімін чатқа негізделген бастапқы беттің ортасына орналастырады. Келушілерді эмодзилер мен GIF файлдары бар достық бот қарсы алады, бұл оларды дәстүрлі түрде емес, сөйлесу форматында ақпарат беруге шақырады.
16. Webprofits
Кішкене қарама-қайшылық үшін... ұзын беттер туралы не деуге болады? Бірнеше амалдың көмегімен сіз тіпті ең ұзын бетті қысқа етіп көрсете аласыз. Төмендегі Webprofits бастапқы бетінде мұны қалай жасау керектігі көрсетілген. Негізгі бет дизайны
Қосымша ақпарат алу үшін жоғарғы оң жақта көрнекті CTA түймесі бар - оны ерекше ету үшін фондық жақсы контраст және айналдыруды ынталандыру үшін төмен көрсеткі. Пішін өрісін алдына қоймау арқылы олар үйкелісті азайтуға көмектеседі және келушілерге түрлендіру опциясы ұсынылмас бұрын көбірек білуге мүмкіндік береді.
Олар сондай-ақ шын мәнінде не екенін түсінуге мүмкіндік береді жасайды Webprofits . Беттің қалған бөлігінде ақпаратты жіберген кезде не алатыныңыз туралы мәліметтер берілген. Оған қоса, ол «Кел, сөйлесейік» сияқты пішінді толтыру үшін жоғарғы жағына өтуге көмектесетін стратегиялық CTA қамтиды.
17. H.BLOOM
Кейде сіз жай ғана тоқтап, оның қаншалықты әдемі екенін білу үшін қону парағына таңдануыңыз керек. Ажыратымдылығы жоғары фотосуретті және қону бетінде көп бос орынды пайдаланған кезде H.BLOOM қарауға жағымды.
Өзінің әдемілігінен басқа, бетте бірнеше керемет түрлендіру элементтері бар: үстеме пішін, пішінді толтырған кезде не болатынын нақты және қысқаша сипаттау және тіпті ашық қызғылт сары «Жіберу» түймесі. Біз өзгертетін жалғыз нәрсе? Жіберу түймешігіндегі көшірме – бұл ұсынылатын ұсынысқа нақтырақ болуы мүмкін. Негізгі бет дизайны
18. Conversionlab
Мен қондыру беттері туралы жазбаға үлгі пішін жазбасын қоспас едім, бұл сайт ерекше. Басты бет бұл бүкіл сайт - навигациялық сілтемелер сізді жай ғана төмендегі ақпаратқа апарады. Негізгі бет дизайны
«Қосылу беттерінде анықтама алу» түймесін басқанда, бүкіл сайт пішінге орын босату үшін жылжиды. Баспас бұрын ол келесідей көрінеді:
Осы CTA басқан кезде, пішіннің қалай көрінетінін тексеріңіз:
Маған ұнайды, пішінді толтыру үшін бетті қалдырудың қажеті жоқ, бірақ пішін сайтқа кездейсоқ келушілерге кедергі келтірмейді.
Идеялар/Үй бетінің дизайны
Жақсы оңтайландырылған басты бет келушілерді жақсырақ түсінуге, нарыққа шығаруға және қуантуға көмектесетін ақпаратты жинау арқылы тұтынушыларды жетекшілерге айналдыра алады. Қондырылған беттер түрлендіру үшін маңызды болғандықтан, олардың жақсы жоспарланғанына, жобаланғанына және орындалғанына көз жеткізу маңызды. Мұнда жасау кезінде ескеру қажет бірнеше нәрсе бар. мақсатты беттер: Тартымды эстетика: қону бетіңіздің түсі және таза пайдаланушы интерфейсі ғана көмектесе алады. Келушілер сіздің өнімдеріңіз туралы көбірек білгісі келеді және сіз ұсынатын құндылықтың дәлелдерін көргісі келеді. Керемет веб-беттің тамаша үлгісі үшін біздің тізімдегі №10 «Кіріс эмоция» бөлімін қараңыз.
Азырақ көп: сөйлемнің немесе суреттердің көп бөлігін орындауға мүмкіндік беріңіз, бірақ бетті анық және тартымды ету үшін кез келген және барлық сипаттаушы тақырыптар мен қолдаушы мәтінді қосуды ұмытпаңыз. Бұл беттегі барлық дерлік құрамдастарға қатысты: бос орын, қарапайым көшірме және қысқарақ пішіндер.
Негізгі бет дизайны
Келушілерді бетте ұстаңыз: Негізгі навигацияны немесе кез келген алаңдататын кері сілтемелерді жою арқылы келушілерді сіздің парағыңыздан бас тартуға әкелетін жетекші генерациялаудың қандай да бір түрі болуы ықтимал.
Әлеуметтік желілерде бөлісу. Қону бетіңізге келушілерді тартудың оңай жолы - бөлісу түймелерін пайдалануәлеуметтік желілер, сондықтан олар сіздің мазмұныңызды әлеуметтік желідегі жазылушыларына тарата алады. Өйткені, тұтынушылар сіздің маркетингтік маховиктің орталығы болып табылады.
A/B тестілеу: Landing беттерін дұрыс орындау үшін маңызды және тұтынушы психологиясы кейде таңқаларлық болуы мүмкін болғандықтан, қайсысының ең жоғары конверсия жылдамдығы (CVR) бар екенін көру үшін әрқашан беттеріңіздің әртүрлі нұсқаларымен тәжірибе жасаған дұрыс. Ұсыныстың орналасуын, CTA түрлерін немесе тіпті түс схемасын тексеріңіз.
Әрекетке шақыру: CTA, онда ет қону бетінде немесе бетбұрыс нүктесі, онда байланыс болу мүмкіндігі бар. CTA келушілерден жазылуды, жүктеп алуды, пішінді толтыруды, бөлісуді сұрай алады әлеуметтік желілер т.б., бірақ жалпы алғанда, CTA аудиторияңызды ұсынысыңызбен белсендірек тарту үшін қажет. Жетекшілерді құру үшін CTA батыл және тартымды болуы керек, бірақ ең бастысы, олар құндылықты тиімді түрде жеткізуі керек.
пікір қалдыру