medium_Zakirov_sajt_978f3e0c4d.png

small_Zakirov_sajt_978f3e0c4d.png

thumbnail_Zakirov_sajt_978f3e0c4d.png

Zakirov_sajt_978f3e0c4d.png

large_background profile (3).png

medium_background profile (3).png

small_background profile (3).png

thumbnail_background profile (3).png

background profile (3).png

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

Motion

Render

medium_Koshman_sajt_81fa282e01.png

small_Koshman_sajt_81fa282e01.png

thumbnail_Koshman_sajt_81fa282e01.png

Koshman_sajt_81fa282e01.png

Кошман Александра

Creative

Усатюк Владислав

small_photo_2022-01-03_19-49-27.jpg

thumbnail_photo_2022-01-03_19-49-27.jpg

photo_2022-01-03_19-49-27.jpg

Брехова Татьяна 

small_photo_2024-02-15_14-26-26.jpg

thumbnail_photo_2024-02-15_14-26-26.jpg

photo_2024-02-15_14-26-26.jpg

Завьялов Сергей  

medium_Свечников Андрей.jpg

small_Свечников Андрей.jpg

thumbnail_Свечников Андрей.jpg

Свечников Андрей.jpg

Свечников Андрей 

medium_Шапор Константин.jpg

small_Шапор Константин.jpg

thumbnail_Шапор Константин.jpg

Шапор Константин.jpg

Шапор Константин 

medium_Плотников Александр.png

small_Плотников Александр.png

thumbnail_Плотников Александр.png

Плотников Александр.png

Плотников Александр

RedbassetMocap.mp4

Создание с нуля подкаст-платформы: лендинга для первого контакта с пользователем, личного кабинета подкастера и приложения для прослушивания подкастов.

  <img src="/uploads/00_Title_RB_6484bce805.jpg?updated_at=2023-03-31T15:31:28.658Z" alt="enter image description here">
  <div>
<h3>Red Basset </h3>
<p>
Red Basset&nbsp;&mdash; это бесплатная платформа для продвижения и&nbsp;монетизации подкастов. Для подкастеров это хостинг и&nbsp;личный кабинет с&nbsp;управлением, статистикой и&nbsp;монетизацией подкастов. Для слушателей&nbsp;&mdash; это удобное приложение для прослушивания тысяч подкастов в&nbsp;одном месте.
</p>
</div>  
  <img src="/uploads/01_RB_c5e246d402.jpg?updated_at=2023-03-31T15:31:29.616Z" alt="enter image description here">
  
<div>
<h3>Улыбайтесь, вы&nbsp;на&nbsp;Red Basset</h3>
<div>
<p>При создании логотипа Red Basset мы&nbsp;пришли к&nbsp;беспроводным наушникам и&nbsp;милой улыбке, что создает цельный образ мордочки собаки породы Бассет-хаунд.</p>
<p>Первый контакт пользователя с&nbsp;Red Basset происходит через лендинг, где мы&nbsp;доступным языком рассказали о&nbsp;платформе и&nbsp;визуально продемонстрировали её&nbsp;преимущества. Мы&nbsp;использовали минималистичные тексты и&nbsp;дополнили их выразительными 3d-иллюстрациями.</p>
</div>
</div>

  <img src="/uploads/02_RB_ef635d6e7d.jpg?updated_at=2023-03-31T15:31:30.977Z" alt="enter image description here">
 <div>
  <h3>Разработка</h3>
  <p>Проект поднимался собственными силами разработки. Backend реализован на Java Spring, а frontend на React. Тестирование и поиск багов тоже выполняли собственными силами. Однако мы все еще в процессе прикручивания новых фичей, так что работа продолжает кипеть.</p>
  </div>
  <img src="/uploads/03_RB_8d3e896cd2.jpg?updated_at=2023-03-31T15:31:30.479Z" alt="enter image description here">
 <div>
  <h3>Личный кабинет подкастера</h3>
  <p>Подкаст-платформа Red Basset является бесплатным хостингом для подкастеров. Это буквально рай для них, поскольку все возможности для дистрибуции благодаря RSS уже встроены, никуда отдельно ходить не нужно. В личном кабинете подкастера реализован весь функционал для быстрой и удобной заливки подкастов.</p>
  </div>
  <img src="/uploads/05_RB_f791d45187.jpg?updated_at=2023-03-31T15:31:30.885Z" alt="enter image description here">
 <div>
  <h3>Немножечко подкастов?</h3>
  <p>Подкасты нужно слушать много, долго и комфортно. Для этого мы создали приложение-слушалку, где можно сделать себе уютную библиотеку с любимыми подкастами, создавать разные подборки и даже слушать офлайн.</p>
  </div>
  <img src="/uploads/06_RB_d215ebd87c.jpg?updated_at=2023-03-31T15:31:28.639Z" alt="enter image description here">
  </div>
  <div>
  <h3>А что в итоге?</h3>
  <p>От и до этот проект создан нами: концепция, брендинг, дизайн, разработка. Проделана огромная работа. Мы с удовольствием наблюдаем, как платформа работает, с каждым днем привлекает новых слушателей и подкастеров, развивается, становится популярной. При этом не забываем о поддержке проекта, доводим его до идеала, встраиваем новые фичи и не забываем о маркетинговой коммуникации.</p>
  </div>

Red Basset.png

Red Basset

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

Авдеев Алексей

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

Авдеева Юлия

8 Mocap quad_00.png

Дизайн мобильного приложения для домашних онлайн-тренировок.

<img src="/uploads/00_Title_8ka_5b57ffd5ee.jpg?updated_at=2023-04-02T17:41:46.860Z" alt="enter image description here">
<div>
<h3>Всем спорт!</h3>
<p>Каким должно быть спортивное приложение для домашних тренировок, чтобы человек не забросил его после первого же раза? Удобным? Понятным? С множеством функций? Да, это важно, это все должно быть по умолчанию. Но чем же тогда это приложение будет отличаться от сотен таких же в сторах? Именно поэтому мы обратились к яркому визуалу. И ставка сыграла идеально — приложение приковывает взгляд с первых секунд.</p>
</div>

  <img src="/uploads/01_8ka_e3d9ffd652.jpg?updated_at=2023-04-02T17:41:45.680Z" alt="enter image description here">
<div>
  <h3>Умная лента</h3>
<p>Мы&nbsp;сделали упор на&nbsp;гибкую систему фильтрации тренировок и&nbsp;выбора тренера. С&nbsp;помощью нее пользователь найдет именно&nbsp;то, что ему нужно из десятков возможных вариантов. User-friendly? Максимально!</p>
</div>
  <img src="/uploads/02_8ka_807db23424.jpg?updated_at=2023-04-02T17:41:46.341Z" alt="enter image description here">
<div>
  <h3>Больше 3D</h3>
<p>В этом проекте хотелось сделать прям вау, потому что спорт, активность. Пользователей нужно раскачивать, вдохновлять. Поэтому выбор пал на 3D-иллюстрации, которых много, они буквально везде и создают настроение. Дополнили их анимациями, чтобы усилить эффект.</p>
</div>
  <img src="/uploads/03_8ka_f1f70672cf.jpg?updated_at=2023-04-02T17:41:45.171Z" alt="enter image description here">
<div>
  <h3>Так что же получилось?</h3>
<p>В результате визуально получился один из самых ярких и броских наших проектов. И это сработало. Клиент очень оценил предложенную нами концепцию ребрендинга, а приложение получило множество престижных дизайнерских наград.</p>
</div>

</div>
<video
src="/uploads/8_logo_700_ddb38459d3.mp4"
loop
autoplay
muted
playsinline
/>


8 Mocap gorisontal_00.png

Восьмёрка

Смирнов Роман

Семенчук Юлия

Alfa.png

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

<video
src="/uploads/alfa13_f4fc8c3742.mp4"
loop
autoplay
muted
playsinline></video>
</div>
 
<div>
<h3>Концепция</h3>
<div>
<p>Альфа-Банк использует 3D-иллюстрации практически во&nbsp;всей коммуникации: приложения, сайты, социальные сети и&nbsp;т.д. При помощи необычных решений в&nbsp;визуалах бренд передаёт свою диджитальность и&nbsp;способность подстраиваться под изменчивый мир.</p>
</div>
</div>

 <img src="/uploads/2_2a8f0198e8.jpg" alt="enter image description here">

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

 <img src="/uploads/3_7531705676.jpg" alt="enter image description here">

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

<video
src="/uploads/invest_Kopilka_Anim4_13f2256c8f.mp4"
loop
autoplay
muted
playsinline></video>
</div>

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

 <img src="/uploads/5_1c03cf2f31.jpg" alt="enter image description here">
 <img src="/uploads/6_325e982f3c.jpg" alt="enter image description here">

<div>
<h3>Особенное вдохновение</h3>
<div>
<p>Промышленный дизайн полон идей. Из&nbsp;него можно позаимствовать материалы, которые передают ощущения через изображение&nbsp;&mdash; например, матовое стекло или другие soft touch текстуры. Благодаря им&nbsp;объекты становятся тактильными и&nbsp;живут в&nbsp;digital-среде, а&nbsp;у&nbsp;зрителя создаётся ощущение, будто их&nbsp;можно потрогать. Это интересный опыт для нас и&nbsp;мы&nbsp;очень довольны результатом, и&nbsp;самое главное&nbsp;&mdash; доволен клиент.</p>
</div>
</div>

 <img src="/uploads/7_7bef023f75.jpg" alt="enter image description here">

Альфа-Банк

Alfa.jpg

Неижко Глеб

Константинов Данила

Усанов Никита

KION.png

Конкурсная работа по презентации упаковки приставки c рендерами и моушеном с нуля.

  <img src="/uploads/cam14_0933_1_ab9c880212.png" alt="enter image description here">
</div>
<div>
<h3>Коробка с консолью</h3>
<p>Нам прислали уже существующую коробку с консолью KION, но к ней не было ни одной модели. Вот мы и должны были придумать концепцию моушена, а также сделать сами рендеры упаковки, чтобы их можно было использовать в будущем.</p>
</div>
<video
src="/uploads/Kion_97e54ca8b5.mp4"
loop
autoplay
muted
playsinline></video>
</div>

<div>
<h3>Что еще за коробка?</h3>
<p>База коробки — картон переплетный 2мм. Снаружи и внутри коробка покрыта листами для кашировки srA3 с матовой антивандальной ламинацией и UV-лаком на элементах дизайна. Цветные вставки сделаны из голографической плёнки. Ложемент — EVA материал, по краям расположены магнитные застёжки. Внутри консоль KION и ее комплектующие.</p>
</div>

    <img src="/uploads/image_1190_c39f5a6d71.png" alt="enter image description here">
  <img src="/uploads/cam17_2736_1_41036b3494.png" alt="enter image description here">

<div>
<h3>Мир внутри книги</h3>
<p>Идея коробки с консолью проста — она как книга, которую открываешь и получаешь массу ярких эмоций и впечатлений. Мы опирались на это и в презентации консоли, ведь сама коробка статична, но когда человек тянет за ярлычок, он открывает целую вселенную развлечений.</p>
</div>
<video
src="/uploads/Kion_Part_3_d01cc407ac.mp4"
loop
autoplay
muted
playsinline></video>
</div>
  <img src="/uploads/image_1194_e93edfef26.png" alt="enter image description here">
  <img src="/uploads/image_1199_c46e85d23f.png" alt="enter image description here">
  
  <div>
<h3>Конкурс и победа</h3>
<p>Работа подавалась на крупнейший конкурс дизайна A’Design Awards и получила там серебро в номинации “Упаковка”. Наша команда занималась полным сопровождением, включая подготовку материалов, текстов и сам процесс регистрации и подачи работы на международный конкурс.</p>
</div>

  <img src="/uploads/image_1197_14d3f78b0b.png" alt="enter image description here">
      <img src="/uploads/cam19_lines1564_1_1655194e32.png" alt="enter image description here">
      
  <div>
<h3>Мир развлечений</h3>
<p>Мы с нуля подготовили десятки 3D моделей для упаковки консоли KION, а также ролики с презентацией коробки, которые пересекаются с замыслом создателей и подчеркивают уже существующую мысль о погружении в мир фантазий и развлечений.</p>
</div>
</div>
<video
src="/uploads/Kion_Part_2_078900d40c.mp4"
loop
autoplay
muted
playsinline></video>
</div>

KION

Крупина Дарья

Силаев Герман

МТС.png

Концептуальные 3D-анимации для двух разделов нового сайта МТС. 

<div>
<h3>Экоуправление</h3>
<p>В этом кейсе мы создали две масштабные и очень продуманные анимации для разделов сайта МТС. В работе мы процитировали философию МТС в рамках концепции ESG, направление на устойчивое развитие бизнеса и общества. Экоуправление — это сложное понятие, которое включает и подход бизнеса с экотрендами, и корпоративное направление с экотрендами. </p>
</div>
<video
src="/uploads/lenta00_9947bfd1ab.mp4"
loop
autoplay
muted
playsinline></video>
<img src="/uploads/T2_7b017d18a9.png" alt="enter image description here">
     <img src="/uploads/T3_0c166713dc.png" alt="enter image description here">
</div>

<div>
<h3>Стратегия Customer Lifetime Value 2.0</h3>
<p>Здесь основная идея в построении устойчивого экосистемного бизнеса на прочном фундаменте телекоммуникационного лидера. Шарик катится по кольцу с пазлами. Каждый пазл — направление бизнеса. Они отображены иконками: коммуникация с клиентом, телеком, интернет и проч. Кусочки пазла составляют единое кольцо. А шарик крутится вокруг стеклянной фигурки клиента, поскольку он постоянно в экосистеме МТС.</p>
</div>
<video
src="/uploads/cub00_ed350c8967.mp4"
loop
autoplay
muted
playsinline></video>
<img src="/uploads/R1_377d296a33.png" alt="enter image description here">
     <img src="/uploads/R2_abb43a6eca.png" alt="enter image description here">
</div>

<div>
<h3>Устойчивое развитие</h3>
<p>Цифровые технологии должны поддерживать устойчивость бизнеса и общества. Поэтому мы взяли кубик Рубика за основу: целостность с перемещаемыми элементами. Кубик Рубика состоит из разных цветов, а здесь это разные эконаправления и части устойчивого развития. Так и появились в качестве элементов крафтовые материалы, картон, растения, иконка переработки и проч.</p>
</div>
<video
src="/uploads/elements_6265cd0415.mp4"
loop
autoplay
muted
playsinline></video>
<img src="/uploads/R3_0af12636b8.png" alt="enter image description here">
</div>

     <div>
<h3>Целостность</h3>
<p>Это была концептуально сложная, но очень интересная работа. Мы вникли в новые гайдлайны МТС, быстро включились с материалами, светом, концепцией, пожеланиями. Результат очень порадовал клиента, а также является предметом гордости команды. </p>
</div>


MTS.png

3D-анимации для МТС

Макарова Оксана

Петров Сергей

alisa_2.mp4

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


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

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

</div>
<div>
<h3>Зачем вообще нужны эти умные колонки?</h3>
<p>Наша задача — продемонстрировать новые возможности умной колонки и дать понять пользователю, как они могут работать у него дома. Именно поэтому мы конкретными сценариями («Алиса, погаси свет», «Алиса, запусти фильм») демонстрируем, что колонка будет полезна буквально каждому, а задействовать ее можно по-разному.</p>
</div>
</div>

<video src="/uploads/alisa_case_test_bffaacb8e6.mp4"
loop
autoplay
muted
playsinline></video>

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

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

</div>
<div>
<h3>Сочные 3D-иллюстрации</h3>
<p>Особое внимание обратите на рендеры колонок. Они сделаны с заботой ручками наших талантливых тридэшников, так что можно вглядываться даже в самые мелкие детальки и получать истинное удовольствие от их созерцания.</p>
</div>
</div>

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

</div>
<div>
<h3>А что в итоге?</h3>
<p>Информативность — главная черта этого промо-сайта. Нам получилось донести большое количество информации понятным визуальным языком, а также структурировать все так, чтобы информация подавалась порционно и подобно пирамидке выстраивалась в целостное понимание у пользователя.</p>
</div>
</div>

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














Станция_подложка.png

Яндекс Умный Дом

Кириллов Сергей

Баталова Анна

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



MegaTower.png

Мегабашня для Мегамаркета

Гайбарян Карина

Новоселова Мария

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






3D

hello@mish.design

Москва

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