Кейсы

О студии

Блог

Контакты

12+

Карта

Тех. поддержка (на тильде)

8 (800) 555-01-19

Обсудить задачу

Сайты на Tilda

Разработка сайта

Разработка дизайна

Проектирование

Тех. поддержка (на тильде)

Редизайн сайта

Детские ошибки в дизайне лендинга

Блог

Главная

Детские ошибки в дизайне

маркетинг

Следите за внутренней кухней студии в нашем телеграм-канале

Содержание

1. Слабый первый экран

2. Слабые призывы к действию (CTA)

4. Дизайн ради дизайна

3. Перегруженный дизайн

5. Дизайн не адаптирован

6. Неудачная структура

9. Мало внимания отзывам

7. Корявая навигация

8. Длиннющий ленд с кучей информации

12. Проблемы с текстом

10. Игнор общих правил дизайна

11. Стоковый контент

14. Слишком много полей ввода в формах

13. Назойливые формы и поп-апы

Мы разобрали самые частые ошибки при создании дизайна лендинга. Готовы поделиться, как их избежать, чтобы ваш сайт реально работал, а не просто «красовался».

1. Слабый первый экран

На первый экран лендинга у дизайнера часто уходит 1−2 рабочих дня. И не зря: ведь первое впечатление уже не изменишь.

У вас есть всего 3−4 секунды, чтобы зацепить внимание пользователя. Если на первом экране винегрет из заголовков, преимуществ и кнопок, пользователь может закрыть сайт, так и не поняв, что ему предлагали.

Другая крайность — вставить на первый экран одну высокопарную фразу, чтобы напустить интригующий туман. Это хорошо работает на фестивальных проектах и у узнаваемых брендов. У обычного бизнеса с таким подходом интриги не будет, как и лидов.

Вот типичные ошибки первого экрана:

Заголовок слишком длинный или неясный, из-за чего непонятно, что здесь предлагают.
Нет призыва к действию (CTA), главная кнопка спрятана или не бросается в глаза.
Явный перегруз по дизайну или наоборот, излишняя минималистичность, делающая первый экран неинформативным.

Как исправить:
Фокусируйтесь на одном ярком CTA. Не перегружайте первый экран, сделайте его простым и понятным. Не заставляйте пользователей пробираться сквозь текстовые джунгли, чтобы понять, что ему предлагают.

Бесполезный первый экран без CTA

2. Слабые призывы к действию (CTA)

Это может прослеживаться по всему лендингу. Маленькие кнопки, неудачные заголовки и отсутствие акцента на них приводит к тому, что пользователь просто не понимает, что нужно сделать и что он может от вас получить.

Как исправить:
Сделайте кнопки CTA большими, контрастными и понятными. Одно четкое действие — один клик. Используйте заголовки с глаголами (получите, закажите, узнайте больше, посмотрите).

Здесь в кнопках указаны сразу два действия. Одно визуально считывается как ошибочный выбор (красная кнопка), второе — как правильный (зеленая кнопка). Намешана куча инфы, в фактоидах неравномерное распределение текста

3. Перегруженный дизайн

Бывает, что лендинг превращается в ярмарку цветов и элементов: все пестрит, напрягает глаз. Сложно считывается контент и посыл лендинга. Часто здесь же появляются неоптимизированные видео и картинки, из-за чего страница загружается медленно, особенно на мобильных.

Как исправить:
Минимализм — ваш лучший друг. Оставьте только те элементы, которые действительно помогают понять продукт и принять решение. Оптимизируйте картинки и видео для быстрой загрузки. Но важно не борщить с оптимизацией, чтобы не потерять в качестве. Всегда можно найти решение, когда картинка/фото будет выглядеть качественно, при этом весить немного (сжатие или смена формата).

Сплошная каша на первом экране, разные выравнивания текста, отступы скачут, белый текст на зеленом фоне больно читать, прыгающие заголовки

4. Дизайн ради дизайна

Это вообще одна из главных ошибок при создании лендинга. Часто дизайнеры, особенно начинающие, стараются выжать из проекта максимум в плане дизайна даже там, где это не нужно. В итоге лендинг превращается в арт-объект, но никак не в инструмент для продаж.

Если у лендинга плохо проработаны маркетинг и тексты, а хорош только дизайн — будет беда. Посмотрите нашу статью про этапы создания лендинга и проверьте, все ли этапы вы уже прошли.

Много анимации, сложного взаимодействия с контентом

Анимацию использовать можно и нужно, но с умом. Цель — добавить динамики, сделать акцент, чтобы пользователь зацепился за нужный тезис. А куча неподконтрольной анимации, прыгающие карточки, усложняющие считывание контента — только раздражают пользователя.

Дизайн, который не подходит под нишу

Выделился неожиданным дизайном, чтобы отстроиться от конкурентов? Молодец! Только вот заявки перестали приходить. Почему? Magic…

Сложный визуал

…который тянет за собой использование большого количества кода (тут больше имеем в виду создание лендингов на Тильде). Tilda выбирают как легкий и гибкий инструмент, часто для проверки гипотезы. Важно понимать, что если клиенту нужно проверить гипотезу, ему нужен гибкий продукт, чтобы провести А/Б тест. Лендинг на Тильде — это живая субстанция, а дополнительным кодом и функционалом можно убить вариативность проекта.

Как исправить:
Дизайн лендинга — это не самоцель, а инструмент, подстегивающий продажи. Поэтому важно коннектить дизайн с маркетингом. Сначала подумайте о пользователе, а уже потом о красивых картинках. Важен баланс: стильный, но простой дизайн, понятный функционал и сильное маркетинговое послание.

5. Дизайн не адаптирован под разные устройства

Когда лендинг не адаптируется под смартфоны или планшеты, это катастрофа, прям грубая ошибка в дизайне и верстке. В 2024 году большинство пользователей заходит на сайты с мобильных устройств. Если ваш сайт некорректно отображается на экранах поменьше — вы теряете клиентов.

Как исправить:
Следите за тем, чтобы ваш лендинг выглядел прилично и на десктопах, и на мобильных устройствах.

Вместо нормальной мобильной версии сделали уменьшенную копию десктопной

6. Неудачная структура

Многие пользователи уже привыкли к плюс-минус стандартной структуре лендинга. Поэтому отсутствие некоторых блоков может их смутить. Например, если человек не нашел блок «что вы получите», то уже не понимает, для чего нести вам свои денежки.

Как исправить:
Делайте четкую структуру с ключевыми блоками. Если не знаете, как организовать блоки, — посмотрите наше руководство по оптимальной структуре лендинга.

7. Корявая навигация

Да, лендинг — это не многостраничник. Но даже для одной страницы можно сделать аккуратную и понятную навигацию. Вместо этого меню в лендингах иногда прячут так, будто это тайна вселенной.

Скрытая в бургер навигация. Учитывая, что лендинг должен быть понятным и прозрачным, не стоит скрывать навигацию в бургер, заставляя пользователя делать лишний клик. Представим, что пользователь зашел на лендинг в первый раз: через беглый взгляд на меню ему сразу видно, о чем этот лендинг. Удобно это и для того, кто заходит на лендинг не впервые: благодаря меню он может сразу попасть на нужный блок.

Якорь с первого экрана сразу на тарифы. Есть такой грешок у лендингов в инфобизе. В главную кнопку на первом экране зашивают якорь на блок со стоимостью/тарифами, который находится ближе к концу ленда. Так пользователь сразу попадает в конец, пропуская все прогревающие блоки. Он чувствует себя потерянной сарделькой, да еще и оскорбленной, из-за того что от него нужны только деньги.

Как исправить:
Если есть возможность сделать открытое меню, лучше выбрать именно его, а не бургер. Пускай меню будет всегда на виду — так пользователи смогут легко вернуться к нужным блокам.

8. Длиннющий ленд с кучей информации

Пользователи редко читают лендинг от начала до конца, особенно если он километровый. Некоторые пытаются выложить на одну страницу все, буквально все, что известно о продукте. В итоге размазывают инфу на 20−25 блоков.

Лендинг получается похожим на лонгрид, который нужно скроллить до бесконечности, чтобы дойти до стоимости и описания услуг. Если совместить это с корявой навигацией, о которой мы говорили выше, получается вообще «‎красота».

Как исправить:
Каждый блок лендинга должен быть компактным. Информацию можно и нужно сокращать, особенно если в разных блоках повторяются похожие смыслы.

9. Мало внимания социальным доказательствам

Пользователю мало обещаний, ему нужны доказательства, что вы действительно решаете такие проблемы, как у него. Без отзывов, фото или видео лендинг будет вызывать больше вопросов, чем доверия.

Если у вас есть социальные доказательства, нужно показать их ярко, акцентно, выделить этому блоку достаточно места, а не прятать в кнопки или слайдеры. Тут не время скромничать.

Как исправить:
Социальные доказательства должны быть яркими и наглядными. Пускай это будет не просто текст: покажите результаты, за которые не стыдно. Это могут быть кейсы, отзывы с фото и видео, фотографии до-после, фото продукции, фото с производства или из вашего офиса. В общем, доказательства, что вы существуете не только на этом лендинге.

10. Игнор общих правил дизайна

Если углубиться в правила дизайна, то можно заметить детские ошибки, которые выдают в дизайнере лендинга новичка.

Несочетаемые шрифты. На странице встречаются 4−5 шрифтов с кучей разных начертаний, которые не дружат между собой. В итоге получается визуальная каша.
Разноплановые кнопки. Часто бывает так, что за один лендинг можно встретить 3 паттерна кнопок, с разными цветовыми акцентами. Не надо так.
Нет единого стиля отступов. В каждом блоке они скачут: где-то 10px, где-то 120px и т. д.

Беда с системой отступов: непонятно, что к чему относится

Смешанные стили. Минимализм, флэт, графика… Когда нет целостности проекта и общего визуального языка — выходит хаос. Бывает, некоторые студии намеренно делают вырвиглаз-проекты, но в них есть общая задумка, и она считывается.
Куча цветов. Есть проекты, где использование 5−8 цветов может быть оправдано (например, есть много цветов на логотипе компании, и каждая услуга ассоциируется со своим цветом). Но большинство новичков не чувствуют эту грань и могут сделать 10−15 цветов на проекте, повторяя какой-нибудь референс.

Винегрет из шрифтов и графики, много информации, глаза просто разбегаются. Даже то, что важная информация обернута в шейпы, не спасает ситуацию

Неровная сетка или ее отсутствие. Лендинг может казаться «разваленным» из-за того, что дизайн не выстроен по сетке. Хотя сетка — не инструмент создания дизайна, а скорее инструмент выравнивания, ее стоит использовать. Выстраивать дизайн лендинга не по сетке — одна из частых ошибок в лендингах.
Выравнивание текста по центру или по правому краю. Обычно это прям редфлаг, если говорить о стандартных маркетинговых лендингах. Читать такой текст неудобно. Исключение — разве что пара заголовков, если это вписывается в общую концепцию, или полностью креативные лендинги, где считывание текста не так важно.

Первый блок не выглядит как первый экран. Сетка скачет, нет меню. Визуальный хаос

Как исправить

Учите матчасть. Или наймите нормальных ребят на дизайн, например, NAJES. По кнопке ниже смотрите, как мы работаем над дизайном лендингов.

Смотреть

11. Стоковый контент

Это прям брр. Ладно еще использовать 1−2 картинки среди 20 живых, но заменять ими все — не надо. Это несерьезно и не вызывает доверия.

Как исправить:
Если нет контента, то его надо сделать: провести фотосессию продукции, команды, офиса. Если нет возможности сделать контент — всегда есть альтернатива в виде графики или упора на текст.

Стоковые фото смотрятся плохо, не вызывают никаких эмоций. Висячие предлоги в заголовках выглядят неаккуратно

12. Проблемы с текстом

Написание текста не входит в обязанности дизайнера. А вот то, как этот текст будет выглядеть на лендинге, — это точно про дизайн.

Нечитабельный текст. Если фон и текст слабо контрастируют, получается каша. Поберегите зрение пользователей, оно и так у многих из нас хромает.
Слишком мелкий шрифт (меньше 12px). Снова туда же: пожалейте глаза пользователей.
Текст перекрывает важные элементы визуала. Например, заголовок наезжает на товар или на лицо. Такие вещи нужно тщательно проверять, особенно на мобильных.
Очень много текста. Каждый информационный блок можно подать по-разному: 1) оформить его одной простыней либо 2) сделать удобные подзаголовки, выстроить иерархию, сделать выделения цветом/размером элемента. В первом случае блок скорее всего будет пролистан. Во втором — будет достаточно секунды, чтобы увидеть главную информацию и понять, нужно ли вчитываться поглубже.
Орфографические ошибки. Без каминтареев.

Как исправить:
Разбейте текстовые блоки на короткие абзацы, оберните их в шейпы (прямоугольники), добавьте подзаголовки, списки и визуальные акценты. Сделайте текст лаконичным, а ключевые мысли — понятными с первого взгляда. И да, наймите корректора, это недорого.

Центрированная портянка текста, нет визуальной структуры и заголовков, такое тяжело читать

13. Назойливые формы и поп-апы

«‎Купи-купи-купи, не уходи, подпишись, возьми хоть что-то, хоть бесплатно». Не во всех нишах нужны агрессивные продажи.

Дизайн с навязчивыми выскакивающими поп-апами на всю страницу скорее отталкивает. А если еще и сделать кнопку «‎Закрыть» почти невидимой — все, считайте вас прокляли.

Как исправить:
Если поп-апы необходимы, делайте их аккуратными, в гармонии с общим дизайном лендинга. И пожалуйста, передайте разрабу и маркетологу, что лучше, чтобы поп-ап не выпрыгивал на пользователя сразу же, как он заходит на страницу. Дайте человеку осмотреться, привыкнуть что ли.

Всплывающие окна как отдельный вид *******

14. Слишком много полей ввода в формах

Не стоит запрашивать у пользователя всю информацию о нем, если это первое касание (а на лендинге чаще всего так).

Многим элементарно будет лень заполнять полное ФИО ПОЧТУ ТЕЛЕФОН ДЕВИЧЬЮ ФАМИЛИЮ МАМЫ etc., чтобы ему просто перезвонили. Если по задумке пользователь должен заполнить длинную анкету — оформите ее в виде квиза, чтобы новые поля появлялись по мере заполнения.

Как исправить:
Сделайте форму короткой. Достаточно запросить имя и контактные данные. Чем меньше данных нужно на первом этапе, тем выше вероятность, что пользователь ее заполнит. Если нужна объемная форма — сделайте ее пошаговой, поделив на несколько мелких этапов.

Куча полей, заголовок нерелевантен кнопке

Ошибки лендингов вроде кривой навигации, незаметных CTA или визуального хаоса могут стоить вам клиентов. Пускай все работает в связке: тексты должны убеждать, дизайн — поддерживать, а не отвлекать, а верстка — держаться на месте и не двигаться.