Алексей Андрианович Савченко
Дизайн Огонь
Часть 24. Дизайн лендинга
После того, как согласован прототип, начинается этап дизайна. Это самая большая и самая сложная тема разработки лендинга и моя самая любимая.
Благодаря качественному дизайну лендинг заинтересует посетителя и заставит прочитать/рассмотреть услугу или товар. Какой бы не был красивы текст, без дизайна толку не будет. Потому что посетитель открывает сайт, тратит 1–2 секунды, если дизайн не зацепил, он его закрывает. Даже если там очень круто написан весь текст.
Есть много споров что важнее при разработке лендинга: дизайн, прототип, текст и т. д. Каждый кто специалист в своей сфере будет топить за неё. Многие фрилансеры любят писать «делаю ПРОДАЮЩИЙ дизайн» – это звучит так глупо, что просто по другому не назовешь.
Дизайн не продает, дизайн составляет визуальную привязку между посетителем и лендингом. Если глазу приятно – дальше читается оффер, текст и прочее. Если не приятно – до свидания.
Такое работает не только в лендингах, а в очень многих сферах нашей жизни. Недавно я на кассе супермаркета увидел леденцы, которые стоили примерно в 5 раз дороже, чем другие рядом стоящие. У них была реально красивая упаковка, винтажный шрифт, мне чем-то напомнило конфеты как помнишь в Гарри Поттере были. Открываю, думаю сейчас будет вкусно… Хуже леденцов в своей жизни я не пробовал, безвкусные не имеющее практически никакого вкуса.
Это я к тому, что можно завлечь визуально, но это не значит что за этой красивой упаковкой стоит что-то стоящее. Поэтому нет никакого ПРОДАЮЩЕГО дизайна. Есть качественный дизайн, который создает связь между посетителем и лендингом.
Каким должен быть дизайн? Дизайн лендинга зависит от тематики, если это что-то связано с продажей товаров, например наушники, часы, детская одежда, комбинезоны, букеты, в общем все, что может продаваться физически, то это должно быть ярко, красиво, привлекать внимание. Вообще я заметил, что очень часто мои лендинги по товарным нишам очень напоминают телемагазины, ты по-любому их видел в детстве. Когда стоит девушка и на протяжении полу часа рассказывает какой замечательный этот тренажер, купишь и избавишься от всех проблем в мире, а ещё если закажешь прямо сейчас, то и мясорубка в подарок.
Есть конечно проекты, в которых есть свой собственный фирменный стиль, и тогда я делаю просто по ТЗ клиента, ничего от себя не придумываю.
В целом дизайн настолько разный и интересный, что можно бесконечно придумывать что-то новое. В дизайне лендингов есть свои тренды, сейчас клиенты очень любят когда в дизайне объемные элементы, летающие объекты, облака, кусты, птицы и т. д. Но дизайнеры делятся на 2 лагеря: за минимализм и за объем. Те кто любят минимализм яро против объема и т. д., что типо это не современно… но, я делаю дизайн таким, каким его хотят видеть клиенты.
Когда клиентам надоест яркость и объем, буду делать минимализм или что-то другое. В первую очередь я делаю дизайн для клиента, а не для того чтобы его оценили другие дизайнеры.
Часть 25. Верстка
Следующий этап разработки лендинга это верстка. Тоже еще один ответственный момент, на котором тебе нужно проконтролировать верстальщика, чтобы он все корректно сверстал, чтобы все кнопки, формы нажимались, чтобы сайт хорошо показывался во всех браузерах, смартфонах, планшетах и других устройствах.
Мне очень часто задают вопрос: «Нужно ли веб-дизайнеру уметь верстать?». Скажу так: если ты веб-дизайнер и умеешь верстать реально качественно – это плюс. Почему? Потому что ты не тратишь деньги на подрядчиков в виде верстальщика. Всё что ты зарабатываешь на проекте – твоё, ни с кем не делишься. Но, если ты дизайнер и решил научиться верстать с нуля, чтобы брать больше денег за проект и ни с кем не делиться, то я не рекомендую это делать. Объясняю, почему.
Чтобы научиться реально качественно верстать нужно потратить немало времени. Это не Photoshop, здесь все сложнее, нужно будет разобраться в кодах, JavaScript, HTML и так далее. Я конечно базово за все время работы по лендингам уже более-менее разбираюсь в основах верстки. Ну как разбираюсь, могу поменять текст, номер телефона на сайте, картинку, изменить цвет кнопки, размер шрифта.
Я рекомендую найти верстальщика. Как его можно найти? Очень легко, пишешь у себя в аккаунте пост о том, что нужен верстальщик, который будет быстро делать верстку лендингов/ сайтов, прикрепляешь яркую картинку, чтобы зацепить взгляд и ждешь новобранцев.
Из такого поста напишет много людей. Я буквально за один вечер нашел около 10 людей, с каждым переписывался, посмотрел их работы и выбрал для себя несколько человек, с которыми работаю до сих пор. Поэтому, если ты только начинаешь заниматься дизайном, не забивай себе голову версткой и сосредоточься на дизайне.
НО! Буквально недавно я для себя сделал открытие, которое идеально подходит для новичков в веб-дизайне и даже для тех, кто уже что-то умеет.
Ну как открытие, это уже было давно, но я только недавно понял потенциал. В общем есть популярная платформа Tilda, на которой можно собирать лендинги/сайты без знания кода со своим дизайном. Вот это круто. Огромный плюс в том, что клиент потом сам сможет без проблем поменять местами блоки, добавить/изменить информацию и прочее.
Часть 26. Настройка рекламы
Следующий этап разработки лендинга – это настройка рекламы, её можно продавать клиенту как дополнительную услугу. У меня это 50/50, некоторые клиенты заказывают отдельно лендинг, а некоторые с настройкой рекламы. По настройке рекламы также не рекомендую тебе вникать в это все очень сильно.
Если ты например веб-дизайнер и только начал работать фриланс, то не нужно себе забивать голову еще и настройкой рекламы, потому что это вообще отдельная тема, это даже не верстка и не прототип. Рекомендую найти человека, сейчас тех, кто настраивает рекламу очень очень много. Конечно же многие из них работают халтурно, поэтому обязательно проси отзывы, кейсы, обязательно чтобы были цифры, подтверждения по заявкам, скрины из метрики и прочее. Можно даже связаться с его клиентами, если есть их контакты и спросить довольны ли они.
Просто нужно найти правильного человека/команду по настройке рекламы и будет счастье. У меня так и есть, я около 5 лет уже работаю с партнерами.
Обычно рекламное агентство или отдельный специалист, который настраивает рекламу работают за %. Например, у тебя есть заказ на лендинг для компании, которая занимается ремонтом квартир и клиент хочет чтобы было с рекламой в Яндекс/Гугл. Ты клиенту: «Хорошо, мы сможем вам всё сделать. У меня есть подрядчик…», даже можно говорить не так, не подрядчик, а «…у меня есть партнер, который сможет настроить рекламу». Пишешь этому партнеру: «У меня есть клиент, я ему буду делать лендинг, тебе нужно будет настроить рекламу». Он: «Ок, будет стоить 200$». Вы с ним договариваетесь на % за приведенного клиента.
То есть: ты ему привел клиента на настройку рекламу, он тебе отдает процент. Чаще всего это 15 %. То есть, из этих 200$ – 15 % твои. Таким образом, ты закрываешь клиента на более большую сумму, и плюс зарабатываешь %. Надеюсь уловил суть.
И ещё раз: НЕ ВНИКАЙ В РЕКЛАМУ, ЕСЛИ НЕ СОБИРАЕШЬ ЕЙ ЗАНИМАТЬСЯ ПРОФЕССИОНАЛЬНО. СОСРЕДОТОЧЬСЯ НА ЧЕМ-ТО ОДНОМ.
Суть в том, что нужно запартнериться с тем, кто хорошо настраивает рекламу. И также эти партнерские связи могут работать в обратном порядке. Ты можете сказать этому настройщику рекламы: «Если у тебя будут люди, которым нужно разработать Landing page, дизайн сайта, дизайн социальных сетей, дизайн буклета, чего угодно, то можешь направлять ко мне. Я буду тебе отдавать 15 % от суммы этого проекта».
Партнерство – это очень крутая штука. Я на таких условиях работаю со многими ребятами. Они мне приводят клиентов, а я им привожу клиентов по рекламе.
Кстати, у меня тоже есть партнерская программа, можешь зайти глянуть: https://work.hawk-style.com
Часть 27. Как сделать лендинг, который конвертирует заявки? Анализ ЦА
Кроме качественного дизайна, у лендинга есть еще ряд моментов, которые также нужно учесть при его разработке. Разберем подробнее каждый.
Анализируем целевую аудиторию своей услуги или товара
1. Определяем кто наш клиент, какого он возраста.
2. Если вы продаете на детскую аудиторию, то подача контента должна быть именно под детей, а точнее для родителей, чтобы их заинтересовало.
3. Если ваша ЦА (целевая аудитория) более взрослые люди, например 45–50, то показывайте только самое важное что может быть интересно им.
4. Если ЦА 21–25, 26–30, 31–35 и т. д, то делаем весь контент только под этот возраст. Не нужно делать лендинг сразу под всех, это не даст хороших результатов. Ориентируйтесь только на одну группу людей. Для остальных можно сделать отдельную копию сайта с измененной информацией.
5. Что может заставить клиента найти вашу услугу или продукт, какая потребность?
6. Определяем, что заставило клиента найти вас: сломался автомобиль, нужен бухгалтер, нужно сделать ремонт в квартире, нужен забор, нужен новый телефон, нужно получить ипотеку, нужно починить компьютер.
7. На основе этой проблемы пишем главный заголовок в начале, в котором сразу пишем решение проблемы клиента.
Пример:
Проблема: поломался айфон.
Заголовок: починим ваш айфон в течение 20 минут при вас, мастер приедет в любое удобное для вас место (кафе, ВУЗ, ТЦ).
Потребность: нужно получить ипотеку, хочу новое жилье.
Заголовок: Поможем получить ипотечный кредит за 2 дня.
Подберем и оформим выгодную ипотечную программу в любом из 50 банков РФ.
8. Какую главную «боль» клиент решит с помощью вашей услугу/ продукта?
9. Если болей много, то расписываем их все, даже если 20 штук, и на их основе пишем как вы решите их.
Ещё пример:
Тематика: покраска автомобилей.
Какие боли: дорого, плохо покрасят, краска слезет через 1 год, в каком месте это происходит, на сколько времени нужно оставить машину, кто будет делать работу и т. д.
Какие решения этих болей: описываем полный процесс покраски шаг за шагом, какой материал используется, пишем что краска немецкого качества. Вставляем фото бокса, в котором проходит покраска, проводим фотосессию места и работников, работа в процессе покраски. Пишем сколько времени занимает покраска, говорим, что на время покраски вы получаете доступ к прямой трансляции на которой видите всё что, происходит с машиной.
Часть 28. Как сделать лендинг, который конвертирует заявки? Дизайн и верстка
Дизайн лендинга
1. Нужно посмотреть сайты конкурентов топ-10, которые находятся на первой странице выдачи Яндекс или Google, выбрать лучшие на свой взгляд в плане дизайна сайта.
2. Смотрим: если сайт красивый по дизайну, но текст не о чем, то ставим ему пометку «1». Если сайт красивый и текст нормальный, есть отзывы, настоящие фото, то ставим «2». Так проделываем со всеми сайтами, и оставляем и на основе представляем себе примерную картину будущего сайта, в котором будет связь качественного дизайна и продуманного текста на основе анализа ЦА и прототипа.
3. Не забываем сделать макеты всплывающих окон (формы обратной связи), страницу благодарности и другие всплывающие штуки, которые будут на сайте.
Правильная верстка лендинга
1. Даем верстальщику четкое ТЗ (техническое задание) по всем элементам на сайте, как они должны работать и вести себя. Например как себя будет вести кнопки при наведении, чтобы будет при нажатии на форму обратной связи, как будет работать слайдер.
2. Проверяем отображение сайта на всех устройствах, особенно мобильные. Чтобы всё было корректно.
3. Не забываем про всплывающие окна.
4. Эффекты кнопок при наведении (должны менять цвет, подсвечиваться), это важно.
5. Не забываем сверстать заранее все дополнительные фишки, которые будут на лендинге (окно при выходе с сайта, страницу благодарности). Верстальщики часто это упускают.
6. Привлекательная иконка сайта favicon.
7. Прописываем OG-теги, для того чтобы, когда вы делились сайтом в соц. сетях, то было красивое превью.
