инструкция по выживанию.png

Привет, я Стас Дубич, ведущий разработчик в продуктовой лаборатории Mish. До Mish я часто сталкивался с задачами вроде «там просто поменять кнопочку» или «ну ты же поймёшь». Спойлер: не понимал — и никто не понимает.
В Mish всё иначе: здесь ценят ясность и структуру, поэтому каждое ТЗ звучит чётко: что нужно, зачем и как это должно работать. Да, все эти формулировки — не самая весёлая часть процесса, но без этого всё ломается. Не только техника, но и нервы разрабов, а они как мы знаем не железные.

<h3>Это база</h3>
<p>У&nbsp;нас в&nbsp;Mish есть три главных правила, которые помогают облегчить жизнь и&nbsp;тому кто ставит задачу, и&nbsp;тому кто&nbsp;ее&nbsp;исполняет.</p>

<h5>Правило&nbsp;1: Все задачи&nbsp;&mdash; только письменно.</h5>
<p>Если задача живёт только в&nbsp;голове менеджера, она погибнет в&nbsp;бою. Любые договорённости должны быть зафиксированы&nbsp;&mdash; в&nbsp;Jira, Notion или другом трекере, а&nbsp;не&nbsp;в&nbsp;переписке &laquo;где-то в&nbsp;телеге&raquo;. Так меньше риска, что&nbsp;кто-то что-то забудет или неправильно поймёт.</p>
<p>Письменная фиксация&nbsp;&mdash; это не&nbsp;бюрократия, а&nbsp;страховка для всех: разработчиков, менеджеров и&nbsp;проекта.</p>

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

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

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

<h5>Правило&nbsp;3: Есть шаблон, ему и&nbsp;следуем.</h5>
<p>Хаос начинается там, где каждый пишет задачи &laquo;по&nbsp;настроению&raquo;. Чтобы избежать путаницы, есть три простых вопроса, на&nbsp;которые нужно ответить:</p>
<ul>
  <li>Что нужно сделать?</li>
  <li>Почему это важно?</li>
  <li>Как это должно работать?</li>
</ul>

<p>Эти пункты помогают выстроить общий контекст и&nbsp;убрать догадки.
Если хотя&nbsp;бы один из&nbsp;ответов отсутствует, разработка превратится в&nbsp;гадание на&nbsp;макете&nbsp;&mdash; красиво, но&nbsp;непредсказуемо.</p>

<p>Эти пункты помогают выстроить общий контекст и&nbsp;убрать догадки.
Если хотя&nbsp;бы один из&nbsp;ответов отсутствует, разработка превратится в&nbsp;гадание на&nbsp;макете&nbsp;&mdash; красиво, но&nbsp;непредсказуемо.</p>

<blockquote>
Разработчики, если хотя&nbsp;бы один пункт непонятен&nbsp;&mdash; возвращаем задачу автору.
Не&nbsp;на&nbsp;ревью, а&nbsp;на&nbsp;доформулировку.
</blockquote>

<p>Нет времени на&nbsp;выстраивание процессов? <a href="https://mish.design/brief">Пишите нам</a>, Mish найдет подход к&nbsp;любой проблеме.</p>

<h3>Что должно быть в&nbsp;задаче перед стартом</h3>
<p>Прежде чем задача попадёт к&nbsp;разработчику, она должна быть полностью собрана&nbsp;&mdash; без пустых полей и&nbsp;магических &laquo;само поймётся&raquo;.</p>

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

<p>Хорошая подготовка экономит часы, а&nbsp;иногда и&nbsp;нервы всей команде.
Вот базовый чеклист, что нужно проверить перед тем, как нажать &laquo;в&nbsp;работу&raquo;.</p>
<ul>
  <li>Полное описание бизнес-требований.</li>
  <li>Список зависимостей (что должно быть готово, чтобы задачу можно было начать).</li>
  <li>Примеры и тест-кейсы, хотя бы базовые.</li>
</ul>

<h3>Разбор полётов</h3>
<p>Хорошая задача&nbsp;&mdash; как командная игра: каждый знает свою роль и&nbsp;не&nbsp;лезет в&nbsp;зону другого. Когда ответственность распределена чётко, проект движется быстрее, а&nbsp;споры &laquo;а&nbsp;кто это должен был сделать?&raquo; исчезают сами собой.</p>

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

<p>Разберём, кто за что отвечает:</p>
<ul>
  <li>Автор задачи&nbsp;&mdash; менеджер или аналитик. Формулирует &laquo;что&raquo; и&nbsp;&laquo;зачем&raquo;. Именно от&nbsp;него зависит, насколько понятен контекст и&nbsp;цель.
</li>
  <li>Эксперт&nbsp;&mdash; техлид или архитектор. Отвечает за&nbsp;&laquo;как&raquo;, выбирает подход, инструменты и&nbsp;архитектуру, чтобы задача решалась не&nbsp;только быстро, но&nbsp;и&nbsp;правильно</li>
  <li>Исполнитель&nbsp;&mdash; разработчик, тестировщик или любой, кто делает задачу руками. Он&nbsp;реализует решение, уточняет детали и&nbsp;даёт обратную связь, если требования противоречат реальности.</li>
  <li>Проверяющий&nbsp;&mdash; человек, который валидирует задачу перед запуском. Проверяет, всё&nbsp;ли ок&nbsp;по&nbsp;данным, срокам и&nbsp;зависимостям.</li>
</ul>

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

<h5>Вопросы к&nbsp;менеджеру, они про контекст и&nbsp;приоритеты:</h5>
</p>
<ul>
  <li>Что конкретно нужно сделать и зачем?</li>
  <li>Какой результат по&nbsp;бизнесу, метрикам или пользовательскому опыту считаем успешным?</li>
  <li>Есть&nbsp;ли у&nbsp;задачи дедлайн и&nbsp;кто его поставил?</li>
  <li>Какой у&nbsp;задачи приоритет по&nbsp;сравнению с&nbsp;остальными?</li>
  <li>Какие риски вы&nbsp;видите? Что может пойти не&nbsp;по&nbsp;плану?</li>
</ul>
</p>

<h5>Вопросы к&nbsp;аналитику, они про данные и&nbsp;логику:</h5></p>
<ul>
  <li>Какие входные и&nbsp;выходные данные участвуют в&nbsp;задаче?</li>
  <li>Есть&nbsp;ли примеры, чтобы проверить реализацию?</li>
  <li>Какие зависимости у&nbsp;задачи&nbsp;&mdash; от&nbsp;других модулей, сервисов или внешних команд?</li>
</ul>
</p>

<h5>Вопросы к&nbsp;эксперту, они про реализацию:</h5>
</p>
<ul>
  <li>Какой подход или архитектурное решение лучше использовать в&nbsp;этом случае?</li>
  <li>Есть&nbsp;ли готовые компоненты, которые можно переиспользовать?</li>
  <li>Что может стать узким местом?</li>
  <li>Какие требования нужно уточнить до&nbsp;начала, чтобы потом не&nbsp;переделывать?</li>
</ul>

<blockquote>
Главное&nbsp;&mdash; не&nbsp;стесняться спрашивать и&nbsp;требовать. Это не&nbsp;придирчивость, а&nbsp;профессиональная гигиена.
</blockquote>

<h3>Если не&nbsp;описать задачу, она напишет себя сама (и вам не понравится)</h3>
<p>Можно, конечно, махнуть рукой и&nbsp;подумать: &laquo;да&nbsp;ладно, как-нибудь разберёмся&raquo;.
Только потом это &laquo;как-нибудь&raquo; превращается в&nbsp;серию пожаров, бессонных ночей и&nbsp;коллективный сеанс гадания на&nbsp;требованиях.</p>

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

<p><b>Качество падает.</b></p>
<p>Код превращается в&nbsp;лоскутное одеяло: каждый шил как понял, никто не&nbsp;знает, где начало, а&nbsp;где конец. Финальный продукт вроде работает, но&nbsp;не&nbsp;так, как задумывали.</p>

<p><b>Сроки утекают.</b></p>
<p>Сначала теряется пара дней на&nbsp;уточнения, потом неделя на&nbsp;переделки, а&nbsp;в&nbsp;какой-то момент проект живёт по&nbsp;календарю майя&nbsp;&mdash; конец света каждый спринт.</p>

<p><b>Команда выгорает.</b></p>
<p>Постоянные авралы, бессмысленные переделки и&nbsp;отсутствие ясности бьют не&nbsp;только по&nbsp;дедлайнам, но&nbsp;и&nbsp;по&nbsp;психике. Тут могла&nbsp;бы быть реклама всем известного сервиса, но&nbsp;увы и&nbsp;ах.</p>

<p>Когда всё рушится, кажется, что спасёт только одно волшебное слово&nbsp;&mdash; &laquo;срочно&raquo;.
И&nbsp;именно с&nbsp;этого момента начинается настоящий конец проекта.</p>

<h3>Срочно&nbsp;&mdash; любимое слово хаоса</h3>
<p>Если всё &laquo;срочно&raquo;, перестаёт быть срочным хоть что-нибудь.
Команда работает в&nbsp;режиме тушения пожаров, код превращается в&nbsp;костыли, приоритеты&nbsp;&mdash; в&nbsp;мем.</p>

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

<p>Что происходит дальше? А&nbsp;всё просто. Код начинает сыпаться, потому что его писали в&nbsp;спешке, &laquo;на&nbsp;коленке&raquo; и&nbsp;без времени на&nbsp;рефакторинг. Дедлайны, конечно, сдвигаются потому что, когда горит всё, невозможно закончить ничего. Доверие к&nbsp;менеджерам постепенно тает: команда перестаёт верить, что приоритеты хоть&nbsp; что-то значат. И&nbsp;в&nbsp;какой-то момент люди просто уходят&nbsp;&mdash; не&nbsp;потому что не&nbsp;любят проект, а&nbsp;потому что устали жить в&nbsp;режиме постоянного &laquo;срочно&raquo;.</p>

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

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

<p>В&nbsp;Mish мы&nbsp;умеем не&nbsp;только ставить задачи правильно, но&nbsp;и&nbsp;исполнять их&nbsp;так, чтобы всё работало, летало и&nbsp;радовало. В&nbsp;наших руках проект не&nbsp;просто продолжает существовать&nbsp;&mdash; он&nbsp;развивается.</p>

<p>Поэтому, если хочется, чтобы задачи выполнялись не&nbsp;&laquo;как-нибудь&raquo;, а&nbsp;&laquo;как надо&raquo;&nbsp;&mdash; мы&nbsp;знаем, как это сделать. Хотите убедиться? <a href="https://mish.design/brief">Заполните бриф</a> и&nbsp;вместе превратим ваши желания в&nbsp;чётко спланированные и&nbsp;работающие проекты.</p>

Инструкция по выживанию: ставим задачи без боли и хаоса

Дубич Станислав

залипающий ховер.png

Залипающий hover на мобильных устройствах – частый баг. Раньше мы решали это просто плагином PostCSS Hover Media Feature, он оборачивает все псевдоклассы :hover в медиазапрос @media (hover: hover) {}. Так мы проверяли поддержку hover и отключали его на мобилках.
Но во время тестирования одного проекта оказалось, что на некоторых устройствах hover продолжает залипать.

<h3>Первая теория: плагин работает некорректно</h3>

<p>Что мы&nbsp;проверили:</p>
<ul>
  <li>Плагин не&nbsp;оборачивает правила?
Нет, всё&nbsp;ок. После сборки <code>hover</code> был в&nbsp;медиазапросах.</li>
  <li>Не&nbsp;работает <code>hover: hover?</code>
Проверили в&nbsp;эмуляции мобильных устройств&nbsp;&mdash; работает.</li>
</ul>

<p>Значит, проблема не&nbsp;в&nbsp;плагине.</p>
&nbsp;

<h3>Вторая теория: баг на&nbsp;отдельных устройствах</h3>

<p>Мы&nbsp;начали тестировать разные модели через Browserstack. На&nbsp;большинстве устройств всё нормально, но&nbsp;есть&nbsp;одно&nbsp;но.</p>

<p>Samsung Galaxy игнорирует всё.</p>
<p>Ему всё равно, что мы&nbsp;оборачиваем <code>hover</code> в <code>@media (hover: hover)</code>. Он&nbsp;отвечает: &laquo;Да-да, я&nbsp;поддерживаю <code>hover</code>&raquo;, а&nbsp;потом предательски залипает.</p>

<p>Дальнейшая проверка показала, что дело не&nbsp;только в&nbsp;Galaxy. Похожая история случается и&nbsp;на&nbsp;некоторых моделях Vivo.</p>

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

<p>В&nbsp;процессе поиска ответов мы&nbsp;наткнулись на&nbsp;<a href="https://habr.com/ru/companies/ruvds/articles/556156/">интересную статью</a> о&nbsp;том, как определять устройства с&nbsp;тачскрином&nbsp;на&nbsp;чистом CSS. Такой способ удобен и&nbsp;для SSR, поэтому мы&nbsp;его изучили. Были варианты и&nbsp;с&nbsp;хуками, но&nbsp;они работают только на&nbsp;клиенте.</p>
&nbsp;

<h3>Как проверить вашу мобилку</h3>

<p>Если интересно, вот ссылки, чтобы прогнать ваши устройства:</p>
<ul>
  <li><a href="https://developer.chrome.com/docs/devtools/remote-debugging?hl=ru">Подключение Android к Chrome DevTools</a></li>
  <li><a href="https://www.browserstack.com/docs/live/local-testing/set-up-local-testing">Локальное тестирование через Browserstack</a></li>
</ul>
&nbsp;

<h3>Глубже в&nbsp;проблему: откуда берётся true?</h3>

<p>Возникает логичный вопрос: как браузер определяет, что событие hover поддерживается?</p>

<p>Мы&nbsp;обратились к&nbsp;исходникам Chromium. Там есть файл <a href="https://github.com/chromium/chromium/blob/main/ui/events/event.cc">event.cc</a>, где перечислены все события. В&nbsp;нём&nbsp;видно:&nbsp;браузер&nbsp;получает события от&nbsp;ОС.</p>

<p>А&nbsp;в&nbsp;файле <a href="https://github.com/chromium/chromium/blob/main/ui/events/platform_event.h">platform_event.h</a> можно заметить, что тип события зависит от&nbsp;платформы (Windows, Mac, iOS, Linux).</p>

<p>То&nbsp;есть:</p>
<ul>
  <li>Аппаратная часть устройства сообщает&nbsp;ОС, что за&nbsp;событие произошло.</li>
  <li>ОС&nbsp;передаёт его браузеру через драйверы и&nbsp;обработчики.</li>
  <li>Браузер преобразует его в&nbsp;знакомые нам события, с&nbsp;которыми мы&nbsp;работаем.</li>
</ul>

<p>Отсюда и&nbsp;ответ: если устройство сообщает, что <code>hover</code> есть, браузер возвращает <code>true</code> на <code>window.matchMedia(&rsquo;(hover: hover)&rsquo;).</code></p>
&nbsp;

<h3>MDN и&nbsp;медиазапрос pointer</h3>

<p>На&nbsp;MDN мы&nbsp;нашли медиазапрос <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer">pointer</a>. Он&nbsp;определяет, какое устройство ввода подключено:</p>
<ul>
  <li><code>fine</code>&nbsp;&mdash; точное устройство (мышь, тачпад, стилус).</li>
  <li><code>coarse</code>&nbsp;&mdash; неточное (палец).</li>
</ul>
&nbsp;

<p>Проверить это можно так:</p>

<pre><code>window.matchMedia('(pointer: coarse)');</code></pre>
<pre><code>window.matchMedia(&rsquo;(pointer: fine)&rsquo;).</code></pre>

<p>Метод возвращает объект с&nbsp;полем <code>matches</code>, где и&nbsp;видно, какое устройство ввода сейчас активно.</p>
&nbsp;

<h3>Почему pointer: fine недостаточно</h3>

<p>На&nbsp;первый взгляд кажется: давайте использовать только <code>pointer: fine</code> и&nbsp;забудем про hover. Но&nbsp;не&nbsp;всё&nbsp;так&nbsp;просто.</p>
<ul>
  <li>У&nbsp;некоторых устройств <code>pointer: fine</code> возвращает <code>true</code>, но&nbsp;<code>hover</code> они не&nbsp;поддерживают.</li>
  <li>Стилусы иногда определяются как <code>fine</code>, но&nbsp;тоже не&nbsp;имеют hover.</li>
</ul>
&nbsp;

<p>Поэтому мы&nbsp;должны проверять оба условия:</p>
<p><code>@media (hover: hover) and (pointer: fine) { ... }</code></p>
&nbsp;

<h3>А&nbsp;как&nbsp;же спецификация?</h3>

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

<p>Если обратиться к&nbsp;<a href="https://www.w3.org/TR/mediaqueries-4/#pointer">спеке W3C</a>, то&nbsp;там есть важное уточнение. Даже если устройство имеет <code>pointer: coarse</code>, это&nbsp;не&nbsp;значит, что точные клики невозможны. Это говорит о&nbsp;том, что мы&nbsp;можем совершать точные клики при&nbsp;помощи того&nbsp;же стилуса.</p>
<p>Иными словами: медиазапросы дают разработчику лишь подсказку о&nbsp;том, как лучше строить интерфейс, а&nbsp;не&nbsp;жёсткую гарантию.</p>
&nbsp;

<h3>Решение:</h3>

<p>Мы&nbsp;пришли к&nbsp;следующему варианту: используем медиазапрос <code>(hover: hover) and (pointer: fine)</code>, чтобы&nbsp;hover-стили&nbsp;применялись&nbsp;только&nbsp;на&nbsp;устройствах с&nbsp;мышью или тачпадом.</p>

<p>Варианты внедрения</p>
<ul>
  <li>Обернуть стили вручную. Подходит для небольших проектов.</li>
  <li>Допилить оригинальный плагин.</li>
  <li>Написать свой.</li>
</ul>

<p>Так как в&nbsp;репозитории оригинального плагина давно висят нерешённые реквесты, мы&nbsp;решили не&nbsp;ждать и&nbsp;сделать свой.</p>
&nbsp;

<h3>Наш плагин</h3>

<p>Когда стало ясно, что простого <code>hover: hover</code> недостаточно, мы&nbsp;решили создать свой плагин.</p>

<p>Чтобы сделать использование плагина удобнее и&nbsp;безопаснее, мы&nbsp;сделали версию на&nbsp;<a href="https://github.com/Hwaiteu/postcss-media-hover-fix">TypeScript</a>.</p>

<p>Это дало:</p>
<ul>
  <li>Чёткую типизацию входных и&nbsp;выходных данных;</li>
  <li>Упрощённое отлавливание ошибок на&nbsp;этапе разработки;</li>
  <li>Более структурный и&nbsp;понятный код для будущих изменений.</li>
</ul>

<p>Теперь у&nbsp;нас есть &laquo;боевая&raquo; версия плагина, которую можно смело подключать в&nbsp;проект и&nbsp;не&nbsp;переживать за&nbsp;<code>hover</code> на&nbsp;мобильных устройствах.</p>
&nbsp;

<h3>Итог</h3>

<p>История с&nbsp;залипающим hover показала: полагаться только на&nbsp;hover: hover не&nbsp;стоит&nbsp;&mdash; иногда он&nbsp;&laquo;залипает&raquo; и&nbsp;слегка раздражает пользователя, хотя интерфейс при этом и&nbsp;не&nbsp;ломается.</p>

<p>С&nbsp;нашим решением hover остаётся только там, где он&nbsp;действительно нужен, а&nbsp;&laquo;притворщики&raquo; типа тачскринов больше не&nbsp;вмешиваются.</p>

<p>В&nbsp;результате мы&nbsp;получили полезный и&nbsp;интересный опыт в&nbsp;автоматическом оборачивании hover в&nbsp;медиазапросы с&nbsp;более полным условием. Залипающий hover больше не&nbsp;раздражает, а&nbsp;ручное прописывание условий стало не&nbsp;нашей головной болью&nbsp;&mdash; так&nbsp;мы (а&nbsp;теперь и&nbsp;вы) можем чуть расслабиться и&nbsp;довериться автоматике.</p>

Фиксим залипающий hover на мобильных устройствах

Беннер Андрей

Ступина Ксения

мем с корги.png

Все хотят быть в тренде — люди, бизнесы, крупные компании. Хочется быть одновременно на хайпе, а еще на чилле и расслабоне. Но вот это пребывание в моменте может очень лихо сыграть с бизнесом и привести к потере себя. Чтобы этого избежать, мы в своей работе используем форкастинг (future-casting) — не просто прогнозирование, а целостный подход к проектированию, который позволяет создавать решения, актуальные сегодня, завтра и в обозримом будущем. Рассказываем, как форкастинг помогает нам создавать по-настоящему устойчивые и эффективные проекты.

<h3>Что такое этот ваш форкастинг?</h3>

<p>Если говорить своими словами, форкастинг&nbsp;&mdash; это целеориентированный подход к&nbsp;проектированию чего&nbsp;угодно: цифровых продуктов, сервисов, процессов или бизнес-моделей. Его главная цель&nbsp;&mdash; не&nbsp;угадать сиюминутный тренд, а&nbsp;найти и&nbsp;заложить в&nbsp;основу проекта нечто &laquo;вечное&raquo;&nbsp;&mdash; фундаментальные принципы и&nbsp;ценности, которые будут важны для людей всегда.</p>

<p>В&nbsp;отличие от&nbsp;классического прогнозирования, который пытается предсказать ситуативные изменения, наш&nbsp;подход скорее напоминает &laquo;эверкастинг&raquo; (ever-casting)&nbsp;&mdash; стремление к&nbsp;созданию решений со&nbsp;сроком жизни, как у&nbsp;Дракулы. Мы&nbsp;проектируем не&nbsp;под задачи, которые есть сегодня, а&nbsp;под цели, которые будут у&nbsp;людей завтра и&nbsp;послезавтра. В&nbsp;результате получаются продукты, архитектурно готовые к&nbsp;масштабированию и&nbsp;адаптации.</p>

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

<h3>Если так можно, то почему так не делают?</h3>
<p>Потому что страшно. Бизнес хоть и состоит из риска, но по своей природе никакая компания не любит рисковать. Организации предпочитают сидеть в своем родном болотце, нередко «вставляя палки в колеса» собственному прогрессу. Такой подход — тупиковый. Это не стратегия, а ее иллюзия.</p>

<p>А&nbsp;мы&nbsp;перешагнули инстинкт самосохранения, но&nbsp;сохранили осмотрительность, и&nbsp;активно транслируем этот&nbsp;подход нашим клиентам. Да, это требует готовности пожертвовать сиюминутным комфортом и&nbsp;пойти на&nbsp;осознанный риск. Но&nbsp;именно такая ставка дает бизнесу решающие преимущества:</p>
<ul>
  <li>Шанс занять лидирующую позицию и&nbsp;задать новый отраслевой стандарт, который остальным придется догонять.</li>
  <li>Создать продукт с&nbsp;долгосрочной актуальностью, который будет работать и&nbsp;приносить пользу годами, а&nbsp;не&nbsp;до&nbsp;следующего квартального отчета.</li>
</ul>

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

<h3>И&nbsp;как это применять?</h3>
<p>Форкастинг&nbsp;&mdash; это в&nbsp;первую очередь майндсет, идеология, которую компания может взять на&nbsp;вооружение. Он&nbsp;применим к&nbsp;любой деятельности, где есть запрос на&nbsp;создание чего-то долговечного.</p>

<p>Наша методология строится на&nbsp;трех ключевых этапах:</p>
<ul>
  <li>Глубинное исследование
Это главное звено. Мы&nbsp;задаемся вопросами: ради кого и&nbsp;ради чего мы&nbsp;создаем продукт? Какие&nbsp;глубинные цели и&nbsp;потребности стоят за&nbsp;запросом клиента? Как наше решение изменит жизнь пользователей и&nbsp;их&nbsp;мир? Мы&nbsp;ищем не&nbsp;ответ на&nbsp;вопрос &laquo;Что модно?&raquo;, а&nbsp;ответ на&nbsp;вопрос &laquo;Что ценно?&raquo;.
</li>
  <li>Проектирование 
 На&nbsp;основе выявленных &laquo;вечных&raquo; ценностей мы&nbsp;проектируем решение, которое наилучшим образом соответствует поставленной цели. Мы&nbsp;создаем не&nbsp;&laquo;кирпичи&raquo; (отдельные элементы), а&nbsp;&laquo;здание&raquo;&nbsp;&mdash; целостную систему, готовую к&nbsp;использованию и&nbsp;развитию.</li>
  <li>Реализация
Мы&nbsp;воплощаем проект в&nbsp;жизнь, учитывая все технические и&nbsp;бизнес-ограничения, но&nbsp;не&nbsp;отклоняясь от&nbsp;фундаментальных принципов, заложенных на&nbsp;первых двух этапах.</li>
</ul>

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

<h3>&laquo;Флатика&raquo;&nbsp;&mdash; как мы&nbsp;использовали форкастинг для ребрендинга легендарной платформы</h3>
<p>&laquo;Флатика&raquo;&nbsp;&mdash; новое имя известной многим платформы Houzz. Это уникальное цифровое пространство, построенное полностью вокруг дома: на&nbsp;площадке можно найти идеи и&nbsp;вдохновение для ремонта, найти специалистов (дизайнеров или строителей) или клиентов, которые только собираются делать ремонт или&nbsp;строить свой дом.</p>

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

<p>Перед нами стояла задача не&nbsp;просто &laquo;переодеть&raquo; существующий бренд, а&nbsp;создать новую идентичность, которая будет актуальна сегодня, завтра и&nbsp;через годы, несмотря на&nbsp;меняющиеся тренды в&nbsp;дизайне и&nbsp;поведении пользователей.</p>

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

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

<h3>Создание гибкой системы, а&nbsp;не&nbsp;статичной картинки</h3>
<p>Мы&nbsp;сознательно отказались от&nbsp;создания жесткого, неизменного глянцевого образа. Вместо этого мы&nbsp;построили живую, развивающуюся систему:</p>
<ul>
  <li>Логотип-метафора: Финальный логотип&nbsp;&mdash; это дом, собранный из&nbsp;элементов, напоминающих сообщения в&nbsp;чате. Это прямое воплощение идеи сообщества: дом рождается из&nbsp;общения и&nbsp;совместных усилий.</li>
  <img src="/uploads/vc_6_bee0922cb6.png">
  <li>Живая цветовая палитра: Мы&nbsp;сохранили наследие бренда (фирменный зеленый), но&nbsp;добавили широкую и&nbsp;гибкую палитру. Она может меняться и&nbsp;расширяться со&nbsp;временем&nbsp;&mdash; например, чтобы поддерживать новый &laquo;цвет года&raquo; в&nbsp;дизайне, не&nbsp;теряя при этом узнаваемости.</li>
  <li>Аутентичность вместо глянца: В&nbsp;основе визуальной коммуникации&nbsp;&mdash; только живые, реальные фотографии реальных интерьеров, садов, рабочих процессов. Ни&nbsp;одной фотографии или материала с&nbsp;использованием ИИ. Каждый ремонт из&nbsp;галереи проекта реализован, а&nbsp;значит эти обои можно купить в&nbsp;Екатеринбурге и&nbsp;такой светильник&nbsp;&mdash; привезти в&nbsp;Тюмень. Это важное решение для&nbsp;бренда, ведь искренность и&nbsp;доверие не&nbsp;выйдут из&nbsp;моды.</li>
</ul>

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

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

<p>&laquo;Флатика&raquo; теперь может легко адаптироваться к&nbsp;новым трендам, форматам и&nbsp;аудиториям, потому что её&nbsp;фундамент&nbsp;&mdash; это не&nbsp;визуальный тренд, а&nbsp;вечные ценности: сообщество, участие, искренность, дом.</p>

<p>Это и&nbsp;есть суть форкастинга: строить не&nbsp;под сегодняшний запрос, а&nbsp;под ту&nbsp;правду о&nbsp;людях, которая останется с&nbsp;ними навсегда.</p>

С мыслями о бесконечном и вечном: как сделать проект, который переживет все тренды

Иваницкая Александра

дейли верстка3.png

Мы начали исследовать интернет-банки три года назад с одной чёткой целью, которую преследуем и сейчас. Сделать работу, которая помогает увидеть сильные и слабые стороны интернет-банков и понять, как они отражаются на повседневных задачах МСБ.

<h3>Как мы&nbsp;работали</h3>
<p>Мы&nbsp;посмотрели на&nbsp;сервисы с&nbsp;двух сторон:</p>
<ul>
  <li>Провели экспертный анализ интерфейсов с&nbsp;командой из&nbsp;двух Design-Lead и&nbsp;трёх UI/UX-дизайнеров с&nbsp;опытом проектирования финтех-продуктов.</li>
  <li>Организовали тестирование с реальными представителями малого бизнеса (руководителями, бухгалтерами, сотрудниками).</li>
</ul>

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

<p><em>* Дейли сценарии&nbsp;&mdash; это повседневные задачи бизнеса: проверить счёт, отправить платёж, скачать выписку.</em></p>

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

<p>Экспертная оценка: Мы&nbsp;не&nbsp;просто оценивали насколько тот или иной банк современный и&nbsp;какой красивый&nbsp;UI они сделали. Наши дизайнеры использовали принципы Брюса Тогнаццини и&nbsp;эвристики Якоба Нильсена, чтобы находить неочевидные ошибки в&nbsp;логике и&nbsp;дизайне. Это помогает понять, где пользователь может споткнуться..</p>

<img src="/uploads/1_stat_fdd2162dd7.webp">

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

<img src="/uploads/2_stat_fa19728bab.webp">

<p>На&nbsp;основе полученных данных мы&nbsp;составили подробный отчёт с&nbsp;удобными таблицами, списками лучших решений и&nbsp;потенциальных зон роста.</p>

<h3>Ключевые инсайты исследования и&nbsp;их&nbsp;значение</h3>
<p>Анализ лучших практик показал несколько чётких трендов:</p>
<ol>
  <li><strong>Персонализация рабочего пространства экономит время.</strong> У&nbsp;ВТБ и&nbsp;Сбера пользователи могут настроить интерфейс под свои задачи, что сокращает количество кликов и&nbsp;снижает риск ошибок.</li>
  
 <img src="/uploads/3_stat_966033f1d4.webp">
 
  <li><strong>Автоматизация&nbsp;&mdash; лучший друг бухгалтера.</strong> Конструкторы документов и&nbsp;возможность отправить счёт сразу на&nbsp;несколько адресов (как в&nbsp;Т-Банке) ускоряют бизнес-процессы.</li>
  
<img src="/uploads/4_stat_91ac5f47bd.webp">

  <li><strong>Помощь должна быть под рукой.</strong> Коммуникация с&nbsp;поддержкой есть везде, но&nbsp;важно не&nbsp;просто реализовать эту функцию, но&nbsp;и&nbsp;сделать её&nbsp;удобной для пользователя. Закреплённый чат с&nbsp;AI-ассистентом и&nbsp;доступная база знаний (как у&nbsp;ВТБ, Точки и&nbsp;Сбера) позволяют пользователям находить ответы на&nbsp;свои вопросы самостоятельно. Это значительно снижает нагрузку на&nbsp;службу поддержки банка.</li>
  <li><strong>Авторизация должна быть не&nbsp;только безопасной, но&nbsp;и&nbsp;удобной.</strong> Наличие нескольких способов входа (токен, биометрия, QR-код) положительно воспринимается пользователями. Банки с&nbsp;единственным вариантом входа вызывают вопросы к&nbsp;удобству и&nbsp;надёжности.</li>
  
<img src="/uploads/5_stat_b3440e2c55.webp">

  <li><strong>Маленькие изменения&nbsp;&mdash; большой эффект.</strong> Иногда достаточно выделить комиссию в&nbsp;форме платежа, сделать карточку счёта кликабельной или добавить глобальный поиск, чтобы заметно улучшить пользовательский опыт.</li>
</ol>

<img src="/uploads/6_stat_6608a4fd1f.webp">

<p>Если хотите подробно изучить результаты исследования, пишите нам на&nbsp;hello@mish.design.</p>

<h3>Призовые места</h3>
<p>По&nbsp;результатам исследования 2024 года лидерами стали четыре банка.</p>
<p>ВТБ занял первое место благодаря высокой персонализации и&nbsp;самой функциональной гостевой зоне.</p>
<p>Альфа-Банк и&nbsp;Точка разделили второе место. Альфа-Банк отличился интуитивным интерфейсом, который позволяет выполнять дейли сценарии быстрее и&nbsp;эффективнее. Точка подтвердил статус современного банка с&nbsp;уникальным дружелюбным стилем коммуникации.</p>
<p>ПСБ замкнул группу лидеров, предложив понятный интерфейс с&nbsp;функционалом, полностью отвечающим актуальным задачам бизнеса.</p>

<img src="/uploads/7_stat_007564650d.webp">

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

<p>Для банка это возможность получить:</p>
<ul>
  <li>&laquo;Быстрые победы&raquo;: простые исправления, которые приносят много пользы (например, сделать комиссию заметнее или добавить строку поиска).</li>
  <li>Стратегическое видение: идеи для крупных улучшений, которые выведут сервис на&nbsp;новый уровень (например, автоматизация документооборота).</li>
</ul>

<p>По&nbsp;сути, банк получает карту улучшений, с&nbsp;расставленными приоритетами и&nbsp;доказанной пользой.</p>

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

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

<p>Хотите сделать ваш продукт удобнее? <a href="mailto:hello@mish.design">Давайте обсудим.</a></p>

Зачем нужны исследования дейли сценариев цифровых сервисов

Анищенко Александр

Попов Алексей

Попов Олег

метла верстка.png

Привет, я Андрей Беннер, фронтенд-разработчик в Mish. Сейчас я расскажу вам о нашем опыте в оптимизации хаотичных процессов с помощью собственных разработок. 
Если вы когда-либо работали с проектами на стеке Vite + Pug + SCSS + TypeScript, то наверняка сталкивались с хаосом в файловой структуре и рутиной, мешающей сосредоточиться на главном — решении задач бизнеса и создании удобного интерфейса для пользователя. 

В этом материале мы поделимся тем, как столкнувшись с проблемой, создали решение, которое сделало процесс разработки более эффективным, а структуру проекта — интуитивно понятной. А ещё расскажем, как это решение родилось внутри команды и стало частью нашего вклада в open source.

<h3>Проблема: хаос и&nbsp;неразбериха в&nbsp;проекте</h3>
<p>Наверняка многие из&nbsp;вас знакомы с&nbsp;популярным плагином vite-plugin-pug. Это решение позволяет использовать Pug в&nbsp;проектах на&nbsp;базе Vite. Но&nbsp;у&nbsp;него есть существенный недостаток: необходимость создавать HTML-&laquo;обёртки&raquo; для каждой Pug-страницы.</p>
&nbsp;

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

<p>Кажется, всё нормально, но&nbsp;на&nbsp;деле возникает ряд сложностей:</p>

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

<p><em>Головная боль от&nbsp;внесения изменений:</em> при добавлении новых страниц или изменении структуры проекта реализация &laquo;обёрток&raquo; превращается в&nbsp;настоящий хардкор на&nbsp;больших проектах.</p>

<p><em>Ухудшение читаемости:</em> файлы разбрасываются по&nbsp;проекту, и&nbsp;сложно быстро понять, где что находится. Каждый&nbsp;разработчик знает, как сложно поддерживать цельную архитектуру на&nbsp;масштабных проектах, избегая&nbsp;появления &laquo;мусорных&raquo; файлов и&nbsp;избыточной вложенности.</p>

<p>Так перед нами остро встала задача создания удобной и&nbsp;прозрачной системы, исключающей вышеописанные проблемы</p>

<h3>Решение: рендерим Pug напрямую</h3>
<p><p><em>&laquo;Если готовое решение не&nbsp;устраивает, кто мешает создать собственное?&raquo;</em></p>
 &nbsp;&mdash; подумал&nbsp;я, наткнувшись на&nbsp;очередной структурный хаос. К&nbsp;счастью, у&nbsp;нас в&nbsp;Mish к&nbsp;таким инициативам относятся с&nbsp;энтузиазмом: мы&nbsp;поддерживаем и&nbsp;развиваем идеи друг друга. Это помогает не&nbsp;только в&nbsp;достижении личных целей, но&nbsp;и&nbsp;улучшает жизнь всей команды.</p>

<p>Оказалось, для решения проблемы нужны всего две вещи:</p>
<ul>
  <li>API Pug для преобразования .pug в&nbsp;HTML.</li>
  <li>Сборщик Vite для интеграции с&nbsp;рабочим процессом.</li>
</ul>
<p>Так началась моя работа над плагином vite-convert-pug-in-html.</p>

<h3>Что делает плагин</h3>
<p>Вместо создания избыточных файлов, мой плагин:</p>
<ul>
  <li>Рендерит .pug файлы напрямую в&nbsp;HTML&nbsp;на этапе сборки.</li>
  <li>Формирует понятную структуру итоговых файлов (например, about.pug превращается в&nbsp;pages/about/index.html).</li>
  <li>Упрощает работу с&nbsp;dev-сервером: каждый запрос .html перехватывается, ищется соответствующий .pug, и&nbsp;страница рендерится прямо на&nbsp;лету.</li>
  <li>Настраивает правильные пути к&nbsp;CSS и&nbsp;JS-ассетам в&nbsp;итоговом HTML (никаких танцев с&nbsp;бубном!).</li>
</ul>

<p>Как это работает</p>
<ul>
  <li>С&nbsp;помощью API Pug и&nbsp;хука сборки Vite плотно интегрируем процесс рендеринга .pug в&nbsp;HTML-файлы.</li>
  <li>Устраняем необходимость использовать &laquo;обёртки&raquo;: больше никаких .html, только .pug файлы.</li>
  <li>Добавляем поддержку HMR. Любое изменение в .pug моментально обновляет страницу.</li>
</ul>

<p>Для версии до&nbsp;1.21.1 включительно настройка плагина происходит так</p>

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

<p>Для версии 2.0.0 нам ничего не&nbsp;надо настраивать, достаточно вызвать плагин</p>

<img src="/uploads/photo_2025_08_27_23_16_04_7e3ba5a4c6.jpg">

<h3>Чем полезен плагин</h3>
<p>Теперь, давайте разберёмся, почему vite-convert-pug-in-html стал неотъемлемой частью нашего рабочего процесса и&nbsp;какое влияние он&nbsp;может оказать на&nbsp;ваши проекты.</p>

<p><strong>1. Простая структура проекта</strong></p>
<p>Больше никаких громоздких HTML-обёрток, .pug автоматически превращается в&nbsp;красивый HTML без лишних &laquo;костылей&raquo;. Все страницы хранятся в&nbsp;одном месте с&nbsp;очевидной вложенностью.</p>

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

<p>Это особенно полезно на&nbsp;больших проектах, где сотни файлов могут запутать даже опытных девелоперов.</p>

<p><strong>2. Горячая замена модулей (HMR)</strong></p>
<p>Каждое ваше изменение в .pug мгновенно отображается в&nbsp;браузере. Это существенно ускоряет процесс отладки. Забудьте о&nbsp;перезагрузке страницы, автообновление&nbsp;&mdash; наше всё.</p>

<p><strong>3. Прощайте «хвосты» у URL</strong></p>
<p>Благодаря плагину, в&nbsp;продакшене ваши страницы будут выглядеть аккуратно: вместо https://example.com/about.htm будет https://example.com/about. Это идеально для SEO и&nbsp;удобного пользовательского опыта.</p>

<p><strong>4. Экономия времени</strong></p>
<p>Вы&nbsp;больше не&nbsp;тратите время на&nbsp;настройку путей для CSS и&nbsp;JS. Все ссылки меняются автоматически на&nbsp;нужные, плагин делает это за&nbsp;вас.</p>

<p><strong>5. Поддержка алиасов</strong></p>
<p>Вы&nbsp;больше не&nbsp;тратите время на&nbsp;относительные пути. Достаточно указать алиасы в&nbsp;конфиге vite и&nbsp;использовать их&nbsp;в .pug файлах.</p>

<h3>Почему мы&nbsp;делимся этим решением</h3>
<p>Open source для нас в&nbsp;Mish&nbsp;&mdash; это не&nbsp;только про код, но&nbsp;и&nbsp;про культуру. Делимся тем, что облегчает работу, экономит время и&nbsp;делает процесс разработки комфортным. Потому что мы&nbsp;сами такими инструментами пользуемся каждый день.
Плагин&nbsp;vite-convert-pug-in-html&nbsp;&mdash;&nbsp;наша&nbsp; внутренняя разработка, которая так хорошо себя зарекомендовала, что мы&nbsp;решили ею&nbsp;поделиться. Нам важно, чтобы и&nbsp;другие разработчики чувствовали то&nbsp;же удобство, которое теперь есть у&nbsp;нас.</p>
</div>

<h3>Как установить?</h3>
<p>Если работа с&nbsp;Pug и&nbsp;Vite доставляла вам столько&nbsp;же хлопот, сколько когда-то мне, тогда попробуйте плагин vite-convert-pug-in-html чтобы избавиться от&nbsp;этой головной боли. Он&nbsp;упрощает жизнь, ускоряет работу и&nbsp;избавляет от&nbsp;рутины.</p>
<ul>
  <li>Установите плагин через npm. 
npm install @mish.dev/vite-convert-pug-in-html</li>
  <li>Настройте vite.config.js, как в&nbsp;примере выше.</li>
  <li>Всё готово! Запускайте проект и&nbsp;легко настраивайте структуру.</li>
</ul>
<p>Для более подробного изучения плагина, включая все доступные настройки и&nbsp;конфигурации, загляните в&nbsp;документацию на&nbsp;npm или в&nbsp;репозиторий на&nbsp;GitHub.</p>

<h3>Меньше ручной работы, больше времени на&nbsp;главное</h3>
<p>Работа с&nbsp;Pug и&nbsp;Vite может и&nbsp;должна быть простой, без хаоса и&nbsp;лишних обходных путей. Для Mish этот плагин стал тем самым недостающим элементом, который позволил нам навести порядок в&nbsp;структуре. Теперь мы&nbsp;экономим время, ресурсы и&nbsp;внимание команды, фокусируясь на&nbsp;решении ключевых задач.</p>
<p>Если вы&nbsp;хотите оптимизировать свои процессы, сократить операционные затраты и&nbsp;вывести разработку на&nbsp;новый уровень эффективности, опробуйте плагин на&nbsp;своих проектах.</p>
<p>Не&nbsp;тратьте ресурсы на&nbsp;борьбу с&nbsp;неудобством, выбирайте инструменты, которые работают за&nbsp;вас.</p>

Как мы решили проблему хаотичной структуры проекта с Pug и Vite

IMG_1902.png

Мобильное приложение — не просто альтернатива интернет-банку. 
Для малого и среднего бизнеса это рабочее место, которое всегда в кармане с доступом к управлению счетами, подписанию документов, контролю поступлениями и срочным переводам. Всё должно быть максимально доступным и понятным. Мы провели комплексное исследование мобильных банков и проверили, как они справляются с этим на практике.

<h3>Как мы&nbsp;проводили исследование и&nbsp;откуда знаем, что важно бизнесу</h3>
<p>Recon, команда нашего исследовательского направления, взяла шесть мобильных приложений от&nbsp;крупных банков и&nbsp;широко известных необанков. Наша дизайнеры оценили приложения с&nbsp;экспертной точки зрения. Для&nbsp;полноценной оценки в&nbsp;ход шли классический подход Брюса Тогнаццини  и&nbsp;эвристика Якоба Нильсена. А&nbsp;предпринимателям, генеральным директорам, бухгалтерам и&nbsp;сотрудникам, которые работают в&nbsp;мобильных и&nbsp;интернет-банках мы&nbsp;предложили протестировать 11&nbsp;ключевых сценариев&nbsp;&mdash; от&nbsp;входа в&nbsp;приложение до&nbsp;отправки платёжки и&nbsp;настройки тарифов.</p>

<p>Чтобы оценить, насколько эффективны эти сценарии в&nbsp;мобильных банках, мы&nbsp;опирались на&nbsp;уже проверенную методологию, которую команда использовала в&nbsp;исследовании интернет-банков.</p>

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

<h3>Что работает хорошо</h3>
<p><strong>1. Контекстный доступ к&nbsp;данным</strong></p>
&nbsp;

<img src="/uploads/1_6fb627f36a.png">

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

<p><strong>2. Умная настройка интерфейса под себя</strong></p>
&nbsp;

<img src="/uploads/2_c5c69ccae1.png">

<p>Интерфейсы, в&nbsp;которых можно скрыть ненужные блоки и&nbsp;изменить порядок разделов, вызывают положительные отзывы у&nbsp;пользователей. Особенно полезна персонализация для тех, кто ведёт сразу несколько компаний или работает в&nbsp;режиме &laquo;много задач за&nbsp;минуту&raquo;.</p>

<p><strong>3. Формы с подсказками</strong></p>
&nbsp;

<img src="/uploads/3_2b644b2f7b.png">

<p>В&nbsp;удачных реализациях формы автоматически подсказывают, что и&nbsp;как нужно заполнять. Есть поддержка автоопределения ИНН, интеграция с&nbsp;1С, а&nbsp;комиссия показывается до&nbsp;нажатия кнопки &laquo;Отправить&raquo;. Это&nbsp;повышает прозрачность и&nbsp;снижает тревожность.</p>

<p><strong>4. Маркетплейс, который работает</strong></p>
&nbsp;

<img src="/uploads/4_5d9bb2669a.png">

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


<h3>Что мешает бизнесу</h3>
<ul>
  <li>Сложный старт. Первый вход это один из&nbsp;самых критичных моментов. Если авторизация требует лишних шагов, а&nbsp;демо-режим неполный или неудобный, пользователь теряет доверие уже в&nbsp;начале. В&nbsp;некоторых приложениях нет даже простого способа посмотреть интерфейс до&nbsp;регистрации.</li>
  <li>Запутанная логика. Во&nbsp;многих приложениях сценарии разбросаны по&nbsp;разным разделам без логики. Например, история операций может быть спрятана внизу главного экрана, а&nbsp;переход к&nbsp;деталям отсутствует вовсе. Пользователи прокручивают ленту в&nbsp;поисках нужного, не&nbsp;находят и&nbsp;сдаются. Ещё пример&nbsp;&mdash; рассылка реквизитов. В&nbsp;отдельных случаях кнопка &laquo;Поделиться&raquo; либо незаметна, либо реализована с&nbsp;помощью иконки, которую пользователи не&nbsp;распознают.</li>
  <li>Отсутствие глобального поиска. Функционал может быть продвинутым, но&nbsp;если пользователь не&nbsp;может быстро найти нужный раздел, он&nbsp;просто не&nbsp;узнает, что такой сценарий вообще существует. В&nbsp;некоторых банках поиск не&nbsp;выводит релевантные результаты, а&nbsp;в&nbsp;других не&nbsp;работает вовсе.</li>
  <li>Недоработанная визуальная иерархия. Плотная верстка, слабые акценты, перегруженные экраны&nbsp;&mdash; всё это мешает восприятию и&nbsp;утомляет. Особенно в&nbsp;таких важных разделах, как аналитика по&nbsp;счёту или &laquo;дела в&nbsp;работе&raquo; (подписание документов, отслеживание статусов). Иногда пользователь вообще не&nbsp;понимает, что перед ним важная информация.</li>
</ul>


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


<h3>Финалисты: чему у&nbsp;них стоит поучиться</h3>
<p>По&nbsp;итогам исследования мы&nbsp;определили три лидера: Точка (181,6&nbsp;балла), Т-Бизнес (173,9&nbsp;балла) и&nbsp;Бизнес Платформа ВТБ (171,4&nbsp;балла). Все три приложения показали высокий уровень проработки сценариев, понятную навигацию и&nbsp;фокус на&nbsp;реальных задачах пользователей из&nbsp;МСБ. Но&nbsp;каждый из&nbsp;финалистов подошёл к&nbsp;решению этих задач по-своему.</p>


<p>Точка выделяется глубокой персонализацией, удобной стартовой страницей с&nbsp;быстрыми действиями, продуманным сторителлингом (в&nbsp;формате сторис) и&nbsp;витриной продуктов с&nbsp;фильтрами и&nbsp;возможностью прямого оформления. Приложение адаптируется под пользователя и&nbsp;позволяет работать в&nbsp;темпе бизнеса без&nbsp;необходимости искать нужную функцию.</p>
<p>Т-Бизнес предлагает мгновенную авторизацию и&nbsp;интерактивный онбординг, быстрый доступ к&nbsp;реквизитам и&nbsp;документам, гибкую настройку уведомлений. Банк показывает высокий уровень интеграции с&nbsp;экосистемой и&nbsp;автоматизации рутинных действий.</p>
<p>Бизнес Платформа ВТБ делает ставку на&nbsp;мультибанк. Пользователь может управлять счетами из&nbsp;разных банков в&nbsp;одном приложении. Также здесь реализован функционал &laquo;Важное на&nbsp;сегодня&raquo;, который собирает задачи и&nbsp;статусы в&nbsp;одном месте, помогая не&nbsp;упустить критичные действия.</p>
<p>Финалисты не&nbsp;только предлагают широкий функционал, но&nbsp;и&nbsp;реализовывать сложные задачи в&nbsp;удобном интерфейсе. Это именно тот подход, которого ждёт современный бизнес: быстро, понятно, без барьеров.</p>
<p>Если вы&nbsp;хотите получить полную версию этого исследования, <a href="mailto:hello@mish.design">свяжитесь с нами</a></p>

<h3>Хотите понять, как пользователи воспринимают ваш продукт?</h3>
<p>Банковское приложение это не&nbsp;просто интерфейс. Это способ управления бизнесом. Если интерфейс неудобен, страдает не&nbsp;только восприятие пользователей, но&nbsp;и&nbsp;скорость процессов в&nbsp;компании. Задержки с&nbsp;подписанием документов, ошибки в&nbsp;реквизитах или пропущенные уведомление&nbsp;&mdash; это реальные деньги и&nbsp;время.</p>

<p>Вместо общих рассуждений понятные выводы, проблемные зоны и&nbsp;карта роста, с&nbsp;которой можно работать.</p>

<p>Хотите участвовать в&nbsp;следующем исследовании или заказать аудит вашего интерфейса, напишите&nbsp;нам&nbsp;на&nbsp;hello@mish.design.</p>

<p>В&nbsp;исследовании участвовал директор цифровых финансовых технологий Globus IT&nbsp;Денис Ягубцов</p>

Как мы сравнивали мобильные банки для МСБ и что об этом нужно знать

Трачкова Анастасия

Христенко Александра

мегабашня гейм2.png

А помните, был бум популярности на ботов, и все компании быстро выпускали своих фирменных помощников в Telegram, VK и на других площадках? Вот только боты стали уже базовым винтиком в системах коммуникации бизнеса. Пользователь же стал требователен и помимо работающего решения начал стремиться к красоте. И тут на помощь приходят мини-приложения. Рассказываем, что это и чем они могут быть полезны бизнесу. 

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

<p>Мини-приложения могут улучшать пользовательский опыт, давая возможность использовать максимум сервисов внутри одного приложения. Например, так использует мини-аппки сервис Яндекс&nbsp;Go, когда из&nbsp;одного приложения можно заказать такси, посмотреть статус доставки или по&nbsp;дороге заказать домой еду.</p>

<p>Но чаще и охотнее пользователи взаимодействуют с развлекательными мини-аппками. В качестве примера тут можно привести «Тамагочи» от Золотого Яблока или Мегабашню, которую мы в Mish Product Lab сделали для МегаМаркета совместно с IT-компанией KTS.</p>

<img src="/uploads/02_vc_1f4a7952f2.png">

<p>Области применения мини-приложений ограничены только фантазией. Главное понимать, какую бизнес-задачу оно будет решать:</p>
<ul>
  <li>Удержание клиентов&nbsp;&mdash; быстрый доступ к&nbsp;услугам прямо внутри привычного мессенджера или соцсети.</li>
  <li>Монетизация&nbsp;&mdash; платные функции, подписки или реклама в&nbsp;играх и&nbsp;виджетах.</li>
  <li>Упрощение процессов&nbsp;&mdash; заказ еды, запись к&nbsp;врачу или оплата услуг в&nbsp;пару тапов.</li>
  <li>Привлечение новых клиентов и&nbsp;повышение лояльности&nbsp;&mdash; через систему бонусов или реферальные программы.</li>
  <li>Гибкость и&nbsp;тестирование гипотез&nbsp;&mdash; можно запустить MVP (минимально жизнеспособный продукт) и&nbsp;дорабатывать его на&nbsp;основе обратной связи, а&nbsp;затем даже развить в&nbsp;самостоятельное приложение.</li>
</ul>

<p>Что мы уже разработали:</p>
<ul>
  <li>Мегабашня&nbsp;&mdash; игра в&nbsp;приложении Мегамаркета, разработанная совместно с&nbsp;нашими партнёрами KTS</li>
  <li>Башня из&nbsp;Oreo в&nbsp;VK&nbsp;Mini-apps, также разработанная совместно с&nbsp;IT-компанией KTS</li>
  <li>Новогоднее мини-приложение от&nbsp;&laquo;Простоквашино&raquo;</li>
</ul>

<img src="/uploads/03_vc_948347cdd1.png">

<h3>Как бизнесу получить мини-аппку?</h3>
<p>Мы&nbsp;в&nbsp;Mish Product Lab регулярно делаем мини-приложения для брендов. У&nbsp;нас это история &laquo;под ключ&raquo;, так что можем приоткрыть завесу тайны (в&nbsp;рамках NDA, конечно) и&nbsp;рассказать, как их&nbsp;делаем&nbsp;мы.

<p>Всё начинается с&nbsp;идеи...</p>

<p>И&nbsp;с&nbsp;заполненного брифа у&nbsp;нас на&nbsp;сайте. Мы&nbsp;проводим встречу, на&nbsp;которой компания рассказывает, что именно ожидается от&nbsp;мини-аппки.</p>

<p><strong>Никита Измайлов, аккаунт-менеджер в Mish Product Lab:</strong></p>

<p><em>&laquo;Ситуации бывают разные. Зачастую заказчик приходит с&nbsp;уже прописанным планом и&nbsp;целями, которые должно выполнять мини-приложение. Могут даже поделиться какими-то собственными наработками, касаемо механик. Но&nbsp;чаще всего мы&nbsp;получаем&nbsp;ТЗ в&nbsp;духе: &bdquo;Хотим вау, только чтобы прямо ВАУ&ldquo;. Наша задача как профессионалов предложить решение, которое будет учитывать интересы заказчика, сочетать яркий дизайн и&nbsp;мощный функционал&raquo;</em></p>

<p>На&nbsp;основании первоначальных встреч мы&nbsp;проводим оценку предстоящих работ.</p>

<p>Затем подбирается команда и начинается подготовка</p>
<p>Под каждый проект мы отдельно формируем креативных специалистов: копирайтеров, нарративных дизайнеров (если предполагается геймификация), дизайнеров и иллюстраторов и разработчиков.</p>

<p>Сперва команда разрабатывает креативные механики, концепцию всего мини-приложения, и только после этого берется за разработку и дизайн элементов.</p>

<p><strong>Денис Титов, арт-директор Mish Product Lab:</strong></p>

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

<img src="/uploads/04_vc_b1e2c4263c.png">

<p>Переходим к разработке</p>

<p>Мы агентство полного цикла. Это означает, что мы можем сделать приложение от идеи до реализации. Но можем выполнить и только часть работ — например, если заказчику необходим только креатив, то в разработку он может не уходить.</p>

<p>Если же нужна и разработка в том числе, наша команда может осуществить и её.</p>

<p><strong>Алексей Авдеев, технический директор в Mish Product Lab:</strong></p>

<p><em>&laquo;Креатив обычно представляет собой макеты в&nbsp;Figma и&nbsp;технического задание, которое описывает, как всё должно работать. Дальше эти два артефакта попадают в&nbsp;команду разработки.</em></p>

<p><em>
<p>Команда разработки должна понять задачу и&nbsp;разделить её&nbsp;на&nbsp;подзадачи:</p>
<ul>
  <li>Тестировщики пишут тест-кейсы, составляют тест-план.</li>
  <li>Разработчики верстают макеты, программируют логику.</li>
  <li>DevOps-инженеры организуют работу приложения на&nbsp;серверах, настраивают бэкапы и&nbsp;мониторинг.</li>
</ul>
</em></p>

<p><em>Работа ведётся итерациями. После каждой итерации проводится демо для себя и&nbsp;заказчика, а&nbsp;когда всё готово, мы&nbsp;вживляем мини-приложение в&nbsp;софт клиента. Этот процесс всегда происходит примерно одинаково:</em></p>

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

<p><em>Например, он&nbsp;может получить имя пользователя из&nbsp;базы клиента.&raquo;</em></p>

<p>После этого клиент может запускать мини-приложение в&nbsp;своей системе и&nbsp;получать целевые действия.</p>

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

<p>В случае с «Мегабашней» сошлось всё: милый заяц-маскот, красочные уровни, дополнительные механики, удобный интерфейс. Но главное — четко определенные цели в самом начале и грамотно заданный вопрос: «А какой эффект должно дать мини-приложение?».</p>

<img src="/uploads/01_vc_53fdd68588.png">

Маленькое решение для больших целей

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

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

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

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

Frame 951.png

Всем привет, меня зовут Стас, я техлид в Mish Product Lab.

Тема возникла не просто так: внутри команды у нас было немало споров и дискуссий о том, какой инструмент для проксирования и терминации SSL лучше использовать в различных ситуациях. Изначально все наши гипотезы были основаны больше на личных предпочтениях, чем на реальных данных. Мы долго спорили, надеясь, что истина будет где-то рядом с нашими любимыми решениями. Но в итоге пришли к выводу, что единственный способ получить действительно объективный ответ — это протестировать и сравнить различные варианты на практике.

Проксирование из коробки: сравнительный анализ HAProxy, Envoy, Nginx, Caddy и Traefik

помощь бизнессу4.png

Мы продуктовая лаборатория Mish: проводим исследования и делаем цифровые продукты, которые приносят бизнесу деньги. Однажды, не под Новый год, мы сделали производительный лендинг Нижегородскому заводу по ручному производству елочных игрушек. Клиент продает игрушки круглый год, поэтому к нам пришли весной с целью продать весеннюю коллекцию.

Спойлер: у нас это получилось быстро, эффективно и на много денег.

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

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

<p><em>С&nbsp;этой проблемой завод пришел в&nbsp;Mish.</em></p>

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

<h3>История, как у&nbsp;нижегородских мастеров не&nbsp;справлялся сайт</h3>
<p>Игрушки выпускают тиражом. Количество экземпляров может быть разным, но&nbsp;в&nbsp;среднем в&nbsp;каждом тираже от&nbsp;одного до&nbsp;15&nbsp;видов игрушек по&nbsp;300 единиц каждого вида. Весь цикл продаж обычно длится от&nbsp;10&nbsp;секунд до&nbsp;полутора минут. За&nbsp;это время на&nbsp;страницу заходит несколько тысяч пользователей. И&nbsp;пока сайт лежит, никто не&nbsp;может купить игрушку. И&nbsp;даже ее&nbsp;эксклюзивность никак не&nbsp;помогает быстро продать партию.</p>

<p>Нам нужно было все починить. Но&nbsp;это была задачка со&nbsp;звездочкой. С&nbsp;двумя звездочками.</p>
<ul>
  <li>Звездочка первая: через неделю стартовала продажа партии</li>
  <li>Звездочка вторая: на&nbsp;разработку полноценного сайта требуется не&nbsp;меньше полугода</li>
</ul>

<blockquote>
Маховик времени мы&nbsp;забыли в&nbsp;прошлом офисе, поэтому пришлось действовать иначе.
</blockquote>

<p>Сначала команда разработки Mish изучила решения предыдущего подрядчика. Версия была спроектирована на&nbsp;CMS 1С-Битрикс и&nbsp;работала под управлением PHP 7.4. Это хорошие стабильные технологии, но&nbsp;на&nbsp;оптимизацию интернет-магазина со&nbsp;всем его функционалом нужно было слишком много ресурсов.</p>

<p>В&nbsp;итоге придумали рабочую заплатку&nbsp;&mdash; сделать простой лендинг, чтобы собирать заявки на&nbsp;покупку игрушек. После подтверждения заказа покупатель уже мог купить свой елочный эксклюзив. У&nbsp;нашего клиента были продуктовые ограничения: покупатели не&nbsp;могли сразу положить в&nbsp;корзину 100&nbsp;игрушек.&nbsp;1&nbsp;заказ = 1&nbsp;игрушка одного вида. Такой социализм в&nbsp;миниатюре.</p>

<h3>История, как Mish решали задачу</h3>
<p>За&nbsp;три дня мы&nbsp;спроектировали и&nbsp;согласовали дизайн. Еще за&nbsp;два&nbsp;&mdash; сделали логику сайта. Решили кодить на&nbsp;языке Golang: на&nbsp;нем можно быстро писать низкоуровневые программы, в&nbsp;которых главное&nbsp;&mdash; скорость. Система ограничивает количество игрушек в&nbsp;заказе и&nbsp;автоматически считает остатки. Заявки выгружались в&nbsp;экселевский файл, а&nbsp;менеджеры оттуда уже вручную обрабатывали заказы. Звучит сложно, а&nbsp;получилось очень эффективно.</p>

<p>Так мы&nbsp;подготовились к&nbsp;продаже первой весенней коллекции &laquo;Морозная рябина&raquo;. Всего было 9&nbsp;игрушек по&nbsp;300 штук каждой&nbsp;&mdash; итого 2&nbsp;700&nbsp;экземпляров.</p>

<p>Продажи стартовали 9&nbsp;апреля в&nbsp;14:00. Первые 600 заказов оформили за&nbsp;одну минуту&nbsp;&mdash; по&nbsp;10&nbsp;игрушек в&nbsp;секунду. Коллекция не&nbsp;была новой, поэтому привычного ажиотажа не&nbsp;было. Тем не&nbsp;менее, абсолютно всю партию мы&nbsp;продали за&nbsp;20&nbsp;минут. И&nbsp;у&nbsp;нас ничего не&nbsp;упало.</p>

<h3>Мониторинг</h3>

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

<p>Через два дня стартовала пасхальная коллекция&nbsp;&mdash; и&nbsp;мы&nbsp;надеялись, что все пройдет так&nbsp;же. Но&nbsp;не&nbsp;прошло.</p>

<p>В&nbsp;пасхальной коллекции было 6&nbsp;игрушек&nbsp;&mdash; всего 1650&nbsp;экземпляров. И&nbsp;сервер упал. Мы&nbsp;его поднимали несколько раз, а&nbsp;когда все починили&nbsp;&mdash; партию раскупили. Всего на&nbsp;продажи ушло около минуты.</p>

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

<p>Падения мы&nbsp;вывезли, но&nbsp;к&nbsp;третьей партии решили пересмотреть логику бэкэнда. База данных PostgreSQL не&nbsp;справлялась с&nbsp;большим количеством транзакций. Мы&nbsp;упирались в&nbsp;лимиты и&nbsp;получали блокировки. Поэтому решили перенести механизм транзакций на&nbsp;уровень языка Golang. Это позволило вычислять самую нагруженную логику в&nbsp;оперативной памяти.</p>

<p>24&nbsp;апреля стартовали продажи игрушки &laquo;Мальчик с&nbsp;самолетиком&raquo;&nbsp;&mdash; 450&nbsp;экземпляров. Мы&nbsp;продали их&nbsp;за&nbsp;21&nbsp;секунду, а&nbsp;сервер работал исправно. Игрушек было в&nbsp;несколько раз меньше, чем в&nbsp;предыдущие разы, но&nbsp;мы&nbsp;побили скоростной рекорд без багов в&nbsp;системе.</p>

<p>Четвертая партия&nbsp;&mdash; 300 штук игрушки в&nbsp;виде ежика.&nbsp;17&nbsp;секунд&nbsp;&mdash; ежика нет, а&nbsp;сайт работает так&nbsp;же, как до&nbsp;и&nbsp;после.</p>

<img src="/uploads/vc_4_64bd174684.png">
<img src="/uploads/vc5_016c212eb8.png">

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

Как помочь бизнесу заработать 10 млн ₽ за 20 секунд

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

large_site (3).png

medium_site (3).png

small_site (3).png

thumbnail_site (3).png

site (3).png

Это новое пространство для вашего творчества: здесь лучшие ИИ-модели на одном холсте. Сочетайте разные нейросети, чтобы генерировать реалистичные изображения и 3D-иллюстрации, создавать персонажей и сложные композиции, стилизовать и оживлять статику. В общем, дайте волю фантазии.

Так что мы больше не страдаем и вам не советуем. Потестить платформу можно бесплатно. А если когда станет ясно, что вам всё нравится — выбирайте тариф под свои задачи, индивидуальные или командные.

Strophe - новое пространство для ИИ-творчества

large_site.png

medium_site.png

small_site.png

thumbnail_site.png

site.png

Мы тут молодцы вообще-то)

Проект, в который мы вложили космическое количество любви, экспериментов и нейромагии, получил своё заслуженное место на пьедестале. «Нейроастро» взял бронзу на фестивале нового дизайна «СРЕДА».

Если вы не видели этот кейс, сходите на сайт, посмотрите. Ну и поздравьте, конечно, это всегда очень приятно. 

«Нейроастро» взял бронзу на фестивале нового дизайна «СРЕДА»

large_site (2).png

medium_site (2).png

small_site (2).png

thumbnail_site (2).png

site (2).png

Мы с АНО «Горький Тех» заключили соглашение о получении возмещения затрат на оплату труда ИТ-специалистов, привлеченных из других субъектов Российской Федерации и иностранных государств. 

Mish и «Горький Тех» 

large_Group 10.png

medium_Group 10.png

small_Group 10.png

thumbnail_Group 10.png

Group 10.png

В гостях хорошо 🙂

Неделю гостили у Ozon Design, теперь дома — и делимся, что там устроили.

1) Миша Пименова, СЕО — как сделать так, чтобы твоя творческая команда не послала тебя туда, куда сами знаете. (https://t.me/ozondesign/4972)
2) Денис Каменков, Creative Game Producer — зачем бизнесу эта ваша геймификация и как ее запустить.
3 (https://t.me/ozondesign/4983)) Сергей Макаров, дизайн-директор продуктового юнита — из личного опыта: как проектировать проекты для госсектора. (https://t.me/ozondesign/4984)
4) Глеб Неижко, арт-директор 3D-направления — как мы организовали безотходный продакшн и перестали тратить рендеры зря. (https://t.me/ozondesign/4991)

Читайте, лайкайте, комментируйте — всё, что вы так любите.

Визит команды Mish в Ozon Design

large_qfim7Y7W63hd9jnWn_yA5wc8m_7oI6WaXpFlwuLPl3CKdpOAMfARUeUT497ZnbF.jpg

medium_qfim7Y7W63hd9jnWn_yA5wc8m_7oI6WaXpFlwuLPl3CKdpOAMfARUeUT497ZnbF.jpg

small_qfim7Y7W63hd9jnWn_yA5wc8m_7oI6WaXpFlwuLPl3CKdpOAMfARUeUT497ZnbF.jpg

thumbnail_qfim7Y7W63hd9jnWn_yA5wc8m_7oI6WaXpFlwuLPl3CKdpOAMfARUeUT497ZnbF.jpg

qfim7Y7W63hd9jnWn_yA5wc8m_7oI6WaXpFlwuLPl3CKdpOAMfARUeUT497ZnbF.jpg

Сегодня наш СТО Алексей Авдеев — ведущий FrontendConf. Смотрите, что там, как там в реальном времени 😎

Алексей Авдеев ведущий FrontendConf

large_Group 9.png

medium_Group 9.png

small_Group 9.png

thumbnail_Group 9.png

Group 9.png

Как не поехать кукухой, если ты дизайнер? 😐 Мы точно не знаем, но у нашего дизайн-директора Артёма
Кожевникова есть какая-то тактика, и он её придерживается. Своим опытом и советами он поделился в
подкасте Ozon Design. Говорили о креативе и выгорании, о том, где заканчивается искусство и
начинается интерфейс. И, внезапно, о том, почему стоит съездить в Нижний Новгород.


Артём Кожевников в подкасте Ozon Design

large_photo_2025-10-22_11-20-43.jpg

medium_photo_2025-10-22_11-20-43.jpg

small_photo_2025-10-22_11-20-43.jpg

thumbnail_photo_2025-10-22_11-20-43.jpg

photo_2025-10-22_11-20-43.jpg

Забота с нейронками повышает продуктивность — говорили они. Скоро некоторые профессии не будут
нужны, а ИИ будет работать за нас — утверждали эти оптимисты. Но в реальности работа с внедрением ИИ
легче не стала, просто раньше приходилось исправлять свои косяки, а теперь — править за нейронкой.
Верх продуктивности. Или нет? Миша на конфе Сбера рассказала, как грамотно выбирать подходящие
нейронки. Показала, что и для чего используем в работе мы, каких результатов и провалов удалось
добиться. Мы вам запись принесли.


Миша Пименова на конференции Сбера

large_photo_2024-11-29_14-55-22.jpg

medium_photo_2024-11-29_14-55-22.jpg

small_photo_2024-11-29_14-55-22.jpg

thumbnail_photo_2024-11-29_14-55-22.jpg

photo_2024-11-29_14-55-22.jpg

Mish Let's Play — все! 

Спасибо, что были с нами эти три дня. 30000 уникальных зрителей — это сильно.

Потратьте 3 минутки на опрос по впечатлениям от мероприятия. И ставьте реакции, если хотите второй сезон. Будем знать, куда развиваться и двигаться

Провели мероприятие на 30000 зрителей

medium_photo_2024-12-19_16-21-56.jpg

small_photo_2024-12-19_16-21-56.jpg

thumbnail_photo_2024-12-19_16-21-56.jpg

photo_2024-12-19_16-21-56.jpg

Золото:
Вертикаль  — лучший сайт некоммерческий или благотворительной организации
Вертикаль — развлекательный ресурс, медиапортал
Начни игру — инклюзивный дизайн сайта
Бронза:
ОТР  — сайт СМИ
ОТР  — развлекательный ресурс, медиапортал
Вертикаль  — лучший сайт созданный на конструкторах/платформах
PanClub  — сайт магазина розничной торговли 
Вместе с друзьями из Globus IT  взяли бронзу с сайтом GP Days, полюбуемся дипломом на полочке у глобуса

Поставили на полочку семь дипломов «Золотого сайта» 

large_IMG_5283.PNG

medium_IMG_5283.PNG

small_IMG_5283.PNG

thumbnail_IMG_5283.PNG

IMG_5283.PNG

Так мы согласовывали дизайн для «Цифрового диктанта». Оформление их подкаста «Digital Утро» — тоже наша работа. А в гостях нового выпуска побывал наш дизайн-директор коммуникационного направления, Артем Кожевников. Он рассказал о связи графического дизайна и digital-грамотности. А еще ответил на вопрос, выходить ли замуж за дизайнера — девочки, это нам надо!

Медиа

hello@mish.design

Москва

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