помощь бизнессу4.png

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

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

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

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

<p><em>С&nbsp;этой проблемой завод пришел в&nbsp;Mish.</em></p>

<img src="/uploads/vc_2_48269eff12.png">

<h3>История, как у&nbsp;нижегородских мастеров не&nbsp;справлялся сайт</h3>
<p>Игрушки выпускают тиражом. Количество экземпляров может быть разным, но&nbsp;в&nbsp;среднем в&nbsp;каждом тираже от&nbsp;одного до&nbsp;15&nbsp;видов игрушек по&nbsp;300 единиц каждого вида. Весь цикл продаж обычно длится от&nbsp;10&nbsp;секунд до&nbsp;полутора минут. За&nbsp;это время на&nbsp;страницу заходит несколько тысяч пользователей. И&nbsp;пока сайт лежит, никто не&nbsp;может купить игрушку. И&nbsp;даже ее&nbsp;эксклюзивность никак не&nbsp;помогает быстро продать партию.</p>

<p>Нам нужно было все починить. Но&nbsp;это была задачка со&nbsp;звездочкой. С&nbsp;двумя звездочками.</p>
<ul>
  <li>Звездочка первая: через неделю стартовала продажа партии</li>
  <li>Звездочка вторая: на&nbsp;разработку полноценного сайта требуется не&nbsp;меньше полугода</li>
</ul>

<blockquote>
Маховик времени мы&nbsp;забыли в&nbsp;прошлом офисе, поэтому пришлось действовать иначе.
</blockquote>

<p>Сначала команда разработки Mish изучила решения предыдущего подрядчика. Версия была спроектирована на&nbsp;CMS 1С-Битрикс и&nbsp;работала под управлением PHP 7.4. Это хорошие стабильные технологии, но&nbsp;на&nbsp;оптимизацию интернет-магазина со&nbsp;всем его функционалом нужно было слишком много ресурсов.</p>

<p>В&nbsp;итоге придумали рабочую заплатку&nbsp;&mdash; сделать простой лендинг, чтобы собирать заявки на&nbsp;покупку игрушек. После подтверждения заказа покупатель уже мог купить свой елочный эксклюзив. У&nbsp;нашего клиента были продуктовые ограничения: покупатели не&nbsp;могли сразу положить в&nbsp;корзину 100&nbsp;игрушек.&nbsp;1&nbsp;заказ = 1&nbsp;игрушка одного вида. Такой социализм в&nbsp;миниатюре.</p>

<h3>История, как Mish решали задачу</h3>
<p>За&nbsp;три дня мы&nbsp;спроектировали и&nbsp;согласовали дизайн. Еще за&nbsp;два&nbsp;&mdash; сделали логику сайта. Решили кодить на&nbsp;языке Golang: на&nbsp;нем можно быстро писать низкоуровневые программы, в&nbsp;которых главное&nbsp;&mdash; скорость. Система ограничивает количество игрушек в&nbsp;заказе и&nbsp;автоматически считает остатки. Заявки выгружались в&nbsp;экселевский файл, а&nbsp;менеджеры оттуда уже вручную обрабатывали заказы. Звучит сложно, а&nbsp;получилось очень эффективно.</p>

<p>Так мы&nbsp;подготовились к&nbsp;продаже первой весенней коллекции &laquo;Морозная рябина&raquo;. Всего было 9&nbsp;игрушек по&nbsp;300 штук каждой&nbsp;&mdash; итого 2&nbsp;700&nbsp;экземпляров.</p>

<p>Продажи стартовали 9&nbsp;апреля в&nbsp;14:00. Первые 600 заказов оформили за&nbsp;одну минуту&nbsp;&mdash; по&nbsp;10&nbsp;игрушек в&nbsp;секунду. Коллекция не&nbsp;была новой, поэтому привычного ажиотажа не&nbsp;было. Тем не&nbsp;менее, абсолютно всю партию мы&nbsp;продали за&nbsp;20&nbsp;минут. И&nbsp;у&nbsp;нас ничего не&nbsp;упало.</p>

<h3>Мониторинг</h3>

<img src="/uploads/vc2_772bca6a03.png">

<p>Через два дня стартовала пасхальная коллекция&nbsp;&mdash; и&nbsp;мы&nbsp;надеялись, что все пройдет так&nbsp;же. Но&nbsp;не&nbsp;прошло.</p>

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

<img src="/uploads/vc_715f717ee5.png">

<p>Падения мы&nbsp;вывезли, но&nbsp;к&nbsp;третьей партии решили пересмотреть логику бэкэнда. База данных PostgreSQL не&nbsp;справлялась с&nbsp;большим количеством транзакций. Мы&nbsp;упирались в&nbsp;лимиты и&nbsp;получали блокировки. Поэтому решили перенести механизм транзакций на&nbsp;уровень языка Golang. Это позволило вычислять самую нагруженную логику в&nbsp;оперативной памяти.</p>

<p>24&nbsp;апреля стартовали продажи игрушки &laquo;Мальчик с&nbsp;самолетиком&raquo;&nbsp;&mdash; 450&nbsp;экземпляров. Мы&nbsp;продали их&nbsp;за&nbsp;21&nbsp;секунду, а&nbsp;сервер работал исправно. Игрушек было в&nbsp;несколько раз меньше, чем в&nbsp;предыдущие разы, но&nbsp;мы&nbsp;побили скоростной рекорд без багов в&nbsp;системе.</p>

<p>Четвертая партия&nbsp;&mdash; 300 штук игрушки в&nbsp;виде ежика.&nbsp;17&nbsp;секунд&nbsp;&mdash; ежика нет, а&nbsp;сайт работает так&nbsp;же, как до&nbsp;и&nbsp;после.</p>

<img src="/uploads/vc_4_64bd174684.png">
<img src="/uploads/vc5_016c212eb8.png">

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


Как помочь бизнесу заработать 10 млн ₽ за 20 секунд

Толстых Кристина

large_Kris_sajt_5517380b06.jpeg

medium_Kris_sajt_5517380b06.jpeg

small_Kris_sajt_5517380b06.jpeg

thumbnail_Kris_sajt_5517380b06.jpeg

Kris_sajt_5517380b06.jpeg

large_background profile (3).png

medium_background profile (3).png

small_background profile (3).png

thumbnail_background profile (3).png

background profile (3).png

Product Design

UI/UX

Management

Business Needs

Project Management

Product Management

nlmk mocap.mp4

Приложение Группы Компаний НЛМК для знакомства с товаром и оформления заказов

<img src="/uploads/1_e7d8f67a99.jpg?updated_at=2023-03-28T12:58:36.263Z" alt="enter image description here">

<div>
<h3>Стальное решение</h3>
<p>НЛМК — это крупный российский производитель стальной продукции. И от нас требовалось сделать максимально удобное и простое приложение, чтобы эту продукцию красиво и понятно показать и довести покупателя до совершения заказа. Ничего сложного на первый взгляд, но особенность товара накладывает свой отпечаток на дизайне всего приложения. </p>
</div>
 
  <img src="/uploads/3_cd2b9401b0.jpg?updated_at=2023-03-24T07:16:55.796Z" alt="enter image description here">

<div>
<h3>Максимальный комфорт</h3>
<div>
  <p>С помощью приложения можно:</p>
    <p>1) Найти и&nbsp;просмотреть информацию об&nbsp;интересующих товарах;</p></li>
   <p>2) Получить информацию о&nbsp;ценах, выгодных предложениях и&nbsp;наличии металлоизделий на&nbsp;складах в&nbsp;выбранном регионе.</p></li>
    <p>3) Заказать как готовую продукцию, так и под производство. Можно выбрать необходимые позиции с&nbsp;ближайшего к&nbsp;склада, задать параметры и&nbsp;указать тоннаж, после чего добавить товары в&nbsp;корзину и&nbsp;оформить заказ.</p>
</div>
</div>
  <img src="/uploads/2_c25c23fe2c.jpg?updated_at=2023-03-24T07:16:55.790Z" alt="enter image description here">

<div>
<h3>Идеальный фильтр</h3>
<p>Особое внимание мы&nbsp;уделили фильтрам продукции, чтобы эта функция отвечала запросам и&nbsp;нуждам клиентов НЛМК. </p>
</div>
  <img src="/uploads/4_c278e8f39b.jpg?updated_at=2023-03-24T07:16:55.740Z" alt="enter image description here">

  <img src="/uploads/5_741555daa1.jpg?updated_at=2023-03-24T07:16:54.284Z" alt="enter image description here">
  <div>
<h3>А что в итоге?</h3>
<div>
  <p>Получилось целостное и хорошо продуманное приложение с минималистичными иллюстрациями и строгим дизайном. Внимание к деталям и прекрасно отстроенная логика делают это приложение незаменимым инструментом бизнеса. </p>
</div>
</div>

НЛМК.jpg

НЛМК

Бажанов Максим

Денисова Христина

Закиров Арсений

YouCan_00.png

Дизайн приложения для поддержки пациентов с онкологией и их родственников.

<img src="/uploads/00_Title_You_Can_0a753fdad0.jpg?updated_at=2023-04-02T17:51:05.102Z" alt="enter image description here">
<div>
<h3>Близко к сердцу</h3>
<p>You can&nbsp;&mdash; cервис поддержки пациентов с&nbsp;онкологией. И он подходит самым разным людям с разными стадиями заболеваниями. Тема очень непростая, поэтому мы со всей серьезностью и щепетильностью приступили к проекту.</p>
</div>
  <img src="/uploads/01_You_Can_2015204059.jpg?updated_at=2023-04-02T17:51:04.871Z" alt="enter image description here">
<div>
<h3>Онбординг</h3>
<p>Перед началом работы с приложением нужно заполнить анкету-знакомство, чтобы алгоритмы подобрали подходящий контент. Это тот случай, когда важность онбординга трудно переоценить. И здесь важен как тактичный подход в самом контенте, так и визуальная составляющая.</p>
</div>
  <img src="/uploads/02_You_Can_9a59771567.jpg?updated_at=2023-04-02T17:51:05.455Z" alt="enter image description here">
<div>
<h3>Интерфейс</h3>
<p>В интерфейсе нужно было сделать упор на простоту и доступность, поскольку целевая аудитория очень разнородна по возрасту, социальному статусу и пользовательскому опыту. Мы решили все основные функции расположить на видном месте, чтобы облегчить к ним доступ.</p>
</div>
  <img src="/uploads/03_You_Can_55fce72115.jpg?updated_at=2023-04-02T17:51:05.653Z" alt="enter image description here">
  <img src="/uploads/04_You_Can_c23e25fc11.jpg?updated_at=2023-04-02T17:51:05.146Z" alt="enter image description here">
<div>
<h3>Забота и поддержка</h3>
<p>Если бы это приложение можно было охарактеризовать одним словом, то это был бы "комфорт". Он прослеживается везде: в первых экранах, интерфейсе, контенте, иллюстрациях. И мы по-настоящему гордимся тем, что поставленная задача была так чутко выполнена нашими ребятами. Приложение получило множество наград и высоко оценено дизайн-сообществом.</p>
</div>

YouCanGor_00.png

You can

Мазаев Денис

Макаров Сергей

RKP.png

Лендинг и личный кабинет объединенной российско-китайской платформы поиска оборудования

<img src="/uploads/00_RKP_99a3a9d2fc.jpg?updated_at=2023-04-02T18:00:44.464Z" alt="enter image description here">
<div>
<h3>Химическая платформа</h3>
<div>
  <p>Объединенная российско-китайская платформа химической промышленности — это большой проект для создания здоровой конкурентной среды на&nbsp;рынке импортного промышленного оборудования и&nbsp;материалов. </p>
  <p>Платформа полезна как физическим лицам, так и&nbsp;крупным промышленным корпорациям для поиска необходимого оборудования, проверки актуальных цен производителей и&nbsp;получения всех сопутствующих услуг. </p>
</div>
</div>

  <img src="/uploads/01_RKP_3240041c36.jpg?updated_at=2023-04-02T18:00:41.488Z" alt="enter image description here">
  <img src="/uploads/02_RKP_97972af8dc.jpg?updated_at=2023-04-02T18:00:43.288Z" alt="enter image description here">
<div>
<h3>Быстро и понятно</h3>
<p>Перед нами стояла задача создать лендинг и личный кабинет, которые помогали бы клиентам платформы создавать заявки на поиск оборудования. Дизайн информативный и понятный: пользователь должен в кратчайшие сроки ухватить цель проекта и принцип его работы.</p>
</div>

  <img src="/uploads/03_RKP_5f2138f0fe.jpg?updated_at=2023-04-02T18:00:42.368Z" alt="enter image description here">
<div>
<h3>Личный кабинет</h3>
<p>В личном кабинете нельзя дать пользователю потеряться в обилии полей и документов. И поскольку целевая аудитория проекта имеет слабый пользовательский опыт (ведь аналогичных проектов практически нет), мы потратили много усилий для грамотного структурирования информации, чтобы бережно провести пользователя по нужному пути.</p>
</div>
  <img src="/uploads/04_RKP_b008e64011.jpg?updated_at=2023-04-02T18:00:42.336Z" alt="enter image description here">
  <img src="/uploads/05_RKP_7c2301b0a3.jpg?updated_at=2023-04-02T18:00:42.839Z" alt="enter image description here">
<div>
<h3>Полноценная платформа</h3>
<p>Мы много работаем со сферой промышленности, поэтому уже имеем четкое понимание особенностей запросов клиентов. Данный проект не стал исключением и по итогу проделанная работа была высоко оценена клиентом, а платформа успешно функционирует. Также проект был отмечен несколькими дизайнерскими наградами за качественный интерфейс.</p>
</div>

РКП

kcentr.png

Редизайн маркетплейса с учетом текущих потребностей потребителей и бизнеса

<img src="/uploads/Kcentr_Tagline_01_Main_6a67df1029.jpg?updated_at=2023-04-02T18:16:39.546Z" alt="enter image description here">
<div>
<h3>Маркетплейс</h3>
<p>kcentr.ru&nbsp;&mdash; официальный интернет-магазин Корпорации &laquo;Центр&raquo;&nbsp;&mdash; российской розничной торговой сети по&nbsp;продаже бытовой техники и&nbsp;электроники известных мировых производителей. Иными словами — это амбициозный маркетплейс, которому требовался актуальный дизайн. </p>
</div>

  <img src="/uploads/Kcentr_Tagline_02_855fc57622.jpg?updated_at=2023-04-02T18:16:40.938Z" alt="enter image description here">
<div>
<h3>Карточка товара</h3>
<p>Карточка товара — это чуть ли не самое главное. Здесь важна каждая деталь, поэтому наши ребята тщательно продумали дизайн с учетом всех возможных опций, которые могут быть у продукта. Отображение товара стало максимально информативным, но при этом без лишнего шума и отвлекающих элементов. </p>
</div>
  <img src="/uploads/Kcentr_Tagline_03_fc3ab502c2.jpg?updated_at=2023-04-02T18:16:40.647Z" alt="enter image description here">
  <img src="/uploads/Kcentr_Tagline_04_93319da9f8.jpg?updated_at=2023-04-02T18:16:40.034Z" alt="enter image description here">
<div>
<h3>Оформление заказа</h3>
<p>Именно на этапе оформления заказа значительное число потенциальных покупателей покидают маркетплейс. Что тому виной? Слабый дизайн, шумные элементы, нарушение логики расположения кнопок, неправильные акценты. Мы проработали все ошибки, чтобы пользователь все же успешно купил себе ноутбук.</p>
</div>
  <img src="/uploads/Kcentr_Tagline_05_449d94350b.jpg?updated_at=2023-04-02T18:16:38.972Z" alt="enter image description here">
  <img src="/uploads/Kcentr_Tagline_06_e43adb4e7f.jpg?updated_at=2023-04-02T18:16:40.017Z" alt="enter image description here">
<div>
<h3>Что в итоге?</h3>
<p>Во главе угла этого проекта стоит сильный UX. Это основополагающая любого интернет-магазина, а тем более маркетплейса. Клиент высоко оценил работу с деталями и логику отображения элементов. Маркетплейс успешно функционирует с текущим дизайном и демонстрирует высокие показатели после ребрендинга. </p>
</div>

Корпорация «‎Центр»‎

Зеленцов Константин

exolveBlack3.webm

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


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

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

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

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

</div>
<div>
<h3>Современный конструктивизм</h3>
<p>Изначально мы&nbsp;получили наброски брендинга. Потом предложили идею тетриса&nbsp;&mdash; она перетекла в&nbsp;формат конструктора.</p>
</div>
</div>

<video src="/uploads/exolve_Black_loop_x2_3dcf004828.webm"
loop
autoplay
muted
playsinline></video>
</div>
<div>
</div>
<div>
<h3>Персонализация и&nbsp;автоматизация</h3>
<p>Структурно и&nbsp;визуально мы&nbsp;выстроили проект вокруг концепции объединения разных функций продукта в&nbsp;близкие блоки. Здесь и&nbsp;проявляется идея конструктора: для конкретных целей бизнес может выбрать отдельные продукты, которые лучше отвечают его потребностям.</p>
</div>
</div>

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

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

<img src="/uploads/IMG_Block_4_c7e09ad0b1.webp">
</div>
</div>

<video src="/uploads/2560_b4103ef081.webm"
loop
autoplay
muted
playsinline></video>
</div>
<div>
</div>
<div>
<h3>Простор выбора</h3>
<p>На&nbsp;общем экране собрали информацию о&nbsp;тарифах и&nbsp;полный каталог услуг и&nbsp;партнеров. Такое решение поможет пользователям МТС Exolve быстро выбирать необходимые продукты и&nbsp;упрощать касание с&nbsp;клиентами.</p>
</div>
</div>

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

</div>
<div>
<h3>Разговоры о важном</h3>
<p>Отдельной сущностью стала коммуникационная платформа проекта. На&nbsp;ресурсе собрана информация для внедрения решений МТС Exolve: документация, кейсы, блог, календарь событий, форум. Так пользователям и&nbsp;разработчикам проще следить за&nbsp;обновлениями, задавать вопросы и&nbsp;подбирать для себя продукты, которые лучше сработали у&nbsp;коллег по&nbsp;нише. Каждому пользователю коммуникационной платформы разработчики добавили рейтинг и&nbsp;возможность оценивать посты или комментарии других участников. В&nbsp;целом в&nbsp;проекте использовали технологии 1C: Битрикс, Vue.Js, MindBox, Keycloak.</p>
</div>
</div>

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

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

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

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

Frame 2.webp

Сайт МТС Exolve

Лисунова Карина

Хамзин Эдуард

Ионин Максим 

Олехнович Артем

Всеволод Григорьев

Трипутень Максим

Воронова Мария

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">






Толстых Кристина

Бриф сам себя не заполнит

hello@mish.design

Москва

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