Приходилось ли вам когда-нибудь создавать дизайн для дизайнеров? Именно такая задача встала перед студией tubik, когда к ней обратился создатель крупного сервиса для 3D-моделирования.
Сегодня мы, команда дизайн-агентства tubik, хотим рассказать о разработке дизайна для дизайнеров. Представляем вам кейс uMake — крутого многофункционального сервиса для 3D-моделирования, дизайна и визуализации идей.
Клиент и проект
uMake — цифровой сервис, который позволяет создавать красивые дизайны с помощью библиотеки контента и простых инструментов. Он дает профессионалам в области САПР (систем автоматизированного проектирования) и любителям 3D-моделирования возможность генерировать захватывающий 3D-контент на ходу, предоставляя им полную свободу действий для воплощения своих фантазий в реальность.
Чтобы привлечь аудиторию и последовательно общаться с ней через многочисленные каналы коммуникации, компании нужен был привлекательный и эффективный фирменный стиль, который помог бы бренду uMake установить прочные связи с пользователями и продемонстрировать свою способность решать их проблемы.
История появления uMake, как это часто бывает, чрезвычайно человечна и эмоциональна: основатель компании, выходец из маленького городка, освоил Photoshop и тем самым дал себе путевку в жизнь. Создавая uMake, он вложил эту историю в сердце своего детища, стремясь создать продукт, который воплощал бы мечты и идеи людей с помощью доступных и простых инструментов.
Перед большой креативной командой агентства tubik была поставлена задача — создать яркий, стильный и гибкий фирменный стиль и функциональный, удобный веб-сайт для uMake. Также мы сотрудничали с 3D-художниками Женей Гором и Vikiiing, которые создали великолепную 3D-графику для этого проекта.
Фирменный стиль
Говоря о характере бренда, создатели отметили, что большинству людей легче донести свои идеи в формате 3D, но им сложно научиться создавать такую графику — и вот здесь на помощь им приходит uMake.
Целевая аудитория продукта весьма разнообразна: от студентов, преподавателей и любителей с разным уровнем подготовки до профессионалов, использующих моделирование для решения рабочих задач.
Исследование бренда помогло выявить один из важнейших факторов, объединяющих разных представителей целевой аудитории: пользователи uMake ценят творческий процесс не меньше, чем результат. Таким образом, суть бренда можно сформулировать следующим образом:
- uMake — это простой инструмент, который помогает пользователям выражать, создавать и развивать свое воображение
- uMake делает рутинные задачи веселыми, простыми и уникальными
- uMake позволяет каждому визуализировать свои идеи
- uMakes помогает наслаждаться творческим процессом, будь то хобби или работа
Фирменный стиль должен быть современным, привлекательным, а также усиливать коммуникацию бренда во всех точках взаимодействия. Поэтому в основу айдентики uMake как дизайн-инструмента, охватывающего множество творческих задач, легли различные фигуры и дудлы, представляющие собой своеобразный язык дизайна, универсальный для разных стран и культур.
Они последовательно используются во всех точках взаимодействия с клиентами, начиная с логотипа и заканчивая фирменной графикой, плакатами, наружной рекламой, мерчем, оформлением социальных сетей и веб-дизайном.
Одна из основных проблем, которую необходимо было решить с точки зрения дизайна, — переосмысление подхода к представлению контента. Раньше клиент использовал для демонстрации контента изображение экрана планшета или скриншот с короткой подписью, и из-за пропорций планшета в композиции не оставалось места для текста. В итоге визуал не выглядел целостным.
В новой дизайн-системе есть специальные ярлычки, похожие на стикеры, которые располагаются поверх контента. Они сохраняют единую сбалансированную композицию, где скриншоты не вытесняют текст.
Такой подход открывает возможность представления контента в нескольких форматах. Контур повторяет очертания планшета и создает естественную визуальную границу между графическим объектом и фоном. В то же время фигурные стикеры позволяют создавать привлекательные композиции и использовать контент в различных каналах коммуникации.
Вот как описанный подход работает в социальных сетях, например, в оформлении YouTube-канала и в Instagram -постах (Meta признана в РФ экстремистской организацией). Эти платформы являются важными точками взаимодействия с пользователями, поскольку uMake делится через них большим количеством образовательного контента. Соответственно, создание гибкой дизайн-системы, которая улучшила бы презентацию и прочно ассоциировалась с брендом, было важной задачей.
Давайте более подробно рассмотрим, как изменился логотип: графическая часть комбинированного знака превратилась в более устойчивый и выразительный дудл, в котором легко угадывается форма буквы U. Он эффективно взаимодействует с читабельной шрифтовой частью.
Помещенный внутрь формы, которая является одним из основных элементов визуального брендинга, логотип приобрел еще более целостный вид, что делает его гибким и эффективным инструментом для решения маркетинговых задач. Символ можно использовать отдельно внутри как прямоугольных, так и круглых форм в зависимости от целей размещения.
Что касается типографики, необходимо было найти подходящую шрифтовую пару с учетом разнообразных маркетинговых нужд компании. В качестве основного мы выбрали шрифт Mabry Pro, а в качестве вспомогательного — шрифт Graphik. Такая комбинация сохраняет идеальный баланс читабельности и оригинальности, надежности и игривости, отлично сочетается с настроением продукта и обновленным логотипом.
Еще одним важным элементом в формировании образа бренда стала цветовая палитра. В процессе разработки гибкого и соответствующего нужному настроению визуального брендинга, стало ясно, что минималистичный, серьезный, деловой, технологичный стиль не понравится разным целевым группам, а также не будет поддерживать выбранный для коммуникации тон голоса.
Большая и последовательная цветовая палитра, подобранная с умом, справится с этой задачей наилучшим образом. Вот какие цвета мы выбрали для uMake:
А вот как описанные выше идеи воплотились в различных аспектах визуального брендинга, таких как плакаты и билборды для внутренней и наружной рекламы.
Еще одной задачей было создание кастомного набор иконок — контурных, минималистичных и универсальных.
И, конечно, мы не могли не использовать силу анимации для продукта, идея которого лежит на пересечении творчества и технологий. Вот как моушн-графика усиливает цифровой брендинг, оживляя геометрические формы и текстовые метки.
Веб-дизайн
Еще одна важная задача — спроектировать яркий информативный веб-сайт, подчеркивающий преимущества инструментов, побуждающий попробовать их и взаимодействующий с посетителями в дружелюбной и уверенной манере.
Поскольку продукт помогает манипулировать различными визуальными образами, главная идея состояла в том, чтобы сделать сайт “холстом”, в лучшем свете демонстрирующим библиотеку графических элементов и инструментов.
Главная страница легко сканируется, она воздушна, дружелюбна и привлекает внимание. Первый экран с игривым, эмоциональным фоном транслирует сущность продукта. Основная навигация находится в хедере, который представляет собой эффективную логическую комбинацию ссылок и выпадающих меню.
CTA-кнопка, приглашающая посетителей попробовать инструменты, размещена в хедере и под текстовым блоком в сочетании с дополнительной кнопкой, запускающей демонстрационный ролик.
Текстовый контент лаконичен и информативен. В интерфейсе прослеживается четкая типографская иерархия. Кроме того, в этой части страницы представлены некоторые знаки общественного признания и награды, повышающие доверие к продукту.
Прокручивая страницу вниз, посетители видят тщательно продуманную презентацию функций и преимуществ продукта, разделенную на четкие, простые для восприятия разделы, каждый из которых сопровождается графическим или видеоконтентом и CTA-кнопкой, которая позволяет сразу же приступить к практике.
Остальные страницы сайта также имеют последовательную композицию и визуальную иерархию и представляют собой функциональный простой холст для статичного и анимированного медиаконтента, отражающего самую суть инструмента, который помогает пользователям визуализировать свои идеи.
Чтобы сайт хорошо выглядел и эффективно работал, необходимо было также продумать его мобильную версию. Вот пара экранов, выдержанных в общем стиле бренда. Они содержат много фото и видеоконтента, так же, как и десктопная версия.
Результат
В результате нашего сотрудничества бренд uMake получил тщательно проработанную практичную дизайн-систему, легко адаптируемую под различные коммуникационные и маркетинговые цели. Она не входит в конфликт с дизайнерскими ресурсами и инструментами, которые предлагает uMake. Напротив, она эффективно акцентирует внимание аудитории на творческих материалах, предоставляемых сервисом, — туториалах, подсказках, демонстрациях продуктов и т.д., — создавая целостную экосистему и поддерживая дружественный дух сообщества.
По словам наших клиентов, редизайн помог им:
- Повысить вовлеченность на 7,5%
- Увеличить количество установок из поиска Google на 11%
- Увеличить количество установок с веб-сайта на 18%
- Повысить узнаваемость и охват в Китае.
