нейросеть сережа3.png

Привет! Меня зовут Сергей, я графический дизайнер в продуктовой лаборатории Mish. Так уж получилось, что меня заменили нейросети. Ну, или я просто научился с ними работать. В этой статье я расскажу, как приручил искусственный интеллект, удесятерил собственный и перестал бояться, что когда-нибудь стану жертвой этой бездушной машины как профессионал.

Как нейросети делают дизайнера мультитулом 

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

medium_Petrov_sajt_064ce7bf19.jpg

small_Petrov_sajt_064ce7bf19.jpg

thumbnail_Petrov_sajt_064ce7bf19.jpg

Petrov_sajt_064ce7bf19.jpg

large_background profile (3).png

medium_background profile (3).png

small_background profile (3).png

thumbnail_background profile (3).png

background profile (3).png

Graphic Design

Creative

Presentation

Branding

Logo

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

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

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

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

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

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

Крестов Иван

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

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

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

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

Неижко Глеб

Макарова Оксана

Усатюк Владислав

Торги 223.webp

Придумали, во что будут одеваться сотрудники, и создали свое видение уличной моды.

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

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

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

<img src="/uploads/TRG_1080_h_720_1_a3bad91551.webp">

</div>
<div>
<h3>Айтемы, а не вещи</h3>
<p>Нестандартному мерчу нужно нестандартное воплощение. Поэтому мы&nbsp;сразу отказались от&nbsp;карандашей и&nbsp;футболок скучных фасонов. Вместо этого предложили более яркие и&nbsp;говорящие сами за&nbsp;себя айтемы. Выбрать из&nbsp;них клиенту было сложно. Мы&nbsp;делали ставку на&nbsp;сочетание спорт-шика и&nbsp;технологичности, поэтому предлагали для первой партии зарядное устройство, шелковый платок, рубашку&nbsp;&mdash; да, все вместе.</p>
</div> 

<img src="/uploads/TRG_1080_h_720_2_85ee775d70.webp">

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

<img src="/uploads/TRG_1080_h_720_3_0b2058e757.webp">

</div>
<div>
<h3>Лицо мерча</h3>
<p>В&nbsp;дизайне придерживались монохромных оттенков: черного и&nbsp;желтого, которые фигурировали в&nbsp;фирменном стиле &laquo;Торгов&raquo;. Вдохновившись уличной модой, добавили на&nbsp;мерч не&nbsp;только логотип и&nbsp;графические элементы, но&nbsp;еще отдельные слова и&nbsp;целые фразы.</p>
</div>
</div>

<img src="/uploads/TRG_1080_h_720_9_1b0cd266c2.webp">
<img src="/uploads/TRG_1080_h_720_4_e5fef33bc8.webp">

</div>
<div>
<h3>Из области типографики</h3>
<p>Технологичному бренду&nbsp;&mdash; технологичные материалы. На&nbsp;некоторых айтемах мы&nbsp;задумали светоотражающие элементы, на&nbsp;других&nbsp;&mdash; объемную, &laquo;высокую&raquo; бархатную печать и&nbsp;вышивку. На&nbsp;термокружках и&nbsp;блокнотах предложили сделать УФ-лаковое покрытие цвет в&nbsp;цвет: надпись и&nbsp;графические элементы в&nbsp;этом случае видны только при отражении света.</p>
</div>
</div>

<img src="/uploads/TRG_1080_h_720_6_151c32ea5d.webp">
<img src="/uploads/TRG_1080_h_720_7_41ff77c187.webp">

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

<img src="/uploads/TRG_1080_h_720_8_f5b007b1f6.webp">

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

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

обложка юольшая.webp

облога маленькая .webp

Мерч для «Торги 223»

Кириллов Сергей

╨Ю╨▒╨╗╨╛╨╢╨║╨░-2.webp

Чтобы цифровой астролог всегда был на расстоянии вытянутого пальца

<div>
<h3>Запрос: технологичный дизайн для астроприложения</h3>
<p>К&nbsp;нам обратился клиент NeuroAstro с&nbsp;запросом&nbsp;&mdash; сделать дизайн приложения со&nbsp;всеми популярными эзотерическими практиками и&nbsp;усиленным ИИ-помощником. Начать решили с&nbsp;MVP&nbsp;&mdash; сонника с&nbsp;нейротрактовками сновидений. У&nbsp;клиента&nbsp;уже&nbsp;был&nbsp;разработан собственный алгоритм на&nbsp;основе нейросети, который учитывал и&nbsp;комплексно анализировал информацию для составления максимально точных и&nbsp;персонализированных прогнозов. Пользователю было достаточно просто описать свой сон в&nbsp;чате, а&nbsp;ИИ проводил анализ и&nbsp;объяснял сновидения.</p>
</div>

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

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

<img src="/uploads/T_G_2_67b58e275d.webp"> 

<div>
<h3>Переход к расширенной версии приложения</h3>
<p>После релиза сонника мы продолжили работу над&nbsp;расширенной версией приложения, в которой пользователям будут доступны все популярные эзотерические практики: таро, натальные карты, гороскопы, личный календарь благоприятных и&nbsp;неблагоприятных дней, а также консультации астрологов/тарологов. Чтобы&nbsp;совместить&nbsp;все&nbsp;инструменты в одном сервисе и&nbsp;сделать их доступными, мы занялись разработкой всей логики и навигации внутри приложения.</p>
</div>

<img src="/uploads/T_G_5_2af81aa265.webp"> 

<div>
<h3>Главная цель&nbsp;&mdash; удобство пользователя</h3>
<p>Поэтому мы&nbsp;сделали так, чтобы уже начиная с&nbsp;главного экрана он&nbsp;мог кастомизировать приложение под себя. Для начала: озвучить свой основной запрос&nbsp;&mdash; а&nbsp;если он&nbsp;еще не&nbsp;сформулирован, то&nbsp;пройти короткое интервью от&nbsp;нейросети. Визуал&nbsp;главного&nbsp;экрана тут&nbsp;же адаптируется под&nbsp;основные для пользователя темы. Для этого мы&nbsp;сделали отзывчивую и&nbsp;динамичную анимацию, которая может меняться вместе с&nbsp;запросами. Таким&nbsp;образом,&nbsp;пользователю не&nbsp;нужно листать километры меню&nbsp;&mdash; необходимые для решения его&nbsp;вопроса инструменты сами выносятся на&nbsp;главный экран.</p>
</div>

<video
src="/uploads/prognosis_295223ffec.webm"
loop
autoplay
muted
playsinline></video>

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

<img src="/uploads/T_G_4_3a1c5c99ab.webp">

<div>
<h3>Результат</h3>
<p>Нам удалось создать современное решение, которое объединяет консервативные астрологические практики с&nbsp;цифровыми технологиями, отстраивая имидж бренда.</p>
</div>

<video
src="/uploads/Astro_f6ce2a0d11.webm"
loop
autoplay
muted
playsinline></video>

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

The brief doesn't fill in on its own

hello@mish.design

Moscow

Nizhny Novgorod