Пунк 3

Пунк 4

Пунк 1

Пунк 1

Пунк 2

Пунк 2

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

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

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

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

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

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

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

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

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

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

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

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

Заголовок - 52

Заголовок - 32

32 х 1,6 = 52

20 х 1,6 = 32

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подписи (p2)

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

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

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

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

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

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

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

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

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

23 px

7 px

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

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

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

20 px

39 px

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

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

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

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

45 px

16 px

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

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

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

62px

25px

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

Заголовок

Заголовок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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.

Заголовок

Заголовок

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Кто я?

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

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, пятница

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

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

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

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

контакты

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

19:00, пятница

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.

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.

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

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

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

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

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

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

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

Ё-Й

Ё-Й

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

СПЕКТАКЛЬ

С
П
Е
К
Т
А
К
Л
Ь

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Выводы

Выводы

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

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

@enazar10

@elizavetanazarova

Мои контакты

Инстаграм

Телеграм

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

Потом это

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

Размер

Цвет

Констраст

Отступы

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

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

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

ПОДРОБНЕЕ

Подробнее

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

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

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

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