ДИЗАЙН НА УРОВНЕ
БЛОК 1
БЛОК 1
УРОК 4
(часть1)
(часть1)
Типографика
Работа с текстом.
Безумно важная тема, т.к. текст есть практически во всех макетах и очень важно понимать, как же с ним правильно работать, чтобы информация воспринималась легче и текст читали, а не пролистывали.
Работа с текстом.
Безумно важная тема, т.к. текст есть практически во всех макетах и очень важно понимать, как же с ним правильно работать, чтобы информация воспринималась легче и текст читали, а не пролистывали.
и начнем мы с вами с условностей
Условности - это наши друзья
Мы с вами уже давно научились "читать" газеты и журналы. Под словом читать я имею ввиду - понимать те условности, которые в них содержатся.
Крупный шрифт - заголовок.
Текст под ним - основное содержание.
Текст под фото- подпись.
Если текст выделен каким-то особым образом, то скорее всего в нем содержится какая-то важная мысль.
Все эти условности помогают нам быстрее и легче воспринимать информацию.
Текст под фото- подпись.
Если текст выделен каким-то особым образом, то скорее всего в нем содержится какая-то важная мысль.
Все эти условности помогают нам быстрее и легче воспринимать информацию.
С этого момента мы с вами становимся НЕ ПРОСТО пользователями, теперь мы с вами будем создавать ТО, на что обычные люди не обращают внимания.
что входит в условности:
Визуальная иерархия
1. Чем более важный элемент, тем больше места он занимает на странице.
Важные заголовки - крупнее, жирнее, другого цвета, либо отделяются большим пустым пространством.
2. Элементы, связанные логически, должны быть связаны и визуально:
- сгруппированы под одним заголовком.
- к ним применен один стиль (один и тот же шрифт, размер и цвет шрифта)
- помещены в выделенную (цветом или графически) область страницы
Важные заголовки - крупнее, жирнее, другого цвета, либо отделяются большим пустым пространством.
2. Элементы, связанные логически, должны быть связаны и визуально:
- сгруппированы под одним заголовком.
- к ним применен один стиль (один и тот же шрифт, размер и цвет шрифта)
- помещены в выделенную (цветом или графически) область страницы
Хорошая визуальная иерархия - это правило качественного дизайна, т.к. она экономит время и усилия потребителей.
Потому что чем проще что-то воспринимать, тем выше шанс, что человек это прочитает и воспользуется предложением.
Не заставляйте потребителей много думать,
они ленивые и это не любят :(
Видео ниже как раз о том, как же сделать так,
чтобы текст читался легче и информация воспринималась проще.
Потому что чем проще что-то воспринимать, тем выше шанс, что человек это прочитает и воспользуется предложением.
Не заставляйте потребителей много думать,
они ленивые и это не любят :(
Видео ниже как раз о том, как же сделать так,
чтобы текст читался легче и информация воспринималась проще.
Еще пара важных правил:
1. Текст на белом фоне читается легче и запоминается в 2 раза лучше.
Черный хорошо, но для небольшого объема текста.
2. Не деформируйте текст
Не изменяйте текст намеренно по высоте или ширине, из-за таких изменений шрифт становится не пропорциональным и начинает читаться хуже.
3. КАПС только для заголовков
Текст которого больше чем несколько строк, лучше читается строчными буквами, чем ЗАГЛАВНЫМИ.
4. Выравнивание
Больших объемов текста всегда лучше по левому краю, врезки — по центру или тоже по левому. По ширине только если это книжная или журнальная верстка.
Черный хорошо, но для небольшого объема текста.
2. Не деформируйте текст
Не изменяйте текст намеренно по высоте или ширине, из-за таких изменений шрифт становится не пропорциональным и начинает читаться хуже.
3. КАПС только для заголовков
Текст которого больше чем несколько строк, лучше читается строчными буквами, чем ЗАГЛАВНЫМИ.
4. Выравнивание
Больших объемов текста всегда лучше по левому краю, врезки — по центру или тоже по левому. По ширине только если это книжная или журнальная верстка.
В журнальной и газетной верстке рекомендуется делить страницу
на 3 колонки текста, так он читается
и воспринимается легче.
на 3 колонки текста, так он читается
и воспринимается легче.
Резюмируем:
Как же сделать текст читаемым:
1. Добавить разделение по разделам и абзацам с добавлением заголовков.
В примере:
1 раздел- Логотип, 2 раздел - История, потому что если перед нами "кирпич" текста, то восприятие будет замедленно, а если будут отдельные блоки, то даже просмотрев, мы поймем о чем речь и даже что-то запомним.
2. Увеличить межстрочное расстояние.
Делайте его чуть больше чем размер вашей строки, так шрифт читаться будет легче. Примерно 150% от размера основного шрифта. Это что касается текста, в заголовках лучше 100% от размера шрифта.
3. Делайте врезки (врезка - это текст "врезанный" в основной текст, чаще всего выделяется другим шрифтом, начертанием или выделен каким-то отличным цветом.)
Врезки нужны, они служат якорями, привлекают внимание и несут в себе ключевой смысл текста, если самим сложно будет в макете выделить какую-то информацию, смело спрашивайте заказчика, что в тексте является главным и выделяйте то, что он скажет.
4. Для больших объемов текста выбирайте шрифт, который легко читается, по возможности без декоративных элементов.
5. Цвет шрифта максимально контрастный по отношению к фону.
В примере:
1 раздел- Логотип, 2 раздел - История, потому что если перед нами "кирпич" текста, то восприятие будет замедленно, а если будут отдельные блоки, то даже просмотрев, мы поймем о чем речь и даже что-то запомним.
2. Увеличить межстрочное расстояние.
Делайте его чуть больше чем размер вашей строки, так шрифт читаться будет легче. Примерно 150% от размера основного шрифта. Это что касается текста, в заголовках лучше 100% от размера шрифта.
3. Делайте врезки (врезка - это текст "врезанный" в основной текст, чаще всего выделяется другим шрифтом, начертанием или выделен каким-то отличным цветом.)
Врезки нужны, они служат якорями, привлекают внимание и несут в себе ключевой смысл текста, если самим сложно будет в макете выделить какую-то информацию, смело спрашивайте заказчика, что в тексте является главным и выделяйте то, что он скажет.
4. Для больших объемов текста выбирайте шрифт, который легко читается, по возможности без декоративных элементов.
5. Цвет шрифта максимально контрастный по отношению к фону.
Сайты для подбора шрифтов
https://fonts.google.com
Подбор шрифтов
https://www.fonts-online.ru
Подбор шрифтов, тут выбор больше, чем на Google fonts, но могут попадаться не самые качественные шрифты
Домашнее задание:
1. Собрать себе базу шрифтов на рабочем компьютере.
Сайт - https://fonts.google.com и https://www.fonts-online.ru
Минимум этой базы :
- 3 шрифта для заголовка (выразительные, уникальные и может даже своеобразные шрифты)
- 4 шрифта для основного текста, пару шрифтов с засечками и пару без.
- и несколько интересных рукописных или просто необычных шрифтов.
Сайт - https://fonts.google.com и https://www.fonts-online.ru
Минимум этой базы :
- 3 шрифта для заголовка (выразительные, уникальные и может даже своеобразные шрифты)
- 4 шрифта для основного текста, пару шрифтов с засечками и пару без.
- и несколько интересных рукописных или просто необычных шрифтов.
