VideoCover.webm

Сделали редизайн интернет-магазина для геймеров IGM.GG и повысили прямой трафик +192%

<div>
<h3>Кто наш заказчик</h3>
<p>IGM.GG&nbsp;&mdash; интернет-магазин от&nbsp;самого крупного игрового сообщества на&nbsp;просторах СНГ с&nbsp;4+&nbsp;млн подписчиков в&nbsp;VK.</p>
</div>

<video
src="/uploads/1_0fe85b136f.webm"
loop
autoplay
muted
playsinline></video>

<div>
<h3>Что нужно было сделать</h3>
<p>Совместно с&nbsp;разработчиками из&nbsp;IT-компании KTS приступили к&nbsp;работе. Нашей целью было улучшить опыт пользователей интернет-магазина, упростить механику покупки игровых ключей, повысить лояльность аудитории и&nbsp;мотивировать к&nbsp;новым покупкам&nbsp;&mdash; всё&nbsp;с&nbsp;помощью дизайна с&nbsp;нашей стороны. Заказчику было важно сохранить тёмную тему и&nbsp;красные акцентные блоки из&nbsp;первой версии сайта, а&nbsp;в&nbsp;части механик и&nbsp;оформления мы&nbsp;были абсолютно свободны.</p>
</div>

<img src="/uploads/2_5dddb39e48.webp"> 

<div>
<h3>Геймерам&nbsp;&mdash; геймерский дизайн</h3>
<p>Что ассоциируется с&nbsp;геймингом в&nbsp;первую очередь? Нет, не&nbsp;светодиодная подсветка, навороченные кресла и&nbsp;наушники с&nbsp;гарнитурами&nbsp;&mdash; это всё частности. То,&nbsp;что&nbsp;объединяет всех геймеров независимо от&nbsp;уровня,&nbsp;&mdash;&nbsp;это&nbsp;экран запуска, который видит каждый. При разработке концепции мы&nbsp;взяли за&nbsp;основу интерфейс консоли: с&nbsp;плитками, подвижными элементами и&nbsp;градиентными цветами, от&nbsp;одного вида которых появляется предвкушение захватывающей игры.</p>
</div>

<video
src="/uploads/3_3ed10833a0.webm"
loop
autoplay
muted
playsinline></video>

<div>
<h3>Проработка библиотеки UI-компонентов</h3>
<p>Каждый элемент типографики, цветов, иконок, кнопок, селектов и&nbsp;других UI-компонентов был тщательно проработан для дальнейшего масштабирования площадки. Мы&nbsp;распределили компоненты по&nbsp;группам: фильтры, комментарии, кнопки и&nbsp;другие элементы интерфейса. Выполнили их&nbsp;в&nbsp;единой стилистике, заданной концептом. Основным графическим решением стала плитка из&nbsp;12&nbsp;колонок. Это сочетание можно компоновать сразу в&nbsp;нескольких вариантах: по&nbsp;2, 3, 4&nbsp;или 6&nbsp;колонок на&nbsp;одном экране. Благодаря этому мы&nbsp;получили динамичный дизайн главной страницы и&nbsp;подборок.</p>
</div>

<video
src="/uploads/4_ee6459127c.webm"
loop
autoplay
muted
playsinline></video>

<div>
<h3>Сделали покупку игры событием</h3>
<p>В&nbsp;наш век e-commerce стало так легко делать покупки, что это уже не&nbsp;вызывает никаких эмоций. Просто подтверждаем покупку, получаем пуш о&nbsp;списании и&nbsp;чек&nbsp;&mdash; всё. Мы&nbsp;решили сделать отсылку к&nbsp;аналоговой эпохе и&nbsp;временам, когда ты&nbsp;трясущимися руками открываешь коробку с&nbsp;диском в&nbsp;первый раз. Сделали это через проработку анимаций.</p>
</div>

<video
src="/uploads/5_1e42625209.webm"
loop
autoplay
muted
playsinline></video>

<div>
<h3>Ачивки для пользователей</h3>
<p>Мы&nbsp;добавили геймификацию в&nbsp;процесс покупки. Теперь за&nbsp;купленные игры и&nbsp;активность на&nbsp;сайте пользователь получает ачивки, которые отображаются в&nbsp;его профиле в&nbsp;виде коллекционных карточек. Уникальность карточек подчеркивается изящной анимацией, создающей особое ощущение их&nbsp;ценности.</p>
</div>

<video
src="/uploads/7_b51f4e215f.webm"
loop
autoplay
muted
playsinline></video>

<img src="/uploads/8_41256a9e8d.webp"> 

<div>
<h3>Как мы&nbsp;делали адаптивный дизайн</h3>
<p>Каждый макет создали в&nbsp;трех брейкпоинтах, отрисовали все состояния каждого интерактивного элемента, показали примеры анимаций и&nbsp;поведения при скролле.</p>
</div>

<img src="/uploads/9_88d1e55962.webp"> 

<div>
<h3>Результат проекта</h3>
<p>У&nbsp;нас получился яркий сайт, который сочетает в&nbsp;себе актуальный дизайн и&nbsp;отсылки ко&nbsp;временам, когда игровая индустрия только завоевывала наши сердца и&nbsp;умы. Но&nbsp;самое главное: редизайн позволил IGM.GG достичь своих бизнес-целей. Выручка продукта выросла в&nbsp;1,5 раза с&nbsp;момента запуска новой версии сайта, а&nbsp;глубина просмотра выросла на&nbsp;30%. Пользователи проводили на&nbsp;23% больше времени на&nbsp;новой версии сайта, чем на&nbsp;предыдущей, а&nbsp;просмотры страниц выросли на&nbsp;126%.</p>
</div>

<img src="/uploads/10_b5dc1a0142.webp"> 

<video
src="/uploads/6_ae4206df72.webm"
loop
autoplay
muted
playsinline></video>

<img src="/uploads/12_6c64cf3db7.webp"> 


HorizontalCover.webp

Редизайн сайта IGM.GG для геймеров

Cover_catalog.webp

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

<div>
<h3>От запроса</h3>
<p>Converse Bank&nbsp;&mdash; один из&nbsp;ведущих коммерческих банков Армении с&nbsp;30-летней историей, который активно внедряет инновационные решения в&nbsp;цифровой сфере. В&nbsp;честь юбилея банк провел масштабный ребрендинг, обновив бренд-платформу, логотип и&nbsp;визуальную айдентику, а&nbsp;также разработал подробный гайдбук. В&nbsp;рамках трансформации было принято решение обновить цифровые продукты. С&nbsp;этим пришли к&nbsp;нам.</p>
</div>

<img src="/uploads/1_0a0bef8906.webp"> 

<div>
<h3>Что по рыночку</h3>
<p>По&nbsp;рыночку не&nbsp;разнообразно. Цифровые продукты, а&nbsp;особенно финансовые, в&nbsp;Армении выглядят тяжеловесными, неудобными и&nbsp;устаревшими. С&nbsp;нами Converse Bank планировал стать одним из&nbsp;флагманов и&nbsp;трендсеттеров местного рынка. Визуального гайда по&nbsp;разработке цифровых продуктов у&nbsp;коллег не&nbsp;было, поэтому мы&nbsp;создали с&nbsp;нуля большую и&nbsp;многофункциональную дизайн-систему. Сначала для&nbsp;мобильной версии, потом раскатили ее&nbsp;на&nbsp;веб</p>
</div>

<img src="/uploads/2_b0375cd7c3.webp"> 

<div>
<h3>Точка отсчета</h3>
<p>Банковское мобильное приложение нельзя делать один раз и&nbsp;на&nbsp;всю жизнь. Это должен быть живой, постоянно изменяющийся и&nbsp;адаптивный продукт. Поэтому нужны были решения, которые учитывают расширение в&nbsp;будущем, без необходимости заново проходить весь путь разработки. Поэтому в&nbsp;основе нашей дизайн-системы лежали токены.</p>
</div>

<img src="/uploads/3_8a02e92bd5.webp"> 

<div>
<h3>Не крипта</h3>
<p>Токены не&nbsp;наша авторская разработка: их&nbsp;используют многие топовые студии. Чаще всего в&nbsp;небольших проектах используют только базовые токены. Они представляют собой такие статические значения, как&nbsp;hex-код цвета, размер шрифта, интервала и&nbsp;другие. Дизайн-токены, которые зависят от&nbsp;контекста и&nbsp;ссылаются на&nbsp;глобальные токены, называются семантическими. Мы&nbsp;выбрали для&nbsp;семантических токенов пяти-уровневую организацию, что позволило нам максимально изолировать один токен от&nbsp;другого.</p>
</div>

<img src="/uploads/20_a029d86a47.webp"> 

<div>
<h3>Инструкция по&nbsp;сборке</h3>
<p>В&nbsp;основе дизайн-системы лежит атомарный принцип сборки. На&nbsp;этапе сборки настройка частей компонентов выглядит сложной и&nbsp;многоуровневой, но&nbsp;благодаря ей&nbsp;мы&nbsp;облегчаем работу на&nbsp;этапе формирования интерфейса. Это нужно потому, что&nbsp;банковский сервис будет расширяться, а&nbsp;значит дизайн-систему неоднократно используют для новых цифровых продуктов и&nbsp;пользовательских сценариев. Токены мы&nbsp;оформили в&nbsp;Figma и&nbsp;отдельно сделали гайды на&nbsp;русском и&nbsp;английском языках, как ими пользоваться без ошибок.</p>
</div>

<video
src="/uploads/5_eb614d564c.webm"
loop
autoplay
muted
playsinline></video>

<div>
<h3>Локальная специфика</h3>
<p>Библиотеку компонентов разработали на&nbsp;армянском языке. И&nbsp;дело тут не&nbsp;только в&nbsp;локализации: у&nbsp;армянского языка своя специфика в&nbsp;смысле&nbsp;UI, которую нужно было учитывать. Некоторые стандартные решения, которые мы&nbsp;уже использовали в&nbsp;том числе на&nbsp;международных проектах, для Converse Bank не&nbsp;подходили из-за длины армянских слов. Поэтому мы&nbsp;искали универсальные гибкие решения, которые будут хорошо работать при&nbsp;любом количестве символов. В&nbsp;итоге погрузились в&nbsp;специфику банковского сленга и&nbsp;написали все тексты для интерфейсов на&nbsp;английском и&nbsp;русском, потом перевели на&nbsp;армянский с&nbsp;помощью коллег из&nbsp;Converse Bank.</p>
</div>

<img src="/uploads/6_4b738e795a.webp"> 

<div>
<h3>Работа на&nbsp;основе гипотез</h3>
<p>Мы&nbsp;сформировали перечень основных компонентов, которые закрывают&nbsp;90% потребностей в&nbsp;создании любого продукта. Остальные&nbsp;10%&nbsp;&mdash; это специфические кастомные сложные компоненты, которые создаются специально под задачи. В&nbsp;результате у&nbsp;нас получились две версии компонентов для темной и&nbsp;светлой темы, которые может применять и&nbsp;дизайн-команда, и&nbsp;команда разработки. И&nbsp;делать это проще, быстрее и&nbsp;эффективнее.</p>
</div>

<img src="/uploads/7_554e4e8821.webp"> 

horizontal-cover_-mobile-cover.webp

Дизайн-система для Converse Bank

╨Ю╨▒╨╗╨╛╨╢╨║╨░-╨║╨░╤В╨░╨╗╨╛╨│╨░.webp

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

<div>
<h3>Почему больше не&nbsp;синий</h3>
<p>Заказчик пришел с&nbsp;запросом сделать редизайн основного лендинга. У&nbsp;ребят уже обновился общий визуальный стиль, поэтому они хотели изменений. Довольно стандартный сайт по&nbsp;подбору психологов для&nbsp;взрослых, подростков и&nbsp;пар&nbsp;&mdash; в&nbsp;бело-синих оттенках. Это довольно холодный оттенок, при этом не&nbsp;слишком обнадеживающий. Заказчик решил, что&nbsp;ему нужно что-то другое&nbsp;&mdash; и&nbsp;принес нам яркий оранжево-желтый кей-вижуал. А&nbsp;мы&nbsp;и&nbsp;взяли.</p>
</div>

<img src="/uploads/Ya_Z_G_M_I_B_Zh_217baaff0b.webp"> 

<div>
<h3>Дизайн и&nbsp;структура</h3>
<p>У&nbsp;заказчика уже была готовая структура главной, которую они вывели путем исследований. Менять ее&nbsp;нужно было аккуратно: ребята беспокоились, как&nbsp;бы&nbsp;в&nbsp;погоне за&nbsp;красивой картинкой не&nbsp;уронить метрики и&nbsp;конверсию на&nbsp;консультацию с&nbsp;психологом. На&nbsp;все работы ушло около полутора месяцев, включая процесс согласования.</p>
</div>

<img src="/uploads/F_Zh_B_V_A_G_V_G_A_8796c80a82.webp"> 

<div>
<h3>Обнадеживающее будущее</h3>
<p>Новый визуальный стиль заказчика нам понравился: в&nbsp;его основе лежали яркие, теплые, эмоциональные цвета. Такое цветовое решение значительно выделяло Zigmund Online на&nbsp;фоне конкурентов: в&nbsp;сфере предпочитают оформлять визуалы в&nbsp;синих и&nbsp;зеленых оттенках. Теплые оттенки мы&nbsp;использовали для всех элементов сайта. Кроме того коллеги с&nbsp;помощью собственного промпта генерировали иллюстрации и&nbsp;фоны по&nbsp;нашим&nbsp;ТЗ.</p>
</div>

<img src="/uploads/Yu_O_J_G_G_J_60080260d9.webp"> 

<div>
<h3>Технические радости</h3>
<p>Нам было важно сохранить удобство платформы, при&nbsp;этом придумать интересные фичи. Наша любимая&nbsp;&mdash; очень приятный и&nbsp;удобный скролл при&nbsp;переходе с&nbsp;первого экрана, реализованный с&nbsp;помощью интерфейсной анимации. Это абсолютно имиджевая история, но&nbsp;она работает очень бесшовно и&nbsp;хорошо демонстрирует ценности сервиса.</p>
</div>

<video
src="/uploads/Tehnicheskie_radosti_4d5aea58b3.webm"
loop
autoplay
muted
playsinline></video>

<div>
<h3>Небольшие обновления</h3>
<p>Мы&nbsp;проработали текущую структуру, проанализировали конкурентов и&nbsp;релевантные сервисы. На&nbsp;этой основе разработали, предложили и&nbsp;в&nbsp;итоге внедрили в&nbsp;структуру нескольких новых блоков. Мы&nbsp;сохранили смысловую подачу, но&nbsp;добавили в&nbsp;новые блоки эмпатию и&nbsp;заботу, а&nbsp;еще&nbsp;возможность начать диалог с&nbsp;пользователем уже&nbsp;с&nbsp;первого скролла. Среди переработанных экранов была форма с&nbsp;СТА на&nbsp;главном экране, блок для тех, кто&nbsp;не&nbsp;знает, что с&nbsp;ним происходит и&nbsp;не&nbsp;может с&nbsp;этим справиться самостоятельно. Дополнительно проработали витрину с&nbsp;услугами для&nbsp;партнеров и&nbsp;форму с&nbsp;СТА. Мы&nbsp;поженили смысловую и&nbsp;юайную части, не&nbsp;побоялись экспериментов&nbsp;&mdash; и&nbsp;получилось хорошо. Продакты на&nbsp;клиентской стороне тоже рады: конверсию мы&nbsp;не&nbsp;уронили, а&nbsp;красивый и&nbsp;функциональный сайт сделали.</p>
</div>
<img src="/uploads/E_M_I_P_5e6e6239f5.webp"> 

<div>
<h3>И&nbsp;что дальше?</h3>
<p>На&nbsp;основе нашего редизайна заказчик принялся за&nbsp;обновление и&nbsp;других страниц, кроме главной. Подход команды Mish им&nbsp;зашел&nbsp;&mdash; а&nbsp;мы&nbsp;и&nbsp;рады делиться.</p>
</div>
<img src="/uploads/Sh_Z_V_M_I_3517a2ca7a.webp"> 

Header-╨║╨╡╨╕╠Ж╤Б╨░.webp

Редизайн главной страницы сервиса Zigmund

cover.webp

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

<div>
<h3>От порядка к порядку</h3>
<p>Заказчик пришел с&nbsp;задачей создать self-service портал для инвентаризации продуктов и&nbsp;управления их&nbsp;жизненным циклом. Система нужна, чтобы поддерживать продуктовый каталог в&nbsp;актуальном состоянии и&nbsp;получать дополнительную информацию о&nbsp;его элементах. С&nbsp;помощью системы сотрудники могут создавать типовые шаблоны, вычислять с&nbsp;их&nbsp;помощью показатели для индивидуальных программных сервисов, ĸомпонентов, продуктов и&nbsp;бизнес-активностей. Чем удобнее будет система, тем быстрее и&nbsp;легче пользователи получат удобный доступ к&nbsp;внутренней информации.</p>
</div>

<img src="/uploads/v_V_G_M_L_2a3b80e4ee.webp">

</div>
<div>
<h3>Что было не&nbsp;так с&nbsp;системой</h3>
<p>Это ее&nbsp;перегруженный и&nbsp;одновременно недогруженный интерфейс. Перегруженный с&nbsp;точки зрения чистоты дизайна, при этом недостаточно удобный с&nbsp;точки зрения UХ. А&nbsp;еще внутри системы недоставало важных функций и&nbsp;сценариев, которые&nbsp;бы охватывали все необходимые рабочие ситуации. Нам было важно это исправить. От&nbsp;изначальной версии оставили только верхнеуровневую навигацию&nbsp;&mdash; логику разделов. Остальное дополнили и&nbsp;разработали с&nbsp;нуля.</p>
</div>

<img src="/uploads/208189208176208187208190209129209140_74fb43bab6.webp">

</div>
<div>
<h3>Формирование логики</h3>
<p>Никто лучше заказчика не&nbsp;знает, что ему нужно получить в&nbsp;итоге. Никто лучше нас не&nbsp;знает, как прийти к&nbsp;идеальному результату в&nbsp;итоге. Поэтому всю внутреннюю логику системы мы&nbsp;разрабатывали вместе. Изначально нам предоставили пул неструктурированных данных, из&nbsp;которых должен получиться итоговый продукт. На&nbsp;совместных созвонах мы&nbsp;формировали логику и&nbsp;предлагали гипотезы. Затем дизайнеры отрисовывали интерфейс и&nbsp;передавали техническое задание разработчикам. Цикл продолжался раз за&nbsp;разом, пока все нужные фичи не&nbsp;были готовы. Он&nbsp;продолжается и&nbsp;сейчас: в&nbsp;ходе эксплуатации становится понятно, какие функции еще нужно добавить, а&nbsp;какие со&nbsp;временем оказываются не&nbsp;нужными.</p>
</div>

<img src="/uploads/4_208164208190209128208188209139_f03b3127cc.webp">

</div>
<div>
<h3>Этап разработки</h3>
<p>Команда дизайнеров предоставила внутреннему отделу разработки Mish готовый UI-Kit. Мы&nbsp;собрали библиотеку компонентов, чтобы можно было быстро собирать функциональный интерфейс. Для это выбрали решения React и&nbsp;Storybook. Основная сложность разработки была в&nbsp;интеграции и&nbsp;получении данных из&nbsp;внутренних систем заказчика и&nbsp;в&nbsp;обратной синхронизации. Для бэкенда выбрали next.js, express и&nbsp;базу данных postgreSQL. Чтобы взаимодействовать с&nbsp;серверной частью, использовали REST API. Так получилось забрать данные из&nbsp;нашего портала и&nbsp;предоставить другим системам заказчика получать обновленные данные. Дополнительно организовали ролевую модель для серверной и&nbsp;клиентской частей системы. Этим занимались тестировщики в&nbsp;команде&nbsp;&mdash; и&nbsp;в&nbsp;итоге за&nbsp;две недели плотной работы проверили каждую виртуальную щель на&nbsp;безопасность.</p>
</div>

<img src="/uploads/a_A_V_e4e839b082.webp">

</div>
<div>
<h3>Информационная структура</h3>
<p>Готовую админку мы&nbsp;взяли за&nbsp;основу&nbsp;&mdash; и&nbsp;полностью переделали. Отрисовали интерфейсы для трех ролей: самых частотных пользователей, которые имеют дело с&nbsp;системой. В&nbsp;итоге получилась многоуровневая структура с&nbsp;древом навигации, полноценной контентной частью и&nbsp;масштабным новым функционалом.</p>
</div>

<img src="/uploads/209131208186209130209131209128208176_5ffaff35e5.webp">

</div>
<div>
<h3>Дашборды</h3>
<p>Большая часть системы&nbsp;&mdash; это разнообразные таблички. Их&nbsp;создают сами пользователи, а&nbsp;потом к&nbsp;делу приступают архитекторы. Все дашборды отображаются в&nbsp;трех видах, и&nbsp;пользователи продукта могут сами выбрать, какое именно отображение им&nbsp;кажется более удобным. Мы&nbsp;привели все к&nbsp;единому виду, чтобы пользователи быстро считывали контент на&nbsp;разных продуктах и&nbsp;так&nbsp;же быстро получали нужную им&nbsp;информацию.</p>
</div>

<video
src="/uploads/6208177208190209128208180_60fps_v1_0_d80f6b9c35.webm"
loop
autoplay
muted
playsinline></video>

</div>
<div>
<h3>Сущности</h3>
<p>Так внутри компании называют информационные продукты, которые создают и&nbsp;затем курируют сотрудники. Чтобы запустить процесс, нужно заполнить очень сложные формы&nbsp;&mdash; но&nbsp;так, чтобы это было максимально просто. Мы&nbsp;сделали многоуровневую форму с&nbsp;разнообразными критериями, организовали удобное поэтапное заполнение, разделили критерии на&nbsp;шаги. Здесь&nbsp;же есть режим просмотра: в&nbsp;нем все, что внес в&nbsp;карточку пользователь, отображается в&nbsp;структурированном виде.</p>
</div>

<img src="/uploads/209137208189208190209129209130208184_cd5691dc2c.webp">

</div>
<div>
<h3>Взгляд в&nbsp;прошлое и&nbsp;будущее</h3>
<p>В&nbsp;августе 2020 года мы&nbsp;выиграли тендер по&nbsp;проекту, сама реализации идет с&nbsp;2021&nbsp;&mdash; и&nbsp;продолжается до&nbsp;сих пор. Сначала была полноценная разработка, а&nbsp;сейчас мы&nbsp;на&nbsp;поддержке и&nbsp;пилим новые фичи по&nbsp;запросу заказчика.</p>
</div>

preview.webp

preview-resize.webp

Разработка информационной системы

CapitalGroup1.webm

Задизайнили и разработали имиджевый сайт для крупного застройщика.

<div>
<h3>Капитальный клиент</h3>
<p>Capital Group&nbsp;&mdash; один из&nbsp;ведущих девелоперов в&nbsp;России. Для тендера мы&nbsp;сделали демоверсию будущего сайта с&nbsp;3D-визуализацией зданий на&nbsp;карте Москвы. В&nbsp;итоге наш проект выбрали, и&nbsp;мы&nbsp;приступили к&nbsp;работе. Нашей задачей было сделать сайт таким&nbsp;же топовым и&nbsp;современным: продемонстрировать уникальные локации проектов Capital Group. А&nbsp;еще&nbsp;&mdash; поработать над лендингом одного из&nbsp;их&nbsp;ведущих объектов прямо сейчас.</p>
</div>

<img src="/uploads/Pervaya_3c40482a3a_04599b1dd0.jpg">

</div>
<div>
<h3>Сложная стройка</h3>
<p>Изначально мы&nbsp;хотели собирать сайт на&nbsp;WebGL. Но&nbsp;его возможностей не&nbsp;хватало, чтобы разносторонне и&nbsp;полно показать объекты Capital Group. Мы&nbsp;протестировали несколько вариантов и&nbsp;решили сделать отрендеренные видео. Но&nbsp;в&nbsp;разработке при обратном скролле все ломалось. Так мы&nbsp;дошли до&nbsp;итогового варианта&nbsp;&mdash; WebP-секвенции. Разбили видео на&nbsp;картинки и&nbsp;одним махом решили проблемы обратного скролла.</p>
</div>

<video
src="/uploads/2_1280h720_f201ace0b6_1d223850e6.webm"
loop
autoplay
muted
playsinline></video>

</div>
<div>
<h3>Свобода в решениях</h3>
<p>Весь сайт наша команда делала под ключ: от&nbsp;концепции до&nbsp;разработки. В&nbsp;том числе мы&nbsp;придумали кастомное решение для страницы с&nbsp;проектами, чтобы заказчик мог сам заполнять объекты информацией. Для всего проекта подготовили типовые блоки, из&nbsp;которых легко собирать новые страницы в&nbsp;соответствии с&nbsp;нужным контентом. Все это делается через админку Strapi. Это современная &laquo;безголовая&raquo; CMS с&nbsp;открытым исходным кодом. Она привязывается к&nbsp;конкретному проекту и&nbsp;помогает без особых знаний управлять контентом. В&nbsp;админке Capital Group страницы объектов собираются из&nbsp;20&nbsp;разных блоков.</p>
</div>

<img src="/uploads/3_f5be47dfdb.webp">

</div>
<div>
<h3>Большая птичка</h3>
<p>Чтобы показать технологичность и&nbsp;масштаб заказчика, в&nbsp;дизайне главной использовали трехмерное изображение Москвы и&nbsp;показали столицу с&nbsp;высоты птичьего полета. На&nbsp;карте разместили проекты застройщика. В&nbsp;стиле интерфейса остановились на&nbsp;эстетике минимализма, чтобы подчеркнуть нишевость проекта и&nbsp;не&nbsp;отвлекать громоздкими решениями от&nbsp;сердца продукта&nbsp;&mdash; объектов Capital Group.</p>
</div> 

<img src="/uploads/4_c91914f34a.webp">

</div>
<div>
<h3>Пролет над Москвой</h3>
<p>Он&nbsp;получился у&nbsp;нас вполне буквально: после загрузки мы&nbsp;перемещаемся от&nbsp;общего обзора карты к&nbsp;подсвеченным объектам девелопера. Не&nbsp;все получилось сразу: изначальный маршрут от&nbsp;клиента был слишком сложным, и&nbsp;на&nbsp;видео все смотрелось&nbsp;бы бесконечным полетом. В&nbsp;итоге мы&nbsp;смогли &laquo;поженить&raquo; порядок объектов от&nbsp;застройщика и&nbsp;комфортную картинку для пользователя.</p>
</div> 

<video
src="/uploads/5_1280h720_1_566bf05b10.webm"
loop
autoplay
muted
playsinline></video>

</div>
<div>
<h3>Реализм, минимализм и 3D</h3>
<p>Первоначальный концепт, промежуточные версии и&nbsp;яркий итог &mdash;&mdash; большая работа 3D-дизайнеров. Ребята применили разные подходы к&nbsp;отображению объектов, вариантам пролетов над Москвой и&nbsp;подсвечиванием проектов на&nbsp;общей карте. Чтобы карта выглядела реалистичной, долго подбирали оттенки воды и&nbsp;зелени. Так у&nbsp;нас получился живой и&nbsp;настоящий интерфейс, а&nbsp;не&nbsp;безликий макет.</p>
</div> 

<img src="/uploads/6_5b3c403d11.webp">

</div>
<div>
<h3>Полеты во сне и наяву</h3>
<p>Мы&nbsp;анимировали много разных деталей: от&nbsp;появления текста на&nbsp;экране до&nbsp;полноценных 3D-моделей жилых комплексов. После отрисовки пролетов их&nbsp;рендерили в&nbsp;WebP-секвенции и&nbsp;анимировали по&nbsp;кадрам с&nbsp;привязкой к&nbsp;скроллу страницы.</p>
</div> 

<video
src="/uploads/7_1280h720_1_a933a8dbbb_a3cbeed1cc.webm"
loop
autoplay
muted
playsinline></video>

</div>
<div>
<h3>Объекты гордости</h3>
<p>Все проекты клиента показаны на&nbsp;главной пролетами над Москвой. От&nbsp;каждого объекта можно перейти на&nbsp;его лендинг и&nbsp;узнать больше о&nbsp;преимуществах комплексов.</p>
</div> 

<img src="/uploads/8_c3ecaa1b76.webp">

</div>
<div>
<h3>Самый главный</h3>
<p>Бадаевский&nbsp;&mdash; флагманский объект Capital Group. Его&nbsp;основная фишка&nbsp;&mdash; в&nbsp;&laquo;воздушных&raquo; квартирах, расположенных на&nbsp;высоких 35&nbsp;метровых стройных колоннах, отсылающих к&nbsp;индустриальной эстетике. Сейчас объект на&nbsp;стадии строительства, а&nbsp;наш сайт уже&nbsp;готов. Мы&nbsp;показываем детальную и&nbsp;очень подробную трехмерную модель&nbsp;ЖК, делаем акцент на&nbsp;каждой его детали и&nbsp;подсвечиваем преимущества: местоположение, концепцию жилья в&nbsp;воздухе, встроенность в&nbsp;исторический ландшафт. Прямые линии к&nbsp;важным городским точкам указывают расстояния до&nbsp;них и&nbsp;подчеркивают местоположение объекта.</p>
</div> 

<video
src="/uploads/9_1280h720_bc36025f30_70e348adf2.webm"
loop
autoplay
muted
playsinline></video>
</div>

</div>
<div>
<h3>Поиграться с картой</h3>
<p>Внизу лендинга Бадаевского мы&nbsp;сделали трехмерную карту объекта на&nbsp;базе WebGL&nbsp;&mdash; технологии, которая не&nbsp;подошла остальному сайту. Благодаря ней пользователь может по-разному обращаться с&nbsp;интерфейсом и&nbsp;переключаться между разными планами: верхним и&nbsp;нижним. Такой подход отражает концепцию застройщика &laquo;Жить на&nbsp;земле&raquo; и&nbsp;&laquo;Жить в&nbsp;воздухе&raquo;, которую мы&nbsp;реализовали на&nbsp;странице.</p>
</div> 
</div>
<p>Инфраструктура:<p>
<img src="/uploads/10_3fbe1fd7b0.webp">
<p>Входные группы:<p>
<img src="/uploads/11_0e50b923c6.webp">
<p>Жить на земле:<p>
<img src="/uploads/12_1973c0e5a5.webp">
<p>Жить в воздухе:<p>
<img src="/uploads/13_05bee5d1d2.webp">
<p>Квартиры в воздухе:<p>
<img src="/uploads/14_6a72762fb3.webp">
<p>Небесные виллы:<p>
<img src="/uploads/15_6faaae4982.webp">

</div>
<div>
<h3>Не инфраструктура, а интерфейс</h3>
<p>В&nbsp;основном меню пользователь может выбрать раздел с&nbsp;объектами, узнать больше о&nbsp;компании, команде, новостях и&nbsp;реферальной программе. В&nbsp;&laquo;Объектах&raquo; можно просмотреть жилую или коммерческую недвижимость, паркинг, индустриальные помещения&nbsp;&mdash; склады.</p>
</div> 

<img src="/uploads/16_5135314a2e.webp">

</div>
<div>
<h3>Тестируем и оптимизируем</h3>
<p>Мы&nbsp;начали тестирование еще на&nbsp;этапе проектирования. Проверяли сайт не&nbsp;только руками, но&nbsp;и&nbsp;через специальные инструменты, например PageSpeed Insights от&nbsp;Google. Оптимизацию делали в&nbsp;конце работы, после готовой структуры и&nbsp;контента. Помогли современные форматы графики. Изображения сжимали в&nbsp;WebP, а&nbsp;видео&nbsp;&mdash; в&nbsp;WebM.</p>
</div> 

<video
src="/uploads/17_1280h720_47f5517314_77a19e4676.webm"
loop
autoplay
muted
playsinline></video>
</div>

</div>
<div>
<h3>Адаптивные версии</h3>
<p>Мы&nbsp;сделали три варианта адаптива: мобильную версию, десктоп и&nbsp;версию для планшетов. Продумали адаптив, который на&nbsp;всех разрешениях делает картинку одинаковой. На&nbsp;мобилке и&nbsp;версии для планшетов мы&nbsp;решили не&nbsp;отказываться от&nbsp;визуальных эффектов и&nbsp;3D-изображений. Карта Москвы выглядит более компактной, но&nbsp;все основные элементы навигации сохранены. Мы&nbsp;заранее отрендерили все видео с&nbsp;турами по&nbsp;объектам, чтобы не&nbsp;делать страницу слишком тяжелой.</p>
</div> 

<img src="/uploads/18_07ed4700ea.webp">






2.webp

Сайт девелопера Capital Group

21-_1_.webp

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

<div>
<h3>Мегазадача</h3>
<p>Наши друзья из KTS пришли к&nbsp;нам с&nbsp;задачей от&nbsp;Мегамаркета — разработать механику для&nbsp;игры на&nbsp;внутреннюю площадку. А&nbsp;кроме механики сделать дизайн, иллюстрации и&nbsp;дополнительные игровые миры.</p>
</div>

<img src="/uploads/22_f2f6a740f2.png">

<div>
<h3>Мегаконцепт</h3>
<p>Суть аппки заключалась в&nbsp;стандартной механике настольной игры . Пользователь кидает кубик и&nbsp;ходит на&nbsp;столько полей, сколько выпадает на&nbsp;костях. Попутно собирает монетки. Кроме обычных полей есть особые: некоторые из&nbsp;них отправляют героя на&nbsp;несколько шагов назад, другие&nbsp;&mdash; вперед.</p>
</div>

<img src="/uploads/5_be96d45789.png">

<div>
<h3>Мегаотличие</h3>
<p>Главное отличие от&nbsp;физических игр с&nbsp;подобной механикой&nbsp;&mdash; формат башни. Последнее поле на&nbsp;каждом уровне похоже на&nbsp;батут, который переносит героя на&nbsp;следующий этаж. И&nbsp;так 8&nbsp;раз. Кстати о&nbsp;герое.</p>
</div>
</div>

<img src="/uploads/3_5a190584c6.png">

</div>
<div>
<h3>Мегагерой</h3>
<p>Герой игры, которым &laquo;шагают&raquo; пользователи,&nbsp;&mdash; интерактивный заяц-маскот. Этого героя мы&nbsp;адаптировали под игровой формат.</p>
</div>

<video src="/uploads/na_sajt_720_f38ca1a50d.webm"
loop
autoplay
muted 
playsinline></video>
</div>

</div>
<div>
<h3>Мегареализация</h3>
<p>Все этажи мы&nbsp;оформили в&nbsp;общей стилистике, но&nbsp;разной тематике. Взяли для всех уровней общую цветовую гамму&nbsp;&mdash; пастельную. Раскрасили все элементы каждого этажа в&nbsp;близкие оттенки. В&nbsp;итоге получили изящный игровой интерьер в&nbsp;рамках конкретных уровней и&nbsp;красивую цельную картинку.</p>
</div> 

<img src="/uploads/1_fa4e84cff4.png">

<div>
<h3>Мегапартнеры</h3>
<p>В&nbsp;башне есть стандартные этажи&nbsp;&mdash; это первые два уровня&nbsp;&mdash; и&nbsp;партнерские. Для каждого мы&nbsp;создали подходящий визуал с&nbsp;деталями, отсылающими к&nbsp;партнерам, а&nbsp;еще оформили комнаты в&nbsp;нужном сеттинге. Так, для партнера-бренда косметики отрисовали бьюти-комнату, а&nbsp;для автотоваров&nbsp;&mdash; гараж и&nbsp;мастерскую.</p>
</div> 

<img src="/uploads/2_67fad4ea66.png">

<div>
<h3>Мегамеханика</h3>
<p>По&nbsp;ходу игры заяц собирает игровую валюту, которую можно потратить на&nbsp;покупку специальных промокодов от&nbsp;Мегамаркета и&nbsp;партнеров. Для этого отрисовали для Мегамаркета внутренний маркет.На пути зайца встречаются алмазы. Это точки входа в&nbsp;мини-игру Сокобан&nbsp;&mdash; классическую двухмерную головоломку. Суть механики Сокобана состоит в&nbsp;том, чтобы расставить алмазы по&nbsp;нужным местам. Если игрок справляется с&nbsp;задачей, получает бонус. Команда задизайнила Сокобан так, чтобы двухмерный мир сохранял общую трехмерную стилистику&nbsp;&mdash; поэтому сохранила алмаз в&nbsp;3D.</p>
</div> 

<img src="/uploads/4_bfa9fb96c4.png">



Проекты

hello@mish.design

Москва

Нижний Новгород