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

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

Прежде всего, необходимо написать текст. Просто напишите текст, откройте 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 колонок отведены под само свидетельство. Обзоры должны содержать заголовки:

 

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

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

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