Вёрстка текстов на лендинге: иерархия, правила и примеры

Вёрстка текста
на лендинге: иерархия, правила и примеры

Тема вебинара

Меня зовут Лиза.
Я дизайнер лендингов
в Нетологии

Кто я?

1.Как грамотная вёрстка помогает лендингу
2.Основные этапы вёрстки текста
3.Правила иерархии и адаптации
4.Какими способами еще повысить читаемость
5.Ответы на ваши вопросы

Содержание

Зачем нужна вёрстка?

Без хорошей вёрстки читатель уйдёт сразу

С хорошей вёрсткой
и бесполезным содержанием он чуть-чуть задержится

С хорошей вёрсткой
и хорошим содержанием — вычленит нужное и прочитает

Вёрстка — это красивая упаковка. Плохое содержание она не спасёт

Пример

Как грамотная вёрстка помогает лендингу. Вывод

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

•

Основные этапы вёрстки текста

1.
2.
3.
4.

Вникаем в содержание
Разбираем структуру
Создаем конструкцию
Разрабатываем стиль

1.Вникаем в содержание

Прочтите текст и определитесь с задачей

2.Разбираем структуру

Структура — это мост
от содержания к форме.

2.Разбираем структуру

Шаг 1. Дробим на абзацы

2.Разбираем структуру

Абзац — единица мысли

2.Разбираем структуру

"фух, это не поток сознания"

2.Разбираем структуру

Без абзацев не ясно, где заканчивается мысль
и начинается другая

2.Разбираем структуру

Если не дробятся абзацы, скорее всего, текст — поток сознания

2.Разбираем структуру. Пример

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

2.Разбираем структуру

Шаг 2. Добавляем заголовки
и подзаголовки

2.Разбираем структуру

Если абзац — единица мысли, то подзаголовок — единица смысла.

2.Разбираем структуру

Не обязательно делить текст на абзацы и заголовки, это могут быть и тезисы/поинты

2.Разбираем структуру. Пример

В ДК Радуга (г. Смоленск, улица Пушкина 9) пройдет концерт известного артиста в честь 45 летия "Новое начало" Николая Баскова. Приходите 21 мая в 19:00, стоимость билета 1500р. Телефон для связи +7 (999) 999 - 99 - 99

2.Разбираем структуру. Пример

Смоленск, ул Пушкина 9

концерт "Новое начало"

ДК Радуга

Николай Басков

контакты

стоимость билета

19:00, пятница

+7 (999) 999 - 99 - 99

от 1500р

21 мая

2.Разбираем структуру. Пример

Смоленск, ул Пушкина 9

концерт "Новое начало"

ДК Радуга

Николай Басков

контакты

стоимость билета

19:00, пятница

+7 (999) 999 - 99 - 99

от 1500р

21 мая

3.Создаем конструкцию

Конструкция — это визуальное представление структуры
и скелет будущего макета

3.Создаем конструкцию

Одну и ту же структуру можно отобразить с помощью разных конструкций.

4.Разрабатываем стиль

Стиль — это настроение
и «вкус» макета

4.Разрабатываем стиль

На этапе стиля мы подбираем гарнитуры, шрифты, начертания, размеры и тд

4.Разрабатываем стиль

Источник стиля следует искать как в содержании, так и далеко за его пределами

4.Разрабатываем стиль

Абсолютно любой элемент
— от пропорций формата до межбуквенного расстояния
является стилеобразующим

Основные этапы вёрстки текста

Перепрыгивать через этапы опасно, как и менять их местами

Основные этапы вёрстки текста. Выводы

1.Есть 4 обязательных этапа

2.Их нельзя перескакивать и менять местами

Правила иерархии
и адаптации

Правила иерархии и адаптации

И это самое последнее

Спасибо за внимание!

3.Создаем конструкцию. Пример

Лендинг — это первое касание
Пелена текста от заказчика
Базовые ошибки
Ускорение работы над проектом

Почему тема актуальна?

Констраст

Сначала вы прочтёте это

Потом это

Телеграм

Инстаграм

Мои контакты

@elizavetanazarova

@enazar10

Время ваших вопросов

Вёрстка текста повышает его читаемость

Есть 4 этапы вёрстки текста

У текста обязательно должна быть иерархия и адаптация по правилам

На лендинге, как и везде, где есть типографика, нужно пользоваться ее правиламми

Выводы

Крупный текст

Контраст 3,67:1 > 3:1

Контраст 1,26:1 < 3:1

Крупный текст

Как повысить читаемость. Пример

Разнообразный и богатый опыт говорит нам, что высококачественный прототип будущего проекта предполагает независимые способы реализации своевременного выполнения сверхзадачи.

Контраст 8,55:1 > 7:1

Контраст 3,44:1 < 7:1

Как повысить читаемость. Пример

Коэффициент контрастности должен быть не меньше чем 7:1
для обычного текста
и 3:1 для крупного текста.

Как повысить читаемость

Проверьте уровень контраста
на сайте WebIAM

Как повысить читаемость

Обязательно создаем контраст. Темный шрифт на светлом фоне или наоборот

Как повысить читаемость

Главное правило — выбирать такой цвет шрифта, чтобы текст легко воспринимался читателями

Как повысить читаемость

Цвет — один из самых мощных инструментов дизайнера

Как повысить читаемость

Правильно подбирайте
цвет текста

Как повысить читаемость

Мишки любят шишки

МИШКИ ЛЮБЯТ ШИШКИ

Как повысить читаемость. Пример

Не пишите длинные фразы заглавными буквами.
Это замедлит чтение

Как повысить читаемость

Но сами буквы становятся менее контрастны между собой

Как повысить читаемость

Написание ПРОПИСНЫМИ — популярный приём в дизайне

Как повысить читаемость

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

С
П
Е
К
Т
А
К
Л
Ь

СПЕКТАКЛЬ

Как повысить читаемость. Пример

Текст прочитать очень трудно, если у всех букв базовая линия находится на разной высоте

Как повысить читаемость

Не пишите текст вертикально

Как повысить читаемость

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

Как повысить читаемость.
Пример

Текст желательно выравниваем по левому краю

Как повысить читаемость

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

Как повысить читаемость. Пример

Типограф делает это за пару кликов

Как повысить читаемость

Убирайте висячие предлоги

Как повысить читаемость

Какими способами еще повысить читаемость

Правила иерархии и адаптации

Обязательно проверяйте, как выглядит ваш дизайн на самом устройстве

Правила иерархии и адаптации

Ё-Й

Правила иерархии и адаптации. Пример

Текст должен находиться
в рабочей области

Правила иерархии и адаптации

(р1) - 16
(р2) - 13

(р1) - 16
(р2) - 15

Подпись какая-то

Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.

Правила иерархии и адаптации. Пример

Не уменьшайте размер только на одну единицу, так не будет контраста

Правила иерархии и адаптации

Используйте размер на пару значений меньше: например, 13px или 14px

Правила иерархии и адаптации

Размер подписей (р2)

Правила иерархии и адаптации

Они должны точно соответствовать размерам основного текста

Правила иерархии и адаптации

Размер Input fields (Поля ввода)

Правила иерархии и адаптации

Интерлиньяж — межстрочный интервал

Чем меньше кеглей на лендинге, тем контрастнее становится текст

Правила иерархии и адаптации

Правила иерархии и адаптации.
Пример

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

Правила иерархии и адаптации

Нужно определить размер главного заголовка (h1), подзаголовков (h2, h3 и далее), основного текст (р1)
и подписей (р2)

Кегль — размер шрифта

Заголовки одного уровня должны быть одного кегля
и интерлиньяжа

Правила иерархии и адаптации

Типографская иерархия — это порядок в расположении заголовков и основного текста

Правила иерархии и адаптации

Создайте визуальную иерархию

Размер

Цвет

Отступы

Пользователь не читает, а сканирует страницу

Без вёрстки текста пользователь не совершит целевое действие

ПОДРОБНЕЕ

Ограничения в еде

Полезная пища необходима для здоровья человека

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

Стратегия ресторанов

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

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

Пунк 3

Пунк 4

Пунк 1

Пунк 2

20 х 1,6 = 32

32 х 1,6 = 52

Заголовок - 32

Заголовок - 52

Основной текст - 20

Основной текст - 32

Правила иерархии и адаптации. Пример

В автоматическом режиме это делает сервис Type-scale

Правила иерархии и адаптации

Но не единственный верный вариант

1,6 — это «божественная пропорция», золотое сечение

Правила иерархии и адаптации

Формула:
кегль текста * 1,6 = кегль заголовка

Правила иерархии и адаптации

Как вычислить размер заголовка?

Правила иерархии и адаптации

В среднем размер основного текста от 16 до 18 px. Если текста не много, то даже 24 пикселя может быть приятным для чтения.

Правила иерархии и адаптации

Нет точных правил для размера шрифта

Правила иерархии и адаптации

Оптимальные размеры шрифтов для десктопа

Правила иерархии и адаптации

Создайте стили для всех уровней текста

Подписи (p2)

Основной текст (p1)

Подзаголовок (h2)

Заголовок (h1)

Лайфак в Тильде

Лайфак в Фигме

Правила иерархии и адаптации

Заголовок

А также интерактивные прототипы формируют глобальную экономическую сеть и при этом
в равной степени предоставлены сами себе.

25px

62px

Каждый из нас понимает очевидную вещь: убеждённость некоторых оппонентов однозначно фиксирует необходимость анализа существующих паттернов поведения.

Расстояние между заголовком и последующим текстом меньше, чем расстояние между концом текста и следующим заголовком

Правила иерархии и адаптации. Пример

16 px

45 px

Каждый из нас понимает очевидную вещь: убеждённость некоторых оппонентов однозначно фиксирует необходимость анализа существующих паттернов поведения.

А также интерактивные прототипы формируют глобальную экономическую сеть и при этом — в равной степени предоставлены сами себе.

Расстояние между строками меньше, чем между абзацами

Правила иерархии и адаптации. Пример

39 px

20 px

Вёрстка текста
это просто

Расстояние между словами меньше, чем между строками

Правила иерархии и адаптации. Пример

7 px

23 px

Тильда крутая

Расстояние между буквами меньше, чем между словами

Правила иерархии и адаптации. Пример

Это касается букв, строк, абзацев, колонок

Правила иерархии и адаптации

Внутреннее расстояние всегда должно быть меньше внешнего

Правила иерархии и адаптации

Правило близости

Правила иерархии и адаптации

Если это произошло — сократите длину заголовков или измените размер шрифта

Правила иерархии и адаптации

Убедитесь, что заголовки не занимают больше трёх строк

Правила иерархии и адаптации

Коффециент - 1,6

Коффециент - 1,3

Подзаголовок

Заголовок

Creativity is to discover a question that has never been asked. If one brings up an idiosyncratic question, the answer he gives will necessarily be unique as well.

Правила иерархии и адаптации. Пример

Размер заголовков
и подзаголовков рассчитывается с коффециентом меньше, чем
на декстопе

Правила иерархии и адаптации

Иногда самое допустимое минимальное значение — 14 рх

Правила иерархии и адаптации

Основной текст должен быть
не менее 16 рх

Правила иерархии и адаптации

Значит и шрифты должны быть меньше, чем на десктопе

Правила иерархии и адаптации

Пользователи ближе держат мобильный к глазам

Правила иерархии и адаптации

На мобильных меньше места для контента

Правила иерархии и адаптации

Оптимальные размеры шрифтов для мобильных

Правила иерархии и адаптации

Главное, чтобы взгляд читателя легко воспринимал строку
от начала и до конца

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

Правила иерархии и адаптации

Правила иерархии и адаптации. Пример

В строке должно быть не больше 45–65 знаков для латиницы
и 45–75 для кириллицы

Правила иерархии и адаптации

Следите за количеством символов в строке

Правила иерархии и адаптации

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

Интерьлиньяж - 1.55

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

Правила иерархии и адаптации. Пример

Интерьлиньяж - 1.2

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

Правила иерархии и адаптации. Пример

Если размер кегля 16, то формула выглядит так:
16 х 1.2 = 19,2

То есть рекомендуемый интерлиньяж — 19-20

Расчет для Фигмы

Правила иерархии и адаптации

Обычно интерлиньяж составляет 120-125%
(1.2 - 1.25 Spacing в Тильде)

Правила иерархии и адаптации

И какой-то текст. Каждый из нас понимает очевидную вещь: убеждённость некоторых оппонентов однозначно фиксирует необходимость анализа существующих паттернов поведения.

Правила иерархии и адаптации.
Пример

Вот наш заголовок, он крупный
и длинный

Чем больше размер шрифта,
тем меньше интерлиньяж

Чем длиннее строка
по количеству слов, тем больше должен быть интерлиньяж.
И наоборот.

Правила иерархии и адаптации

Как вычислить идеальный интерлиньяж?

Правила иерархии и адаптации

Подробнее