Не упусти!

Круто, что тебе интересны наши курсы!

И именно за твой интерес и желание развиваться мы дарим тебе скидку!

Заполни данные ниже и на почту прийдет письмо с промокодом для тебя со скидкой на любой курс!

Отлично!

Ваш промокод на скидку отправлен на Ваш E-mail. Проверте пожалуйста Вашу почту.

Проверьте все папки в вашем почтовом ящике (спам, промоакции).

Шрифты в UI-дизайне: принципы и полезные ссылки

Шрифты в UI-дизайне: принципы и полезные ссылки

Сегодняшняя тема – типографика в веб дизайне. Принципы, которые мы опишем далее, применимы не только для сайтов, но и для постеров, оформления презентаций и других видов работ.

Угловой размер 

 

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

Как вариант, это может быть  0,3° (до верхней линии знаков), отталкиваясь от точки обзора. Для удобства параметры шрифтов измеряются в градусах. Это позволяет корректно сравнивать размеры на разнообразных устройствах, получая при этом одинаково высокий уровень удобства использования продукта. 

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

Правило достаточно простое: если шрифт находится в три раза дальше, он должен быть в три раза больше. Таким образом вы сможете добиться идеального баланса. 

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

  • Все используют гаджеты по-разному, расстояние, естественно, тоже разное. 

  • Размер пикселей на устройствах также существенно отличается. 

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

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

 

Никто не отменял правило 1/16”

Как было сказано выше, пользователи будут читать ваш текст с разного расстояния. Но эта простая формула поможет вам разобраться и правильно настроить размеры текста: 

Размер букв, измеряемый в дюймах, должен равнятся 1/16” расстоянию от пользователя. Последний параметр измеряется в футах, что крайне важно учитывать. 

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

 

Учитывайте плотность пикселей при расчете расстояния

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

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

Хоть это и кажется логичным, но нет. Ведь нет ничего плохого в том, чтобы текст на экране компьютера был на 33% больше, чем на мобильном устройстве. Это особо актуально, если страница предполагает продолжительное чтение. 

Это и есть основные принципы типографики. Об этом и остальных правилах вам не стоит забывать при разработке. 

На самом деле типографика в web дизайне – это очень интересно. Поэтому мы рекомендуем изучить дополнительные материалы по теме, что позволит вам получить больше полезных знаний: 

  • Здесь вы найдете информацию от Google, как о ряде физических параметров, так и о пикселях самых разнообразных устройств на разных платформах. 

  • Если вам интересен дизайн в iOS, рекомендуем перейти по этой ссылке. Здесь вы найдете множество полезных материалов, которые помогут вам детально разобраться в этой теме. 

  • Как создавать человеческий интерфейс


Если вы разрабатываете дизайн для телевидения, почитайте познавательный материал от Molly Lafferty. Не лишним будет и изучение статьи от Apple и Android.

рекомендуемые статьи

Топ-10 комбинаций шрифтов 2021 Топ-10 комбинаций шрифтов 2021
Все еще не нашли то, что искали? Вот несколько комбинаций шрифтов, которые могут идеально подойти для вашего следующего дизайна....
6 главных тенденций дизайна интерьера в 2021 году 6 главных тенденций дизайна интерьера в 2021 году...
Все, что нужно знать о дизайне интерьера в этом году
Soft Skills Дизайнера Soft Skills Дизайнера
Чтобы стать профессионалом в творческой индустрии, вам необходимо иметь несколько вещей.
5 вещей, с которыми дизайнеры не столкнутся сегодня 5 вещей, с которыми дизайнеры не столкнутся сегодня...
Насколько мир дизайна отличается от прежнего
Вдохновение без копирования: как создать свою собственную оригинальную работу Вдохновение без копирования: как создать свою собственную оригинальную работу...
«Вызовет ли произведение, которое я создаю, чувство оригинала у зрителя?»
15 советов для улучшения формы 15 советов для улучшения формы
Формы являются неотъемлемой частью любого пользовательского интерфейса. Они устанавливают синхронный канал связи между предприятиями и пользователями. Их важность не вызывает сомнений, но в сети все еще есть множество пр...