Как сделать коммерческий сайт узнаваемым? Рассказываем за 4 минуты
M studio – веб-студия, которая занимается разработкой сайтов и упаковкой бизнеса более 5 лет. В этой статье расскажем, почему сайт – это не только красивые картинки и как сделать так, чтобы вашу веб-страницу невозможно было забыть.
Шаг № 1. Зацепите с первой страницы
Первый экран – то, с чего начинается знакомство с сайтом. Важно понимать, что ваш сайт – не единственный и в большинстве случаев, если клиента он не зацепит сразу, больше пяти секунд на нем он не проведет.
Когда же клиент решает задержаться на странице? Когда главный экран отвечает на его запрос. У клиента есть проблема и сайт без красивых обещаний сразу заявляет: мы знаем, как это решить.
И вот мы переходим к тому, чем должен быть наполнен лендинг или главная станица в многостраничном сайте, чтобы посетитель сразу все понял и решил остаться.
Можно выделить 4 основных принципа:
понятность;
информативность;
лаконичность;
- эстетичность.
Не забудьте позаботиться о логотипе. Он должен быть уникальным и бросаться в глаза – в хорошем смысле этого слова. Именно по логотипу мы запоминаем компанию.
К нам периодически обращаются компании у которых нет логотипа. Мы всегда идем на встречу и делаем пару вариантов лого, который входит в стоимость разработки сайта
Продумайте визуал
Текст безусловно важен, но вчитываться не всегда есть время и возможность – иллюстрация без лишних слов может продемонстрировать, что получит клиент. Позаботьтесь о визуальной составляющей. Покажите, как продукт улучшит жизнь клиента. Если вы продаете что-то физическое – картинкой передайте эмоцию и атмосферу. В случае с интеллектуальным трудом и услугами – проиллюстрируйте конечный результат.
Заголовок
Иллюстрация зацепила и теперь клиент читает заголовок. Он должен быть кратким и ёмким. На главном экране не нужно перечислять все и сразу – помните, мы бережем время пользователя. Укажите название продукта и что он из себя представляет.
Задача заголовка – рассказать, кто вы. А вот чем вы лучше других, покажет подзаголовок. Он должен содержать в себе продающий оффер – уникальное торговое предложение (УТП) . УТП должно быть конкретным, понятным, измеримым и ограниченным во времени.
УТП мы складываем по следующим техникам:
- Потребность + результат + гарантия;
- Продукт + ЦА + проблема + ключевая выгода;
- Преимущество/свойство + потребность;
- ЦА + потребность + решение.
Шаг № 2. Позаботьтесь о пользователе
Запоминающийся сайт должен быть красивым. Функциональный сайт должен быть удобным. Чтобы к вашему сайту захотелось вернуться, он должен совмещать приятное с полезным.
Дизайн сайта должен быть простым, но при этом визуально привлекательным. Избегайте сложных нечитабельных шрифтов. Желательно, чтобы анимация была простая и ненавязчивая: переизбыток элементов может мешать загрузке страницы, а также не очень приятен визуально.
В коммерческих проектах анимация должна быть уместной, в остальных случаях она будет отвлекать, иногда даже раздражать.
Придерживайтесь общей темы: попадая в новый раздел, клиент не должен чувствовать, что попал на другой сайт.
Когда делаешь запоминающийся сайт, хочется, чтобы его дизайн был уникальным и не как у всех. Но в коммерческих проектах часто «необычное» – враг хорошего. Дизайн должен помогать пользователю: каждая мелочь продумывается исходя из пользовательского опыта. Это основной принцип UX-дизайна. Используйте привычную навигацию, называйте разделы так, чтобы было понятно, что за ними скрыто. Иконки разделов должны быть узнаваемы. Клиент не получит удовольствия, гадая, что же произойдет, когда он нажмет кнопку на сайте.
Шаг № 3. А что можно сделать еще?
Анализ конкурентов
На самом деле этот пункт должен быть первым. До вас люди уже делали сайты, и в вашей нише тоже. И даже совершали на них ошибки. Проанализируйте конкурентов и обратите внимание на проблемы. Подумайте, как можно исправить их на вашем сайте. Найдите боли потенциального клиента, которые не закрывают конкуренты, и закройте их.
Банально – скажете вы. Так сделайте – скажем мы)
Проработайте мобильную версию
До сих пор с постоянной периодичностью мы встречаем сайты без мобильной адаптации, что в современном мире уже странно. Все больше людей заходят на сайт с мобильных устройств. Если пользователю неудобно просматривать сайт с экрана телефона, он может к вам больше не вернуться. Как бы хорошо не была продумана десктопная версия, вы можете потерять больше 60% посетителей просто потому что не продумали мобильную.
Определите целевую аудиторию
Хотите добиться лучшего результата – ставьте себя на место клиента. Проанализируйте вашу целевую аудиторию. Не останавливайтесь на поле, возрасте и профессии.
Хорошо подумайте:
- какие сомнения у потенциального покупателя?
- Как вы можете их развеять?
- Что ожидают они от продукта?
Отвечайте на вопрос пользователя до того, как он его задал. Предвосхищайте ожидания клиентов
Заключение
Сайт – это не только красивая картинка. Это огромная аналитическая работа, которая стоит в основе разработки, и о которой вы можете даже не подозревать.
Для нас важно делать сайт не ради сайта, а готовить страницу, которая будет работать и приносить доход. Все наши сайты продуманы с позиций UX-дизайна, а также мы обязательно встраиваем в них базовые настройки SEO для привлечения клиентов.
P. S. В ближайшее время будет продолжение данной статьи, там мы поговорим о том какие способы есть для привлечения посетителей на сайт. Подписывайтесь, чтобы не пропустить!
Вы можете получить бесплатный аудит вашего сайта
Присылайте свой сайт на mikhailov. studio, мы проанализируем и сформируем до 15 рекомендаций по улучшению технической части, дизайна и конверсии.
В течение 3-х рабочих дней пришлем вам ссылку на видеоразбор вашего сайта с рекомендациями по улучшению.
Я бы хотел высказать своё ИМХО по поводу вашего сайта.
1). Первый экран.
а). Ссылки на телеграм и портфолио как будто висят в воздухе. Я бы перенёс их влево, к левому ключу (где лого). Или вправо, вместо кнопки. Потому что одна кнопка снизу у вас уже есть.
б). Не понял, зачем нужен длинный бордер под меню. Считаю лишним. Он вносит лишний информационный шум.
в). Текст "web — design. / marketing." Лишний. Вы ведь ниже под h1 пишите это ещё раз. Я в первую секунду вообще принял их за хлебные крошки. Потом только дошло, какие, блин, крошки на главной странице...
г). Заголовок h1 считаю слишком длинным. И я думаю, что его можно улучшить. Слово "Упаковываем" переделать в "упакуем" (оно сильнее звучит). Можно упоковывать, но лучше упоковать.
P.S. Я заметил, что многие крупные веб-студии пишут в заголовки "упаковываем смыслы". Подскажите, это действительно работает? Я без предъяв, мне интересно. Лично я противник таких заголовков и считаю, что на главной в h1 нужно писать прямо в лоб то, чем вы занимаетесь.
Мой вариант h1: "Разработка и продвижение сайтов под ключ. Опыт 12 лет".
Вариант с вашим текстом: "Упакуем смыслы бизнеса в сайты". Предлагаю воспользоваться анимацией с "напечатыванием текста". Например, typed.js. Слово "сайты" будет меняться на "айдентику" и другие слова. Это оживит первый экран, он не будет таким статичным. И сократит h1. В 99% случаев чем меньше текста, тем лучше.
Ещё лучше добавить замануху (акцию). Типо "бесплатный логотип", "SEO со скидкой 50%" и т.д.
д). Текст "Для развития в digital среде. Делаем продукты понятнее, а сервис удобнее"
Как будто висит в воздухе. И не похоже, что он висит в ключе слева внизу, ибо он висит выше кнопки "рассчитать стоимость". Лучше убрать, перетягивает внимание на себя.
е). Текст "Делаем..."
Выглядит как ссылки. Хочется кликнуть. Может, ссылками их и сделать? Или заменить на акцию, как я предлагал выше.
ё). Кнопка "рассчитать стоимость" крошечная. Сделайте больше.
2). Блок "Проведём исследования".
а). Я не сразу понял, что плюсик справа это кнопка. Добавьте ему анимацию.
Например, при появлении на экране он сделает оборот 360°.
б). В обоих блоках много текста. Их не будут читать. Разбейте их на 4 блока. Читать будет легче.
Ещё я вижу висящие предлоги. Проставьте неразрывные пробелы. В Figma есть для этого плагин SBOL Typograph.
3). Блок "Портфолио".
Охуенно.
Но много повторящегося текста типо "исследование". Я бы его убрал, меньше будет инфошума.
4). Блок "Являемся стратегическим партнёром..".
Переписал бы в "За 10 лет работы помогли более 150 заказчикам улучшить продукт и увеличить прибыль." Люди любят цифры и статистику.
5). Блок "Услуги и цены".
Круто, что указали цены и даже сроки.
Не понял: консультация у арт-директора стоит 5000 руб. Но в футере написано, что она бесплатная. Кому верить?
6). Блок " С кем мы работали"
Текст я бы переделал "с кем работаем". А то создаёт впечатление, что после первого раза вы больше не сотрудничали [из-за того, что они остались недовольны]. Пусть люди думают, что эти компании постоянно к вам обращаются.
На слайдере еле видны лого и названия. Сложно читать.
7). Блок "Можем работать".
картинки выглядят как ссылки. Хочется нажать. И облом(
Как-то так.
Владимир, искреннее огромное спасибо за такой развернутый комментарий и предложениями по дизайну. Крайне ценю разное мнение других пользователей. Постараюсь ответить по всем пунктам.
Предыстория:
Меня как арт-директора всегда беспокоила проблема выбора ЦА для посадочной студии. Делать красиво и креативно, но в ущерб конверсии или делать страницу заточенную под конверсию, более понятную и простую?
Что-то среднее - полумера. Поэтому мы сделали 2 разные страницы:
https://mikhailov.studio - основная студии как мы ее хотели сделать и как задумывали.
https://mikhailov.studio/business - страница для конверсий, рекламы с более понятными смыслами.
Именно поэтому основную страницу мы сделали так как мы хотим с умышленными нарушениями правил.
1) По первому экрану задача ссылки на телеграм и портфолио умышленно сделаны таким образом, чтобы выбиваться, а слева вместе с другим текстом и фоновым изображением уравновесить композицию.
2) Бордер под меню умышленный доп элемент линии, который повторяется на протяжении всего сайта
3) web — design. / marketing тоже является композиционным элементом, без которого становится не интересно, также он дает основной акцент направленности студии.
4) "Упакуем" специально отказались от слово, так как это обещание, для меня лично оно нишего дешевит. Словом "Упаковываем" мы подчёркиваем именно свою деятельность.
Опять же, тут каждый воспринимает под своей призмой, но для нас это не призыв, а позиционирование.
Как это работает: клиенты приходят к нам только с идеей, могут даже без названия, лого и вообще без всего. Обозначают задачу. Мы как небольшой отдел маркетинга изучаем рынок, конкурентов, сами собираем контент, дизайн, верстку в целом упаковываем продукт, который презентуем клиенту, с которым он уже потом решает задачу. Мы сами разрабатываем все от А до Я. Клиент тратит на проект не более 5 часов от начала до полной сдачи. Работает как то так. Сам сайт не является главной ценностью продукта.
Сокращения текста, акции, УТП и прочие детали ближе к странице https://mikhailov.studio/business
5) "Для развития в digital среде..." специально висит на уровне с "хлебными крошками" для уравновешивания.
6) Кнопка "рассчитать стоимость" крошечная - у нее нет задачи быть большой тут. Большая кнопка на https://mikhailov.studio/business ))
7) Плюсик справа это кнопка - да можно повесить анимацию, благодарю
Этот блок в целом уже скоро обновим немного в другом формате. Если честно, мы понимаем что его скорее не будут читать, у него другая задача) но сейчас не самый удачный визул блока, согласен.
8) За висящие предлоги кстати спасибо, я сам это нелюблю, но видимо взгляд замылился, я тоже пропустил, благодарю!
9) Блок "Портфолио" да сократим по тексту, уберем лишнее
10)Блок "Являемся стратегическим партнёром..". понимаю про что вы, но это все к странице бизнеса, там как раз цифры
11) Консультация у арт-директора стоит 5000 руб - это если вы хотите пообщаться по вашему проекту отдельно, не в рамках разработки сайта, а в целом. Бесплатная консультация это как первый легкий шаг к знакомству и началу проекта. Согласен, возможно стоит пересмотреть формулировки.
12) Блок " С кем мы работали" - в большей степени прям на продуктах мы работает обычно 1 раз, так как все собираем мы. Далее они заводят другие проекты. Но суть понял, принял, поумаем и с прозрачностью тоже, у меня тоже были такие сомнения кстати
13) Блок "Можем работать" - тут не понятно, какие ссылки ставить, поэтому оставили как есть)
В любом случае самым важным аспектом остается задача сайта, мы понимали все риски данной страницы, но нам было важно показать какой дизайн можно сделать с помощью Tilda.
Еще раз благодарен за обратную связь!!!
Не забудьте позаботиться о логотипе. Он должен быть уникальным и бросаться в глаза – в хорошем смысле этого словаБлин, ну вот никогда не понимал зацикливания на лого. В моем понимании лого вообще должно быть минималистичным настолько, насколько это возможно; и НЕ бросаться в глаза.
Вот есть лого ДНС. Состоит тупо из 3 букв: ДНС. Всё, идеальное лого.
Продумайте визуалНасчёт текста рекомендовал бы пользоваться Главредом.
https://glvrd.ru/
Сразу скажу, что это не палочка-выручалочка. Главред указывает лишь на возможные(!) ошибки в вашем тексте. Не нужно стремиться там к оценке 10 из 10.
И ещё прочитать книгу "Пиши, сокращай". Она очень сильно помогла мне прокачать скилл в сфере копирайтинга. Для новичков самое то. Я и в повседневной жизни в речи стал меньше нести воды и мэкать и бэкать.
А что касается фото, то не используйте фото со стоков. Делайте живые фото. Если у вас магазин деревянных игрушек ручной работы, то показывайте не только игрушки, но и самих мастеров.
ЗаголовокВот тут прям целиком согласен.
До сих пор многие компании пишут в h1 что-то вроде "измени свой мир!". А ты такой сидишь на первом экране, репу чешешь. И не понимаешь, о чём, бл*ть, ваш сайт?!?
Анализ конкурентовУ конкурентов ещё можно подцепить какие-нибудь фишки, касательно их продукта(акции, скидки). И сделать своё предложение лучше. А ещё это поможет сделать свой сайт не похожим на сайты конкурента.
Проработайте мобильную версиюЭто да. Когда мобильная версия загружается 10 сек или сайт не адаптивен это сразу "пока".
Клиент не получит удовольствия, гадая, что же произойдет, когда он нажмет кнопку на сайте.Это сильно раздражает в случае калькуляторов [стоииости].
Ты заходишь на сайт, отвечаешь на эти вопросы, а в конце тебе не стоимость показывают, а предложение оставить заявку. Бесит просто неимоверно.
Владимир, огромное спасибо за столь развернутый ответ! Очень ценим такие искренние комментарии!
- Про минимализм в лого:
Полностью согласен, что профессионализм - это когда минимум деталей, но они запоминаются.
К сожалению это правило в большей степени работает для крупных брендов, которые делают много разных касаний с потенциальными клиентами через PR, рекламу и прочее. Думаю обращали внимание, что чем больше становится бренд, тем минималистичнее у них каждый ребрендинг.
Для малого и среднего бизнеса естественно такие решения правктически недоступны. Так как кол-во трафика в разы меньше, а конверсия нужна здесь и сейчас. Именно поэтому все начинают накидывать кучу элементов, чтобы лого был говорящим, без пояснений, сайта или других материалов. Это конечно злит и нас тоже. Хотя бы нужно искать золотую середину.
- "Главред", "Пиши, сокращай", "Ясно, понятно" - это обязательные настольные книги для каждого, кто работает с текстом, тут полностью согласен. Мы не только начинаем для себя ведение статей, приписываемся, дальше думаю будет все лучше и интересней.
- Если мы используем картинки из интернета, то это в больше степени мемы, либо наши реальные работы, как на первой картинке статьи.
- По остальным пунктам полностью согласен, благодарю также за ваше мнение.
- Про квизы и расчеты калькуляторов есть такая тема), но тут важно понимать, что не всегда можно дать конкретную цену без понимания вводных данных и задачи, а такие квизы как показывает конверсия, очень хорошо работают (хоть и раздражают большинство). Но кстати при получении заявки ты уже более детальнее готов к созвону и не распрашиваешь человека с нуля, что его тоже радует.
Вывод в основе один, важна конкретная задача, понимание текущей точки, ЦА и стратегии))
"Запоминающийся сайт должен быть красивым. Функциональный сайт должен быть удобным. Чтобы к вашему сайту захотелось вернуться, он должен совмещать приятное с полезным."
В меню я кликнул "Услуги и Цены", но меню не ушло. Тоесть мне нужно делать ДВА клика для перехода в раздел.
Мозг мне говорит: "пожалуйста не нажимай больше не куда"
Отлично, вот мы и нашли баг на нашем обновленном сайте!)
Мы не так давно обновили дизайн страницы, а этот очевидный момент видимо пропустили!)
Огромная благодарность!
Зацепить-то оно понятно, только вот никто не рассказывает, как это сделать и что для этого нужно)