Курс "Создание Landing Page"
Принципы дизайна лендинга
Éditions Tilda
предыдущей главе мы разобрали из каких типовы элементов состоит посадочная страница. как оформить посадочную страницу : общий стиль, выбор цветов, шрифтов, изображений. на частые ошибки в дизайне лендинг пейдж.
Les enfants de moins de 18 ans sont plus nombreux que ceux de moins de 18 ans. коздать аккуратную посадочницу, которая выглядит профессионально, работает на результат и не раздражает взляд, не так сложно. дизайна лендинга, вы сделаете страницу самостоятельно. ее не будет стыдно показать друзьям-дизайнерам.
Из чего состоит лекция
1.
2. Визуальная иерархия
3.
4. Обложка
5. Навигация
6. Цвет
7. Шрифт
8. Изображения
9.
10. Анимация
11. Общий стиль и аккуратность
12. Закрепим материал
Смысловые секции
Посадочную страницу можно сравнить с презентацией, которая состоит из слайдов или секций.
Во второй главе мы уже использовали понятие секций, когда составляли структуру сайта: оффер, о проекте, для кого, отзывы, преимущества, расписание, блок призыва к действию, — все это секции лендинга.

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

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

Les deux parties sont d'accord sur le fait qu'il s'agit de la même chose pour les deux parties, mais les deux parties sont d'accord sur le fait qu'il s'agit de la même chose pour les deux parties. Содержимое отдельной секции должно быть окружено "воздухом".

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

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

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

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

Чтобы лендинг выглядел аккуратно, не рекомендутся использовать несколько разных разделителей на одной странице. Например, фигурная граница виде зигага будет спорить с границей-скосом.
два вида фигурного разделителя - слишком много стилей оформления
Использован один вид фигурного разделителя - страница выглядит аккуратно
Размер заголовков секций
Les deux parties sont d'accord sur le fait qu'il s'agit de l'un des plus grands projets de l'histoire de l'humanité. Заголовок секции может состоять только из заголовка или заголовка и подзаголовка. Заголовки задают ритм и структуру страницы и помогают понять, где начинается новая мысль.
секций должны быть одинакового размера.
Например, если первый заголовок "О курсе" размером 62px, то заголовок следующей секции "Для кого курс" также должен быть 62px - так страница будет акуратной, а новая секция (и новая мысль) будет легко читаться.
Секции с заголовком
Секции с заголовком и подзаголовком
считывалась только людьми, но и роботами, назначьте заловку на бложке тег H1, а заголовкам секций тег H2. Для поисковы систем это будет знаком хорошей разметки и правильной структуры страницы.
Гид по SEO : продвижение сайта. Как добавить тег H1, H2, H3
Цвет заголовков секций
Les deux sont en train de s'entendre sur un plan d'action. Это редкий прием, так как цветные заголовки сложне вписать в общий стиль страницы.
Не уверены - не раскрашивайте.
Если же акцент в иде цвета небходим, то используется тот же принцип, что и с размерами - цвет для заголовков секций должен быть одинаковым.
Сочетаемость блоков
страницы, в которых несколько секций подряд используются колонки, сложны для восприятия.
вариант, когда чередуются секции с разным числом колонок, например, 2, 3, 4.
коле, когда в соседних секциях одно и то же число колонок, например, три. Но такая страница по-прежнему выглядит разбалансировано.

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

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

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

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

если на фоне общего цвета появляется контрастный, такой элемент становится заметным, он говорит : "Я важный".
Яркая кнопка на нейтральном сером фоне выделяется за счет яркого и контрастного фону цвета
Группировка : ближе по расстоянию - ближе по смыслу
расположены рядом, значит они связаны друг с другом по смыслу. То есть, чтобы объединть элементы в группу, нужньшить расстояние между элементами внутри групы и величить снаружи.
Рассмотрим на примерах :
к нижнему абзацу, но визуаль но связано связан сверхн с текстом.
расстояние между верхним и заголовком меньше, чем маголовком меньше, чем между заголовком и нижним абзацем.
заголовок к нижнему абзацу. Образовалась группа : заголовок и текст, который относится к заголовку.
смысловой секции лендинга есть группы элементов, которые образуют единую композицию. Например, заголовок с подзаголовком - одна группа, текст с изображение в две колонки - другая.
Расстояние между групами элементов внутри секции меньше, чем расстояние между двумя секциями.
2 групы одной секции : одна группа - заголовок и подзаголовок, вторая группа - изображение и текст
каждой группе также могут быть подгрупы. Внутри подгруппы элементы объединяются по тому же принципу : родственые по смыслу элементы располагаются ближе друг к другу, чем к другим элементам и подгруппам.
Иконка и заголовок стекстом - подгруппа внутри групы элементов
Белое пространство : больше воздуха
Пустое пространство вокруг элемента акцентирует внимание не менее эфективно, чем размер или цвет.
Le système d'information de l'Union européenne (UEI) a été mis en place par l'UEI et le Conseil de l'Europe. Человек находит ответы без усилий.
Плотное расположение элементов как дедушкина кладовка : точно знаешь, что дрель ге-то тут, но найти е невозможно - потеря времени и нервов.
пространства на странице информация не терятся и лества белого пространства на странице не терятся и легко считыватся
Подробнее о белом пространстве
О визуальной иерархии
к действию и формю
действию (appel à l'action, CTA) - главный функциональный блок лендинга. Может состоять из текста и формы или текста и кнопки.
Чтобы выделить блок в лендинге, можно использовать яркий фон, который выделяется на фоне других секций лендинга, и контрастную кнопку.
действию должен быть заметным и понятным.
с формой обратной связи выделена отступами и ярким фоновым цветом
заполнить форму, можно уточнить, что произойдет после того, как он нажмет на кнопку.

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

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

    • Получить бесплатно
    • Купить за разумную цену (оплатить курс полностью)
    • Допродажа (персональная консультация)
    Например, человек подписывается и получает первую главу онлайн-курса бесплатно, она вдохновлят на покупку всего курса, а затем на заказ персональной консультации.
    Стиль форм
    1
    Классическая : заголовок, поле и подсказка значения
    2
    заголовоконичная : зомещается в поле вместо подсказки, а при клике уменьшается и остается видимшатся видимшатся
    Кликните на поле
    3
    Стилизованная : только нижний бордюр
    для форм - долей должно быть как можно меньше. Лучше уточнить недостающую информацию потом.
    Обложка
    Les gens de l'école ne sont pas les mêmes que ceux de l'école primaire. Обложка должна быть незаурядной и выразительной.
    Какие фотографи подходят для обложки :
    • и события в кадре не должны наслаиваться.
    • Классно подобрать фотографию, у которой есть единый оттенок. Не пестрое фото, а какой-то один цвет.
    • Les gens de l'extérieur ne sont pas les mêmes que ceux de l'intérieur, mais ils ne sont pas les mêmes que ceux de l'extérieur. на фоне горы не дребезжит. Или деталь автомобиля - в центре ничего нет и текст хорошо читается. Фотографии с концерта - в углу артист, а с другой стороны сцена или ровная заливка.
    • должен совпадать с масштабом букв. Если заголовок на обложке состоит из одного слова, написанного очень крупным шрифтом, то мелкие детали на фото не будут мешать.
    Как эти фотографии использовать на обложке в сочетании с текстом :
    расположен на значстая ошибка - текст обложки расположен на значим объекте фотографии. Ни текст не видно, ни объект. Получается каша.
    рассмотреть лицо человека, и текст на фоне мелких деталей сложно читать
    и текст вместе создают хорошую композицию, видно детали фотографии, текст легко прочитать
    Как повысить читаемость текста :
    • Использовать темный фильтр (сплошной или градиент)
    • Les deux parties sont d'accord sur le fait qu'il s'agit là d'une question d'équilibre entre les deux. Добавление фирменного цвета даст узнаваемость
    • Применить к фотографии стиль дуплекс (дуотон) или триплекс
    • Добавить тень тексту
    Иллюстрация на обложке
    Les deux parties sont d'accord sur le fait qu'il s'agit là d'une question d'intérêt général, mais elles ne sont pas toutes d'accord sur le fait qu'il s'agit d'une question d'intérêt général.

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

    Оптимальный вариант комозиции обложки с иллюстрацией - текст слева, илюстрация справа. К заголовку можно добавить форму обратной связи или кнопку целевого действия.
    Что делать, если нет фото или иллюстрации :
    Использовать белый фон
    с фотографией, а иногда и вовсе может быть удачне. беля такой достаточно оставить белый фон и сделать акцент на типографике - поработать над композицией, размером и цветом шрифтов.
    Использовать цветной фон или графику
    Les couleurs de Tilda sont les mêmes que les couleurs de Tilda, mais les couleurs de Tilda ne sont pas les mêmes que les couleurs de Tilda. Tilda Colors вы можете скопировать готовые цвета и градиенты или скачать их в формате PNG с разрешением 1680 px, подходящим для полноэкранных изображений.

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

    касается формы, нужно помнить, что заголовок и подзаголовок на обложке не должны быть перегружены. идеале это дно простое предложение в заголовке, которое объясняет суть, и еще одно-два предложения в подзаголовке, которые дополняют и раскрывате оффер. По форме - одна-две строки для заголовка и две-три для подзаголовка.
    Текст должен легко читаться, быть понятным убедительным.
    слишком много текста, контраст между заголовком и подзаголовком мал - такой текст тяжело читатся и перегружает обложку
    Les deux parties sont d'accord sur le fait qu'il y a une différence entre le prix de l'essence et le prix de l'eau, et qu'il y a une différence entre le prix de l'essence et le prix de l'eau. Текст легко читается и выглядит аккуратно
    Меню как элемент обложки
    на лендинге используют, если страница длиная и нужна навигация между разделами. в большинстве случаев можтельная, в большинстве случаев можно обойтись без него.
    Le système d'information sur la santé est en cours d'élaboration et de mise à jour, et le système d'information sur la santé est en cours d'élaboration. Это могут быть кнопки "зарегистрироваться" или "купить билет", либо просто телефон.
    Прозрачное меню с логотипом кнопкой целевого действия лендинга
    luxuryresidences.ru
    Как сделать обложку сайта : практические советы арт-директора
    Навигация
    Элементы которые помогут легко находить на лендинге ответы на вопросы :
    • Меню
    • Боковая навигация сточками
    • Индикатор прокрутки страницы
    • Кнопка "наверх"
    • Ссылка на логотипе
    • Ссылки в конце страницы
    Оформление меню
    Оформление меню
    для любого меню : оно не должно быть перегружено. меню должно помога лендинга это еще актуальне : меню должно помогать найти информацию, но не отвлекать от целевого действия.
    Пунктов меню должно быть мало.
    Меню перегружено, когда в нем слишком много элементов. Поэтому лишние элементы, например, кнопки социальных сетей, можно смело убрать, пункты меню сократить до минимума, а названия переформулировать короткими словами, по одному для каждого пункта.

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

    Les deux parties sont d'accord sur le fait qu'il s'agit là d'une question d'intérêt général, mais elles ne sont pas toutes d'accord. уто самый универсаль визульно самый универсальный и часто встречающийся стиль. для него подойдет обложка без мелких деталей. Дополнительно можно использовать цветной фильтр.
    Универсальное меню с прозрачным фоном
    agadahome.com
    Les deux parties sont d'accord sur le fait qu'il s'agit d'un problème de santé publique et de sécurité. Подходит, если нужно увеличить читабельность меню, не утяжеляя первый экран.
    Меню с полупрозрачным фоном повышает читабельность текста и не утяжеляет верхнюю часть обложки
    diamondindustrial.ru
    Le système d'information de l'Union européenne (UE) a été mis en place par la Commission européenne. плашкой, на которой, на которой отлично читатся тенцетатся текст. Минусов у этого метода два : во-первых, меню становится слишком заметным и забирает внимание, во-вторых, это сильный стилистический прием, который подойдет далеко не всем лендингам.
    В этом примере непрозрачное белое меню сочетается с обложкой и не выбивается из общего стиля
    godovoe-obsluzivanie.docdeti.ru
    типу поведения меню может быть статичным, фиксированным или появляться при скролле.

    Статичное находится верху страницы (над обложкой или закрывая часть обложки), при сколле остатся на своем месте и счезат из поля зрения.
    Статичное меню исчезаета во время скролла из поля зрения
    scandinavskie.ru
    Les enfants de l'école primaire sont les premiers à avoir été formés à l'école secondaire, et les enfants de l'école secondaire sont les premiers à avoir été formés à l'école primaire. меню всегда поверх блока и при скролле остатся видимым. одно остается верху страницы, второе появлятся при скроле. В этом случае на втором меню часто размещают телефон или кнопку регистрации, чтобы упростить целевое действие.
    Меню во время скролла остается зафиксированым верхней части окна браузера
    cu-st.ru
    Комбинированноеменю - используется статичное и фиксированное меню одновременно. размещается логотип, пункты меню и контакты, а в фиксированном копка с целевым действием.

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

    La liste des personnes à contacter est disponible sur le site internet de l'Agence de presse. Варианты навигации в конце страницы :

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

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

    среде", мы называем такое сотношение (90:10) "правилом бутика". дорогих магазинах вещи никогда не теснятся на вешалке в узких проходах. чтобы на него обратили внимание.

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

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

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

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

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

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

    Насыщенность (начертание, font weight) - толщина каждой буквы. Самые известные значения : нормальный (normal) и жирный (gras). Некоторые шрифты поддерживают только эти варианты, но у большинства имеются дополнительные толщины : clair, normal, moyen, semi-gras, gras.
    для заголовка и текста поможет задать тональность лендинга в зависимости от проекта.
    Лендинг марафона и страница дорого косметического средства имеют разную тональность и подержать е можно с помощью сочетаний шрифтов.
    Simplicité, mais importance
    Насыщенность Light
    Simplicité, mais importance
    Насыщенность Normal
    Simplicité, mais importance
    Насыщенность Medium
    Simplicité, mais importance
    Насыщенность Bold
    Варианты сочетаний шрифтов
    заголовок и нормальный текст
    для лойбого проекта - хорошо и пир, и в мир, и в мир, и в добрые людидир. делать дополнительные акценты и нужно создать ужно создать устойчи стой лендинг.
    Шрифт : Open Sans
    Размер : 68 px
    Насыщенность : Semi-Bold
    Шрифт : Open Sans
    Размер : 22 px
    Насыщенность : Normal
    заголовок и нормальный текст
    д20↩аспространенное, достаточно нейтральное, но все же передат драйв и энергию. для лендингов, связанных с движением и активностью.
    Шрифт : IBM Sans
    Размер : 26 px
    Насыщенность : Normal
    Шрифт : IBM Sans
    Размер : 102 px
    Насыщенность : Gras
    заголовок итонкий текст
    Les deux sont en cours d'élaboration et de mise en œuvre. Поддерживает современный и прогрессивный тон. белого пространства и небольших ярких акцентов.
    Шрифт : Open Sans
    Размер : 72 px
    Насыщенность : Lumière
    Шрифт : Open Sans
    Размер : 22 px
    Насыщенность : Lumière
    рассмотрели неболь, наиболе практичскую часть знаний об использованиий. узнать больше, рекомендуем изучить статью"Как выбрать правильный шрифт для сайта и статьи" и главу "Шрифт. Базовые понятия" курса "Дизайн в цифровой среде"
    Изображения
    Le système d'information de l'Union européenne (UE) a été mis en place par l'Union européenne :
    1. Помогают донести информацию
    проще и считывается быстре - вместо подробного описания как выглядит продукт, лучше поставить его фотографию.

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

    • Книга : разворот
    • Приложение : видео или скриншоты интерфейса
    • Экскурсия : примечательные места маршрута
    • Сервис доставки еды : коробка с продуктами
    • Вебинар : портрет ведущего
    • Конференция : зал, в котором пройдет мероприятие
    Покажите, что получит человек, чем он будет пользоваться.
    2. Служат развиртуализации
    к сайтам, и это справедливо : в сети достаточношеников, а сайт может сделать кто угодно. Фотографии - один из факторов, которые формируют доверие. Но только в том случае, если они реальные и демонстрируют ваш продукт или настоящих людей.
    3. Создают атмосферу и настроение
    сделать свои фотографии, может помочь фотобанк. Но нужно искать оригинальные фотографии. Маркетинг существует давно, и в изображениях сформировались клише, которые всех раздражают : человек на вершине горы, свинья-копилка, рукопожатие людей в деловых костюмах.
    Le système d'information de l'Union européenne (UEI) a été mis en place par la Commission européenne. Тошнит от нестественных, клипартных фотографий.
    первого уровня передать с помощью ассоциаций первого уровня передать идею. по лестнице - это не успешный тренер, это низобная фотография.

    у вас пока нет возможности покатаклас у вас пока будет, можно в это будет, можно в фотобанке найти фото приятных людей крупным планом, которое передаст атмосферу и эмоции.
    4. Поддерживают стиль проекта
    команду, хорошо бы нанять фотографа, чтобы фотографии были единобразными.
    команды сняты на одинаковом черном фоне
    Классно использовать какой-то объединяющий прием : все в черном (белом) или в красных шапочках.
    Также можно применять цветной фильтр, чтобы фотографии смотрелись более целостно. Если есть фирменный цвет, то он также подержит идентичность проекта.
    Одинаковый цветной фильтр объединяет фотографи и задает стиль лендингу
    способ уравновесить разностилевые фотографии - сделать их черно-белыми.
    Иконки
    изображение объекта или действия. На лендинге иконки выполняют 2 функции :
    1
    Облегчают и ускоряют восприятие информации : заменяют часть текста, упрощают понимание предложения, помогают структурировать текст.
    2
    Дополняют страницу графически, делают ее интереснее и разнобразнее.
    Виды иконок
    Линейные
    Иконки с Tilda Icons
    Монохромные залитые
    Иконки с thenounproject.com
    Мини-иллюстрации
    Иконки с mricons.com
    Правила использования иконок
    Соответствие общему стилю сайта
    Les deux sont en train de s'entendre sur un plan d'action à long terme. заголовки, жирные шрифты, то используются иконки с широкими контурами или заливкой.
    Иконки из одного набора
    Les deux parties sont d'accord sur le fait qu'il s'agit d'une question d'intérêt général. с цветными, тонких с залитыми приводит к неряшливодит к неряшливости. Даже толщина линии имеет значение - она должна быть одинаковой. Не каждый человек задумается, что иконки из разных наборов, но интуитивно почувствует, что где-то есть недоработка.
    Где взять иконки
    Tilda Icons, всте лендинг на Тильде, то можно спользовать бесплатные иконкта Tilda Icons, встроенные в редактор. Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons, Tilda Icons.

    Иконки разбиты на 45 категорий по типам бизнеса и ищутся по ключевым словам. наборы, и категорийнеры регулярно рисуют новые, и категорий становится больше. Если файл нужно отредактировать, например, изменить цвет, набор иконок можно скачать на странице проекта :
    Icônes Tilda
    Бесплатные иконки для бизнеса Tilda Icons
    коллекция иконок, сгруппированых в наборы. и коллекции есть тематические и анимированые иконки, а также значки интерфейса. Распространяются бесплатно при указании авторства.
    Les deux premiers mois de l'année ont été marqués par une baisse de l'activité de l'entreprise. Cкачивается файл в формате .png или .svg. Можно использовать бесплатно при указании авторства.
    Больше ссылок на источники иконок в статье "Где скачать иконки для сайта ?"
    кот профессиональный иллюстратор на заказ - $ 10. Готовые, но платные икосто понки чсто продаются подписке, около $ 10 в месяц, или наборами.

    Иконка - такой же объект авторского права, как и фотография, поэтому при использовании иконок на лендинге нужно обязательно обращать внимание на лицензию : платная она или бесплатная, на каких условиях их можно использовать.
    Анимация
    Анимация придает странице выразительность и привлекательность, но в половине случаев избыточна и делается для того, чтобы угодить заказчику или самовыразиться.
    превратилась в powerpoint-презентацию младшего школьника, анимации должно быть в меру.
    Главное - не анимировать все элементы. Пропорция : 20-30% анимировано, остальное статично.
    Два способа как не анимировать все :
    1
    только к некоторым секциям, например, обложка и форма для ввода или ключевая фраза внутри.
    2
    например, текст статичен, иконки появляются или текст статичен, появлятся или текст статичен, появлятся только картинка.
    Les gens qui ont des problèmes de santé ne sont pas les mêmes que ceux qui ont des problèmes de santé. развлечение и способ сделать странее менее монотоной. Если анимировать все, то будет опять монотоно, плюс раздражающе.
    Виды анимации
    Fondu enchaîné - появление через прозрачность.
    Fade In Up - появление через прозрачность снизу.
    Fade In Down - появление через прозрачность сверху.
    Fondu enchaîné à gauche - появление через прозрачность справа.
    Fondu à droite - появление через прозрачность слева.
    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
    Les deux sont en train de s'entendre sur un plan d'action. Боле важные элементы должны быть заметнее, менее важные дополняют, но не мешают.
    3
    на страницу "воздух", помогут разбить на секции и выстроить иерархию, сделать лендинг понятнее.
    4
    Текст на обложке - главное. и элементы вокруг не должны мешать прочтению.
    5
    Навигация помогает ориентироваться, но не отнимает внимание от важного.
    6
    Le système d'information de l'Union européenne (UEI) a été mis en place par le Conseil de l'Europe. Одного-двух цветов вполне достаточно, чтобы добавить акценты.
    7
    Выбор шрифта зависит от тональности лендинга. В первую обращаем внимание насыщенность.
    8
    Реальные изображения работают на доверие, а от стоковых фотографий лучше отказаться.
    9
    сдержанность в оформлении позволяет сконцентрироваться на предложении.
    полезно развать ктике также полезно развать вкус и насмотренность ктисть ктийе нного дизайна. Для этого посмотреть статью про частые ошибки дизайна веб-страницы, прочитать книги из подборки для начинающих дизайнеров, а также вдохновляться проектами #madeontilda.
    Le gouvernement a décidé de mettre en place un programme d'aide à l'emploi pour les personnes handicapées. Поделитесь с друзьями !
    Текст : Яна Плющева, Ира Смирнова
    Дизайн, иллюстрации и верстка : Юлия Зассс
    Читайте другие лекции курса :
    ГЛАВА ПЕРВАЯ
    Что такое лендинг пейдж : определение, примеры, применение
    Глава вторая
    Этапы создания лендинга
    Глава третья
    Анатомия лендинга : функциональные блоки
    Глава пятая
    Как увеличить эфективность лендинга
    Создайте лендинг для вашего бизнеса
    Tilda Publishing сделать лендинг пейдж просто, быстро и бесплатно
    Создать лендинг