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






2.webp

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

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

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

Ерохов Дмитрий 

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

Серов Владимир

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

Шушкевич Виталий

Авдеева Юлия

Чикильдин Илья

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

Соколенко Владислав

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

Мисюра Станислав

Попова Виктория

Алимов Нурсултан

Селиванов Никита

Кашаев Андрей 

Штоль Александр 

╨Ю╨▒╨╗╨╛╨╢╨║╨░-2.webp

Чтобы цифровой астролог всегда был на расстоянии вытянутого пальца

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

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

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

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

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

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

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

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

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

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

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

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

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

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

hello@mish.design

Москва

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