large_IMG_2627_6e73a52f84.JPG

medium_IMG_2627_6e73a52f84.JPG

small_IMG_2627_6e73a52f84.JPG

thumbnail_IMG_2627_6e73a52f84.JPG

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

Ионин Максим 

UI/UX

Product Design

Web Design

medium_Моторина Юлия.png

small_Моторина Юлия.png

thumbnail_Моторина Юлия.png

Моторина Юлия.png

Моторина Юлия 

large_Прокопьев Никита.jpg

medium_Прокопьев Никита.jpg

small_Прокопьев Никита.jpg

thumbnail_Прокопьев Никита.jpg

Прокопьев Никита.jpg

Прокопьев Никита

Торги233.png

Сделали отдельную страницу для фармацевтического направления компании «Торги 223»


<img src="/uploads/2_4_7a4b0f1591.png">
</div>
<div>
<h3>Что такое Pharma</h3>
<p>Инновационное решение от «Торги 223» для дистрибьюторов лекарственных препаратов. Pharma позиционирует себя как digital-платформу, которая трансформирует фармацевтическую индустрию точно так же, как когда-то технологии сделали с банкингом и ритейлом.
Фактически — все, что нужно фармбизнесу. Детально — автоматизирует вопрос поставок для фармацевтических компаний и аптек: менеджерит продажи, обрабатывает счета, регулирует ценообразование. Все это — при помощи умного ИИ-алгоритма. Pharma значительно бустит развитие фармкомпании и дает качественный профит.</p>
</div>
</div>

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

</div>
<div>
<h3>Как мы делали лендинг</h3>
<p>На нас было полное визуальное оформление посадочной страницы. У лендинга две аудитории — дистрибьюторы и владельцы аптечных сетей. Мы разделили страницу так, чтобы каждый вариант имел одинаковую структуру, но разное целевое содержание.</p>
</div>
</div>

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

</div>
<div>
<h3>Что по контенту</h3>
<p>Заказчик отдал нам тексты, из которых нужно было сделать понятную для пользователя сущность. Мы работали над узко специализированным продуктом, а тексты важно было написать на человеческом языке.</p>
</div>
</div>

<img src="/uploads/2_5_2_7ed44a2cc0.png">

<div>
<h3>Что по 3D-шке</h3>
<p>Для визуальной поддержки технологичного продукта использовали 3D-абстракции и интерактивные анимации. В основное 3D-изображение засунули метафорическую аналогию. Две основные части — направление дистрибьюции и аптечные сети. Шар в центре — Торги, которые скрепляют все вместе. </p>
</div>
</div>

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

</div>
<div>
<h3>Что получилось</h3>
<p>Яркий и привлекательный лендинг с необычными решениями и удобным пользовательским интерфейсом. Дизайн отражает технологичное направление, по которому двигается клиент, и связь всех его подразделений.</p>
</div>



Торги223бг.png

Pharma

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

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

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

Мазаев Денис

MTS Travel (2).webp

Спроектировали с нуля web-интерфейс сервиса для бронирования отелей за границей

</div>
<div>
<h3>Тендер</h3>
<p>Весной 2022 года ребята из МТС решили запустить направление МТС Путешествия. Новый на рынке TravelTech продукт должен был стать удобной площадкой для бронирования отелей за границей. С этим запросом будущие МТС Путешествия вышли на тендер. Чтобы забрать проект, наша команда должна была представить свое видение продукта и создать концепт главной страницы сайта.</p>
</div>
</div>

<img src="/uploads/3_7_43ed2de8d6.webp">

</div>
<div>
<h3>Концепция главной</h3>
<p>Для тендера мы работали с турецким направлением. Вдохновлялись известными российскими и международными сервисами, но стремились сделать оригинальный продукт. Основным акцентом главной стало крупное анимированное изображение, которое подстраивалось под выбранное пользователем направление. В итоге наша концепция выиграла тендер, и мы приступили к созданию десктопной версии платформы.</p>
</div>
</div>

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

<div>
<h3>Задачи проекта</h3>
<div>
<p>На все про все у дизайнеров Mish было около двух месяцев. Все про все — это:</p>
<ul>
  <li>построение понятного юзер-флоу от главной страницы до покупки тура;</li>
  <li>проектирование взаимодействия пользователя с продуктом;</li>
  <li>визуальный дизайн на основе корпоративной системы МТС.</li>
</ul>
</div>
</div>

<img src="/uploads/MTS_Travel_case_2_6360001745.webp">
<img src="/uploads/MTS_Travel_case_4_7cd1a15dd1.webp">
<img src="/uploads/MTS_Travel_case_5_a2994e3bdc.webp">

</div>
<div>
<h3>Дизайн-система</h3>
<p>Чтобы сохранить единообразие продуктов экосистемы МТС, мы собирали визуальную часть платформы на дизайн-системе Granat от самих МТС, которую они используют во всех своих продуктах. Под нее разработали часть недостающих компонентов в заданной стилистике.</p>
</div>
</div>

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

</div>
<div>
<h3>Разработка</h3>
<p>Готовые макеты передали команде разработке. Затем провели подробное дизайн-ревью, чтобы наши UX/UI-идеи были корректно реализованы. Когда десктопная версия была готова, команда адаптировала ее под планшетный и мобильный форматы.</p>
</div>
</div>

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

</div>
<div>
<h3>Результат</h3>
<p>Сейчас МТС Путешествия — готовый работающий продукт, который позволяет бронировать отели не только в Турции. Среди направлений — страны Средней Азии, Ближнего Востока, Европы. А мы продолжаем работать с МТС по другим проектам.</p>
</div>
</div>

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

MTS Travel-1 (2).webp

МТС Путешествия

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

PAN CLUB Main.webp

Из ювелирного бренда в ювелирный мультибренд


</div>
<div>
<h3>Ребрендинг</h3>
<p>Бренды приходят и уходят, а покупать и носить красивые ювелирные изделия хочется всегда. Это поняли в PanClub (бывшая Pandora Russia) и решили со сменой названия обновить и сайт — а еще позиционирование, но об этом позже.

К нам ребята пришли на «легкий» редизайн. Времени на разработку нового визуального тона бренда с нуля не было — команда занималась платформой всего 2,5 месяца. Поэтому мы сделали аудит текущих страниц и выбрали те, которые точно нуждаются в доработке.</p>
</div>
</div>

<img src="/uploads/Illustration_3_8a349c5d12.png">
<video 
src="/uploads/pan_club_82f9b6e39f.mp4"
loop
autoplay
muted
playsinline></video>
</div>

<div>
<h3>Корни</h3>
<p>При редизайне нельзя было ударяться в крайности и полностью сносить стиль, на котором основывался бренд раньше. Большая часть аудитории сайта — это преданные поклонники Pandora Russia, которые хотят продолжать покупать украшения любимого бренда. Поэтому было важно сохранить узнаваемость элементов дизайна. Но при этом не сделать еще одну бело-розовую копию сайта.</p>
</div>
</div>

<img src="/uploads/Illustration_2_f58b565226.png">
<img src="/uploads/Illustration_4_4da31d2782.png">

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

Для этого сохранили простоту дизайна страниц PanClub: так пестрые и разнообразные украшения брендов не будут конфликтовать с общей идеей сайта. </p>
</div>
</div>

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

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

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

</div>
<div>
<h3>Брендинг</h3>
<p>В качестве вишенки на торте подготовили UI Kit и систему компонентов для дальнейшего использования клиентом. Благодаря этому дополнительно сэкономили время: разработчикам не пришлось переверстывать все с нуля, нужно было просто обновить основные элементы сайта.

Итоговая работа стала не только «лицом» бренда, но и в каком-то роде самим брендом. На старте у PanClub был только логотип, а теперь есть свой фирменный стиль.</p>
</div>
</div>


Cover.webp

PanClub

Пименова Миша

Попов Алексей

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

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

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

Титов Денис 

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

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

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






2.webp

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

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

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

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

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

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

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

Авдеева Юлия

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

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

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

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

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

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

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

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

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

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

cover.webp

Продумали внутреннюю логику для масштабного проекта, разработали систему и обновили дизайн так, чтобы он был современным, минималистичным и удобным.

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

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

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

<img src="/uploads/208189208176208187208190209129209140_74fb43bab6.webp">

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

<img src="/uploads/4_208164208190209128208188209139_f03b3127cc.webp">

</div>
<div>
<h3>Этап разработки</h3>
<p>Команда дизайнеров предоставила внутреннему отделу разработки Mish готовый UI-Kit. Мы&nbsp;собрали библиотеку компонентов, чтобы можно было быстро собирать функциональный интерфейс. Для это выбрали решения React и&nbsp;Storybook. Основная сложность разработки была в&nbsp;интеграции и&nbsp;получении данных из&nbsp;внутренних систем заказчика и&nbsp;в&nbsp;обратной синхронизации. Для бэкенда выбрали next.js, express и&nbsp;базу данных postgreSQL. Чтобы взаимодействовать с&nbsp;серверной частью, использовали REST API. Так получилось забрать данные из&nbsp;нашего портала и&nbsp;предоставить другим системам заказчика получать обновленные данные. Дополнительно организовали ролевую модель для серверной и&nbsp;клиентской частей системы. Этим занимались тестировщики в&nbsp;команде&nbsp;&mdash; и&nbsp;в&nbsp;итоге за&nbsp;две недели плотной работы проверили каждую виртуальную щель на&nbsp;безопасность.</p>
</div>

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

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

<img src="/uploads/209131208186209130209131209128208176_5ffaff35e5.webp">

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

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

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

<img src="/uploads/209137208189208190209129209130208184_cd5691dc2c.webp">

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

preview.webp

preview-resize.webp

Разработка информационной системы

Сычева Софья

Чулкова Елена

Анпилов Алексей

Белов Виталий

╨Ю╨▒╨╗╨╛╨╢╨║╨░-╨║╨░╤В╨░╨╗╨╛╨│╨░.webp

На основе обновленного кей-вижуал бренда обновили внешний вид главной страницы сервиса по подбору психологов. И не уронили маркетинговые метрики, что тоже приятно.

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

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

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

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

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

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

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

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

<div>
<h3>Небольшие обновления</h3>
<p>Мы&nbsp;проработали текущую структуру, проанализировали конкурентов и&nbsp;релевантные сервисы. На&nbsp;этой основе разработали, предложили и&nbsp;в&nbsp;итоге внедрили в&nbsp;структуру нескольких новых блоков. Мы&nbsp;сохранили смысловую подачу, но&nbsp;добавили в&nbsp;новые блоки эмпатию и&nbsp;заботу, а&nbsp;еще&nbsp;возможность начать диалог с&nbsp;пользователем уже&nbsp;с&nbsp;первого скролла. Среди переработанных экранов была форма с&nbsp;СТА на&nbsp;главном экране, блок для тех, кто&nbsp;не&nbsp;знает, что с&nbsp;ним происходит и&nbsp;не&nbsp;может с&nbsp;этим справиться самостоятельно. Дополнительно проработали витрину с&nbsp;услугами для&nbsp;партнеров и&nbsp;форму с&nbsp;СТА. Мы&nbsp;поженили смысловую и&nbsp;юайную части, не&nbsp;побоялись экспериментов&nbsp;&mdash; и&nbsp;получилось хорошо. Продакты на&nbsp;клиентской стороне тоже рады: конверсию мы&nbsp;не&nbsp;уронили, а&nbsp;красивый и&nbsp;функциональный сайт сделали.</p>
</div>
<img src="/uploads/E_M_I_P_5e6e6239f5.webp"> 

<div>
<h3>И&nbsp;что дальше?</h3>
<p>На&nbsp;основе нашего редизайна заказчик принялся за&nbsp;обновление и&nbsp;других страниц, кроме главной. Подход команды Mish им&nbsp;зашел&nbsp;&mdash; а&nbsp;мы&nbsp;и&nbsp;рады делиться.</p>
</div>
<img src="/uploads/Sh_Z_V_M_I_3517a2ca7a.webp"> 

Header-╨║╨╡╨╕╠Ж╤Б╨░.webp

Редизайн главной страницы сервиса Zigmund

Дарья Егорова

Копылов Илья

Скрынник Елизавета

Cover_catalog.webp

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

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

<img src="/uploads/1_0a0bef8906.webp"> 

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

<img src="/uploads/2_b0375cd7c3.webp"> 

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

<img src="/uploads/3_8a02e92bd5.webp"> 

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

<img src="/uploads/20_a029d86a47.webp"> 

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

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

<div>
<h3>Локальная специфика</h3>
<p>Библиотеку компонентов разработали на&nbsp;армянском языке. И&nbsp;дело тут не&nbsp;только в&nbsp;локализации: у&nbsp;армянского языка своя специфика в&nbsp;смысле&nbsp;UI, которую нужно было учитывать. Некоторые стандартные решения, которые мы&nbsp;уже использовали в&nbsp;том числе на&nbsp;международных проектах, для Converse Bank не&nbsp;подходили из-за длины армянских слов. Поэтому мы&nbsp;искали универсальные гибкие решения, которые будут хорошо работать при&nbsp;любом количестве символов. В&nbsp;итоге погрузились в&nbsp;специфику банковского сленга и&nbsp;написали все тексты для интерфейсов на&nbsp;английском и&nbsp;русском, потом перевели на&nbsp;армянский с&nbsp;помощью коллег из&nbsp;Converse Bank.</p>
</div>

<img src="/uploads/6_4b738e795a.webp"> 

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

<img src="/uploads/7_554e4e8821.webp"> 

horizontal-cover_-mobile-cover.webp

Дизайн-система для Converse Bank

Web Design

hello@mish.design

Москва

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