medium_Koshman_sajt_81fa282e01.png

small_Koshman_sajt_81fa282e01.png

thumbnail_Koshman_sajt_81fa282e01.png

Koshman_sajt_81fa282e01.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

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

Creative

Motion

Marketolog Case - Preview.webp

Взяли под ключ оформление мероприятия, подготовили панорамное видео на экран 270°,  сделали интро-ролики и кей-вижуал для клиента.

<div>
<h3>Ну очень большая конференция</h3>
<p>Масштабное мероприятие от&nbsp;экосистемы МТС&nbsp;для&nbsp;специалистов индустрии&nbsp;&mdash; презентация мультифункционального сервиса &laquo;МТС Маркетолог&raquo;. Конференция проходила в&nbsp;зале МТС Live Холл площадью 4000&nbsp;м2, который вмещает 8500&nbsp;посетителей. Все визуальные материалы сделали мы&nbsp;&mdash; студия Mish.</p>
</div>
</div>

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

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

<img src="/uploads/02_280914a268.webp">

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

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

<img src="/uploads/04_Updated_d697162f19.webp">
</div>
<div>
<h3>Гигантские проекции</h3>
<p>Каждый из&nbsp;блоков конференции начинался со&nbsp;светового шоу и&nbsp;проекции-тизера на&nbsp;огромном экране, который по&nbsp;периметру охватывал зал. Объем, масштаб, многомерность&nbsp;&mdash; так мы&nbsp;сформулировали идейную и&nbsp;образную составляющую шоу. Основной визуальный элемент был основан на&nbsp;метафоре Big Data, которую визуализировали в&nbsp;виде матрицы из&nbsp;иконок сервисов экосистемы МТС. Мы&nbsp;делали не&nbsp;просто графику&nbsp;&mdash; с&nbsp;помощью видео и&nbsp;звука создавали многомерное пространство, которое погружало зрителя в&nbsp;происходящее и&nbsp;отражало масштаб события.</p>
</div>
</div>

<video src="/uploads/10_Proj_Video_a1d67e63d7.webm"
loop
autoplay
muted
playsinline></video>
</div>
</div>
<img src="/uploads/06_3323acc442.webp">
</div>
<div>
<h3>Хорошо забытое новое</h3>
<p>Создали новый визуальный язык из&nbsp;существующих элементов бренда МТС. С&nbsp;помощью активного использования фирменного красного цвета, новых градиентов, монтажа, звука и&nbsp;пост-обработки сформировали новый образ, развивающий идеи бренда в&nbsp;неожиданном направлении.</p>
</div>

<img src="/uploads/07_9c112fac57.webp">

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

Marketolog Case - Cover.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">






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

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

hello@mish.design

Москва

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