Курс «Создание Landing Page»
Принципы дизайна лендинга
Tilda Publishing
В предыдущей главе мы разобрали из каких типовых элементов состоит посадочная страница. В этой главе рассмотрим, как оформить посадочную страницу: общий стиль, выбор цветов, шрифтов, изображений. Обратим внимание на частые ошибки в дизайне лендинг пейдж.
Веб все упростил. Создать аккуратную посадочную страницу, которая выглядит профессионально, работает на результат и не раздражает взгляд, не так сложно. Поняв основные принципы дизайна лендинга, вы сделаете страницу самостоятельно. И ее не будет стыдно показать друзьям-дизайнерам.
Из чего состоит лекция
1. Смысловые секции
2. Визуальная иерархия
3. Призыв к действию и формы
4. Обложка
5. Навигация
6. Цвет
7. Шрифт
8. Изображения
9. Иконки
10. Анимация
11. Общий стиль и аккуратность
12. Закрепим материал
Смысловые секции
Посадочную страницу можно сравнить с презентацией, которая состоит из слайдов или секций.
Во второй главе мы уже использовали понятие секций, когда составляли структуру сайта: оффер, о проекте, для кого, отзывы, преимущества, расписание, блок призыва к действию, — все это секции лендинга.

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

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

Чтобы секции не склеивались, сверху и снизу нужны отступы. Содержимое отдельной секции должно быть окружено «воздухом».

Отступы вообще важны для восприятия страницы в целом. Одинаковые и достаточные отступы между секциями делают страницу более структурированной.

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

Дополнительный выразительный прием — одну из секций (или две, если лендинг длинный) выделить цветом и сделать яркой: желтой, оранжевой, синей. Но не все секции раскрашивать, а, например, одну из пяти.

Разделители
Разделитель — линия или фигурная граница — еще один способ обозначить начало или конец секции.

Чтобы лендинг выглядел аккуратно, не рекомендуется использовать несколько разных разделителей на одной странице. Например, фигурная граница в виде зигзага будет спорить с границей-скосом.
На странице два вида фигурного разделителя — слишком много стилей оформления
Использован один вид фигурного разделителя — страница выглядит аккуратно
Размер заголовков секций
У каждой секции есть заголовок. Заголовок секции может состоять только из заголовка или заголовка и подзаголовка. Заголовки задают ритм и структуру страницы и помогают понять, где начинается новая мысль.
Заголовки разных секций должны быть одинакового размера.
Например, если первый заголовок «О курсе» размером 62px, то заголовок следующей секции «Для кого курс» также должен быть 62px — так страница будет аккуратной, а новая секция (и новая мысль) будет легко читаться.
Секции с заголовком
Секции с заголовком и подзаголовком
Чтобы структура страницы хорошо считывалась не только людьми, но и роботами, назначьте заголовку на обложке тег H1, а заголовкам секций тег H2. Для поисковых систем это будет знаком хорошей разметки и правильной структуры страницы.
Гид по SEO: продвижение сайта. Как добавить тег H1, H2, H3
Цвет заголовков секций
Заголовки секций могут быть цветными. Это редкий прием, так как цветные заголовки сложнее вписать в общий стиль страницы.
Не уверены — не раскрашивайте.
Если же акцент в виде цвета необходим, то используется тот же принцип, что и с размерами — цвет для заголовков секций должен быть одинаковым.
Сочетаемость блоков
Мы заметили, что страницы, в которых несколько секций подряд используются колонки, сложны для восприятия.
Самый неприемлемый вариант, когда чередуются секции с разным числом колонок, например, 2, 3, 4.
Более аккуратно, когда в соседних секциях одно и то же число колонок, например, три. Но такая страница по-прежнему выглядит разбалансировано.

Если опыта немного, лучше избегать использование колонок: с ними тяжело справиться. Либо чередовать текст, колонки, текст. То есть когда после одной колонки текста расположены три колонки с иконками, после них ключевая фраза с картинкой на фоне, затем 3 колонки или текст в одну колонку и так далее.
Подряд использованы секции с 2, 3 и 4 колонками — такая страница выглядит хаотично
Во всех секциях по 3 колонки — такой вариант более аккуратный, но все еще тяжелый для восприятия
Секции с 3 колонками чередуются с секциями с одной широкой колонкой — страница выглядит понятно, информация легко считывается.
Нестандартные секции
В начале мы говорили о том, что секция — это заголовок плюс содержание. Это верно для большинства случаев. Однако иногда встречаются секции, которые не вписываются в это определение.

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

Примеры нестандартных секций, которые содержат отдельную мысль:
Визуальная иерархия
Визуальная иерархия — выразительные приемы, с помощью которых дизайнер помогает человеку понять, что главное, а что второстепенное.
Визуальная иерархия нужна, чтобы на лендинге не было хаоса. «Что предлагают, как это использовать, зачем это нужно», — вопросы, на которые человек должен получить ответы мгновенно. Помогают в этом визуальные инструменты.
Инструменты для создания иерархии
Размер: чем крупнее, тем главнее
Пример: общий заголовок секции крупнее, чем заголовки внутри секции. В этом случае визуальная иерархия помогает понять, что мелкие заголовки схожи по смыслу, а общий заголовок их объединяет.

Но нужно обратить внимание на контраст. Крупное должно быть действительно крупным. Если заголовок второго уровня 22px, а заголовок первого уровня 24px, то акцент слишком слабый, иерархии нет. Хорошо заметна разница размеров в 1,5 — 2 раза.
Общий заголовок секции заметно крупнее, чем заголовки внутри секции
Цвет: чем ярче, тем заметнее
В контексте визуальной иерархии под яркостью мы понимаем не оттенок цвета, а контраст и количество цвета на странице по отношению к основной гамме.
Если весь текст на странице покрасить в малиновый, заметнее он не станет.
Зеленый заголовок, синий текст и оранжевая кнопка будут спорить между собой и потеряются все трое. Примеры утрированные, но каждый раз, когда хочется добавить еще один цвет, стоит задуматься, нужно ли это делать.

Вот если на фоне общего цвета появляется контрастный, такой элемент становится заметным, он говорит: «Я важный».
Яркая кнопка на нейтральном сером фоне выделяется за счет яркого и контрастного фону цвета
Группировка: ближе по расстоянию — ближе по смыслу
Если элементы расположены рядом, значит они связаны друг с другом по смыслу. То есть, чтобы объединить элементы в группу, нужно уменьшить расстояние между элементами внутри группы и увеличить снаружи.
Рассмотрим на примерах:
По содержанию заголовок относится к нижнему абзацу, но визуально он связан с верхним текстом.
Так происходит из-за того, что расстояние между верхним текстом и заголовком меньше, чем между заголовком и нижним абзацем.
Переместим заголовок к нижнему абзацу. Образовалась группа: заголовок и текст, который относится к заголовку.
Внутри смысловой секции лендинга есть группы элементов, которые образуют единую композицию. Например, заголовок с подзаголовком — одна группа, текст с изображение в две колонки — другая.
Расстояние между группами элементов внутри секции меньше, чем расстояние между двумя секциями.
2 группы внутри одной секции: одна группа — заголовок и подзаголовок, вторая группа — изображение и текст
В каждой группе также могут быть подгруппы. Внутри подгруппы элементы объединяются по тому же принципу: родственные по смыслу элементы располагаются ближе друг к другу, чем к другим элементам и подгруппам.
Иконка и заголовок с текстом — подгруппа внутри группы элементов
Белое пространство: больше воздуха
Пустое пространство вокруг элемента акцентирует внимание не менее эффективно, чем размер или цвет.
Пустое пространство успокаивает, избавляет от информационного перегруза. Человек находит ответы без усилий.
Плотное расположение элементов как дедушкина кладовка: точно знаешь, что дрель где-то тут, но найти ее невозможно — потеря времени и нервов.
За счет большого количества белого пространства на странице информация не теряется и легко считывается
Подробнее о белом пространстве
О визуальной иерархии
Призыв к действию и формы
Призыв к действию (call to action, CTA) — главный функциональный блок лендинга. Может состоять из текста и формы или текста и кнопки.
Чтобы выделить блок в лендинге, можно использовать яркий фон, который выделяется на фоне других секций лендинга, и контрастную кнопку.
Призыв к действию должен быть заметным и понятным.
Секция с формой обратной связи выделена отступами и ярким фоновым цветом
Чтобы стимулировать человека заполнить форму, можно уточнить, что произойдет после того, как он нажмет на кнопку.

«Перезвоним в течение часа, чтобы согласовать доставку», «пришлем напоминание за 2 часа до вебинара», «отправим электронную книгу на почту», «будем присылать только обучающую рассылку раз в две недели», — простые формулировки, которые показывают человеческое отношение и располагают к доверию.
    Иногда лендинг — промежуточное звено воронки продаж, и форма выполняет функцию лид-магнита.

    Лид-магнит — обмен контакта (email или телефон) на что-то ценное. Ценной может быть электронная книга, скидка, вебинар, чек-лист, данные исследования. Таким образом получается воронка:

    • Получить бесплатно
    • Купить за разумную цену (оплатить курс полностью)
    • Допродажа (персональная консультация)
    Например, человек подписывается и получает первую главу онлайн-курса бесплатно, она вдохновляет на покупку всего курса, а затем на заказ персональной консультации.
    Стиль форм
    1
    Классическая: заголовок, поле и подсказка значения
    2
    Лаконичная: заголовок помещается в поле вместо подсказки, а при клике уменьшается и остается видимым
    Кликните на поле
    3
    Стилизованная: только нижний бордюр
    Общая рекомендация для форм — полей должно быть как можно меньше. Лучше уточнить недостающую информацию потом.
    Обложка
    Обложка — это первый экран лендинга. Обложка должна быть незаурядной и выразительной.
    Какие фотографии подходят для обложки:
    • Текст и события в кадре не должны наслаиваться.
    • Классно подобрать фотографию, у которой есть единый оттенок. Не пестрое фото, а какой-то один цвет.
    • В фотографии должны быть крупные и пустые объекты. Например, текст на фоне горы не дребезжит. Или деталь автомобиля — в центре ничего нет и текст хорошо читается. Фотографии с концерта — в углу артист, а с другой стороны сцена или ровная заливка.
    • Масштаб деталей на фотографии не должен совпадать с масштабом букв. Если заголовок на обложке состоит из одного слова, написанного очень крупным шрифтом, то мелкие детали на фото не будут мешать.
    Как эти фотографии использовать на обложке в сочетании с текстом:
    Самая частая ошибка — текст обложки расположен на значимом объекте фотографии. Ни текст не видно, ни объект. Получается каша.
    Заголовок мешает рассмотреть лицо человека, и текст на фоне мелких деталей сложно читать
    Изображение и текст вместе создают хорошую композицию, видно детали фотографии, текст легко прочитать
    Как повысить читаемость текста:
    • Использовать темный фильтр (сплошной или градиент)
    • Использовать цветной фильтр. Добавление фирменного цвета даст узнаваемость
    • Применить к фотографии стиль дуплекс (дуотон) или триплекс
    • Добавить тень тексту
    Иллюстрация на обложке
    Иллюстрация — хорошая альтернатива фотографии на обложке. Она задаст стиль и сделает лендинг интереснее.

    Иллюстрацию можно заказать у иллюстратора либо найти в фотобанке.

    Оптимальный вариант комозиции обложки с иллюстрацией — текст слева, иллюстрация справа. К заголовку можно добавить форму обратной связи или кнопку целевого действия.
    Что делать, если нет фото или иллюстрации:
    Использовать белый фон
    Такой вариант ничуть не хуже обложки с фотографией, а иногда и вовсе может быть удачнее. Для такой обложки достаточно оставить белый фон и сделать акцент на типографике — поработать над композицией, размером и цветом шрифтов.
    Использовать цветной фон или графику
    В качестве фона можно использовать однотонный цвет или градиент. В Tilda Colors вы можете скопировать готовые цвета и градиенты или скачать их в формате PNG с разрешением 1680 px, подходящим для полноэкранных изображений.

    Еще один вариант — абстрактная графика. Это могут быть геометрические фигуры, волны, линии или паттерн. Главное, чтобы на графике хорошо считывался заголовок.
    Текст на обложке
    О том, как сформулировать текст на обложке (оффер) по смыслу, мы писали во второй главе.

    Что касается формы, нужно помнить, что заголовок и подзаголовок на обложке не должны быть перегружены. В идеале это одно простое предложение в заголовке, которое объясняет суть, и еще одно-два предложения в подзаголовке, которые дополняют и раскрывает оффер. По форме — одна-две строки для заголовка и две-три для подзаголовка.
    Текст должен легко читаться, быть понятным и убедительным.
    На обложке слишком много текста, контраст между заголовком и подзаголовком мал — такой текст тяжело читается и перегружает обложку
    Заголовок и подзаголовок занимают по две строки и имеют достаточно контрастный размер шрифта. Текст легко читается и выглядит аккуратно
    Меню как элемент обложки
    Меню на лендинге используют, если страница длинная и нужна навигация между разделами. У меню вспомогательная функция, в большинстве случаев можно обойтись без него.
    Часто в меню достаточно поместить целевое действие и сделать его фиксированным. Это могут быть кнопки «зарегистрироваться» или «купить билет», либо просто телефон.
    Прозрачное меню с логотипом и кнопкой целевого действия лендинга
    luxuryresidences.ru
    Как сделать обложку сайта: практические советы арт-директора
    Навигация
    Элементы, которые помогут легко находить на лендинге ответы на вопросы:
    • Меню
    • Боковая навигация с точками
    • Индикатор прокрутки страницы
    • Кнопка «наверх»
    • Ссылка на логотипе
    • Ссылки в конце страницы
    Оформление меню
    Оформление меню
    Общее правило для любого меню: оно не должно быть перегружено. Для меню лендинга это еще актуальнее: меню должно помогать найти информацию, но не отвлекать от целевого действия.
    Пунктов меню должно быть мало.
    Меню перегружено, когда в нем слишком много элементов. Поэтому лишние элементы, например, кнопки социальных сетей, можно смело убрать, пункты меню сократить до минимума, а названия переформулировать короткими словами, по одному для каждого пункта.

    Фон меню может быть прозрачным, полупрозрачным или цветным.

    Прозрачный фон меню. Такое меню выглядит визуально легко, это самый универсальный и часто встречающийся стиль. Лучше всего для него подойдет обложка без мелких деталей. Дополнительно можно использовать цветной фильтр.
    Универсальное меню с прозрачным фоном
    agadahome.com
    Полупрозрачное меню. Подходит, если нужно увеличить читабельность меню, не утяжеляя первый экран.
    Меню с полупрозрачным фоном повышает читабельность текста и не утяжеляет верхнюю часть обложки
    diamondindustrial.ru
    Меню с цветным фоном. При 100% непрозрачности цвета меню становится плашкой, на которой отлично читается текст. Минусов у этого метода два: во-первых, меню становится слишком заметным и забирает внимание, во-вторых, это сильный стилистический прием, который подойдет далеко не всем лендингам.
    В этом примере непрозрачное белое меню сочетается с обложкой и не выбивается из общего стиля
    godovoe-obsluzivanie.docdeti.ru
    По типу поведения меню может быть статичным, фиксированным или появляться при скролле.

    Статичное находится вверху страницы (над обложкой или закрывая часть обложки), при скролле остается на своем месте и исчезает из поля зрения.
    Статичное меню исчезает во время скролла из поля зрения
    scandinavskie.ru
    Фиксированное меню всегда поверх блока и при скролле остается видимым. Меню может быть два: одно остается вверху страницы, второе появляется при скролле. В этом случае на втором меню часто размещают телефон или кнопку регистрации, чтобы упростить целевое действие.
    Меню во время скролла остается зафиксированным в верхней части окна браузера
    cu-st.ru
    Комбинированное меню — используется статичное и фиксированное меню одновременно. В статичном меню размещается логотип, пункты меню и контакты, а в фиксированном кнопка с целевым действием.

    Также можно для десктопной версии создать простое меню, а для мобильной версии лендинга сделать бургер с сокращенной или другой информацией.
    На странице использовано комбинированное меню: статичное и фиксированное
    organpitsunda.ru
    Тип меню «гамбургер». Как правило, используется в мобильной версии, чтобы меню было компактнее. Иногда используется и для обычной версии — чтобы страница была лаконичнее.
    Компактное меню «Гамбургер»
    genrussia.ru/prirodobodonie-tehnologii
    Подробнее о видах меню и подробные инструкции по созданию в нашей статье
    Боковая навигация с точками
    Меню в виде точек, зафиксированных сбоку страницы, практически не отвлекает внимания, но помогает ориентироваться. Точки-индикаторы подсказывают, в какой части страницы находится человек, при наведении на индикатор появляется текстовая подсказка, а при клике происходит переход к нужному разделу.
    Фиксированное боковое меню в виде точек
    Индикаторы прокрутки и загрузки страницы
    Индикатор прокрутки — легкая версия боковой навигации в виде полоски вверху экрана. По мере скролла полоса движется слева направо, указывая, в какой части страницы находится человек.
    Индикатор прокрутки страницы
    Индикатор загрузки страницы — классика хорошего UX: человек нажал на ссылку и, если страница не загрузилась мгновенно, он видит, что есть отклик на его действие.
    Кнопка «наверх»
    Кнопка «наверх» используется на длинных лендингах (примерно от 5 экранов). Это вспомогательный элемент, который не должен быть слишком ярким и контрастным, чтобы не спорить с кнопкой целевого действия. Оптимальные отступы кнопки от краев: 20−30 px.
    Фиксированная кнопка «Наверх» в нижнем левом углу экрана
    aiscreen.ru
    Ссылка на логотипе
    Клик на логотипе ведет к началу страницы или на главную страницу — это поведение стало привычным.
    Ссылки в конце страницы

    Когда человек доскроллил до конца, он не должен зайти в тупик. Варианты навигации в конце страницы:

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

    C другой стороны, если человеку не хватило информации и у него нет возможности узнать о вашем бизнесе что-то еще, страница может восприниматься как тупиковая — есть вероятность, что посетитель закроет ее в недоумении и перейдет на сайт конкурента.
    Цвет
    Цвет действует на эмоции и обращается напрямую к бессознательному. Он создает настроение и передает тон сообщения.
    Правило бутика
    Основное правило — цветов на лендинге не должно быть много: один или два. Причем тот цвет, который используется в качестве акцента, занимает не более 10%. В этом случае он привлекает внимание к тем элементам, которые должны быть заметны.
    90% — основной цвет
    10% – акценты

    В курсе «Дизайн в цифровой среде», мы называем такое соотношение (90:10) «правилом бутика». В дорогих магазинах вещи никогда не теснятся на вешалке в узких проходах. Напротив, у каждого предмета достаточно пространства вокруг, чтобы на него обратили внимание.

    Дорогим магазинам не нужно доказывать и объяснять, почему у них высокие цены. Они уверены в своем предложении, а их клиенты уверены в них. Никакой суеты.
    Также и на лендинге — чем сдержаннее страница вокруг кнопки, тем скорее на ней остановится взгляд человека.
    Лендинг — это предложение услуги или продукта. Когда люди расстаются с деньгами, они хотят быть уверены, что они платят или за вашу экспертизу, или за отличное качество. Сдержанность в использовании цветов поддержит их уверенность в этом.
    Выбор оттенка
    Человеческий мозг активно использует стереотипы: лендинг салона красоты мы ожидаем увидеть светлым, тату-салона — черным, свежие продукты ассоциируются с зеленым, а технологии — с синим. Правила не высечены в камне, но упрощают коммуникацию, как любые паттерны.
    Палитры для подбора оттенков
    В интернете много готовых палитр, но их недостаток в том, что они предлагают сложные сочетания из 3−5 цветов, которые на лендинге будут выглядеть нелепо.

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

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

    Также вы можете скачать любой цвет и градиент в формате PNG с разрешением 1680 px, подходящим для полноэкранных изображений.
    Палитра цветов и градиентов Tilda Colors
    Material UI Colors цветовая палитра для материального дизайна.

    Color Claim проект дизайнера Тобиаса Ван Шнайдера. Томас с 2012 года собирает удачные цветовые сочетания. Удобство в том, что это в основном два цвета — идеальный вариант для лендинга.

    itmeo — цветовые сочетания для градиента. Большинство состоит из двух цветов.
    Существует небольшое количество лендингов, основная цель которых передать атмосферу радости и хорошего настроения, убедить человека, что он хорошо проведет время. Пример: фестивали, концерты и другие события. В этом случае правилом «бутика» можно пренебречь и использовать цвета в соответствии с настроением, хорошим вкусом и интуицией.
    Шрифт
    Насыщенность шрифта
    При создании лендинга мы обращаем внимание на насыщенность шрифта.

    Насыщенность (начертание, font weight) — толщина каждой буквы. Самые известные значения: нормальный (normal) и жирный (bold). Некоторые шрифты поддерживают только эти варианты, но у большинства имеются дополнительные толщины: light, normal, medium, semi-bold, bold.
    Выбор насыщенности для заголовка и текста поможет задать тональность лендинга в зависимости от проекта.
    Лендинг марафона и страница дорогого косметического средства имеют разную тональность и поддержать ее можно с помощью сочетаний шрифтов.
    Make it simple, but significant
    Насыщенность Light
    Make it simple, but significant
    Насыщенность Normal
    Make it simple, but significant
    Насыщенность Medium
    Make it simple, but significant
    Насыщенность Bold
    Варианты сочетаний шрифтов
    Полужирный заголовок и нормальный текст
    Базовое сочетание, которое подойдет для любого проекта — хорошо и в пир, и в мир, и в добрые люди. Используется, если нет задачи делать дополнительные акценты и нужно создать устойчивый лендинг.
    Шрифт: Open Sans
    Размер: 68 px
    Насыщенность: Semi-Bold
    Шрифт: Open Sans
    Размер: 22 px
    Насыщенность: Normal
    Жирный заголовок и нормальный текст
    Распространенное сочетание, достаточно нейтральное, но все же передает драйв и энергию. Подходит для лендингов, связанных с движением и активностью.
    Шрифт: IBM Sans
    Размер: 26 px
    Насыщенность: Normal
    Шрифт: IBM Sans
    Размер: 102 px
    Насыщенность: Bold
    Тонкий заголовок и тонкий текст
    Сочетание для лендингов, связанных с технологиями или эстетикой. Поддерживает современный и прогрессивный тон. Требует много белого пространства и небольших ярких акцентов.
    Шрифт: Open Sans
    Размер: 72 px
    Насыщенность: Light
    Шрифт: Open Sans
    Размер: 22 px
    Насыщенность: Light
    Мы рассмотрели небольшую, наиболее практическую часть знаний об использовании шрифта. Если вы хотите узнать больше, рекомендуем изучить статью «Как выбрать правильный шрифт для сайта и статьи» и главу «Шрифт. Базовые понятия» курса «Дизайн в цифровой среде»
    Изображения
    Изображения выполняют несколько задач:
    1. Помогают донести информацию
    Изображение воспринимаются проще и считывается быстрее — вместо подробного описания как выглядит продукт, лучше поставить его фотографию.

    Примеры, что можно показывать на лендингах:

    • Книга: разворот
    • Приложение: видео или скриншоты интерфейса
    • Экскурсия: примечательные места маршрута
    • Сервис доставки еды: коробка с продуктами
    • Вебинар: портрет ведущего
    • Конференция: зал, в котором пройдет мероприятие
    Покажите, что получит человек, чем он будет пользоваться.
    2. Служат развиртуализации
    Люди недоверчиво относятся к незнакомым сайтам, и это справедливо: в сети достаточно мошенников, а сайт может сделать кто угодно. Фотографии — один из факторов, которые формируют доверие. Но только в том случае, если они реальные и демонстрируют ваш продукт или настоящих людей.
    3. Создают атмосферу и настроение
    Если нет возможности сделать свои фотографии, может помочь фотобанк. Но нужно искать оригинальные фотографии. Маркетинг существует давно, и в изображениях сформировались клише, которые всех раздражают: человек на вершине горы, свинья-копилка, рукопожатие людей в деловых костюмах.
    Дело не в том, что фотостоки не подходят. Тошнит от неестественных, клипартных фотографий.
    Не нужно с помощью ассоциаций первого уровня пытаться передать идею. Человек, который взбирается по лестнице — это не успешный тренер, это низкопробная фотография.

    Если вы в первый раз проводите мастер-класс и у вас пока нет возможности показать как это будет, можно в фотобанке найти фото приятных людей крупным планом, которое передаст атмосферу и эмоции.
    4. Поддерживают стиль проекта
    Если вы показываете команду, хорошо бы нанять фотографа, чтобы фотографии были единообразными.
    Участники команды сняты на одинаковом черном фоне
    Классно использовать какой-то объединяющий прием: все в черном (белом) или в красных шапочках.
    Также можно применять цветной фильтр, чтобы фотографии смотрелись более целостно. Если есть фирменный цвет, то он также поддержит идентичность проекта.
    Одинаковый цветной фильтр объединяет фотографии и задает стиль лендингу
    Ну и самый простой способ уравновесить разностилевые фотографии — сделать их черно-белыми.
    Иконки
    Иконка — это упрощенное изображение объекта или действия. На лендинге иконки выполняют 2 функции:
    1
    Облегчают и ускоряют восприятие информации: заменяют часть текста, упрощают понимание предложения, помогают структурировать текст.
    2
    Дополняют страницу графически, делают ее интереснее и разнообразнее.
    Виды иконок
    Линейные
    Иконки с Tilda Icons
    Монохромные залитые
    Иконки с thenounproject.com
    Мини-иллюстрации
    Иконки с mricons.com
    Правила использования иконок
    Соответствие общему стилю сайта
    Тонкие линейные иконки подходят для страниц с минималистичным оформлением и тонкими шрифтами. Если на странице крупные заголовки, жирные шрифты, то используются иконки с широкими контурами или заливкой.
    Иконки из одного набора
    Все иконки лендинга должны быть в одном стиле. Смешивание линейных иконок с цветными, тонких с залитыми приводит к неряшливости. Даже толщина линии имеет значение — она должна быть одинаковой. Не каждый человек задумается, что иконки из разных наборов, но интуитивно почувствует, что где-то есть недоработка.
    Где взять иконки
    Если вы делаете лендинг на Тильде, то можно использовать бесплатные иконки проекта Tilda Icons, встроенные в редактор. Откройте контент блока с картинкой, нажмите значок поиска и перейдите на вкладку Tilda Icons.

    Иконки разбиты на 45 категорий по типам бизнеса и ищутся по ключевым словам. Дизайнеры регулярно рисуют новые наборы, и категорий становится больше. Если файл нужно отредактировать, например, изменить цвет, набор иконок можно скачать на странице проекта:
    Tilda Icons
    Бесплатные иконки для бизнеса Tilda Icons
    Большая коллекция иконок, сгруппированных в наборы. В коллекции есть тематические и анимированные иконки, а также значки интерфейса. Распространяются бесплатно при указании авторства.
    Большая коллекция и удобный поиск. Cкачивается файл в формате .png или .svg. Можно использовать бесплатно при указании авторства.
    Больше ссылок на источники иконок в статье «Где скачать иконки для сайта?»
    Средняя стоимость одной иконки, которую рисует профессиональный иллюстратор на заказ — $ 10. Готовые, но платные иконки часто продаются по подписке, около $ 10 в месяц, или наборами.

    Иконка — такой же объект авторского права, как и фотография, поэтому при использовании иконок на лендинге нужно обязательно обращать внимание на лицензию: платная она или бесплатная, на каких условиях их можно использовать.
    Анимация
    Анимация придает странице выразительность и привлекательность, но в половине случаев избыточна и делается для того, чтобы угодить заказчику или самовыразиться.
    Чтобы страница не превратилась в powerpoint-презентацию младшего школьника, анимации должно быть в меру.
    Главное — не анимировать все элементы. Пропорция: 20−30% анимировано, остальное статично.
    Два способа как не анимировать все:
    1
    Применять анимацию только к некоторым секциям, например, обложка и форма для ввода или ключевая фраза внутри.
    2
    Анимировать не каждый объект, например, текст статичен, иконки появляются или текст статичен, появляется только картинка.
    Анимация нужна, чтобы добавить привлекательности. В ней нет смысла, это развлечение и способ сделать страницу менее монотонной. Если анимировать все, то будет опять монотонно, плюс раздражающе.
    Виды анимации
    Fade In — появление через прозрачность.
    Fade In Up — появление через прозрачность снизу.
    Fade In Down — появление через прозрачность сверху.
    Fade In Left — появление через прозрачность справа.
    Fade In Right — появление через прозрачность слева.
    Zoom In — появление через увеличение или уменьшение.
    Узнать подробнее о видах веб-анимации, примерах и правилах её использования можно в учебнике «Анимация в вебе». В каждой лекции есть практические уроки о том, как создать анимацию в редакторе Тильды.
    Производительность — важный фактор, который нужно учесть. Обязательно протестируйте анимированный лендинг на маломощных компьютерах, так как не все машины способны быстро воспроизводить анимацию.
    Общий стиль и аккуратность
    Когда основная работа над лендингом закончена, наступает время «причесать» внешний вид и сделать лендинг аккуратным. На что обратить внимание? Проверяем по чек-листу:
    1
    Страница четко разделена на смысловые секции
    2
    Между секциями достаточное и одинаковое расстояние
    3
    На странице достаточно «воздуха» — вокруг текста и картинок есть пространство, они не слипаются и не мешают друг другу
    4
    Одна смысловая секция не распадается визуально на две
    5
    Приемы оформления минимизированы
    6
    На странице нет узких цветных блоков
    7
    Заголовки одного уровня одинакового размера
    8
    Более важные заголовки выделены по сравнению с менее важными
    9
    Заголовок с большим количеством слов не слишком крупный
    10
    Заголовок заметно крупнее, чем текст
    11
    Заголовки одинакового цвета
    12
    Текст на фотографии читается легко
    13
    Текст не накладывается на информативную часть изображения
    14
    В колонках не более 2−3 строчек текста
    15
    Выравнивание по центру не используется для текстового блока более 3−4 строк
    16
    В кнопках не используется обводка
    17
    В меню не более 5 пунктов и они состоят из коротких слов
    18
    Пункты меню не разъезжаются в 2 строки
    19
    На лендинге используется не более 2-х цветов
    20
    Очевидно, какой цвет основной и какой используется для акцента
    Закрепим материал
    1
    Лендинг — это презентация. Лендинг разбивается на смысловые секции, каждая из которых отвечает на один вопрос.
    2
    Визуальная иерархия помогает восприятию информации. Более важные элементы должны быть заметнее, менее важные дополняют, но не мешают.
    3
    Отступы добавят на страницу «воздух», помогут разбить на секции и выстроить иерархию, сделать лендинг понятнее.
    4
    Текст на обложке — главное. Фон и элементы вокруг не должны мешать прочтению.
    5
    Навигация помогает ориентироваться, но не отнимает внимание от важного.
    6
    Цветов на лендинге не должно быть много. Одного-двух цветов вполне достаточно, чтобы добавить акценты.
    7
    Выбор шрифта зависит от тональности лендинга. В первую очередь обращаем внимание на насыщенность.
    8
    Реальные изображения работают на доверие, а от стоковых фотографий лучше отказаться.
    9
    Аккуратность и сдержанность в оформлении позволяет сконцентрироваться на предложении.
    Помимо применения этих знаний на практике также полезно развивать вкус и насмотренность качественного дизайна. Для этого вы можете посмотреть статью про частые ошибки дизайна веб-страницы, прочитать книги из подборки для начинающих дизайнеров, а также вдохновляться проектами #madeontilda.
    Понравилась глава? Поделитесь с друзьями!
    Текст: Яна Плющева, Ира Смирнова
    Дизайн, иллюстрации и верстка: Юлия Засс
    Читайте другие лекции курса:
    ГЛАВА ПЕРВАЯ
    Что такое лендинг пейдж: определение, примеры, применение
    Глава вторая
    Этапы создания лендинга
    Глава третья
    Анатомия лендинга: функциональные блоки
    Глава пятая
    Как увеличить эффективность лендинга
    Создайте лендинг для вашего бизнеса
    С Tilda Publishing сделать лендинг пейдж просто, быстро и бесплатно
    Создать лендинг