medium_Авдеев сайт.jpg

small_Авдеев сайт.jpg

thumbnail_Авдеев сайт.jpg

Авдеев сайт.jpg

mish_Logo.jpg

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

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

game case mocap.mp4

Уникальный проект, объединивший юных дизайнеров, геймдевов и программистов, где проделана внушительная работа: фирменный стиль, дизайн веб-портала и админки, 3D-иллюстрации, веб-разработка. 

 <img src="/uploads/Tagline_01_Main_9d23fe5f58.jpg?updated_at=2023-03-30T07:29:22.748Z" alt="enter image description here">
<div>
<h3>Платформа</h3>
<div>
<p>&laquo;Начни игру&raquo; позволяет молодым разработчикам заявить о&nbsp;себе, выйти на&nbsp;новый уровень профессионального мастерства, создать уникальные игровые проекты и&nbsp;найти партнеров для поддержки своей инициативы. Обучение построено на&nbsp;геймификации, что отражено как в&nbsp;дизайне в&nbsp;целом, так и&nbsp;в&nbsp;особенностях разработки.</p>
<p>Дизайн&nbsp;&mdash; сочные цвета, ломаные формы, пересекающиеся элементы. Обилие 3D-иллюстраций и&nbsp;объема. Визуал буквально дышит творчеством и&nbsp;амбициями.</p>
</div>
</div>

  <img src="/uploads/Tagline_04_20de48777e.jpg?updated_at=2023-03-30T07:29:25.318Z" alt="enter image description here">
  <img src="/uploads/Tagline_06_adab1f4df3.jpg?updated_at=2023-03-30T07:29:21.195Z" alt="enter image description here">
  <img src="/uploads/Tagline_07_5c157a80b8.jpg?updated_at=2023-03-30T07:29:23.252Z" alt="enter image description here">
  
 <div>
<h3>Смело и ярко</h3>
<div>
<p>Кто ЦА проекта? Школьники, молодежь. Их нужно захватить ярким визуалом, необычными формами, смелым сочетанием цветов. Звучит очевидно, но на деле не самая простая задачка. Удивить визуалом молодых людей сложно. И начали мы с деркзой цветовой гаммы, которая даже внутри команды вызвала немало споров (однако по итогу очень зашла заказчику и аудитории). Также мы решили добавить объема привычным предметам, сделать упор на 3D, чтобы вдохнуть в них жизнь, но при этом оставить в рамках виртуального пространства. </p>
</div>
</div>

 <img src="/uploads/Tagline_08_d26b6eefcc.jpg?updated_at=2023-03-30T07:29:20.589Z" alt="enter image description here">
<div>
<h3>Родная разработка</h3>
<div>
<p>Этот проект стал большим испытанием для нашей команды разработки. Попробуем просто перечислить то, что было проделано, и ничего не забыть: html, css, js, typescript, react, spa, seo, devops, docker, kubernetes, ci/cd. Да, это и frontend, и backend, да еще и с собственной командой тестирования. Опыт колоссальный, результат стоящий. </p>
</div>
</div>

 <img src="/uploads/Tagline_09_da0340955a.jpg?updated_at=2023-03-30T07:29:23.871Z" alt="enter image description here">
<div>
<h3>Версия для людей с ограниченными возможностями</h3>
<div>
<p>Мы&nbsp;также адаптировали сайт в&nbsp;соответствии с&nbsp;ГОСТ Р&nbsp;52872-2019 &laquo;Национальный стандарт Российской Федерации&raquo;. Сайт подходит для пользования слабовидящими людьми&nbsp;&mdash; есть функционал синтеза речи, изменения размера шрифта, увеличения контрастности. И&nbsp;при этом функциональностью контента можно управлять через интерфейс клавиатуры без ограничений по&nbsp;времени нажатия на&nbsp;клавишу.</p>
</div>
</div>

 <img src="/uploads/Tagline_02_677e7d1c7a.jpg?updated_at=2023-03-30T07:29:23.956Z" alt="enter image description here">
<div>
<h3>Ачивки</h3>
<div>
<p>На проекте очень разветвленная система ачивок, все-таки нужно подбадривать юных творцов. Поэтому мы вложили немало сил в систему поощрения. Тут речь не только о визуале, но и об идеях. Каждая ачивка продумывалась исходя из текущих трендов, чтобы порадовать легким юмором и не отбить мотивацию пользоваться платформой дальше. </p>
</div>
</div>
 <img src="/uploads/Tagline_03_66799d233b.jpg?updated_at=2023-03-30T07:29:18.408Z" alt="enter image description here">
 <div>
 <h3>Иконки, куда же без них</h3>
<div>
<p>Иконок потребовалось много, поэтому мы их рисовали, рисовали и снова рисовали. Несколько иллюстраторов постоянно трудились, чтобы в едином стиле воспроизвести множество считываемых образов. </p>
</div>
</div>
<img src="/uploads/Tagline_05_e8e59dca6b.jpg?updated_at=2023-03-30T07:29:24.365Z" alt="enter image description here">
<div>
<h3>Как итог</h3>
<div>
<p>Это проект, которым мы гордимся от и до. Мы вложили в него очень много сил и задействовали в проработке все отделы Mish: продуктовый, коммуникационный, отдел разработки и тестирования. У него клёвый и самобытные брендинг, интерфейс внешний и внутренний, иллюстрации, разработка и тестирование. При этом мы продолжаем работать над следующим сезоном проекта, оказывая полную продуктовую поддержку и подкидывая новые идеи к реализации. </p>
</div>
<br>
<br>
<h4>Совместно с <a href="https://metacorp.gg/">Metacorp</a></h5>

Начни игру.jpg

Начни Игру

Начни Игру.jpg

red basset.png

Создание с нуля подкаст-платформы: лендинга для первого контакта с пользователем, личного кабинета подкастера и приложения для прослушивания подкастов.

  <img src="/uploads/00_Title_RB_6484bce805.jpg?updated_at=2023-03-31T15:31:28.658Z" alt="enter image description here">
  <div>
<h3>Red Basset </h3>
<p>
Red Basset&nbsp;&mdash; это бесплатная платформа для продвижения и&nbsp;монетизации подкастов. Для подкастеров это хостинг и&nbsp;личный кабинет с&nbsp;управлением, статистикой и&nbsp;монетизацией подкастов. Для слушателей&nbsp;&mdash; это удобное приложение для прослушивания тысяч подкастов в&nbsp;одном месте.
</p>
</div>  
  <img src="/uploads/01_RB_c5e246d402.jpg?updated_at=2023-03-31T15:31:29.616Z" alt="enter image description here">
  
<div>
<h3>Улыбайтесь, вы&nbsp;на&nbsp;Red Basset</h3>
<div>
<p>При создании логотипа Red Basset мы&nbsp;пришли к&nbsp;беспроводным наушникам и&nbsp;милой улыбке, что создает цельный образ мордочки собаки породы Бассет-хаунд.</p>
<p>Первый контакт пользователя с&nbsp;Red Basset происходит через лендинг, где мы&nbsp;доступным языком рассказали о&nbsp;платформе и&nbsp;визуально продемонстрировали её&nbsp;преимущества. Мы&nbsp;использовали минималистичные тексты и&nbsp;дополнили их выразительными 3d-иллюстрациями.</p>
</div>
</div>

  <img src="/uploads/02_RB_ef635d6e7d.jpg?updated_at=2023-03-31T15:31:30.977Z" alt="enter image description here">
 <div>
  <h3>Разработка</h3>
  <p>Проект поднимался собственными силами разработки. Backend реализован на Java Spring, а frontend на React. Тестирование и поиск багов тоже выполняли собственными силами. Однако мы все еще в процессе прикручивания новых фичей, так что работа продолжает кипеть.</p>
  </div>
  <img src="/uploads/03_RB_8d3e896cd2.jpg?updated_at=2023-03-31T15:31:30.479Z" alt="enter image description here">
 <div>
  <h3>Личный кабинет подкастера</h3>
  <p>Подкаст-платформа Red Basset является бесплатным хостингом для подкастеров. Это буквально рай для них, поскольку все возможности для дистрибуции благодаря RSS уже встроены, никуда отдельно ходить не нужно. В личном кабинете подкастера реализован весь функционал для быстрой и удобной заливки подкастов.</p>
  </div>
  <img src="/uploads/05_RB_f791d45187.jpg?updated_at=2023-03-31T15:31:30.885Z" alt="enter image description here">
 <div>
  <h3>Немножечко подкастов?</h3>
  <p>Подкасты нужно слушать много, долго и комфортно. Для этого мы создали приложение-слушалку, где можно сделать себе уютную библиотеку с любимыми подкастами, создавать разные подборки и даже слушать офлайн.</p>
  </div>
  <img src="/uploads/06_RB_d215ebd87c.jpg?updated_at=2023-03-31T15:31:28.639Z" alt="enter image description here">
  </div>
  <div>
  <h3>А что в итоге?</h3>
  <p>От и до этот проект создан нами: концепция, брендинг, дизайн, разработка. Проделана огромная работа. Мы с удовольствием наблюдаем, как платформа работает, с каждым днем привлекает новых слушателей и подкастеров, развивается, становится популярной. При этом не забываем о поддержке проекта, доводим его до идеала, встраиваем новые фичи и не забываем о маркетинговой коммуникации.</p>
  </div>

Red Basset.png

Red Basset

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>

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

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

hello@mish.design

Москва

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