Правила иерархии и адаптации
Как вычислить размер заголовка?
Правила иерархии и адаптации
Формула:
кегль текста * 1,6 = кегль заголовка
Правила иерархии и адаптации
1,6 — это «божественная пропорция», золотое сечение
Но не единственный верный вариант
Правила иерархии и адаптации
В автоматическом режиме это делает сервис Type-scale
Правила иерархии и адаптации. Пример
Правила иерархии и адаптации
Оптимальные размеры шрифтов для десктопа
Правила иерархии и адаптации
Нет точных правил для размера шрифта
Правила иерархии и адаптации
В среднем размер основного текста от 16 до 18 px. Если текста не много, то даже 24 пикселя может быть приятным для чтения.
Правила иерархии и адаптации
Правила иерархии и адаптации
Правила иерархии и адаптации
Правила иерархии и адаптации
Создайте стили для всех уровней текста
Правила иерархии и адаптации
Правила иерархии и адаптации
Внутреннее расстояние всегда должно быть меньше внешнего
Правила иерархии и адаптации
Это касается букв, строк, абзацев, колонок
Правила иерархии и адаптации. Пример
Расстояние между буквами меньше, чем между словами
Правила иерархии и адаптации. Пример
Расстояние между словами меньше, чем между строками
Правила иерархии и адаптации. Пример
Расстояние между строками меньше, чем между абзацами
Каждый из нас понимает очевидную вещь: убеждённость некоторых оппонентов однозначно фиксирует необходимость анализа существующих паттернов поведения.
А также интерактивные прототипы формируют глобальную экономическую сеть и при этом — в равной степени предоставлены сами себе.
Правила иерархии и адаптации. Пример
Расстояние между заголовком и последующим текстом меньше, чем расстояние между концом текста и следующим заголовком
Каждый из нас понимает очевидную вещь: убеждённость некоторых оппонентов однозначно фиксирует необходимость анализа существующих паттернов поведения.
А также интерактивные прототипы формируют глобальную экономическую сеть и при этом
в равной степени предоставлены сами себе.
Правила иерархии и адаптации
Оптимальные размеры шрифтов для мобильных
Правила иерархии и адаптации
На мобильных меньше места для контента
Правила иерархии и адаптации
Пользователи ближе держат мобильный к глазам
Правила иерархии и адаптации
Значит и шрифты должны быть меньше, чем на десктопе
Правила иерархии и адаптации
Основной текст должен быть
не менее 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.
Правила иерархии и адаптации
Убедитесь, что заголовки не занимают больше трёх строк
Правила иерархии и адаптации
Если это произошло — сократите длину заголовков или измените размер шрифта
Правила иерархии и адаптации
Как вычислить идеальный интерлиньяж?
Правила иерархии и адаптации
Правила иерархии и адаптации
Чем длиннее строка
по количеству слов, тем больше должен быть интерлиньяж.
И наоборот.
Чем больше размер шрифта,
тем меньше интерлиньяж
Вот наш заголовок, он крупный
и длинный
Правила иерархии и адаптации.
Пример
И какой-то текст. Каждый из нас понимает очевидную вещь: убеждённость некоторых оппонентов однозначно фиксирует необходимость анализа существующих паттернов поведения.
Правила иерархии и адаптации
Обычно интерлиньяж составляет 120-125%
(1.2 - 1.25 Spacing в Тильде)
Правила иерархии и адаптации
Если размер кегля 16, то формула выглядит так:
16 х 1.2 = 19,2
То есть рекомендуемый интерлиньяж — 19-20
Правила иерархии и адаптации. Пример
В частности, перспективное планирование требует от нас анализа вывода текущих активов. С учётом сложившейся международной обстановки, высококачественный прототип будущего проекта позволяет оценить значение новых предложений.
Правила иерархии и адаптации. Пример
В частности, перспективное планирование требует
от нас анализа вывода текущих активов.
С возможным учётом сложившейся такой международной обстановки, высококачественный прототип будущего проекта позволяет оценить значение новых предложений.
Как принято считать, действия представителей оппозиции призывают нас к новым свершениям, которые, в свою очередь, должны быть объявлены нарушающими,
к сожалению общечеловеческие нормы этики и морали.
Как принято считать, действия представителей оппозиции призывают нас к новым свершениям, которые, в свою очередь, должны быть объявлены нарушающими,
к сожалению общечеловеческие нормы этики и морали.
Правила иерархии и адаптации
Следите за количеством символов в строке
Правила иерархии и адаптации
В строке должно быть не больше 45–65 знаков для латиницы
и 45–75 для кириллицы
Правила иерархии и адаптации. Пример
Правила иерархии и адаптации
Задача организации, в особенности же социально-экономическое развитие позволяет выполнить важные задания по разработке системы массового участия. Являясь всего лишь частью общей картины, явные признаки победы институционализации освещают чрезвычайно интересные особенности картины в целом, однако конкретные выводы, разумеется, функционально разнесены на независимые элементы. Для современного мира базовый вектор развития представляет собой интересный эксперимент проверки инновационных методов управления процессами.
Главное, чтобы взгляд читателя легко воспринимал строку
от начала и до конца
Вёрстка текста
на лендинге: иерархия, правила и примеры
Меня зовут Лиза.
Я дизайнер лендингов
в Нетологии
- Лендинг — это первое касание
- Пелена текста от заказчика
- Базовые ошибки
- Ускорение работы над проектом
1.Как грамотная вёрстка помогает лендингу
2.Основные этапы вёрстки текста
3.Правила иерархии и адаптации
4.Какими способами еще повысить читаемость
5.Ответы на ваши вопросы
Без хорошей вёрстки читатель уйдёт сразу
С хорошей вёрсткой
и бесполезным содержанием он чуть-чуть задержится
С хорошей вёрсткой
и хорошим содержанием — вычленит нужное и прочитает
Вёрстка — это красивая упаковка. Плохое содержание она не спасёт
Как грамотная вёрстка помогает лендингу. Вывод
Пользователь не читает, а сканирует страницу
Без вёрстки текста пользователь не совершит целевое действие
Основные этапы вёрстки текста
Вникаем в содержание
Разбираем структуру
Создаем конструкцию
Разрабатываем стиль
Прочтите текст и определитесь с задачей
Структура — это мост
от содержания к форме.
"фух, это не поток сознания"
Без абзацев не ясно, где заканчивается мысль
и начинается другая
Если не дробятся абзацы, скорее всего, текст — поток сознания
2.Разбираем структуру. Пример
Практически все из нас знают, что есть полезная и вредная еда, мы делим все продукты на плохие и хорошие, и это действительно так, потому что не все они полезны для человеческого организма, и есть много таких, которые вредны, а иногда и опасны. Человеческий организм получает почти все необходимые вещества именно через пищу и воду. С питанием связаны все жизненно важные функции организма. Недостаток полезных веществ, содержащихся в том же мясе, например железа высокой биологической доступности, может вызвать серьезные проблемы со здоровьем.
Шаг 2. Добавляем заголовки
и подзаголовки
Если абзац — единица мысли, то подзаголовок — единица смысла.
Не обязательно делить текст на абзацы и заголовки, это могут быть и тезисы/поинты
2.Разбираем структуру. Пример
В ДК Радуга (г. Смоленск, улица Пушкина 9) пройдет концерт известного артиста в честь 45 летия "Новое начало" Николая Баскова. Приходите 21 мая в 19:00, стоимость билета 1500р. Телефон для связи +7 (999) 999 - 99 - 99
2.Разбираем структуру. Пример
2.Разбираем структуру. Пример
В ДК Радуга (г. Смоленск, улица Пушкина 9) пройдет концерт известного артиста в честь 45 летия "Новое начало" Николая Баскова. Приходите 21 мая в 19:00, стоимость билета 1500р. Телефон для связи +7 (999) 999 - 99 - 99
Конструкция — это визуальное представление структуры
и скелет будущего макета
Одну и ту же структуру можно отобразить с помощью разных конструкций.
3.Создаем конструкцию. Пример
Стиль — это настроение
и «вкус» макета
На этапе стиля мы подбираем гарнитуры, шрифты, начертания, размеры и тд
Источник стиля следует искать как в содержании, так и далеко за его пределами
Абсолютно любой элемент
— от пропорций формата до межбуквенного расстояния
является стилеобразующим
Основные этапы вёрстки текста
Перепрыгивать через этапы опасно, как и менять их местами
Основные этапы вёрстки текста. Выводы
1.Есть 4 обязательных этапа
2.Их нельзя перескакивать и менять местами
Правила иерархии
и адаптации
Правила иерархии и адаптации
Создайте визуальную иерархию
Правила иерархии и адаптации
Типографская иерархия — это порядок в расположении заголовков и основного текста
Правила иерархии и адаптации
Правила иерархии и адаптации
Правила иерархии и адаптации
Заголовки одного уровня должны быть одного кегля
и интерлиньяжа
Нужно определить размер главного заголовка (h1), подзаголовков (h2, h3 и далее), основного текст (р1)
и подписей (р2)
Правила иерархии и адаптации
Без четкой иерархии будет сложно понять, где важная информация
Правила иерархии и адаптации.
Пример
Правила иерархии и адаптации
Чем меньше кеглей на лендинге, тем контрастнее становится текст
Интерлиньяж — межстрочный интервал
Правила иерархии и адаптации
Размер Input fields (Поля ввода)
Правила иерархии и адаптации
Они должны точно соответствовать размерам основного текста
Правила иерархии и адаптации
Правила иерархии и адаптации
Используйте размер на пару значений меньше: например, 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.
Правила иерархии и адаптации
Текст должен находиться
в рабочей области
Правила иерархии и адаптации. Пример
Правила иерархии и адаптации
Обязательно проверяйте, как выглядит ваш дизайн на самом устройстве
Правила иерархии и адаптации
Какими способами еще повысить читаемость
Убирайте висячие предлоги
Типограф делает это за пару кликов
Как повысить читаемость. Пример
Как принято считать, но непосредственные участники технического прогресса, вне зависимости от их уровня, должны быть смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего и возрастает их статус бесполезности.
Текст желательно выравниваем по левому краю
Как повысить читаемость.
Пример
Как принято считать,
но непосредственные участники технического прогресса, вне зависимости от их уровня, должны быть смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего
и возрастает их статус бесполезности.
Не пишите текст вертикально
Текст прочитать очень трудно, если у всех букв базовая линия находится на разной высоте
Как повысить читаемость. Пример
Как принято считать, непосредственные участники технического прогресса, вне зависимости от их уровня, должны быть смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности.
Как принято считать, непосредственные участники технического прогресса, вне зависимости от их уровня, должны быть смешаны с не уникальными данными до степени совершенной неузнаваемости, из-за чего возрастает их статус бесполезности.
Написание ПРОПИСНЫМИ — популярный приём в дизайне
Но сами буквы становятся менее контрастны между собой
Не пишите длинные фразы заглавными буквами.
Это замедлит чтение
Как повысить читаемость. Пример
Правильно подбирайте
цвет текста
Цвет — один из самых мощных инструментов дизайнера
Главное правило — выбирать такой цвет шрифта, чтобы текст легко воспринимался читателями
Обязательно создаем контраст. Темный шрифт на светлом фоне или наоборот
Проверьте уровень контраста
на сайте WebIAM
Коэффициент контрастности должен быть не меньше чем 7:1
для обычного текста
и 3:1 для крупного текста.
Как повысить читаемость. Пример
Разнообразный и богатый опыт говорит нам, что высококачественный прототип будущего проекта предполагает независимые способы реализации своевременного выполнения сверхзадачи.
Разнообразный и богатый опыт говорит нам, что высококачественный прототип будущего проекта предполагает независимые способы реализации своевременного выполнения сверхзадачи.
Как повысить читаемость. Пример
- Вёрстка текста повышает его читаемость
- Есть 4 этапы вёрстки текста
- У текста обязательно должна быть иерархия и адаптация по правилам
- На лендинге, как и везде, где есть типографика, нужно пользоваться ее правиламми
Соблюдение определённых ограничений в рационе вовсе не означает, что вы должны исключить из ежедневного меню все ваши любимые продукты и отдать предпочтение невкусной, но полезной пище. Вкусная и полезная пища необходима для здоровья и работоспособности человека. Специалисты говорят, что ежедневная зарядка, много воды и полезной пищи сделают и из обезьяны человека. Некоторая спорная пища становится полезной, когда её употребляют несколько поколений предков.
С целью снизить число людей с ожирением рестораны быстрого питания и сети супермаркетов вводят новые, более полезные опции (например, салаты, сэндвичи с цельнозерновым хлебом или напитки без сахара), а также предоставляют информацию о пищевой ценности продуктов в меню или на упаковке.
Соблюдение определённых ограничений в рационе вовсе
не означает, что вы должны исключить из ежедневного меню все ваши любимые продукты и отдать предпочтение невкусной, но полезной пище.
Специалисты говорят, что ежедневная зарядка, много воды
и полезной пищи сделают и из обезьяны человека. Некоторая спорная пища становится полезной, когда
её употребляют несколько поколений предков.
С целью снизить число людей с ожирением рестораны быстрого питания и сети супермаркетов вводят новые, более полезные опции (например, салаты, сэндвичи
с цельнозерновым хлебом или напитки без сахара),
а также предоставляют информацию о пищевой ценности продуктов в меню или на упаковке.
Полезная пища необходима для здоровья человека