Дизайн одностраничного сайта

Создание дизайна одностраничника

Прежде всего, необходимо написать текст. Просто напишите текст, откройте Word и напишите текст. Текст заголовка, текст предложения, текст ссылки.

Проблема многих, даже опытных веб-дизайнеров, заключается в том, что они начинают свою работу с окна Photoshop, а не с текста.

Заголовок целевой страницы

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

И здесь многие веб-дизайнеры начинают терпеть полный крах. Они начинают придумывать странные заголовки типа: "Вы пришли в нужное место", "Мы - лучшие в своем деле", "Мы настолько круты, что нам даже не нужно писать о том, что мы делаем".

Вы можете подкрепить заголовок словами "Лучший, самый быстрый, самый мощный" и так далее. В результате должно получиться что-то вроде "интеллектуальные роботы-пылесосы iRobot Roomba в Москве". Не стесняйтесь, это действительно работает.

Меньше воды в тексте

Здесь кроется очень усеченная, не всегда очевидная и в то же время серьезная ошибка. Вода. Пользователь чувствует воду, читает текст, пока его не начнет сильно тошнить от вашего текста.

И даже если бы текста не было вообще, а просто четкое изображение пылесоса в заголовке с ценой и кнопкой "Заказать". - то 50 из 100 человек, вероятно, купят этот пылесос.

Как избавиться от воды? Подкрепляйте каждое утверждение ФАКТАМИ, ЦИФРАМИ и ГРАФИКАМИ. 

Не обманывайте

Часто клиент сам не понимает, к каким ужасным последствиям может привести обман и недостоверная информация, и с радостью рассказывает о некомпетентном маркетологе, а то и сам предлагает разместить такую информацию на странице.

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

Выгода/Преимущества

Напишите в документе список преимуществ, которые получит потенциальный клиент, заказав услугу или товар на целевой странице, и сделайте краткое описание каждого преимущества.

Именно здесь стоит подойти к делу серьезно и проанализировать все возможные преимущества.

Указывайте на то, что товар или услуга являются новинкой

Отзывы

Включите РЕАЛЬНЫЕ мнения. Представим ситуацию, что потенциальный клиент зашел на посадочную страницу, прочитал условия, уже готов был купить товар, но наткнулся на стандартные, переслащенные отзывы, да еще и с фотографиями, которые он уже где-то видел - либо на той же посадочной странице, либо в каком-то фотобанке, либо в результатах поиска.

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

Гарантия возврата денег

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

Оформление Landing Page

Продукт в действии

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

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

Кнопка призыва к действию на первом экране

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

Забудьте о попандерах

Не делайте много полей в формах

Не стесняйтесь показывать лица, адреса и телефоны

Это банально, но если человек видит на посадочной странице - визитку, номер телефона или фотографии сотрудников, то подсознательно он уже доверяет проекту. 

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

Размещайте логотипы известных брендов

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

Практика по созданию дизайна одностраничного сайта

Итак, после изучения частей 1 и 2 мы уже имеем некоторое представление о том, какой должна быть "правильная" целевая страница. Этого вполне достаточно для написания текста.

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

Текст

• Заголовок: логотип, изображение пылесоса, заголовок: "Интеллектуальные роботы-пылесосы iRobot Roomba в Москве", номер телефона, адрес, кнопка.
• Видеораздел: "iRobot Roomba" за работой. Под пленкой - кнопка.
• Раздел Ассортимент моделей (фото - цена - старая цена - купить):
  • Roomba 630
  • Roomba 870
  • Roomba 880
  • Roomba 450
• Гарантия. Гарантия возврата денег текст под моделями.
• Раздел "Льготы":
  • Подпись: "Преимущества перед традиционным пылесосом".
  • Подпись: "Это чрезвычайно "умное" устройство, которое само убирает комнату и по окончании возвращается на станцию для подзарядки".
  • #1 Экономия времени. Вы экономите свою энергию и время, тратя их на более приятные занятия.
  • #2. Управление не требуется. Благодаря интеллектуальной системе AWARE пылесос самостоятельно определяет оптимальный маршрут.
  • #3. компактный. Технология не занимает много места и работает без подключения к электросети.
  • #4. Самозарядка. Зарядка батареи занимает 2 часа, после чего робот сам возвращается на платформу для подзарядки.
• Обзоры разделов. Фотография - Имя - Кто это - Текст отзыва.
• Обслуживание клиентов. Фотография специалиста - Имя - Контакты (номер телефона, социальные сети).
• Раздел "Контакты". Адрес и карта с указателями.

Дизайн

Конечный результат всех усилий можно увидеть здесь.

Прежде чем приступить к разработке дизайна, давайте определим, что нужно учитывать при его создании (общие рекомендации):

• Всегда учитывайте бренд, стиль продукта, индивидуальность, если таковая имеется, постарайтесь оформить страницу в том же стиле;
• Старайтесь использовать в дизайне не более 3 цветов и несколько производных оттенков;
• Выберите приятные сочетания шрифтов для дизайна;
• Не вырезайте элементы близко друг к другу - это признак дурного вкуса;
• Обратите внимание на вертикальный ритм в размещении элементов, придайте дизайну воздушность;
• Не используйте слишком маленький интервал (высоту строки) между строками в блоках текста;
• Не используйте в дизайне фотографии низкого качества;
• Сжимайте все графические изображения с помощью TinyPng или аналогичных инструментов.
• Перед изменением размера изображения обязательно преобразуйте его в Smart Object в Photoshop, если вам нужно увеличить изображение без потери качества.

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

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

Итак, согласно тексту.

• Заголовок: логотип, изображение пылесоса, заголовок: "Интеллектуальный робот-пылесос iRobot Roomba в Москве", номер телефона, адрес, кнопка.

В верхней части логотипа, с правой стороны - номер телефона и адрес. Разместите фоновое изображение так, чтобы пылесос находился слева (первые 6 колонок сетки), а заголовок целевой страницы - справа. Дополнительно разместите кнопку отправки и псевдоссылку для просмотра видео.

• Видеораздел: "iRobot Roomba за работой". Под видео есть кнопка.

У раздела есть заголовок и подзаголовок, не забудьте.

• Раздел "Модельный ряд" (Изображение - Цена - Старая цена - Купить).

В следующем разделе "Модельный ряд" будут отображаться 4 устройства. Новая цена, Старая цена и кнопка "Заказать".

Старая цена информирует посетителя о том, что действует система скидок и что он может приобрести устройство по более низкой цене. Каждая функция размещается в 3 столбцах сетки.

• Гарантия. Текст гарантии возврата денег в рамках моделей. Этот раздел очень желателен, но если у продавца нет этой опции в продаже, вы не сможете ее придумать.
  
  
  
   
• Раздел "Преимущества":

Мы также реализуем этот раздел в сетке как строку модели, но мы не используем отступы в сетке Bootstrap. При наведении курсора блоки меняют свой вид, изображение плавно увеличивается (в макете).

• Раздел "Обратная связь". Фотография - Имя - Кто это - Текст отзыва.

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

• Обслуживание клиентов. Фотография специалиста - имя и фамилия - контакты (телефон, социальные сети).

Обязательный атрибут целевой страницы. Не поленитесь сделать реальные фотографии поддержки продукта или услуги. 

• Контактный раздел. Адрес и карта с этикеткой.

Рассказать друзьям: