Эти 10 советов ниже дают наиболее распространенную картину для пользователей, чтобы помочь улучшить их дизайн целевой страницы.
Что такое landing page (целевая страница)?
Прежде чем мы начнем, давайте определим несколько вещей ...
Landing Page стремится обеспечить идеальное (минимальное) количество информации для пользователя, чтобы он мог принять решение и действовать. Эта страница сайта часто рассматривается как автономный сайт с прокруткой, который не содержит дополнительных страниц (например, об услугах, контактах).
Целью лендинга является поощрение взаимодействия пользователя (регистрация, загрузка или продажа) без нажатия пользователем на другие страницы. Это успешное взаимодействие также называется преобразованием. Эта статья может быть вашим руководством к действию для увеличения конверсии.
Совет 1 - Держите бренд
Несоответствия в вашем бренде влияют на первое впечатление и могут даже создавать путаницу. Вот возможные варианты для бренда «One Page Love»:
- One Page Love (верный вариант)
- Onepagelove
- ONEPAGELOVE
- onepagelove
- One Page love
- One-Page Love
- Onepage Love
Вот некоторые популярные:
- WordPress (1 слово, 2 заглавные буквы)
- MailChimp (1 слово, 2 заглавные буквы)
- Stack Overflow (2 слова)
- Facebook (1 слово)
Избегайте только больших букв, если вы можете выбрать один из вариантов, то всегда и придерживайтесь его. Не допускайте перехода названия вашего бренда на вторую строку в любом из ваших заголовков.
Совет 2 - Не пренебрегайте Retina оптимизацией
Во всяком случае, вам абсолютно необходимо иметь Retina оптимизированный логотип. «Пикселированный» логотип влияет на первые впечатления. Это в основном означает, что ваш логотип должен быть вдвое больше на экранах Retina или должен быть в формате Vector, т.е. SVG. Обратите внимание на «пикселированный» логотип слева и четкий логотип с retina оптимизацией справа:
Совет 3 - Больше отступов
Большинство пользователей просто вскользь просматривают ваш контент. Если вы соберете все вместе, то они потратят еще меньше времени на просмотр вашей страницы.
81% людей просто просматривают контент, который они читают в Интернете. Эксперт по юзабилити Jakob Nielsen сообщает, что средний пользователь читает от 20 до 28 процентов слов во время посещения.
Пробел часто технически называют отрицательным пространством. Но это действительно передышка для вашего контента, а также для пользователя. Это замедляет их и увеличивает фокус на содержимом.
Мы говорим о «плавном понижении» отступов с десктопной версии на мобильную (например, рабочий стол 40px, 20px mobile), но как насчет «грациозной модернизации» на огромных мониторах? Какая радость видеть оптимизацию с щедрым дополнением (наряду с большими шрифтами) при больших разрешениях:
Совет 4 - Согласованный вертикальный интервал
Таким образом, мы обсудили сетки (обычно используем отступы по горизонтали), но мы часто игнорируем важность вертикального отступа на Landing page. Он может стать довольно важным моментом с такими вещами, как Vertical Rhythms и Baseline Grids,но что относительно последовательного разделения разделов и отступов между элементами?
Вот классическая страница Landing Page:
Теперь обратите внимание на согласованность в вертикальном расстоянии, обратите внимание, что меньшие отступы составляют половину больших отступов по вертикали между элементами:
Совет. Сохраняйте интервал в соответствии с постоянными коэффициентами. Пример: если мы установили 50px-кнопку, тогда установите нижние отступы раздела также на расстоянии 50px и отступы в больших блоках по 100px. Согласованность является ключевым моментом, соблюдайте пропорции.
Совет 5 - Меньше изображений, но только лучшие
Для полного изменения эмоций вашего пользователя может потребоваться одно хорошее изображение. К сожалению, это относится и к одному плохому изображению.
«Простота означает достижение максимального эффекта с минимальными средствами». ~ Д-р Коичи Каванайте
Хорошие образы создают доверие. Доверие приводит к конверсиям. Потратьте деньги. Сделайте фотосессию своей команды, вашего продукта, вашей еды. Выхлоп от качественной фотосессии всегда гарантирует новых покупателей.
Совет. Если у вас есть выбор, спросите себя, действительно ли каждое изображение отражает вашу историю или дополняет ваш бренд. Устраните все ненужные.
Совет 6 - Меньше шрифтов, больше жирностей
Различные жирности в пределах одного семейства шрифтов могут действительно усилить структуру заголовка и абзаца. Это в сочетании с качественным контрастом текста создаст прекрасный пользовательский интерфейс для чтения.
Совет. Попробуйте придерживаться двух семейств шрифтов (максимум три) на вашей целевой странице.
Совет 7 - Больше контраста цвета текста
Избегайте наличия чистого черного ( #000000
) текста на #FFFFFF
фоне белой страницы. Сгладьте такое отношение с небелым фоном и серой текстовой иерархией. Пример:
#f8f8f8
задний план#111111
основные рубрики#222222
подзаголовки#444444
цитата#666666
блочные кавычки
Иллюстрированный справа:
То же самое касается чистого белого цвета на черном. Контраст может быть слишком сильным. Обратите внимание на более мягкую цветовую схему с темно-серой цветовой гаммой:
Совет. Экспериментируйте с совершенно разными цветовыми палитрами на вашей странице лендинга. Начните с принятия основных цветов бренда, а затем создайте более мягкую иерархию цветов. Качественная цветовая схема мгновенно замечается пользователями и может усилить ваш брендинг.
Совет 8 - Убедитесь, важные кнопки вашего сайта - это макет Ace-drawing Maverick
Попробуйте более мягкие пастельные цвета для фона, затем используйте цвет Maverick (выделяющийся), такой как оранжевый, красный, зеленый или синий для ваших кнопок призыва к действию. Сохраняйте стиль кнопок, он напомнит посетителю, что вы хотите, чтобы он делал в ходе просмотра страницы.
Совет 9 - Сглаживание шрифтов
Невероятно, как самые маленькие настройки могут трансформировать проект Landing Page. Этот пример показывает тонкий кернинг только в заголовках:
Совет. Различные семейства шрифтов выглядят по-разному, некоторым нужно больше кернинга, а некоторые ничем не изменить.
Добавив всего несколько строк кода CSS, вы можете действительно отполировать проект Landing Page. Вот код, который я использую в большинстве своих проектов:
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
-moz-font-feature-settings: "liga" on;
}
Различие видно ниже:
Подсказка 10 - Только лучшее
Ранее мы сокращали число изображений, но не стоит останавливаться только на них. Мы не пытаемся убедить пользователя, что мы лучше, чем мы есть. Необходимо просто показать на landing page только самое важное.
Вдумайтесь, что каждый элемент контента должен внести свой вклад:
- 2 блестящих отзыва - не 8 средних.
- 2 выделенные сильные характеристики, с четырьмя меньшими по значению ниже - не сетка из 12.
- Ваши 8 лучших свадебных фотографий - не последние 4 года работы.