medium_Vlad_sajt_2ca88104fa.png

small_Vlad_sajt_2ca88104fa.png

thumbnail_Vlad_sajt_2ca88104fa.png

Vlad_sajt_2ca88104fa.png

large_background profile (3).png

medium_background profile (3).png

small_background profile (3).png

thumbnail_background profile (3).png

background profile (3).png

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

Frontend

React

JavaScript

TypeScript

Redux

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

Скосырская Мария

Денисова Христина

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

Петров Сергей

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

Крестов Иван

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

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

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

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

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

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

Бажанов Максим

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






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

The brief doesn't fill in on its own

hello@mish.design

Moscow

Nizhny Novgorod