medium_photo_2024-02-13_18-43-33.jpg

small_photo_2024-02-13_18-43-33.jpg

thumbnail_photo_2024-02-13_18-43-33.jpg

photo_2024-02-13_18-43-33.jpg

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

Website

Interfaces 

KTS mob cover 2.webp

Во второй раз создали визуальный облик для посадочных страниц IT-компании. И во второй раз сделали это успешно.


</div>
<div>
<h3>Технологичное бунтарство</h3>
<p>KTS — это IT-компания, которая занимается удобными, технологичными и функциональными решениями для начинающих стартапов и крупных корпораций.

Ребята обратились к&nbsp;нам за&nbsp;редизайном сайта, который до&nbsp;этого делали тоже&nbsp;мы, только в&nbsp;2021&nbsp;году. Со&nbsp;временем он&nbsp;устарел: ребята из&nbsp;KTS обнаружили в&nbsp;себе юношеское бунтарство и&nbsp;захотели подготовить подходящий по&nbsp;духу сайт.</p>
</div>
</div>

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

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

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

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

Формат галереи продолжили в&nbsp;разделе с&nbsp;партнерами. При наведении появляются теги с&nbsp;направлениями клиентов в&nbsp;виде анимационных карточек.</p>
</div>
</div>

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

</div>
<div>
<h3>А что в подвале</h3>
<p>Команда смогла сделать его нескучным. Помимо контактной информации, которой в&nbsp;подвале никого не&nbsp;удивишь, мы&nbsp;&laquo;накидали&raquo; в&nbsp;лапы котика кликабельные лейблы, которые гиперссылками переносят либо на&nbsp;соответствующие части сайта, либо направляют дальше.</p>
</div>
</div>
<img src="/uploads/KTS_usability_3b6258eac3.png">

</div>
<div>
<h3>DevOps — это про порядок</h3>
<p>Помимо главной страницы мы&nbsp;работали над посадочной для DevOps-направления. Удобно и&nbsp;нативно настроили раздел с&nbsp;готовыми и&nbsp;решениями кейсами. Карточки меняются по&nbsp;автоскроллу, их&nbsp;сопровождает курсор, меняющий облик: то&nbsp;это привычная стрелка, то&nbsp;задорные глаза, то&nbsp;когтистая лапка. Все кейсы поделены на&nbsp;категории и&nbsp;отмечены тегами, по&nbsp;которым легче определять нишу компании.</p>
</div>
</div>
<img src="/uploads/KTS_illustrations_2_4867c0131b.png">

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

KTS desk cover 2.webp

Редизайн сайта KTS

Иванова Виктория 

Титов Денис 

Романова Анастасия 

Лозовский Павел 

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

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

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

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

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

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

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

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

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

Авдеева Юлия

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

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

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

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

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

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

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

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

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

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

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

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


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

The brief doesn't fill in on its own

hello@mish.design

Moscow

Nizhny Novgorod