Градиенты, порталы и птичка по имени Фича: как студенты Contented создали визуальный стиль для Dprofile

Когда заказчик — мечта любого джуна

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

В рамках хакатона студентам поставили амбициозную задачу: создать визуал, который будет работать везде — от постов в Telegram до бейджей на офлайн-ивентах. При этом дизайн должен быть узнаваемым даже без логотипа и настолько простым, чтобы можно было генерить новый контент практически на автомате. 

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

Среди технических требований:

• все макеты должны находиться в Figma;
• анимации можно создавать в After Effects или других доступных программах;
• изображения предоставить в формате .jpg или .png, анимации — в MP4.

Для работы над кейсом Dprofile дали фирменный шрифт Pragmatica, брендовые оттенки из корпоративной палитры и примеры постов в Telegram для вдохновения.

Я изначально подавала заявку именно на кейс Dprofile, потому что обожаю их комьюнити — прошлой зимой даже ездила в Москву на фестиваль Dprofile Fest & Award 2024. Да и в целом очень хотела поработать с самой крупной площадкой для дизайнеров в России.

Мне нравится пробовать силы в хакатонах и быть капитаном команды. А тут, наоборот, хотела немного отдохнуть от этой роли, но организаторы назначили меня тимлидом. Плюс, когда пообщались с ребятами, узнала, что для большинства это первый хакатон. Поэтому мне, как «ветерану», нужно было взять ответственность — о чем я ничуть не пожалела, ведь в итоге мы выиграли.

Команда сработалась идеально. Все быстро нашли общий язык, были заряжены на работу и предлагали креативные идеи. У каждого были свои сильные стороны, но при этом мы гармонично дополняли друг друга. А когда возникали сомнения, на помощь приходили менторы — без их поддержки и экспертности путь к победе был бы сложнее. Получился настоящий дримтим, который дошел до финала, хоть и не без творческих мук.

Путь через портал

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

Прорыв случился во время одного из созвонов, когда мы наконец сформулировали ключевую метафору проекта: портал как переход из одного состояния в другое. Ведь именно этим занимается Dprofile — помогает дизайнерам расти, развиваться, менять уровень и окружение.

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

Узнаваемость без логотипа и цветная навигация

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

Мы решили добиться узнаваемости через комбинацию характерных элементов, которые в сочетании дают уникальный визуальный почерк. Основу составили:

• фирменные цвета и крупная типографика;
• линейные градиенты и ангуляры;
• скругленные геометрические формы;
• сетка 6 × 6 с межколонником 35 пикселей;
• шрифт Pragmatica Next VF — от 36 до 350 пунктов.

Контент разделили на два типа: функциональный и эмоциональный. Первый структурировали по цвету:

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

Эмоциональный контент сделали ярче и насыщеннее: отзывы превратились в самые красочные посты, ведь это в первую очередь про взрыв чувств. Сюда же отнесли фотоконтент от Dprofile — чтобы передать яркие впечатления из жизни сообщества.

Визуал получился интуитивно понятным: каждый цвет сразу подсказывает пользователю, с каким типом контента он имеет дело.

Анимация не входила в обязательные требования, но мы с удовольствием ее сделали. Хотели, чтобы она подкрепляла метафору «Путь через портал»: анимация словно затягивает зрителя и перемещает из начальной точки к новым знаниям.

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

Вся система работает как гибкий конструктор: новые посты можно собирать по шаблону, и они не потеряют выразительность.

Маскот Фича — звезда проекта

Но особую любовь и у всей команды, и у жюри завоевал маскот — круглая алая птичка по имени Фича. У нее клюв-стрелка, а крылья напоминают иконку Wi‑Fi: с их помощью птичка ловит сигналы из других миров.

Суперспособность Фичи — открывать порталы, тыкая клювом в землю. Правда, она сама же в них и проваливается.

Мы хотели, чтобы символ креативного сообщества получился живым, немного нелепым, но очень искренним. Фича — не идеальный персонаж: слегка хаотичная, местами неуклюжая, но невероятно вдохновляющая. Такая, с кем приятно идти в творческое путешествие, даже если маршрут не до конца ясен.

У птички есть секрет: она несет идеи — в прямом смысле. Время от времени из-под Фичи выпадают яйца с концепциями внутри. Если яйцо попадает в портал, его подхватывают другие креаторы — так идеи путешествуют по сообществу и находят новых авторов. На основе этого родилась целая концепция «яичной системы Фичи» для геймификации платформы. Идея в том, чтобы помечать заказы иконкой маленького цветного яйца в углу карточки: красные яйца для срочных задач, фиолетовые — для сложных, нестандартных и дорогостоящих проектов, желтые — для простых заданий, которые подойдут новичкам.

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

Как стиль живет в реальности

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

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

Детали, которые работают на общую идею

Кроме основных элементов, разработали фирменный паттерн в нескольких цветовых решениях, набор эмодзи и стикеры для Telegram. Хотелось, чтобы даже такие детали работали на общую концепцию.

Реакция, которая стоила всех усилий

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

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

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