large_Kris_sajt_5517380b06.jpeg

medium_Kris_sajt_5517380b06.jpeg

small_Kris_sajt_5517380b06.jpeg

thumbnail_Kris_sajt_5517380b06.jpeg

Kris_sajt_5517380b06.jpeg

large_background profile (3).png

medium_background profile (3).png

small_background profile (3).png

thumbnail_background profile (3).png

background profile (3).png

Толстых Кристина

Product Design

UI/UX

Management

Business Needs

Project Management

Product Management

nlmk mocap.mp4

Приложение Группы Компаний НЛМК для знакомства с товаром и оформления заказов

<img src="/uploads/1_e7d8f67a99.jpg?updated_at=2023-03-28T12:58:36.263Z" alt="enter image description here">

<div>
<h3>Стальное решение</h3>
<p>НЛМК — это крупный российский производитель стальной продукции. И от нас требовалось сделать максимально удобное и простое приложение, чтобы эту продукцию красиво и понятно показать и довести покупателя до совершения заказа. Ничего сложного на первый взгляд, но особенность товара накладывает свой отпечаток на дизайне всего приложения. </p>
</div>
 
  <img src="/uploads/3_cd2b9401b0.jpg?updated_at=2023-03-24T07:16:55.796Z" alt="enter image description here">

<div>
<h3>Максимальный комфорт</h3>
<div>
  <p>С помощью приложения можно:</p>
    <p>1) Найти и&nbsp;просмотреть информацию об&nbsp;интересующих товарах;</p></li>
   <p>2) Получить информацию о&nbsp;ценах, выгодных предложениях и&nbsp;наличии металлоизделий на&nbsp;складах в&nbsp;выбранном регионе.</p></li>
    <p>3) Заказать как готовую продукцию, так и под производство. Можно выбрать необходимые позиции с&nbsp;ближайшего к&nbsp;склада, задать параметры и&nbsp;указать тоннаж, после чего добавить товары в&nbsp;корзину и&nbsp;оформить заказ.</p>
</div>
</div>
  <img src="/uploads/2_c25c23fe2c.jpg?updated_at=2023-03-24T07:16:55.790Z" alt="enter image description here">

<div>
<h3>Идеальный фильтр</h3>
<p>Особое внимание мы&nbsp;уделили фильтрам продукции, чтобы эта функция отвечала запросам и&nbsp;нуждам клиентов НЛМК. </p>
</div>
  <img src="/uploads/4_c278e8f39b.jpg?updated_at=2023-03-24T07:16:55.740Z" alt="enter image description here">

  <img src="/uploads/5_741555daa1.jpg?updated_at=2023-03-24T07:16:54.284Z" alt="enter image description here">
  <div>
<h3>А что в итоге?</h3>
<div>
  <p>Получилось целостное и хорошо продуманное приложение с минималистичными иллюстрациями и строгим дизайном. Внимание к деталям и прекрасно отстроенная логика делают это приложение незаменимым инструментом бизнеса. </p>
</div>
</div>

НЛМК.jpg

НЛМК

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

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

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

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

Мазаев Денис

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

RKP.png

Лендинг и личный кабинет объединенной российско-китайской платформы поиска оборудования

<img src="/uploads/00_RKP_99a3a9d2fc.jpg?updated_at=2023-04-02T18:00:44.464Z" alt="enter image description here">
<div>
<h3>Химическая платформа</h3>
<div>
  <p>Объединенная российско-китайская платформа химической промышленности — это большой проект для создания здоровой конкурентной среды на&nbsp;рынке импортного промышленного оборудования и&nbsp;материалов. </p>
  <p>Платформа полезна как физическим лицам, так и&nbsp;крупным промышленным корпорациям для поиска необходимого оборудования, проверки актуальных цен производителей и&nbsp;получения всех сопутствующих услуг. </p>
</div>
</div>

  <img src="/uploads/01_RKP_3240041c36.jpg?updated_at=2023-04-02T18:00:41.488Z" alt="enter image description here">
  <img src="/uploads/02_RKP_97972af8dc.jpg?updated_at=2023-04-02T18:00:43.288Z" alt="enter image description here">
<div>
<h3>Быстро и понятно</h3>
<p>Перед нами стояла задача создать лендинг и личный кабинет, которые помогали бы клиентам платформы создавать заявки на поиск оборудования. Дизайн информативный и понятный: пользователь должен в кратчайшие сроки ухватить цель проекта и принцип его работы.</p>
</div>

  <img src="/uploads/03_RKP_5f2138f0fe.jpg?updated_at=2023-04-02T18:00:42.368Z" alt="enter image description here">
<div>
<h3>Личный кабинет</h3>
<p>В личном кабинете нельзя дать пользователю потеряться в обилии полей и документов. И поскольку целевая аудитория проекта имеет слабый пользовательский опыт (ведь аналогичных проектов практически нет), мы потратили много усилий для грамотного структурирования информации, чтобы бережно провести пользователя по нужному пути.</p>
</div>
  <img src="/uploads/04_RKP_b008e64011.jpg?updated_at=2023-04-02T18:00:42.336Z" alt="enter image description here">
  <img src="/uploads/05_RKP_7c2301b0a3.jpg?updated_at=2023-04-02T18:00:42.839Z" alt="enter image description here">
<div>
<h3>Полноценная платформа</h3>
<p>Мы много работаем со сферой промышленности, поэтому уже имеем четкое понимание особенностей запросов клиентов. Данный проект не стал исключением и по итогу проделанная работа была высоко оценена клиентом, а платформа успешно функционирует. Также проект был отмечен несколькими дизайнерскими наградами за качественный интерфейс.</p>
</div>

РКП

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>

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

Зеленцов Константин

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






Толстых Кристина

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

hello@mish.design

Москва

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