Из этого исследования родился проект «Галочки для шрифтов»
Галочка — мощнейший культурный и бытовой символ. Галочка универсальна — в мире её понимают одинаково. Каждый знает, как нарисовать «птичку» от руки.
Из этого исследования родился проект «Галочки для шрифтов»
Однако мало кто из дизайнеров понимает, как изобразить графичную галочку, которой не будет стыдно в окружении типографиики, пиктограмм и элементов интерфейса. Даже в профессиональных шрифтах с галочками творится какое‑то непотребство.
По моей просьбе дизайнер бюро Михаил Нозик подробно исследовал вопрос. Предоставим ему слово:
М. Н. Как создавалась галочка для интерфейса отправки бухгалтерских отчётов
Вооружаемся знанием у арт‑директора. Выводим общие принципы:
Чтобы галочка была энергичной и сбалансированной, левый хвостик должен быть в 2‑2,5 раза короче правого.
Если галочка располагается рядом со строкой текста, её нужно опустить чуть ниже базовой линии строки. Наклон хвостиков должен дружить с наклоном диагональных штрихов букв.
Оптический центр галочки находится не в середине, а на нижнем кончике. Это особенно важно учитывать, если галочка располагается внутри какой‑нибудь формы, например кружка.
Установка приложения на маке. Галочке тесно в кружке, оптический центр не совпадает с центром круга:
При этом на сайте Эпла галочки стоят хорошо:
У галочки узнаваемая форма, но при этом разнятся начертания. Чтобы понять устройство галочки, рисуем скелеты:
Галочку начинают рисовать с левого верхнего кончика, затем вниз и потом быстрым движением вверх. Хорошая галочка нарисована с учётом этого знания, поэтому её левый штрих толще правого. Как и в каллиграфии, это связано с наклоном пера: левый штрих при движении руки слева сверху вниз получается толще, чем правый. Правый же кончик будет тоньше сверху из‑за того, что при движении по дуге вверх вправо наклон пера не меняется — штрих сходит на нет:
Как и в разных шрифтах, разница между толщиной может быть незаметной, но толстый и тонкий штрихи не могут поменяться местами:
Классифицируем галочки:
Шрифтовые галочки повторяют пластику шрифта: дружат с наклоном диагональных штрихов, заимствуют наиболее характерные изгибы и скругления букв. Например, в логотипе «Тут найдут» галочка так дружит с шрифтом, что замену кратки
у « й» поначалу не замечаешь:Галочка на Гугль‑диске:
Логотип Бёрдвью:
Почти все готовые галочки из шрифтов противоречат принципам:
Бесконечно ужасная галочка из фотостоков:
Геометрические галочки плохо сочетаются с текстами и неплохо живут в иконках и символах. В них нет дополнительных наклонов и лишних углов, хвосты часто срезаны параллельно наклонам или друг другу. Толщины хвостиков обычно равны.
Виндоус Фаервол:
Геометрическая галочка чекбокса из Виндоус 95—2000…
…неудачно попыталась стать шрифтовой в Виндоус 7:
…А в Виндоус 8 снова стала геометрической:
Их всех побеждает своими пропорциями и правильным расположением галочка на Маке:
Неплохая геометрическая галочка в андроиде:
Каллиграфические галочки написаны вручную двумя быстрыми движениями:
Пробуем нарисовать галочку каждого типа.
Шрифтовая галочка
Начинаем с любимой шрифтовой галочки Артёма:
Галочка крутая, но не дружит с надписью: наклон, скругления не отсюда.
Смотрим другие готовые галочки из шрифтов:
Очень длинный левый хвостик и слабое тоненькое окончание у правого. Примечательно, что именно Дином набрана надпись «Принят». Насколько не сочетаются галочка и шрифт!
У галочки приятная форма, но непропорциональный дубинкообразный правый хвостик.
Из‑за чересчур сильного наклона левого хвостика галочка заваливается налево, на нижнем и правом кончике повисли сомнительные капли.
Геометрическая галочка
Начинаем с прямоугольных форм:
Получился слишком длинный левый хвостик, слишком правильная прямоугольная форма. Скругления и наклон не дружат с шрифтом. Убираем прямоугольность, исправляем наклон:
Каллиграфические галочки
Исправляем все ошибки предыдущих версий и совершаем новые:
Левый хвостик длинноват, к тому же непонятно истоньшается кверху. Маркерные прожилки нарисованы неправильно: на левом хвостике маркер идёт вниз с сильным нажатием — прожилки внизу быть не может.
Исправляем прожилки, но галочка выглядит так, будто её рисовали три часа, а не быстрым движением.
Смотрим фотографии нарисованных галочек и перерисовываем форму, усиливаем разницу между толщиной правого и левого хвостика, детализируем прожилки:
Завершающим штрихом сжимаем галочку по горизонтали, чтобы она подружилась с диагональным штрихом в «И»: