Каким должен быть логотип студии дизайна, и как сделать его уникальным? Мы любим минимализм, но в нашей сфере мы далеко не одни такие — есть множество студий с лаконичными и при этом красивыми лого.
Во-первых, обозначим идею логотипа: ранее, в самом начале нашего пути, это были стилизованные буквы W и M в кольце, затем мы ненадолго отошли от этой формы, оставив только букву W. Но в итоге решено было вернуться к лого внутри окружности, но уже с более лаконичными и современными очертаниями:
И хотя стилистика теперь совершенно иная, в целом преемственность и узнаваемость сохранилась. Внутри окружности, если присмотреться, угадываются очертания букв W и M, хотя мы не старались сделать это очевидным:
Казалось бы, все просто: вписали буквы W/M в окружность, подобрали шрифт — и готово, но это только на первый взгляд. Мы ничего не рисовали и не пользовались графическими редакторами вообще. Более того, мы не использовали никаких шрифтов для надписи, потому как
В том числе и шрифтовая часть.
С этого момента давайте разберемся более подробно. Мы не только дизайнеры, но и разработчики, а соответственно можем позволить себе открыть редактор кода и в буквальном смысле слова написать дизайн. Для этого нам требуется знание библиотеки векторной графики SVG, а также немного творческого энтузиазма — и то и другое у нас есть.
Сама эмблема без надписи у нас состоит лишь из круга и последовательности двух кубических кривых Безье — c этим проблем практически не возникло. А вот с текстом уже сложнее: буквы состоят и из прямых линий, и из объединенных кубических и квадратичных кривых — значения координат их узлов мы многократно выверяли для получения нужных очертаний.
Например, это буква m и ее SVG код:
<path d=“M 5 50 L 5 8 M 5 15 C 15 5 32 5 32 15 L 32 50 M 32 15 C 40 5 58 5 58 17 L 58 50”/>
Шрифт получился несколько похожим на Ubuntu — мы не раз использовали его в оформлении сайтов и рекламных материалов и решили взять за прототип — рекомендуем и вам. К тому же он доступен на Google Fonts. Но повторимся, в нашем лого нет рисунков и шрифтов как таковых — только SVG координаты.
В этом и состоит вся уникальность нашего логотипа. Но для чего это нужно?
При загрузке этой страницы вы возможно успели заметить такую анимацию — это наш прелоадер, сделанный на основе логотипа. Дело в том, что чистый SVG код позволяет с легкостью использовать отдельные элементы рисунка для различных CSS, SMIL или JS анимаций. Например, мы точно знаем координаты верхней точки выносного элемента буквы b, соответственно можем написать пару строк CSS и заставить его двигаться:
Конечно, это уже баловство и на качество UI/UX не влияет никак, но цель такова: если понадобится некая анимация логотипа для большей интерактивности, мы сделаем ее быстро без помощи сторонних JS-библиотек, плагинов и прочих «костылей».
Но самое главное преимущество — чистота и лаконичность самого кода SVG. Если бы тот же самый рисунок был нарисован в графическом редакторе, его он был бы в несколько раз объемнее. Краткость и в данном случае — сестра таланта: с меньшим количеством кода удобнее работать.
Можете здесь же взглянуть на правильную структуру SVG:
See the Pen
Webmassa logo by Alexander Webmassa (@Webmassa)
on CodePen.
Итак, про наш собственный дизайн мы рассказали, а что мы можем предложить вам? Если ваш логотип в принципе реально отрисовать чистым SVG кодом, с удовольствием этим займемся. Кроме того, для других разработчиков сайтов и приложений мы можем предложить отрисовку отдельных элементов интерфейса или наборов иконок, планов, схем и чертежей в SVG.
Например, это анимированный логотип Beertone, также отрисованый чистым кодом SVG. Можете посмотреть видео о том, как сделана эта работа: