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

Сравните два блока текста ниже. Который из них выглядит более сбалансированным?

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

Используйте шрифты, у которых есть как минимум четыре начертания.

Используйте контрасты.

Чтобы создать визуальную иерархию, пользуйтесь различными начертаниями.

Cомневаетесь? Делите на два!

Будьте внимательны к межстрочным интервалам.

Наиболее органично выглядит текст с межстрочными интервалами 1,2х-1,5х от размера кегля шрифта. Смотрите:

Урезайте длину строк.

Дальнейшая информация — для фанатов своего дела.

Дефис используется в сложносоставных словах.

- – —

Короткое тире используется для обозначения диапазона или расстояния.

- – —

Длинное тире прекрасно заменяет запятые, скобки и двоеточия.

- – —

И самое главное, не забывайте о кернинге.

При подготовке материала использована статья Pierrick Calvez: https://medium.muz.li/typography-that-sacred-cow-ea7a5909ca7...

Спасибо, что дочитали!

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

Люди, которых я спрашивал, выбирали между вариантами 3 и 4. Варианты 1 и 2, безусловно, слишком угловатые, 5 — уже близок к квадрату. Если мы совместим третий и четвёртый варианты — геометрический и исправленный круги, то узнаем, что второй чуть больше первого и, следовательно, более округлый для наших глаз.

Чтобы продемонстрировать, что именно я имею в виду, я взял буквы «О» из трёх известных геометрических шрифтов — Futura, Circe и Geometria. Учитывая, что высококачественные шрифты построены на основе визуального восприятия человека и используют сложную систему оптической конструкции, я полагаю, что их круговые формы выглядят более округлыми, чем геометрические. Разве эти буквы не приятны для глаз?

Давайте накладывать на них геометрические круги. Даже «О» шрифта Futura, что ближе всех к геометрической форме круга, больше. Буквы шрифтов Circle и Geometria шире, чем геометрические круги.

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

Как мы можем использовать это? Для скругления угла, конечно! Если вы используете встроенную функцию скругления в популярных графических редакторах — Photoshop, Illustrator или Sketch — оптически результат не будет хорошим.

Глаз человека моментально обнаруживает точки, где прямая линия превращается в кривую. И это скругление не выглядит естественным.

Я исправил эту проблему с учётом зрительного восприятия.

У такого скругления есть дополнительная область за геометрическим кругом, что делает точки, где линия переходит в кривую, незаметными.

Просто посмотрите на разницу между этими методами скругления.

Теперь мы можем применить этот подход к округлым кнопкам.

Думаю, вы заметили, что кнопки справа имеют более плавный угол скругления и это более приятно для глаз.

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

Первая фигура — это квадрат со скруглёнными углами, который я создал в Sketch. Вторая фигура — суперэллипс, также известный как кривая Ламе. Эти кривые были открыты французским математиком Габриэлем Ламе (Gabriel Lamé) и, в зависимости от используемой формулы, могли варьироваться от чего-то вроде четырехконечной звезды до фигуры, которая выглядит как округлый квадрат.

Марк Эдвардс (разработчик эксклюзивных приложений для Mac) предложил формулу кривых Ламе, которая приводит к гладкой и оптически совершенной форме. Начиная с iOS 7 иконки создаются на этой основе.

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

Основное преимущество использования суперэллипса — его более круглая и гладкая форма. С другой стороны, эти нестандартные формы трудно вставить в реальный интерфейс. Нужно либо объединить несколько SVG-файлов, либо подключить специальные формулы или скрипты в код, или использовать PNG-маски, как это делает Apple для своих иконок.

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

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

ВАЖНО ПОМНИТЬ

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

Оптически правильное скругление угла требует специальных формул или ручной регулировки формы.

БОНУС

Иногда квадрат неидеальной геометрии выглядит более квадратно. Можно подумать «Что за бред?» Итак, что вы думаете о квадратах ниже? Какая форма выглядит более квадратной?

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

Я лично был удивлён, когда узнал, что наши глаза более чувствительны к высоте объекта, чем к его ширине. Это объясняет, почему даже в геометрических шрифтах буквы «О» всегда шире, чем геометрические круги, а вертикальные штрихи буквы «Н» всегда толще, чем горизонтальные.

При подготовке материала использована статья Славы Шестопалова (Optical Effects in User Interfaces (for True Nerds): https://medium.muz.li/optical-effects-9fca82b4cd9a

Спасибо, что дочитали! Дальше будет небольшая статья про текст

В случае, если вы не верите, что эти формы нарисованы точно, это версия с направляющими

и цифрами.

Давайте взглянем на ещё одну картинку с квадратом и кругом. С точки зрения визуального веса, кажутся ли они вам равными?

Для меня определённо они равны. По крайней мере, трудно сразу сказать, что одно перевешивает другое. Неудивительно — я увеличил диаметр круга на 50 пикселей.

Чтобы показать, почему это происходит, я перекрывал фигуры из первого примера (400-пиксельный квадрат и круг) и второго примера (400-пиксельный квадрат и 450-пиксельный круг). Как вы можете заметить ниже, квадрат «перевешивает» круг за счёт зон «а» в первом примере, в то время как во втором примере круг уравновешивает своё положение зонами «b».

То же самое происходит и с квадратами (ромбами) или треугольниками. Чтобы визуально сбалансировать квадраты, они должны быть больше.

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

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

Пример иконок, сбалансированных оптически.

Становится ясно, почему область значков всегда больше, чем тело значка — чтобы неквадратные значки вписывались и выглядели не меньше, чем квадратные.

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

Но иногда мы работаем с уже существующей графикой, например, логотипы соцсетей используются в качестве кнопок «поделиться» и «лайк». Иконки Facebook и Instagram квадратные, а Twitter — это силуэт птицы, Pinterest — литера «P» в круге. Вот почему иконки Twitter и Pinterest из одного набора немного больше — так они выглядят сбалансированными с иконками Facebook и Instagram.

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

Но если вы измените стиль кнопки, увеличение не потребуется. На рисунке ниже кнопка и текстовое поле имеют высоту 80 пикселей, но кнопка справа не выглядит «потерянной» из-за контрастной черной заливки.

ВАЖНО ПОМНИТЬ

Оптический вес — это то, как человеческие глаза воспринимают размер и значение объекта, и он не обязательно равен его пиксельному размеру.

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

Области для значков должны иметь некоторое пространство, зарезервированное для оптической балансировки. Это важно для наборов иконок, которые постоянно на виду.

Ну, на этом я закончу, а если будет интересно, то впереди будет ещё про выравнивание разилчных форм, текстовых блоков и прочее

2. Figma

На данный момент самая удачная альтернатива Скетчу для win-юзеров. По сути, этот выбор за вас делает платформа.

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

Можно брать.

3. Experience Design

Не то, что мне было что сказать о нём, но как дань былому величию Adobe; и XD, как надежде на хотя бы частичное его возвращение, думаю, стоит его упомянуть. Кто работает в XD, можете дополнить меня в комментариях.

На данный момент он очень сырой, но выглядит, тем не менее, перспективно. И, может быть субъективно, но в плане взаимодействия — приятнее Фигмы (потому что больше похож на Скетч).

Всё это здорово, но...

Всё это здорово, но если вернуться от теории к правде жизни, наверняка возникнут некоторые проблемы. Например,

Как быть с обработкой растровых изображений (ретушь, коррекция, сменить-фон-убрать-прыщи)?

Никак. Всему свои инструменты: для разработки интерфейсов — Sketch, Figma etc; для работы с растровыми изображениями — Фотошоп. Никого не смущает, что мы не обрабатываем фотографии с помощью HTML/CSS, к примеру, так почему должно смущать, что мы не делаем это с помощью Скетча?

Что делать, если заказчик панически боится любых исходников, не заканчивающихся на .psd?

Внедрение Sketch или Figma повышает качество и скорость работы, как со стороны дизайна, так и со стороны разработки.

Для работы с исходником не требуется установки, покупки, пиратства дополнительного софта. Файл .sketch выгружаем в Zeplin (бесплатный, есть веб-версия, есть аналоги); .fgm никуда не выгружаем — Figma сама по себе бесплатная и имеет веб-версию.

Может быть, не все люди пойдут на встречу, но это не повод обрекать себя на фотошоп-болото и отказываться от развития.

Разработчик отправит меня на х#й Как быть, если панически боится разработчик?

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

Маловероятно, что такой вопрос в принципе возникнет. Как правило, преимущества Zeplin/Figma над psd-исходником, им (разработчикам) даже очевиднее, чем нам (дизайнерам) — достаточно минимальной демонстрации.

Спасибо!

И, бонусом, адрес