Есть задача?
Oops! Something went wrong while submitting the form.
ProductCamp — это крутой ивент для всех, кто связан с разработкой цифровых продуктов. Сюда приезжают за неформальным общением и вайбом летнего лагеря, нетворком и, конечно же, новыми знаниями: у кэмпа разнообразная образовательная программа.
Фишка ProductCamp в том, что сюда нельзя попасть как на обычную конференцию, просто купив билет. Нужно внести свой вклад и помочь в организации ивента. Команда Purrweb тоже вписалась в движуху и сделала для сайта ProductCamp новый дизайн. О том, как мы искали идеальную визуальную метафору и проделали путь от пионерского лагеря к орбите компетенций — рассказываем в этом кейсе.
Прежде чем полетим в детали кейса, немного расскажем о формате кэмпа: не просто так он называется «самой ламповой не-конференцией» 😀
ProductCamp проходит два раза в год. В первую очередь ивент ориентирован на продакт-менеджеров, но принять участие могут и другие специалисты, которые запускают и развивают цифровые продукты: аналитики, UX-дизайнеры, проджекты и C-level сотрудники.
Здесь слушают доклады и обмениваются знаниями. Но атмосфера особенная — много неформального общения и активностей. Ключевая идея кэмпа такая: все участники равны.
Опыт и позиция на кэмпе не имеет значения: джун может спокойно пообщаться с топовым специалистом из самой крупной IT-компании или с C-level спикером сидя вечером у костра. На кэмп приезжают не только за новыми идеями или нетворком, но и за эмоциями: участники сравнивают его с летним лагерем — здесь такая же ламповая и дружеская атмосфера, которая заряжает и вдохновляет.
А вот и другая особенность: на ProductCamp нельзя попасть, просто купив билет.
Для участия нужно быть или спикером, или волонтером. Роль последних в организации кэмпа огромная. По сути, ивент делают участники для самих себя.
Это важная ценность и киллер-фича кэмпа, которая роднит его не с классическими конфами, где все строго по регламенту, а событиями в духе фестиваля Burning Man. Ивент делает само комьюнити и каждый вносит свой вклад.
Команда Purrweb тоже захотела внести свой вклад и предложила помощь с тем, что мы классно умеем: с дизайном. Так мы тоже стали волонтерами. По дизайну 🙂
Да, и такое на кэмпе тоже есть! Направления были самые разные — от оформления мерча до постов в соцсетях и работы с сайтом. Мы выбрали последнее, потому что там была нужна наша помощь. Рассказываем, с чем именно.
Так получилось, что ProductCamp жил без постоянного сайта. Весь трафик шел на лендинг, который делали каждый раз под новый ивент. Поэтому не было никакой преемственности и исторических данных — каждый кэмп начинался как будто с нуля.
На одностраничнике нельзя было посмотреть фотографии или программы с прошлогодних ивентов. Кроме того, каждый лендинг делали в разной стилистике. Единственный элемент, который не менялся — это образ космонавта.
В какой-то момент у команды ProductCamp появилась идея: нужно делать постоянный сайт кэмпа. Не просто одностраничник, а большой хаб, который станет:
Стиль текущего лендинга не очень устраивал организаторов: он казался «пластиковым» и неживым, ему не хватало ярких деталей и того самого лампового вайба.
Посмотрите, как выглядел одностраничник, приуроченный к кэмпу 23-25 мая 2025 года.
Организаторам кэмпа хотелось, чтобы сайт прошел этот путь.
Мы обсудили эти задачи с командой ProductCamp и предложили свою экспертизу в коммуникационном и графическом дизайне.
Нам дали полную творческую свободу и были открыты к любым нашим идеям. Главное, чтобы в итоге получилось круто, а дизайн соответствовал духу кэмпа 🙂
Нам предстояло:
И сохранить в новом дизайне тот самый образ космонавта 🧑🚀 Он был узнаваемым и стал визуальной фишкой кэмпа.
Спойлер: мы немного переосмыслили его, и вывели на новую орбиту. Но об этом чуть позже.
Мы начали с проработки метафоры, которая легла бы в основу всей визуальной концепции. Искали сами, побрифовали команду ProductCamp, почитали отзывы участников прошлых лет.
Нас зацепил образ детского лагеря — а он часто фигурировал в рассказах об ивенте. Это метафора с сильным эмоциональным зарядом, ее можно интересно обыграть в визуале.
Мы стали раскручивать разные смыслы и ассоциации, связанные с детским лагерем. И пришли к образу ворот — как места встреч и прощаний, границе между дисциплиной и отдыхом. Еще это символ перехода в новое пространство, в сообщество, в общее переживание. Образ ворот одновременно работает на эмоциональный отклик и придает концепции структуру.
Другая наша находка — советские вывески. Ритмичные, с выразительной типографикой и характерным движением за счет динамичных форм.
Чтобы отобразить визуальную эстетику детского лагеря, мы собрали вайбовый мудборд. Здесь есть интересная графика, напоминающая узоры ворот, блочность и брутальные шрифты — как отсылка к тем самым советским вывескам.
Так мы раскрутили первую визуальную метафору — ворота в мир Product комьюнити.
В детском лагере, как и на кэмпе, все участники равны и каждый вносит свой вклад. Эстетика детского лагеря, советский визуальный вайб, акцент на сообществе и равенстве — все это напомнило нам о коммунизме. Только не в политическом смысле.
Мы подумали, что у коммунистического проекта были другие важные аспекты: стремление в будущее и вера в научный прогресс.
Отсюда происходил технологический оптимизм, мечты о покорении космоса, и ощущение, что в будущем возможно все. Эти представления легли в основу эстетики ретрофутуризма — то есть, мечтах о будущем, но из прошлого.
Ретрофутуризм ассоциируется с авангардизмом и советским конструктивизмом, сообществом ученых и инженеров, космонавтикой. Поэтому мы искали соответствующие визуальные образы.
Собрали собрали ретрофутуристичный мудборд: здесь нашлось место архитектурному брутализму и гротескным шрифтам, металлическому цвету и спиралям — потому что тема космоса является одной из ведущих для этой эстетики.
Из всех этих образов у нас появилась вторая метафора — сфера компетенций. Она отсылает к знаниям, обучению и архитектуре будущего.
Но мы не остановились на этом и раскрутили третью метафору 😀 Пока собирали референсы, заметили, что в советских плакатах или изданиях на космическую тематику фигурирует образ вертикали. Ее использовали для иллюстрации полета ракеты — чтобы передать мощный скачок, энергию и движение вперед.
Образ вертикали показывает стремление к инновациям, выход за неизвестное, на орбиту, прогресс. И, конечно же, отсылает к космической тематике.
Мы собрали мудборд с соответствующими визуальными образами. Здесь нашлось место динамичной типографике, синему цвету, который ассоциируется с космическим пространством, интересным и очень фактурным текстурам.
Мы обыграли образ ракеты и вертикали, и назвали эту метафору «квантовым скачком». Она отсылает к прогрессу, полетам, быстрому переходу на новый уровень и мощи.
Все метафоры и мудборды мы обсудили с командой кэмпа. И…каждый из них показался по-своему интересными — мы попали в точку 😀
Решили, что будем делать микс: в качестве главной метафоры берем сферу компетенций, но с вайбами ретрофутуризма и космически-технологической тематики.
Продолжая развивать образ сферы и ретрофутуризма, дизайнер составила мудборд для конкретных решений в интерфейсе.
Для типографики использовали современный и лаконичный шрифт Inter.
В цветовой палитре всего четыре цвета. Технологичный белый для текста и делатей, синий для акцентов, нейтральный серый для фона и черный для текста и деталей.
А вот каким получился дизайн-концепт главной страницы сайта. Мы переосмыслили образ космонавта, добавили интересных деталей в виде необычных кнопок. В концепте много воздуха и свободного пространства.
.webp)
Мы решили показать команде кэмпа и другие возможные варианты главной страницы — чтобы был виден ход мысли и разные идеи.
Был и такой вариант — с космонавтом, летящим куда-то к дальним планетам. Именно он зацепил ребят из ProductCamp больше всего. Сами мы на него не ставили, но рады, что показали эту идею 😄
Получилась эволюция концепта:
Но забегая вперед скажем, что трансформация не была окончательной. Мы продолжали докручивать, искать и дорабатывать.
Прежде чем лететь в итоговый дизайн, мы подготовили черно-белые вайрфреймы — детальные прототипы страниц сайта. Вайрфреймы нужны, чтобы согласовать видение и понимать, что мы с заказчиками на одной волне. О том, какую пользу этот этап приносит проекту, мы подробно рассказывали в статье.
И еще несколько вайрфреймов для других страниц.
Мы сохраняли вайб ретрофутуризма и метафору сферы компетенций. Использовали графику бенто — в ней элементы композиции организованы в аккуратные, модульные блоки. Благодаря такой блочной структуре сохраняется минимализм, даже несмотря на большое количество контента.
После того, как согласовали структуру страниц, расположение элементов и пользовательский путь, полетели делать итоговый дизайн. Финальная версия отличается от концепта в деталях, а в каких именно — рассказываем дальше.
Показываем финальную версию дизайна нового сайта ProductCamp. Начнем с главной страницы.
Еще одна перемена: цвет. Изначально для акцентов мы использовали синий. Но с ним дизайн выглядел немного холодным, а нам хотелось добавить больше эмоций и теплоты.
Поэтому наши дизайнеры решили вместо синего цвета взять оранжево-красный, чем-то напоминающий поверхность Марса. Этот оттенок хорошо сочетается со стилистикой сайта, интересно подчеркивает графику и в целом выглядит эффектно.
Для хиро-пейдж взяли монументальный мощный шрифт, который отсылает к конструктивизму и авангарду — помним про эстетику ретрофутуризма.
В верстке вдохновлялись приемами советского дизайна — использовали плотную композицию с минимальными отступами, чтобы усилить визуальную насыщенность и создать ощущение цельности.
На главной странице довольно много визуального контента, и чтобы она не выглядела перегруженной информацией, мы распределили визуалы плавно по разным секциям.
Вот так выглядит главная страница полностью. Чтобы дизайн выглядел более динамичным, чередуем темные и светлые блоки.
Некоторые детали перекочевали из предыдущих версий концепта — например, шлем космонавта. А еще космонавт есть в последнем блоке страницы 🧑🚀
Конечно, мы пришли к этому видению не сразу. Сначала было несколько итераций с другими шрифтами и версткой. Мы пробовали, искали лучшую реализацию, пока не пришли к финальной версии.
Также мы сделали дизайн еще нескольких страниц сайта: посмотрите, как они выглядят. Использовали ту же стилистику, что и для главной, чтобы сохранить визуальную целостность и обеспечить пользователям единый, понятный опыт на всем сайте.
Добавили космическую тематику в детали — например, так выглядит лоадер.
Новый сайт получился с необычной и стильной айдентикой, которая сохраняет узнаваемые и уже привычные элементы. И в то же время интересно обыгрывает их благодаря эстетике ретрофутуризма и ностальгическому вайбу.
Мы передали команде ProductCamp готовые макеты, чтобы ребята могли перенести их на Tilda. Совсем скоро обновленный сайт кэмпа будет в релизе! ✨
А вот что о сотрудничества с нами говорит команда ProductCamp:
➡️ Создаем креативные решения в дизайне, закрываем все дизайн-задачи: от создания яркой айдентики до продуманного UI/UX. Наши дизайнеры словят нужный вайб и придумают, как воплотить даже самую оригинальную идею. А еще найдем лучшие технические решения, чтобы ваш проект радовал юзеров без всяких багов и артефактов.
Есть задача? <a class="blog-modal_opener">Свяжитесь с нами</a>, чтобы обсудить ее.
