Data-Track.png

На примере ПО для Абинского
металлургического завода

 <img src="/uploads/1_11_4f6b371f78.png" alt="enter image description here">
 <div>
<h3>Что же это такое?</h3>
<div>
<p>Data-Track — это MES (от англ. manufacturing execution system), т.е. система управления производственными процессами — специализированное прикладное программное обеспечение, предназначенное для решения задач синхронизации, координации, анализа и оптимизации выпуска продукции в рамках производства. MES-системы относятся к классу систем управления уровня цеха, но могут использоваться и для интегрированного управления производством на предприятии в целом.
</p>
</div>
</div>
  <img src="/uploads/2_f908d5038d.png" alt="enter image description here">
 <div>
<h3>Зачем же это нужно?</h3>
<div>
<p>Прежде всего, для систематизации и визуализации данных, выделении главного, поскольку в основе ПО лежат excel-таблицы, которые заложены во всех заводских процессах: планы производства, загрузка склада, перемещение материалов и т.д. А это значит, что требуется удобный интерфейс, ведь сотрудники работают подолгу с ним, иногда в условиях недостаточной освещенности.
</p>
</div>
</div>
  <img src="/uploads/3_ecfb833ed6.png" alt="enter image description here">
 <div>
<h3>Проблематика</h3>
<div>
<p>Еще перед началом работ вскрылось множество проблем, которые и подтолкнули нас к поиску наиболее оптимальных решений. Проблемы следующие: </p>
 <ul>
 <li>Много бумажного документооборота. Много процессов на производстве фиксируется только на бумаге. Их сложно отслеживать, хранить и передавать;</li>
 <li>Сложные условия на рабочих местах. Сотрудники работают подолгу с этим интерфейсом, иногда в условиях недостаточной освещенности; </li>
 <li>Много данных. Нет возможности быстро на одном экране увидеть ситуацию на производстве; </li>
 <li>Неактуальность. Как правило, для руководства доступны данные только за предыдущий день. Нет возможности следить за производством в реальном времени; </li>
 <li>Скорость работы. Данные между отделами передаются в течение нескольких суток; </li>
</ul>

</p>
</div>
</div>
  <img src="/uploads/4_e8d08a61ed.png" alt="enter image description here">
 <div>
<h3>Что же мы сделали</h3>
<div>
<p>В итоге мы разработали современный интерфейс в Figma. Также создали дизайн-систему, позволяющую быстро собирать любые требуемые интерфейсы.
Использовали следующие цифровые технологии и решения: </p>
 <ul>
 <li>HTML/CSS/JS;</li>
 <li>React (CRA);</li>
 <li>Storybook;</li>
 <li>Цифровой двойник;</li>
 <li>Датчики и камеры.</li>
</ul>

</p>
</div>
</div>
  <img src="/uploads/5_ce5fae8f9c.png" alt="enter image description here">
 <div>
 <h3>Технологическая независимость</h3>
<div>
<p>Одно из преимуществ данного ПО — технологическая независимость, то есть используются открытые технологии на базе open-source. Исходный код таких программ доступен для просмотра, изучения и изменения, что позволяет убедиться в отсутствии уязвимостей и неприемлемых для пользователя функций (к примеру, скрытого слежения за пользователем программы), принять участие в доработке само́й открытой программы, использовать код для создания новых программ и исправления в них ошибок.
</p>
</div>
<br>
<br>
<h4>Совместно с компанией <a href="https://dc.ru/">ДАТА-ЦЕНТР Автоматика</a></h5>

Data-Track-1.png

Система производственного мониторинга Data-Track

Торги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

Cover square.jpg

Провели исследование, чтобы понять, насколько хорошо интернет-банкинг закрывает основные потребности пользователей

<img src="/uploads/1_2_ae70be2f3f.png">
<div>
<h3>Что нужно предпринимателям</h3>
<div>
<p>Чтобы решить сегодня базовые финансовые вопросы, не нужно идти в отделение банка, брать талончик и долго общаться с менеджером в окошке. Достаточно взять в руки телефон или открыть страницу мобильного банка на компьютере — и вот вам весь функционал. Решили провести исследование и понять, насколько хорошо мобильный банкинг отвечает запросам пользователей и что можно подтянуть в его юзабилити.</p>
</div>
</div>

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

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

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

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

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

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

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

<div>
<h3>И что в итоге?</h3>
<div>
<p>Лидерами гонки стали Альфа-Банк, Промсвязьбанк и ВТБ. В пятерку также попали Сбербанк и Тинькофф. У отдельных банков мы зафиксировали дружелюбную коммуникацию — и поставили лайк. У других отметили строгость и минимализм, которые очень удобны пользователям. В результате наметили траекторию, по которой банкам с меньшим количеством баллов можно развивать пользовательский опыт.</p>
</div>


Banking.png

Юзабилити интернет-банкинга

Acra small.png

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


<img src="/uploads/1_ad22cdc68d.png" alt="enter image description here">

<div>
<h3>Кому делали</h3>
<p>Рейтинговому агентству АКРА с аккредитацией Банка России. АКРА присваивает кредитные рейтинги эмитентам по национальной и  международной шкалам, а значит должно отвечать зарубежным требованиям к функциональности платформы. </p>
</div>
 
  <img src="/uploads/2_d58c433869.png" alt="enter image description here">
  <img src="/uploads/3_c67f0838c4.png" alt="enter image description here">
<div>
<h3>Обновление для результата</h3>
<div>
<p>Обычно рабочие инструменты настраиваются под бизнес-процессы. В нашей истории все по-другому. Сайт АКРА базировался на нишевом языке, поэтому обслуживать софт было долго и дорого. Из-за этого приходилось плясать от неудобного функционала — а там и ошибки, и сложности, и риски. Агентство обратилось к нам, чтобы мы создали удобный портал для работы.<p>
</div>
</div>
  <img src="/uploads/4_40053c47a7.png" alt="enter image description here">

<div>
<h3>Погружение в процессы</h3>
<p>Одно дело — просто обновить визуал на сайте. Совсем другое — обновить его в соответствии с бизнес-процессами клиента, чтобы сайт был не просто красивый, но и удобный. Для этого мы погрузились в детали работы агентства и изучили процесс присвоения и поддержания рейтингов. Да, даже арт-директоры иногда занимаются такими задачами. Дальше пошло-поехало: построили архитектуру сервиса и навигацию, проработали UX, собрали UI-кит и обновили визуал сайта под утвержденный фирменный стиль. </p>
</div>
</div>
  <img src="/uploads/5_4dbe5a2fdd.png" alt="enter image description here">

  <div>
<h3>Проектная разведка</h3>
<div>
  <p>Вся работа совместная с клиентом — это про результат, а не разделение ответственности. Мы предложили оптимизировать рабочий флоу агентства и под него адаптировать сайт. В итоге разработали объектную модель сайта, взяли в руки и в реализацию перечень фичей проекта и поняли, куда копать дальше. </p>
</div>
</div>
 <img src="/uploads/6_dcd9330bbb.png" alt="enter image description here">

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

 <img src="/uploads/7_d7a2678d4a.png" alt="enter image description here">

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

Acra.png

АКРА

МТС.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-анимации для МТС

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

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

EuropaPlusMocapWeb2.mp4

Редизайн сайта для радиостанции «Европа Плюс» с учетом новой айдентики и с сохранением предыдущей структуры.

 <img src="/uploads/body1_700x400_0d5e17d877.jpg?updated_at=2023-04-05T12:49:04.771Z" alt="enter image description here">
 <div>
<h3>Радиостанция №1</h3>
<div>
<p>Европа Плюс – самая популярная радиостанция в России. Ребята пришли к нам с желанием сделать современный сайт и новое мобильное приложение. При этом в приложении должны быть фичи, которых нет на сайте (аудиторию надо удивлять и втягивать в продукт).</p>
</div>
</div>
  <video
src="/uploads/E_0e86114d6d.mp4"
loop
autoplay
muted
playsinline></video>
</div>
  <img src="/uploads/body2_700x400_c3926a2057.jpg?updated_at=2023-04-05T12:49:01.006Z" alt="enter image description here">
  <img src="/uploads/body3_700x400_849bd03597.jpg?updated_at=2023-04-05T12:49:03.529Z" alt="enter image description here">
 <div>
<h3>Преемственность</h3>
<div>
<p>Нельзя было просто взять и снести весь существующий дизайн и сделать новый. Особенность кейса заключалась в поддержании преемственности с существующими архитектурой и визуальным образом любимого бренда. Нам нужно было обновить UI, сохранив привычные для пользователей элементы. И они были переработаны, чтобы не вызывать сложностей у слушателей. Например, мультиплеер для быстрого доступа к аудио-материалу и видеотрансляции или удобная схема перехода между потоками.</p>
</div>
</div>
  <img src="/uploads/body4_700x400_0a6f74a53e.jpg?updated_at=2023-04-05T12:49:05.091Z" alt="enter image description here">
  <img src="/uploads/body5_700x400_077d36a6f3.jpg?updated_at=2023-04-05T12:49:07.257Z" alt="enter image description here">
  <img src="/uploads/body6_700x400_1_2627fb1de3.jpg?updated_at=2023-04-05T12:57:34.700Z" alt="enter image description here">
  <img src="/uploads/body7_700x400_c4024ac8fc.jpg?updated_at=2023-04-05T12:48:53.036Z" alt="enter image description here">

 <div>
<h3>Что же получилось?</h3>
<div>
<p>В итоге мы разработали красивый и удобный сервис в соответствии с требованиями UX и UI. Интерфейс стал адаптивным, а значит приятным для использования на всех популярных устройствах. В рамках всего проекта было отрисовано более 200 уникальных страниц сервиса, собран большой и подробный UI Kit с основными элементами, иконками, стилями и шрифтами.</p>
</div>

EuropaPlusMocapGor_01.png

Европа Плюс

Европа+.jpg

МСТ.png

Редизайн для Fenix+ 3 — универсального программного обеспечение для расчета пожарных рисков на гражданских и производственных объектах.

  <img src="/uploads/001_a85af274f3.jpeg?updated_at=2023-04-03T11:47:49.306Z" alt="enter image description here">
<div>
<h3>ПО для прогнозирования рисков</h3>
<p>Fenix+ 3 — это универсальное программное обеспечение для расчета пожарных рисков на гражданских и производственных объектах, а также для расчета противопожарных расстояний между зданиями и сооружениями. Это очень важное для организаций ПО, которое позволяет независимо провести моделирование эвакуации людей и динамики развития пожара.</p>
</div>

  <img src="/uploads/002_22601a4fd7.jpg?updated_at=2023-04-03T11:47:52.238Z" alt="enter image description here">
  <div>
<h3>Интерфейс</h3>
<p>Изначально у&nbsp;клиента уже была первая версия проекта на&nbsp;стандартных Windows компонентах, уже был работающий продукт и&nbsp;люди, которые им&nbsp;пользовались. Клиент хотел сделать проект более современным и&nbsp;попробовать взглянуть на&nbsp;него не&nbsp;внутренней командой, а&nbsp;свежим взглядом. Поэтому изначальной задачей было подправить визуал. Но&nbsp;в&nbsp;ходе работы мы&nbsp;постепенно находили новые проблемные места и&nbsp;начали предлагать перепроектирование рабочей области так, чтобы ключевые элементы с&nbsp;одной стороны оставались на&nbsp;тех&nbsp;же местах, но&nbsp;с&nbsp;обновленной логикой и&nbsp;поведением.</p>
</div>
  <img src="/uploads/003_9a6c566e01.jpg?updated_at=2023-04-03T11:47:51.631Z" alt="enter image description here">
<div>
<h3>Глубокий анализ</h3>
  <p>Мы&nbsp;предложили клиенту несколько вариантов перепланировки основной рабочей области главного экрана так, чтобы функционал можно было дополнять и&nbsp;безболезненно расширять без последующего редизайна. В&nbsp;ходе работы мы&nbsp;подробно анализировали интерфейсы профессионального&nbsp;ПО как для 3D&nbsp;моделирования, так и&nbsp;привычные программы для дизайнеров, чтобы понять подходы к&nbsp;расположению управляющих элементов на&nbsp;экране. Благодаря этому анализу нам удалось расположить рабочие панели, чтобы пользователь мог быстрее и&nbsp;эффективнее решать нужные ему задачи. При этом основные разделы остались на&nbsp;своих прежних местах, что позволило сохранить привычки текущих пользователей, но&nbsp;упростило новичкам освоение программы и&nbsp;использование отдельных модулей. </p>
</div>
  <img src="/uploads/004_12b42564ca.jpg?updated_at=2023-04-03T11:47:52.181Z" alt="enter image description here">
  <img src="/uploads/005_18aeb90891.jpg?updated_at=2023-04-03T11:47:51.765Z" alt="enter image description here">
<div>
<h3>Что в итоге?</h3>
  <p>В итоге был полностью переомыслен подход к дизайну и расположению элементов. Создали большой UI-Kit. Разработали более ста узкоспециализированных иконок, чтобы даже на&nbsp;компактных дисплеях их&nbsp;назначение было понятно без подписей. При этом переиспользовали наработки и в дальнейшем над редизайном связанных с Fenix+ 3 программ. </p>
</div>

МСТ.jpg

МСТ

ОРЕО.jpg

Cовместный игровой промо-проект с Oreo и VK, разработанный на базе VK Mini Apps и созданный в честь пятилетия Oreo в России.

 <img src="/uploads/Frame_2087325968_ea85990ffb.png" alt="enter image description here">
<div>
<h3>5 лет Oreo в России</h3>
<div>
<p>Нашей задачей было создать простой, яркий и&nbsp;интерактивный промо-материал, который&nbsp;бы стимулировал спрос и&nbsp;повышал лояльность к&nbsp;бренду. Для этого у нас были инструменты VK Mini Apps и целая команда наших талантливых иллюстраторов, которые и приступили к делу.</p>
</div>
</div>

  <img src="/uploads/Frame_2087325969_05333d666f.png" alt="enter image description here">
  <img src="/uploads/Frame_2087325970_99d5b27e84.png" alt="enter image description here">
<div>
<h3>Простой кликер</h3>
<div>
<p>В&nbsp;основу игры легла самая эффективная и&nbsp;простая для пользователя механика&nbsp;&mdash; клик. Пользователь тапает или кликает по&nbsp;экрану, чтобы собрать высокую башню из&nbsp;Oreo. По&nbsp;мере увеличения башни на&nbsp;экране меняется фон: от&nbsp;небольших предметов вроде кружки молока масштабы разрастаются до&nbsp;планет и&nbsp;звезд, где на&nbsp;разных высотах пользователей ждут ачивки, призы и&nbsp;оригинальные способы празднования годовщины Oreo.</p>
</div>
</div>
  <img src="/uploads/Frame_2087325973_7148930c9e.png" alt="enter image description here">
  <img src="/uploads/Frame_2087325971_eb7b263873.png" alt="enter image description here">
<div>
<h3>Как победить?</h3>
<div>
<p>Чтобы быстрее набрать высоту башни, получить праздничный буст и&nbsp;новую часть стикерпака, пользователи могут отсканировать чек с&nbsp;товаром от&nbsp;Oreo. Это несложная механика, которая стимулирует продажи и имеет в основе элемент геймификации.</p>
</div>
</div>
  <img src="/uploads/Frame_2087325974_cfc050ff7c.png" alt="enter image description here">
  <img src="/uploads/Frame_2087325975_cb65eedc6a.png" alt="enter image description here">
<div>
<h3>Результат</h3>
<div>
<p>В итоге получился очень красочный и яркий проект, где использовались персонажи VK, инструменты VK Mini Apps, элементы геймификации и, конечно, печеньки Oreo.</p>

Проекты

hello@mish.design

Москва

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