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

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

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

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

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

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

Первый запуск через 2 недели

Валерия Вялкова
Project-менеджерка Pragmatica

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

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

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

Выпустили анимированную заглушку

Алексей Пьянков
Дизайн-лид Pragmatica

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

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

Включите звук

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

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

Ломали паттерны HR-сайтов

Алексей Пьянков
Дизайн-лид Pragmatica

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

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

Развили айдентику в вебе

Алексей Пьянков
Дизайн-лид Pragmatica

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

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

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

Айдентику можно использовать по-разному. Слева — первая версия сайта. Справа — итоговая

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

Дайте нам 2 иллюстрации — мы сделаем из них дизайн-систему. Скриншот одного из бордов в Figma

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

UI-элементы из шрифта Quattrocode

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

Интегрировали команду в условиях быстрой изменчивости

Алексей Пьянков
Дизайн-лид Pragmatica

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

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

Корзина проекта в Figma

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

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

Создали таинственный и масштабный дизайн

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

Алексей Пьянков
Дизайн-лид Pragmatica

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

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

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

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

Николай Моняк
Middle-дизайнер Pragmatica

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

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

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

Сайт Mission:Luna — гибрид романтизма и продукта

Валерия Вялкова
Project-менеджерка Pragmatica

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

Алексей Пьянков
Дизайн-лид Pragmatica

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

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

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

0
24 комментария
Написать комментарий...
Danil Tsaytler

Больше Алексея Пьянкова, а то я не запомнил, как он выглядит

Ответить
Развернуть ветку
Яков Сомов

"Немного позанудствую...

1. Этот сайт непонятно для кого. Если для найма или партнёрства, то там только на 7 экране становится примерно понятно кто вы вообще. А чего вы хотите от читателя я так и не понял. Где call to action?

"MISSION:LUNA СОЗДАЕТ СЕРВИС ДЛЯ УПРАВЛЕНИЯ ПОВСЕДНЕВНЫМИ ФИНАНСАМИ, ПЛАТЕЖАМИ, СБЕРЕЖЕНИЯМИ, ЛИЧНЫМ И СЕМЕЙНЫМ БЮДЖЕТОМ"

2. Позиционирование скачет. То вы пишете "MISSION:LUNA СОЗДАЕТ", то "МЫ ХОТИМ СОЗДАТЬ ДЛЯ КЛИЕНТОВ". Определитесь уже, вы про компанию пишите или компания со мной общается.

Кстати, "хотим"- плохое слово. Вы либо создаёте или нет.

3. Преимущества, которые появляются при наведении на планеты - плохой решение. Там осмысленный текст, но скопировать его я не могу. Убираю мышку - он пропадает. На мобиле не проверял.

4. Текст для компаний писала нейросетка. Там смысл весь высушили. В целом вы за всё хорошее, верно?
"ПРЕДЛАГАЕМ ПАРТНЕРАМ, КОТОРЫЕ РАЗДЕЛЯЮТ НАШИ ЦЕННОСТИ, ВМЕСТЕ ПОРАБОТАТЬ НАД ТЕМ, ЧТОБЫ ЖИЗНЬ КАЖДОГО БЫЛА КАЧЕСТВЕННОЙ И НАСЫЩЕННОЙ, А СТАРОСТЬ БЕЗОБЛАЧНОЙ С НАС ПОДХОДЫ, ИДЕИ И ИНСТРУМЕНТЫ, С ВАС — ВСЁ, ЧЕМ ВЫ МОЖЕТЕ УСИЛИТЬ ОБЩУЮ МИССИЮ"

5. Подвал двоится

6. Висячие предлоги - фу

7. "МЫ ПОМОГАЕМ СФОКУСИРОВАТЬСЯ НА ВАЖНОМ, ПРЕВРАЩАЕМ ИДЕИ В ДОСТИЖИМЫЕ ЦЕЛИ И ПЛАНЫ ДЕЙСТВИЙ." Чуваки, вы там просто удобную карту с кешбеком, статистикой и копилкой пилите судя по сайту. Откуда столько пафоса? Вы сфокусируйтесь на том, что ваш манифест так свёрстан, что его никто читать не будет. Можно вообще было облако тегов сделать.

8. "Вдохновляющий опыт взаимодействия с финансовыми сервисами". У нас тот вообще-то ревущие постильяховские двадцатые, не надо промтом ваши мысли переводить. Пишите проще.

9. Ключевые особенности на карточках нельзя выделить, вроде их просто картинками вставили. Экономия бюджета на 10-15% (это то, что действительно важно клиенту) - стоит на ВТОРОЙ карточке*.

*С пятого раза понял, что это не карточки, а таймлайн, в котором времена года (превед Ким Ки Дук) спрятаны. Поэтому сложно понять, что исполнение мечт вы обещаете к зиме 2022.

________________________
Резюме.
-Айдентика нормальная, но не запоминается. Такая Стрелкастайл на минималках
-Логику сайта пересмотреть, он невнятен
-Тексты переписать, если вы конечно не ловите зумеров за идею
_______________________

придумал, наконец, для себя способ развлечения, буду токсиком на ЦукПозв

)

Ответить
Развернуть ветку
Который тот

Вы токсик. Но конструктивно)

Ответить
Развернуть ветку
Fedor Durdin

Зачем на сайте 2 футера?

Ответить
Развернуть ветку
Fedor Durdin

Какой-то клоун из их команды поставил мне дизлайк на этот коммент и они поправили футер. Спасибо бы сказали, на косяк вам ваш указали, а вы как петушары ведете себя.

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
Fedor Durdin

Так этот клоун продолжает дизлайки ставить

Ответить
Развернуть ветку
Павел Иванов

Накидал Вам лойсов, чтобы нивелировать действия этого обсоса

Ответить
Развернуть ветку
Dmitriy Kurilov

Я человек простой: вижу, что кому-то ставят дизлайки от балды - компенсирую лайком))

Ответить
Развернуть ветку
Павел Иванов

Я человек простой: вижу, что кто-то компенсирует лайком тем, кому ставят дизлайки от балды - ставлю лайк

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Павел Иванов

Почему "как" ?

Ответить
Развернуть ветку
kuttehals

Я даже сайт не нашел

Ответить
Развернуть ветку
Fedor Durdin

Пролистал весь сайт, нихера не понял что мне предлагают, о чем речь. Вот нихера не понял.

Ответить
Развернуть ветку
Павел Иванов

Так и задумано, наверное

Ответить
Развернуть ветку
vic smirnoff

Любопытно, что курят эти ребята. Кислотные градиенты, искаженные перспективы...

Ответить
Развернуть ветку
Когда-то был
Ответить
Развернуть ветку
Fedor Durdin

Я вообще только по комментариям понял для чего и о чем этот сайт. Интуитивно непонятно о чем речь. Визуально интересно, но не по сфере конечно.

Ответить
Развернуть ветку
UNHCR

Круто. Идеи реально креативные.
Но у меня вопрос. Почему Дизайн-директор Red_mad_robot сам не мог такое сделать? Почему они заказывают у сторонней студии?

Ответить
Развернуть ветку
Dima

Ниче не понял, какой-то бред. Mission Luna, отсылка к To the mars? Те ребята тоже креативщики, связаны с финансами и космосом.

Ответить
Развернуть ветку
Кирилл Щербаков

Я думал, так все делают сайты, как вы написали

Ответить
Развернуть ветку
Игорь Коновальчик

Молодцы!!!! Очень круто получилось.:)
подписался на канал буду за вами следить!

Ответить
Развернуть ветку
sdfa asf

Прагматика сушит весла из-за падения кол-в заказов. Пиар лезет из всех утюгов.
Сайт УГ.

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Keepwatch

Очень мелкий шрифт основного текста для мобильной версии сайта🥲

Ответить
Развернуть ветку

Комментарий удален модератором

Развернуть ветку
21 комментарий
Раскрывать всегда