Как сделать сайт продукта, о котором ничего не знаешь на старте — история создания Mission:Luna

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

Из статьи вы узнаете, как устроена итеративная работа над сайтом стартапа, как мы развивали айдентику в вебе, ломали паттерны HR-сайтов и создавали новые принципы работы с подвижным продуктом.

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

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

Передаем слово дизайнерам и проджектам, которые участвовали в проекте.

Где-то в открытом космосе… появился стартап Mission:Luna. Мы сделали сайт для команды проекта, чтобы помочь привлечь топовых специалистов на открытые вакансии.

Дизайн-директор Женя Бондарев пришёл к нам с бюджетом и задачей запустить HR-сайт за 4 месяца. Первый запуск через 2 недели. Чтобы работать оперативно и быстро подстраиваться под новые условия, мы подключили трёх дизайнеров на фултайм, которые занимались только этим проектом.

Мы запустили работу над концепцией, а параллельно поместили на сайт загадочную анимацию «Миссия».

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

Так получилась заглушка с минималистичной и таинственной анимацией «Миссия». Космос ощущался здесь через роботизированный шрифт Quattrocode и звуки.

Заглушку делал дизайнер Дима Савенко. После этого проекта он попал к нам в штат, а позже записал обучающий ролик по анимации «Миссия».

Через 2 недели заглушка была на сайте, а мы продолжили работать над проектом.

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

Мы хотели вовлечь пользователя в миссию. Дать ощущение таинственности и масштаба. Превратить пользователя в исследователя.

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

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

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

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

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

Такого погружения и внимания к деталям помогли достичь принципы работы, которым мы следовали на проекте Mission:Luna. Они касались организации процесса. Об этом читайте ниже.

В процессе работы менялись название проекта, логотип и tone of voice. Мы с Mission:Luna регулярно созванивались по 4 раза в неделю, получали комментарии, искали новые решения и каждый день обновляли общую вкладку в Figma. Когда мы чувствовали, что работа стопорится, т�� созванивались и показывали, как работают анимации или отдельные блоки на прототипе.

Как вы уже знаете, с нашей стороны участвовали три дизайнера, которые занимались только этим проектом. Это позволило каждую деталь довести до идеала. Например, мы сделали около 50-ти версий блока «Партнеры и наши клиенты».

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

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

Сфера — персонаж

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

При наведении сферы работают не просто как иллюстрации, а как кнопки с информацией. Это помощники, которые рассказывают о ценностях и целях Mission:Luna. Они ярко смотрятся на черном фоне и разбавляют монохромные решения.

Сфера пульсирует и ведет себя, как что-то живое. Она расширяется и рождает текст, как гигантские космические объекты поглощают энергию или выплескивают ее. Например, черные дыры.

Медитативные анимации

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

Движения объектов в анимациях плавные и размеренные, будто на них не действует гравитация. Такая невесомость и космичность с уклоном в ретро. Здесь мне приходит в голову аналогия с атмосферой «Соляриса» Станислава Лема.

У нас получилось множество разных вариантов анимаций, которые позже мы обсуждали и отбирали вместе с командой Луны.

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

Mission:Luna получилась гибридом романтизма и продуктовой составляющей. Мы вместе ломали устойчивые паттерны HR-сайтов и создавали новые принципы, чтобы сделать подвижный и характерный продукт. Луна хочет оставить этот вайб и на других проектах.

Сейчас мы подключились к работе над первым продуктом Mission:Luna, и есть план дальнейшего масштабирования сайта, ждём контент. А пока посмотрите, что у нас получилось и загляните в наш кейс на Behance.

Подписывайтесь на телеграм-канал Senior designer — каждый месяц канал ведут разные эксперты: дизайнеры, проджекты, руководители команды Pragmatica. Дизайнерам от дизайнеров.