Летим на орбиту: обновили сайт самой ламповой не-конференции для продактов и айтишников

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

Фишка ProductCamp в том, что сюда нельзя попасть как на обычную конференцию, просто купив билет. Нужно внести свой вклад и помочь в организации ивента. Команда Purrweb тоже вписалась в движуху и сделала для сайта ProductCamp новый дизайн. О том, как мы искали идеальную визуальную метафору и проделали путь от пионерского лагеря к орбите компетенций — рассказываем в этом кейсе.

Мы обсудили эти задачи с командой ProductCamp и предложили свою экспертизу в коммуникационном и графическом дизайне. 

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

Нам предстояло: 

- Создать новую визуальную концепцию и стилистику;

- Переработать и улучшить пользовательский путь;

- Отрисовать макеты с новым UI;

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

И сохранить в новом дизайне тот самый образ космонавта: он был узнаваемым и стал визуальной фишкой кэмпа.

Спойлер: мы немного переосмыслили его, и вывели на новую орбиту. Но об этом чуть позже.

Прежде чем полетим в детали кейса, немного расскажем о формате кэмпа: не просто так он называется «самой ламповой не-конференцией» :)

‍ProductCamp проходит два раза в год. В первую очередь ивент ориентирован на продакт-менеджеров, но принять участие могут и другие специалисты, которые запускают и развивают цифровые продукты: аналитики, UX-дизайнеры, проджекты и C-level сотрудники.

❯ Здесь слушают доклады и обмениваются знаниями. Но атмосфера особенная — много неформального общения и активностей. Ключевая идея кэмпа такая: все участники равны.

Опыт и позиция на кэмпе не имеет значения: джун может спокойно пообщаться с топовым специалистом из самой крупной IT-компании или с C-level спикером сидя вечером у костра. На кэмп приезжают не только за новыми идеями или нетворком, но и за эмоциями: участники сравнивают его с летним лагерем — здесь такая же ламповая и дружеская атмосфера, которая заряжает и вдохновляет.

А вот и другая особенность: на ProductCamp нельзя попасть, просто купив билет.

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

❯ Это важная ценность и киллер-фича кэмпа, которая роднит его не с классическими конфами, где все строго по регламенту, а событиями в духе фестиваля Burning Man. Ивент делает само комьюнити и каждый вносит свой вклад.

Команда Purrweb тоже захотела внести свой вклад и предложила помощь с тем, что мы классно умеем: с дизайном. Так мы тоже стали волонтерами. По дизайну :)

Да, и такое на кэмпе тоже есть! Направления были самые разные — от оформления мерча до постов в соцсетях и работы с сайтом. Мы выбрали последнее, потому что там была нужна наша помощь. Рассказываем, с чем именно.

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

❯ На одностраничнике нельзя было посмотреть фотографии или программы с прошлогодних ивентов. Кроме того, каждый лендинг делали в разной стилистике. Единственный элемент, который не менялся — это образ космонавта. 

Ведь продакт, он как космонавт: запускает новые продукты. Лендинг образца апреля 2025:

В какой-то момент у команды ProductCamp появилась идея: нужно делать постоянный сайт кэмпа. Не просто одностраничник, а большой хаб, который станет:

- точкой входа для новых участников;

- архивом всех прошедших кэмпов;

- и просто виртуальным местом, которое полностью передает вайб ProductCamp.

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

Организаторам кэмпа хотелось, чтобы сайт прошел этот путь:

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

❯ Нас зацепил образ детского лагеря — а он часто фигурировал в рассказах об ивенте. Это метафора с сильным эмоциональным зарядом, ее можно интересно обыграть в визуале.

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

Посмотрите, какие атмосферные фото мы нашли!

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

До сих пор можно встретить эти визуальные артефакты — посмотрите, какой у них стиль!

Чтобы отобразить визуальную эстетику детского лагеря, мы собрали вайбовый мудборд. Здесь есть интересная графика, напоминающая узоры ворот, блочность и брутальные шрифты — как отсылка к тем самым советским вывескам.

Эстетика детского лагеря в мудборде:

Так мы раскрутили первую визуальную метафору — ворота в мир Product комьюнити.

В рамках этой метафоры сайт становится первой точкой входа, воротами в новый мир крутых продакт-специалистов.

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

Мы подумали, что у коммунистического проекта были другие важные аспекты: стремление в будущее и вера в научный прогресс. 

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

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

Заимствовали у эстетики ретрофутуризма несколько графических образов: гигантизм, аэродинамические формы, необычные архитектурные конструкции. Кое-что подглядели во вселенной игры Atomic Heart — как альтернативной реальности Советского Союза:

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

Эстетика ретрофутуризма стала довольно популярной в последнее время. На наш взгляд, она очень стильная и хорошо мэтчится с образом космонавта.

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

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

Советские журналы о технике, искусстве и дизайне — тогда это называлось «техническая эстетика».

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

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

Мы обыграли образ ракеты и вертикали, и назвали эту метафору «квантовым скачком». Она отсылает к прогрессу, полетам, быстрому переходу на новый уровень и мощи.

Образ ракеты и вертикали:

Все метафоры и мудборды мы обсудили с командой кэмпа. И…каждый из них показался по-своему интересными — мы попали в точку :)

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

Продолжая развивать образ сферы и ретрофутуризма, дизайнер составила мудборд для конкретных решений в интерфейсе.

В основе — блоковая верстка, много легкости и свободного пространства, чистый дизайн, геометрический шрифт:

Для типографики использовали современный и лаконичный шрифт Inter. 

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

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

А вот каким получился дизайн-концепт главной страницы сайта. Мы переосмыслили образ космонавта, добавили интересных деталей в виде необычных кнопок. В концепте много воздуха и свободного пространства. Метафора сферы компетенций прослеживается во всем дизайне:

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

Обыгрываем тему спирали. В первом варианте вместо синего решили добавить «марсианский» оранжево-красный цвет. Спойлер: похожий оттенок используем в итоговом дизайне.

Был и такой вариант — с космонавтом, летящим куда-то к дальним планетам. Именно он зацепил ребят из ProductCamp больше всего. Сами мы на него не ставили, но рады, что показали эту идею :)

Так один из дополнительных вариантов концепта стал основным!

Получилась эволюция концепта:

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

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

Докрутили вариант с космонавтом: сделали кнопки более привычной формы, поработали с версткой, типографикой и расположением элементов. Но орбита компетенций тоже тут! Пока что :)

И еще несколько вайрфреймов для других страниц.

Страница Афиши:

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

Страница «О нас»:

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

Пример бенто графики на главной странице. Кстати, стиль вдохновлен японскими ланч-боксами «бенто», отсюда и такое название :)

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

Показываем финальную версию дизайна нового сайта ProductCamp. Начнем с главной страницы.

Хиро-пейдж. В ходе работы решили с командой кэмпа немного поменять ключевую метафору: сфера компетенций превратилась в орбиту компетенций. Так она лучше вписывается в космическую тему и больше соответствует стилистике

Еще одна перемена: цвет. Изначально для акцентов мы использовали синий. Но с ним дизайн выглядел немного холодным, а нам хотелось добавить больше эмоций и теплоты. Сравните, как выглядел тот же самый блок с синим акцентным цветом:

❯ Поэтому наши дизайнеры решили вместо синего цвета взять оранжево-красный, чем-то напоминающий поверхность Марса. Этот оттенок хорошо сочетается со стилистикой сайта, интересно подчеркивает графику и в целом выглядит эффектно.

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

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

Частично сохранили блоковую стилистику бенто, но не везде. Где-то предпочли обойтись без блоков и добавить больше воздуха.

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

Некоторые детали перекочевали из предыдущих версий концепта — например, шлем космонавта. А еще космонавт есть в последнем блоке страницы!

Конечно, мы пришли к этому видению не сразу. Сначала было несколько итераций с другими шрифтами и версткой. Мы пробовали, искали лучшую реализацию, пока не пришли к финальной версии.

Немного деталей промежуточной работы. Наш дизайнер сделала больше 20 вариантов для хиро-пейдж! А в финал попал только один — самый крутой :)

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

Афиша мероприятий.

Прошедшие ивенты — для той самой историчности, которой раньше не хватало на одностраничном сайте.

Страница «О нас». Зацените ракету!

Волонтерство.

Добавили космическую тематику в детали — например, так выглядит лоадер.

❯ Новый сайт получился с необычной и стильной айдентикой, которая сохраняет узнаваемые и уже привычные элементы. И в то же время интересно обыгрывает их благодаря эстетике ретрофутуризма и ностальгическому вайбу. 

Мы передали команде ProductCamp готовые макеты, чтобы ребята могли перенести их на Tilda. Совсем скоро обновленный сайт кэмпа будет в релизе!