Артём
22 июля 2013

Как нарисовать правильную галочку?



Галочка — мощнейший культурный и бытовой символ. Галочка универсальна — в мире её понимают одинаково. Каждый знает, как нарисовать «птичку» от руки.

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

По моей просьбе дизайнер бюро Михаил Нозик подробно исследовал вопрос. Предоставим ему слово:


М. Н.: Отвечу рассказом о том, как создавалась галочка для интерфейса отправки бухгалтерских отчётов.

  • Вооружаемся знанием у арт-директора. Выводим общие принципы:
  • Чтобы галочка была энергичной и сбалансированной, левый хвостик должен быть в 2-2,5 раза короче правого.
  • Если галочка располагается рядом со строкой текста, её нужно опустить чуть ниже базовой линии строки. Наклон хвостиков должен дружить с наклоном диагональных штрихов букв.
  • Оптический центр галочки находится не в середине, а на нижнем кончике. Это особенно важно учитывать, если галочка располагается внутри какой-нибудь формы, например кружка.

Установка приложения на маке. Галочке тесно в кружке, оптический центр не совпадает с центром круга:

Из этого исследования родился проект «Галочки для шрифтов»

При этом на сайте Эпла галочки стоят хорошо:


У галочки узнаваемая форма, но при этом разнятся начертания. Чтобы понять устройство галочки, рисуем скелеты:


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


Как и в разных шрифтах, разница между толщиной может быть незаметной, но толстый и тонкий штрихи не могут поменяться местами:

Классифицируем галочки:

  1. Шрифтовые галочки повторяют пластику шрифта: дружат с наклоном диагональных штрихов, заимствуют наиболее характерные изгибы и скругления букв. Например, в логотипе «Тут найдут» галочка так дружит с шрифтом, что замену кратки у «й» поначалу не замечаешь:


    Галочка на Гугль-диске:


    Логотип Бёрдвью:

Почти все готовые галочки из шрифтов противоречат принципам:


Бесконечно ужасная галочка из фотостоков:


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

    Виндоус Фаервол:


    Геометрическая галочка чекбокса из Виндоус 95—2000…


    …неудачно попыталась стать шрифтовой в Виндоус 7:


    …А в Виндоус 8 снова стала геометрической:


    Их всех побеждает своими пропорциями и правильным расположением галочка на Маке:


    Неплохая геометрическая галочка в андроиде:


  2. Каллиграфические галочки написаны вручную двумя быстрыми движениями:

Пробуем нарисовать галочку каждого типа.

Шрифтовая галочка

Начинаем с любимой шрифтовой галочки Артёма:

Галочка крутая, но не дружит с надписью: наклон, скругления не отсюда.


Смотрим другие готовые галочки из шрифтов:

Очень длинный левый хвостик и слабое тоненькое окончание у правого. Примечательно, что именно Дином набрана надпись «Принят». Насколько не сочетаются галочка и шрифт!


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


Из-за чересчур сильного наклона левого хвостика галочка заваливается налево, на нижнем и правом кончике повисли сомнительные капли.

Геометрическая галочка

Начинаем с прямоугольных форм:


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


Каллиграфические галочки

Исправляем все ошибки предыдущих версий и совершаем новые:


Левый хвостик длинноват, к тому же непонятно истоньшается кверху. Маркерные прожилки нарисованы неправильно: на левом хвостике маркер идёт вниз с сильным нажатием — прожилки внизу быть не может.


Исправляем прожилки, но галочка выглядит так, будто её рисовали три часа, а не быстрым движением.

Смотрим фотографии нарисованных галочек и перерисовываем форму, усиливаем разницу между толщиной правого и левого хвостика, детализируем прожилки:


Завершающим штрихом сжимаем галочку по горизонтали, чтобы она подружилась с диагональным штрихом в «И»:


P. S.

Дата следующего набора в Школу стажёров пока неизвестна.

 
Мы напишем вам, когда будет открыт набор. Без спама.

Поделиться

Комментарии

Алексей Мельников
22 июля 2013

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

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


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

Мы публикуем комментарии, которые добавляют к уже сказанному новые мысли и хорошие примеры. Мы ожидаем, что такие комментарии составят около 20% от общего числа.

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

Вот такой веб 2.0.

Недавно всплыло

4 Начальник считает, что перед встречей нужно обязательно разработать несколько вариантов предложений 6 2 4