small_Макаров сайт.png

thumbnail_Макаров сайт.png

Макаров сайт.png

Макаров фон.png

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

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

8 Mocap quad_00.png

Дизайн мобильного приложения для домашних онлайн-тренировок.

<img src="/uploads/00_Title_8ka_5b57ffd5ee.jpg?updated_at=2023-04-02T17:41:46.860Z" alt="enter image description here">
<div>
<h3>Всем спорт!</h3>
<p>Каким должно быть спортивное приложение для домашних тренировок, чтобы человек не забросил его после первого же раза? Удобным? Понятным? С множеством функций? Да, это важно, это все должно быть по умолчанию. Но чем же тогда это приложение будет отличаться от сотен таких же в сторах? Именно поэтому мы обратились к яркому визуалу. И ставка сыграла идеально — приложение приковывает взгляд с первых секунд.</p>
</div>

  <img src="/uploads/01_8ka_e3d9ffd652.jpg?updated_at=2023-04-02T17:41:45.680Z" alt="enter image description here">
<div>
  <h3>Умная лента</h3>
<p>Мы&nbsp;сделали упор на&nbsp;гибкую систему фильтрации тренировок и&nbsp;выбора тренера. С&nbsp;помощью нее пользователь найдет именно&nbsp;то, что ему нужно из десятков возможных вариантов. User-friendly? Максимально!</p>
</div>
  <img src="/uploads/02_8ka_807db23424.jpg?updated_at=2023-04-02T17:41:46.341Z" alt="enter image description here">
<div>
  <h3>Больше 3D</h3>
<p>В этом проекте хотелось сделать прям вау, потому что спорт, активность. Пользователей нужно раскачивать, вдохновлять. Поэтому выбор пал на 3D-иллюстрации, которых много, они буквально везде и создают настроение. Дополнили их анимациями, чтобы усилить эффект.</p>
</div>
  <img src="/uploads/03_8ka_f1f70672cf.jpg?updated_at=2023-04-02T17:41:45.171Z" alt="enter image description here">
<div>
  <h3>Так что же получилось?</h3>
<p>В результате визуально получился один из самых ярких и броских наших проектов. И это сработало. Клиент очень оценил предложенную нами концепцию ребрендинга, а приложение получило множество престижных дизайнерских наград.</p>
</div>

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


8 Mocap gorisontal_00.png

Восьмёрка

YouCan_00.png

Дизайн приложения для поддержки пациентов с онкологией и их родственников.

<img src="/uploads/00_Title_You_Can_0a753fdad0.jpg?updated_at=2023-04-02T17:51:05.102Z" alt="enter image description here">
<div>
<h3>Близко к сердцу</h3>
<p>You can&nbsp;&mdash; cервис поддержки пациентов с&nbsp;онкологией. И он подходит самым разным людям с разными стадиями заболеваниями. Тема очень непростая, поэтому мы со всей серьезностью и щепетильностью приступили к проекту.</p>
</div>
  <img src="/uploads/01_You_Can_2015204059.jpg?updated_at=2023-04-02T17:51:04.871Z" alt="enter image description here">
<div>
<h3>Онбординг</h3>
<p>Перед началом работы с приложением нужно заполнить анкету-знакомство, чтобы алгоритмы подобрали подходящий контент. Это тот случай, когда важность онбординга трудно переоценить. И здесь важен как тактичный подход в самом контенте, так и визуальная составляющая.</p>
</div>
  <img src="/uploads/02_You_Can_9a59771567.jpg?updated_at=2023-04-02T17:51:05.455Z" alt="enter image description here">
<div>
<h3>Интерфейс</h3>
<p>В интерфейсе нужно было сделать упор на простоту и доступность, поскольку целевая аудитория очень разнородна по возрасту, социальному статусу и пользовательскому опыту. Мы решили все основные функции расположить на видном месте, чтобы облегчить к ним доступ.</p>
</div>
  <img src="/uploads/03_You_Can_55fce72115.jpg?updated_at=2023-04-02T17:51:05.653Z" alt="enter image description here">
  <img src="/uploads/04_You_Can_c23e25fc11.jpg?updated_at=2023-04-02T17:51:05.146Z" alt="enter image description here">
<div>
<h3>Забота и поддержка</h3>
<p>Если бы это приложение можно было охарактеризовать одним словом, то это был бы "комфорт". Он прослеживается везде: в первых экранах, интерфейсе, контенте, иллюстрациях. И мы по-настоящему гордимся тем, что поставленная задача была так чутко выполнена нашими ребятами. Приложение получило множество наград и высоко оценено дизайн-сообществом.</p>
</div>

YouCanGor_00.png

You can

kcentr.png

Редизайн маркетплейса с учетом текущих потребностей потребителей и бизнеса

<img src="/uploads/Kcentr_Tagline_01_Main_6a67df1029.jpg?updated_at=2023-04-02T18:16:39.546Z" alt="enter image description here">
<div>
<h3>Маркетплейс</h3>
<p>kcentr.ru&nbsp;&mdash; официальный интернет-магазин Корпорации &laquo;Центр&raquo;&nbsp;&mdash; российской розничной торговой сети по&nbsp;продаже бытовой техники и&nbsp;электроники известных мировых производителей. Иными словами — это амбициозный маркетплейс, которому требовался актуальный дизайн. </p>
</div>

  <img src="/uploads/Kcentr_Tagline_02_855fc57622.jpg?updated_at=2023-04-02T18:16:40.938Z" alt="enter image description here">
<div>
<h3>Карточка товара</h3>
<p>Карточка товара — это чуть ли не самое главное. Здесь важна каждая деталь, поэтому наши ребята тщательно продумали дизайн с учетом всех возможных опций, которые могут быть у продукта. Отображение товара стало максимально информативным, но при этом без лишнего шума и отвлекающих элементов. </p>
</div>
  <img src="/uploads/Kcentr_Tagline_03_fc3ab502c2.jpg?updated_at=2023-04-02T18:16:40.647Z" alt="enter image description here">
  <img src="/uploads/Kcentr_Tagline_04_93319da9f8.jpg?updated_at=2023-04-02T18:16:40.034Z" alt="enter image description here">
<div>
<h3>Оформление заказа</h3>
<p>Именно на этапе оформления заказа значительное число потенциальных покупателей покидают маркетплейс. Что тому виной? Слабый дизайн, шумные элементы, нарушение логики расположения кнопок, неправильные акценты. Мы проработали все ошибки, чтобы пользователь все же успешно купил себе ноутбук.</p>
</div>
  <img src="/uploads/Kcentr_Tagline_05_449d94350b.jpg?updated_at=2023-04-02T18:16:38.972Z" alt="enter image description here">
  <img src="/uploads/Kcentr_Tagline_06_e43adb4e7f.jpg?updated_at=2023-04-02T18:16:40.017Z" alt="enter image description here">
<div>
<h3>Что в итоге?</h3>
<p>Во главе угла этого проекта стоит сильный UX. Это основополагающая любого интернет-магазина, а тем более маркетплейса. Клиент высоко оценил работу с деталями и логику отображения элементов. Маркетплейс успешно функционирует с текущим дизайном и демонстрирует высокие показатели после ребрендинга. </p>
</div>

Корпорация «‎Центр»‎

ОРЕО.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

Москва

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