Как сделать дизайн для лендинга

Админ

15 марта 2018

Интернет
лендинг

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

Что такое лэндинг?

Landing page переводится, как «посадочная страница». Этот раздел создаётся для сбора контактов посетителей. Разумеется, на ней обычно размещается продающий текст о товаре или услуге. Как правило, пользователь попадает на посадочную страницу с сайтов-доноров, социальных сетей, через email-письмо (откуда и название landing page).

Следует отличать лэндинги от карточек товара интернет-магазина. В ИМ есть тысячи страниц, контактные данные собираются лишь в «корзине». Карточки товара при этом шаблонные. Лэндинг – это самостоятельный сайт, на котором имеется вся информация, которая нужна пользователю для принятия решения о покупке.

С точки зрения дизайна можно разделить все лэндинги на несколько групп:

  1. Автономная страница. Лэндинг в этом случае представляет собой одностраничный самостоятельный сайт. Наиболее простой в оформлении вариант, так как дизайнерские ходы ничем не ограничены. Имеет высокую конверсию.
  2. Микросайт. Лэндинг, состоящий из 2-5 страниц. Обычно такие порталы создаются для сложных товаров и услуг, которые приходится подробно описывать. Довольно простой в оформлении, однако здесь важно соблюдать единство стиля на всех страницах.
  3. Лэндинг на основном сайте. Посадочная страница является частью главного портала. Довольно сложный вариант в оформлении, так как надо соблюдать дизайн основного сайта, а он часто плохой. При этом структура лэндинга должна включать различные элементы главного портала (шапку, футер), которые нередко отвлекают внимание пользователя.

Какие особенности дизайна присутствуют в лэндинге

Landing page оформляется согласно стандартным правилам графического дизайна. Однако эта страница имеет некоторые особенности, которые задаются нестандартной задачей лэндинга – привлечь и удержать внимание, а также продать товар или услугу.

  1. Акцентирование на нужных элементах. Для успешной продажи нужно довести ключевые аргументы до посетителя, для чего следует сделать акцент на некоторых блоках и фразах. Поэтому в лэндингах часто применяются контрасты и другие приёмы, которые выделяют определённые места страницы.
  2. Разбавление текста картинками, иконками, пространством. Особенностью лэндинга является то, что читатель далеко не всегда хочет его читать. Поэтому нужно разбавлять текст фотографиями, графическими и анимированными элементами, следить, чтобы пространство было не загружено.
  3. Кнопки. Им нужно уделять особое внимание, ведь именно нажатие на них является целевым действием. Кнопка обязательно должна быть крупной, красивой и контрастной. Текст на ней делать во всю ширину не надо, он должен подчиняться обычным правилам графического дизайна.
  4. Стоковые изображения нужно применять с осторожностью. Обычно картинки из фотобанков использовать можно не раздумывая, но в лэндинге нужно учитывать не только эстетическую составляющую, но также правдоподобность. Для блока с отзывами лучше подбирать фото не топ-моделей, а обычных людей.
  5. Скорость загрузки. Она актуальна на каждой странице у любого сайта. Но отличие лэндинга состоит в низкой заинтересованности посетителей, поэтому скорость загрузки должна составлять максимум 2-3 секунды. В идеале страница должна отображаться мгновенно.

Как разработать уникальный дизайн лэндинга самостоятельно

Можно воспользоваться различными конструкторами и CMS системами. Их очень много, поэтому сервисы для создания landing page лучше рассматривать отдельно.

В первую очередь нужно выбрать тип дизайна. Он делится на несколько видов:

  1. Минималистический дизайн. В этом случае убираются все ненужные элементы, при этом они упрощаются по оформлению. На странице создаётся очень много свободного пространства.
  2. Фотографический дизайн. Так как основной элемент оформления – фотография, то к ней предъявляется множество требований. Она должна быть интересной, высокого разрешения и от профессионального фотографа.
  3. Текстурный дизайн. В этом случае каждый элемент выполнен в виде какой-то текстуры: дерева, железа, ткани и прочего. Такой приём очень хорош для лэндингов, которые продают товар с выразительной структурой (одежду, прибор, пищу).
  4. Типографический дизайн. В нём преобладают шрифты и буквы. В идеале на странице должны присутствовать лишь они. Крайне сложный способ оформления, так как в нём идёт сознательный отказ от множества приёмов дизайна.
  5. Иллюстрационный дизайн. Основным способом украшения являются иллюстрации. Они задают определённый стиль «ручной работы» и аляповатости. При этом они могут сочетаться с текстурным и типографическим оформлением.
  6. Анимированный дизайн. В этом случае создаётся большое количество анимированных элементов, которые движутся самостоятельно или реагируют на мышку. Такой тип для дизайнера довольно простой, но крайне сложный для верстальщика.

При создании элемента любого размера и уровня – от крупного блока до отдельной буквы – нужно соблюдать стандартные правила дизайна:

  1. Шрифты. Они бывают с засечками и без. Практика показала, что для офлайн-текстов больше подходят буквы с засечками, а для онлайн-статей – без них. Для лэндинга нужно выбирать 2-3 варианта шрифтов. Один – для обычных текстов, второй – для заголовков.
  2. Сетка. Все блоки должны ставиться по сетке bootstrap. Её задача – выровнять элементы страницы так, чтобы всё содержимое выглядело аккуратным.
  3. Пространство. Налепленные друг на друга тексты смотрятся крайне не эстетично, поэтому для лучшего дизайна следует оставлять больше пространства между блоками.
  4. Цвета. На сайте допускается использование 2-3 главных цветов, если не считать белого, чёрного и серого оттенка. При этом стоит избегать чистых насыщенных кислотных тонов, они сильно режут глаза, мешают читать.
  5. Баланс и симметричность. Симметричность желательно соблюдать всегда. Если это невозможно сделать, то нужно чем-то уравновешивать пространство для создания баланса.
  6. Ритм. Старайтесь соблюдать заданный изначально ритм. Нередко блоки делают разных размеров и цветов. Их смена при прокрутке должна быть ритмичной.

Отдельные приёмы, которые можно применять лишь для некоторых элементов:

  1. Контраст. Его можно использовать для выделения каких-то блоков, кусков текста, иллюстраций, кнопок. Контраст может быть по форме, размеру, цвету, текстуре.
  2. Граница. Выделить объект иногда лучше границей, а не контрастом. Границу всегда нужно делать в стиле выделяемого элемента, а не фона.
  3. Пространство. Лучший способ выделить объект, не выделяя его, – это оставить вокруг блока много пространства.
  4. Текстура. Интересный приём, который нужно применять аккуратно, не надо увлекаться. Текстура обязана быть неяркой и нерезкой, она не должна оттягивать на себя внимание.
  5. Составные конструкции. Приём заключается в том, что одни элементы составляются из других. Например, буквы в логотипе можно сделать из веток и листьев.

При этом следует придерживаться метода «от большего к меньшему». Это означает, что мы создаём сначала общий макет, а потом прорабатываем более мелкие детали. То есть первым делом размещаем и оформляем крупные блоки с текстом, большие фотографии, форму обратной связи. Затем уделяем внимание картинкам и тексту внутри какого-то блока. А в конце, например, экспериментируем с межстрочным интервалом и размером шрифта.

Стоимость дизайна лэндинга

Цена зависит от количества экранов, сложности ТЗ и запросов самого веб-дизайнера. Разберём каждый пункт отдельно:

  1. Длина лэндинга измеряется экранами. Логично предположить, что чем их больше, тем дороже дизайн. Изменение цены обычно пропорционально длине.
  2. Сложность ТЗ зависит от количества элементов на странице. Минималистические лэндинги стоят дешевле, так как в них меньше деталей. Иллюстрационный дизайн потребует ручной прорисовки, поэтому будет значительно дороже.
  3. Запросы дизайнера – самый сложный компонент стоимости. Можно найти хорошего исполнителя, который согласится сделать работу бесплатно для своего портфолио. При этом существуют веб-дизайнеры, требующие десятки тысяч за одну страницу.