medium_Lisunova_sajt_7e20fe8848.png

small_Lisunova_sajt_7e20fe8848.png

thumbnail_Lisunova_sajt_7e20fe8848.png

Lisunova_sajt_7e20fe8848.png

large_Лисунова фон.jpg

medium_Лисунова фон.jpg

small_Лисунова фон.jpg

thumbnail_Лисунова фон.jpg

Лисунова фон.jpg

Лисунова Карина

UI/UX

Product Design

Website

Dashboard

Nebula.png

Фирменный стиль, промо-лендинги и админ-панель для агрегатора криптобирж. 

<img src="/uploads/00_Title_Nebula_f5a9c89f38.jpg?updated_at=2023-03-31T14:53:20.450Z" alt="enter image description here">
<div>
<h3>Так что же это такое</h3>
<p>Nebula — это агрегатор криптобирж для поиска лучшей цены криптовалют. Самый доступный способ найти наиболее адекватный прайс среди сотен сайтов, продающих крипту, в которых легко запутаться. </p>
</div>
<img src="/uploads/01_Nebula_28fe0fdea0.jpg?updated_at=2023-03-31T14:53:18.775Z" alt="enter image description here">
<img src="/uploads/02_Nebula_a0bc418b08.jpg?updated_at=2023-03-31T14:53:21.287Z" alt="enter image description here">
<div>
<h3>3D-схема работы агрегатора</h3>
<div>
<p>Клиент хотел создать крипто-сервис, который был&nbsp;бы не&nbsp;только удобным и&nbsp;понятным, но&nbsp;и&nbsp;визуально технологичным, отвечающим запросам аудитории.</p> 
<p>Начинали, конечно, с брендинга. Это не та история, где нужно изобретать велосипед и нырять в пучины креатива (тз есть тз), но сделать красиво и футуристично очень важно. За основу взяли темную тему с тремя основными цветами (сиреневым, розовым и темно-синим) как прямую ассоциацию с трейдингом и криптой. </p>
</div>
</div>

<img src="/uploads/03_Nebula_908a585fb4.jpg?updated_at=2023-03-31T14:53:21.590Z" alt="enter image description here">

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

<img src="/uploads/05_Nebula_3be0f6f304.jpg?updated_at=2023-03-31T14:53:18.519Z" alt="enter image description here">

<div>
<h3>Разработка</h3>
<div>
<p>На этом проекте мы были ответственны за frontend, что очень ускорило запуск, поскольку у внутренних команд дизайнеров и разработчиков хорошо налажен диалог. В основе стэка React, TypeScript и Redux как наиболее очевидные в данном случае, а также Openware и Web3. Многие графики на Recharts. Тестирование на Jest, Enzyme и Cypress. </p>
</div>
</div>
<img src="/uploads/06_Nebula_f5963947f0.jpg?updated_at=2023-03-31T14:53:15.937Z" alt="enter image description here">
<img src="/uploads/07_Nebula_32544c7c48.jpg?updated_at=2023-03-31T14:53:12.642Z" alt="enter image description here">
</div>
</div>
<div>
<h3>Понятный агрегатор</h3>
<div>
<p>При подаче такой непростой информации легко запутаться, однако мы сразу сконцентрировались на главном — UI. Именно на прекрасно продуманном интерфейсе и был построен этот проект. Хотя и удачный брендинг играет не последнюю роль. Футуристичный визуал, основанный на 3D, дополняет главную составляющую и выгодно отличает агрегатор от других. </p>


Nebula ECN

Крестов Иван

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

Мазаев Денис

Дудин Дмитрий

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

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

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

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

Максимкин Александр

exolve black3.mp4

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


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

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

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

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

</div>
<div>
<h3>Современный конструктивизм</h3>
<p>Изначально мы&nbsp;получили наброски брендинга. Потом предложили идею тетриса&nbsp;&mdash; она перетекла в&nbsp;формат конструктора.</p>
</div>
</div>

<video src="/uploads/exolve_Black_loop_x2_ef8d4fc5a5_b1826f50d5.mp4"
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_7755d48c5d.png">

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

<img src="/uploads/IMG_Block_4_910d656e0b.png">
</div>
</div>

<video src="/uploads/2560h1440_e3940fcb85.mp4"
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_71f7c4e236.png">

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

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

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

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

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

Лисунова Карина

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

hello@mish.design

Москва

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