tower4.png

История о том, как мы делали спецверсию сайта по ГОСТу совместно с Goose Gaming. Всё ради конкурса президентской платформы «Россия — страна возможностей» для талантов игровой индустрии. Рассказываем о том, какие подводные камни возникают при адаптировании сайта для людей с ограниченными возможностями.

<h3>История о том, как мы делали спецверсию сайта по ГОСТу совместно с Goose Gaming</h3>


<img src="/uploads/prevyu_5a1c594efd.png" alt="превью.png">


<p>Всё ради конкурса президентской платформы «Россия — страна возможностей» для талантов игровой индустрии. Рассказываем о том, какие подводные камни возникают при адаптировании сайта для людей с ограниченными возможностями.</p>
<p>Не будем грузить вас официальными требованиями по ГОСТу. Перечислим кратко: нужно было поработать с настройками для слабовидящих — разработать синтез речи, изменить размер шрифта, увеличить контрастность. При этом сделать так, чтобы сайтом можно было управлять через клавиатуру и не было ограничений по времени для нормального восприятия и использования контента.</p>
<blockquote>
  Мы рады принять участие в социально значимом проекте, ведь компании редко задумываются о специальных версиях сайта. Из-за этого люди даже с распространенными заболеваниями не могут пользоваться продуктом без посторонней помощи.
</blockquote>
<p>Юлия Семенчук, руководитель отдела разработки и продуктового менеджмента в Mish</p>


<h3>Сами проблему сделали — сами решили</h3>

<p>Доступность интерфейсов зависит от дизайна. Изначально он состоял из ломаных, пересекающихся элементов и нам это нравилось. Но когда начали адаптировать сайт под ГОСТ, красота поломалась — табы и кнопки перестали выделяться с клавиатуры. Это связано с тем, что ломаный дизайн достигался путем отсечения лишней части элемента и под отсеченный элемент попадала обводка при фокусе. Забавный опыт для нас, но не для наших фронтов — они сильно ругались, ведь им пришлось все переделывать, поэтому учитывайте требования ещё на стадии проработки дизайна.</p>
<img src="/uploads/Sami_problemu_sdelali_sami_reshili_46105ccc40.png" alt="Сами проблему сделали — сами решили.png">


<h3>Как сверстали</h3>

<p>Для начала необходимо было проработать порядок следования элементов. На планшете, в мобильной версии и в десктопе они должны располагаться в одном и том же порядке, не уезжать и не расплываться. Поэтому мы использовали адаптивную верстку и отрисовали несколько макетов под основные разрешения девайсов.</p>
<p>После этого сконцентрировались на создании ARIA-атрибутов — они позволяют явно указать, в каком состоянии находится меню и добавить читабельный текст к графическим элементам. В общем, помогают скринридерам более точно читать сайт, контекст, цитаты, кнопки, ссылки, описывать изображения, иконки и т.д. Правда, с ARIA-атрибутами нужно работать осознанно и не переборщить, чтобы не усложнять работу скринридерам.</p>
<p><em>Скринридер (screen reader) — программа, которая превращает контент интерфейсов в речь или шрифт Брайля. Они нужны людям со слепотой и слабовидящим, а также пользователям с когнитивными особенностями, которым легче воспринимать информацию на слух. Например, людям с дислексией.</em></p>
<p>И, конечно, не обошлось без использования семантических тегов, потому что это важно для SEO-оптимизации.</p>


<h3>Настрой и сохрани</h3>

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


<img src="/uploads/Nastroj_i_sohrani_59d509911c.png" alt="Настрой и сохрани.png">


<h3>Как быть с картинками?</h3>

<p>ГОСТ требует, чтобы на сайте была функция отключения изображений с сохранением текстового контента и озвучки. Так, пользователям с нарушениями восприятия мелких и ярких изображений будет проще пользоваться сайтом.</p>
<p>Чтобы описать то, как мы это сделали, расскажем немного матчасти, приготовьтесь:</p>
<ul>
  <li>С помощью пользовательского хука задали параметры по умолчанию для спецверсии и поместили их в локальное хранилище по ключу.</li>
  <li>Затем благодаря компоненту-обертке, в который помещаем всё приложение, через контекст передали параметры и обработчик для их изменения.</li>
  <li>Логику поиска всех DOM-элементов, соответствующих требуемым условиям и присваиванию им необходимых CSS-свойств, реализовали в отдельном пользовательском хуке.</li>
</ul>
<p>В конечном итоге просто вызываем хук на всех страницах приложения, где нужно скрыть изображения.</p>
<img src="/uploads/Kak_byt_s_kartinkami_97cc4ec4d2.png" alt="Как быть с картинками.png">
<p>Чтобы провернуть этот сценарий, пришлось проработать все возможные кейсы применения изображений на страницах сайта, что заняло немало времени. Каждый случай мы обрабатывали определенным образом с точки зрения присваивания или удаления CSS-свойств. Кроме того, возникла потребность выделить ряд изображений в качестве исключений, так как они всегда должны быть видимыми для пользователя, чтобы интерфейс оставался удобным и читаемым. Для подобных случаев изображениям был добавлен специальный data-атрибут, по которому они игнорировались при включении режима «Без изображений».</p>


<h3>Монохром и его друзья</h3>

<p>При создании дизайна спецверсии важно адаптировать его под наиболее распространенные проблемы со зрением. Для этого мы проработали варианты монохрома, возможность изменения размера шрифтов, включения и отключения картинок, звука и т.д. Также уделили много внимания ховерам, выделению активных табов. И не забыли про порядок следования элементов, чтобы он не менялся на разных разрешениях — если этого не сделать, то обязательно возникнут сложности при использовании скринридера и управлении с клавиатуры.</p>


<img src="/uploads/Monohrom_i_ego_druzya_37b53d239f.png" alt="Монохром и его друзья .png">

<p>Во всех браузерах есть готовые решения для управления с клавиатуры, и мы хотели их использовать. Но со временем поняли, что стандартные библиотеки некорректно отображают наш ломаный дизайн — обводка была кривая или вовсе не отображалась. Поэтому нам пришлось немного покреативить.</p>
<p>Чтобы создать сложные формы объектов, подошло свойство CSS, которое называется Clip-Path. Оно позволяет скрыть часть элемента, создавая область отсечения вокруг него. Но когда дело дошло до создания спецверсии, появилась ещё одна проблема — при попытке выделить элемент с помощью клавиши Tab, обводка всё равно не отображалась. Для решения этой проблемы, мы создали псевдоэлементы и разместили их поверх элементов, которые необходимо выделить.</p>
<blockquote>
  Вообще хорошая практика, когда любой сайт, и не обязательно спецверсия, доступен с клавиатуры. Если семантические теги написаны верно, то на 95% эта работа окупается.
</blockquote>
<p> Мария, frontend-разработчик в Mish</p>


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

<p>У нас в агентстве любят, когда всё по полочкам — это упрощает работу. Поэтому не лишним была организовать процесс при настройке параметров сайта так, чтобы не бегать по всему проекту. Например, если бы мы разрабатывали все кнопки с нуля, то при настройке сайта изменения пришлось бы вносить в каждую.</p>
<p>Поэтому мы вынесли кнопку в компоненту и добавили специальное состояние. В нем указали условия и зашили всю информацию по тому, как должен выглядеть элемент при включении спецверсии. Это позволило нам прописать все требования только в одном файле и не ходить по всем остальным. Но это стандартная практика: мы на всех проектах делаем компоненты и выносим их в отдельную библиотеку — это удобно и ускоряет процесс.</p>
<p>На сайте много текста, который меняется при включении специальной версии — увеличиваются шрифт и расстояния между буквами. Поэтому с текстовыми блоками поступили так же, как с кнопками — создали компонент, в котором указали все необходимые параметры. Теперь, когда происходит переключение на специальную версию сайта, компонент сам дает команду всем файлам. Бонусом эта фишка позволяет легко добавить озвучку сайта.</p>


<img src="/uploads/Kak_my_optimizirovali_rabotu_e014821f1e.png" alt="Как мы оптимизировали работу .png">


<h3>Какой вывод можно сделать?</h3>

<p>Сложности закаляют — например, необычные требования, к которым ты не готов, короткий срок реализации и ограниченный бюджет. В таких ситуациях можно рассчитывать только на опыт и команду. Поэтому внимательно читайте требования и не бойтесь импровизировать и добавлять от себя полезный функционал, который улучшит пользовательский опыт.</p>
<p>Тем временем первый сезон проекта «Начни игру» уже закончился — финалисты съездили в Казань, защитились и получили финансовую поддержку. А создатели готовятся к новому этапу конкурса, чтобы те, кто не успел принять участие в первом или не прошел отбор, смогли попытать свои шансы во втором. Мы же добавляем новые механики и задания, чтобы ничего не помешало участникам выйти в финал.</p>

ГОСТ бастерс: как мы делали спецверсию сайта «Начни Игру»

large_юля сайт.jpeg

medium_юля сайт.jpeg

small_юля сайт.jpeg

thumbnail_юля сайт.jpeg

юля сайт.jpeg

mish_Logo.jpg

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

Nebula.png

Фирменный стиль, промо-лендинги и админ-панель для агрегатора криптобирж. 

<img src="/uploads/00_Title_Nebula_f5a9c89f38.jpg?updated_at=2023-03-31T14:53:20.450Z" alt="enter image description here">
<div>
<h3>Так что же это такое</h3>
<p>Nebula — это агрегатор криптобирж для поиска лучшей цены криптовалют. Самый доступный способ найти наиболее адекватный прайс среди сотен сайтов, продающих крипту, в которых легко запутаться. </p>
</div>
<img src="/uploads/01_Nebula_28fe0fdea0.jpg?updated_at=2023-03-31T14:53:18.775Z" alt="enter image description here">
<img src="/uploads/02_Nebula_a0bc418b08.jpg?updated_at=2023-03-31T14:53:21.287Z" alt="enter image description here">
<div>
<h3>3D-схема работы агрегатора</h3>
<div>
<p>Клиент хотел создать крипто-сервис, который был&nbsp;бы не&nbsp;только удобным и&nbsp;понятным, но&nbsp;и&nbsp;визуально технологичным, отвечающим запросам аудитории.</p> 
<p>Начинали, конечно, с брендинга. Это не та история, где нужно изобретать велосипед и нырять в пучины креатива (тз есть тз), но сделать красиво и футуристично очень важно. За основу взяли темную тему с тремя основными цветами (сиреневым, розовым и темно-синим) как прямую ассоциацию с трейдингом и криптой. </p>
</div>
</div>

<img src="/uploads/03_Nebula_908a585fb4.jpg?updated_at=2023-03-31T14:53:21.590Z" alt="enter image description here">

<div>
<h3>Интерфейс для всех</h3>
<div>
<p>Далее мы продумали логику, разработали дизайн личного кабинета и админки агрегатора. Для этого разработали  полноценный UI-Kit, куда без него. Для наглядности процессов &nbsp;создали понятные схемы, которые наглядно демонстрируют принцип работы Nebula, чтобы даже новички в криптовалютах понимали прозрачность процессов и пользу агрегатора для конкретно их целей. Поэтому в дизайне &nbsp;решили сделать упор на&nbsp;3D-анимациях и&nbsp;интерактивном отображении данных.</p>
</div>
</div>

<img src="/uploads/05_Nebula_3be0f6f304.jpg?updated_at=2023-03-31T14:53:18.519Z" alt="enter image description here">

<div>
<h3>Разработка</h3>
<div>
<p>На этом проекте мы были ответственны за frontend, что очень ускорило запуск, поскольку у внутренних команд дизайнеров и разработчиков хорошо налажен диалог. В основе стэка React, TypeScript и Redux как наиболее очевидные в данном случае, а также Openware и Web3. Многие графики на Recharts. Тестирование на Jest, Enzyme и Cypress. </p>
</div>
</div>
<img src="/uploads/06_Nebula_f5963947f0.jpg?updated_at=2023-03-31T14:53:15.937Z" alt="enter image description here">
<img src="/uploads/07_Nebula_32544c7c48.jpg?updated_at=2023-03-31T14:53:12.642Z" alt="enter image description here">
</div>
</div>
<div>
<h3>Понятный агрегатор</h3>
<div>
<p>При подаче такой непростой информации легко запутаться, однако мы сразу сконцентрировались на главном — UI. Именно на прекрасно продуманном интерфейсе и был построен этот проект. Хотя и удачный брендинг играет не последнюю роль. Футуристичный визуал, основанный на 3D, дополняет главную составляющую и выгодно отличает агрегатор от других. </p>


Nebula ECN

game case mocap.mp4

Уникальный проект, объединивший юных дизайнеров, геймдевов и программистов, где проделана внушительная работа: фирменный стиль, дизайн веб-портала и админки, 3D-иллюстрации, веб-разработка. 

 <img src="/uploads/Tagline_01_Main_9d23fe5f58.jpg?updated_at=2023-03-30T07:29:22.748Z" alt="enter image description here">
<div>
<h3>Платформа</h3>
<div>
<p>&laquo;Начни игру&raquo; позволяет молодым разработчикам заявить о&nbsp;себе, выйти на&nbsp;новый уровень профессионального мастерства, создать уникальные игровые проекты и&nbsp;найти партнеров для поддержки своей инициативы. Обучение построено на&nbsp;геймификации, что отражено как в&nbsp;дизайне в&nbsp;целом, так и&nbsp;в&nbsp;особенностях разработки.</p>
<p>Дизайн&nbsp;&mdash; сочные цвета, ломаные формы, пересекающиеся элементы. Обилие 3D-иллюстраций и&nbsp;объема. Визуал буквально дышит творчеством и&nbsp;амбициями.</p>
</div>
</div>

  <img src="/uploads/Tagline_04_20de48777e.jpg?updated_at=2023-03-30T07:29:25.318Z" alt="enter image description here">
  <img src="/uploads/Tagline_06_adab1f4df3.jpg?updated_at=2023-03-30T07:29:21.195Z" alt="enter image description here">
  <img src="/uploads/Tagline_07_5c157a80b8.jpg?updated_at=2023-03-30T07:29:23.252Z" alt="enter image description here">
  
 <div>
<h3>Смело и ярко</h3>
<div>
<p>Кто ЦА проекта? Школьники, молодежь. Их нужно захватить ярким визуалом, необычными формами, смелым сочетанием цветов. Звучит очевидно, но на деле не самая простая задачка. Удивить визуалом молодых людей сложно. И начали мы с деркзой цветовой гаммы, которая даже внутри команды вызвала немало споров (однако по итогу очень зашла заказчику и аудитории). Также мы решили добавить объема привычным предметам, сделать упор на 3D, чтобы вдохнуть в них жизнь, но при этом оставить в рамках виртуального пространства. </p>
</div>
</div>

 <img src="/uploads/Tagline_08_d26b6eefcc.jpg?updated_at=2023-03-30T07:29:20.589Z" alt="enter image description here">
<div>
<h3>Родная разработка</h3>
<div>
<p>Этот проект стал большим испытанием для нашей команды разработки. Попробуем просто перечислить то, что было проделано, и ничего не забыть: html, css, js, typescript, react, spa, seo, devops, docker, kubernetes, ci/cd. Да, это и frontend, и backend, да еще и с собственной командой тестирования. Опыт колоссальный, результат стоящий. </p>
</div>
</div>

 <img src="/uploads/Tagline_09_da0340955a.jpg?updated_at=2023-03-30T07:29:23.871Z" alt="enter image description here">
<div>
<h3>Версия для людей с ограниченными возможностями</h3>
<div>
<p>Мы&nbsp;также адаптировали сайт в&nbsp;соответствии с&nbsp;ГОСТ Р&nbsp;52872-2019 &laquo;Национальный стандарт Российской Федерации&raquo;. Сайт подходит для пользования слабовидящими людьми&nbsp;&mdash; есть функционал синтеза речи, изменения размера шрифта, увеличения контрастности. И&nbsp;при этом функциональностью контента можно управлять через интерфейс клавиатуры без ограничений по&nbsp;времени нажатия на&nbsp;клавишу.</p>
</div>
</div>

 <img src="/uploads/Tagline_02_677e7d1c7a.jpg?updated_at=2023-03-30T07:29:23.956Z" alt="enter image description here">
<div>
<h3>Ачивки</h3>
<div>
<p>На проекте очень разветвленная система ачивок, все-таки нужно подбадривать юных творцов. Поэтому мы вложили немало сил в систему поощрения. Тут речь не только о визуале, но и об идеях. Каждая ачивка продумывалась исходя из текущих трендов, чтобы порадовать легким юмором и не отбить мотивацию пользоваться платформой дальше. </p>
</div>
</div>
 <img src="/uploads/Tagline_03_66799d233b.jpg?updated_at=2023-03-30T07:29:18.408Z" alt="enter image description here">
 <div>
 <h3>Иконки, куда же без них</h3>
<div>
<p>Иконок потребовалось много, поэтому мы их рисовали, рисовали и снова рисовали. Несколько иллюстраторов постоянно трудились, чтобы в едином стиле воспроизвести множество считываемых образов. </p>
</div>
</div>
<img src="/uploads/Tagline_05_e8e59dca6b.jpg?updated_at=2023-03-30T07:29:24.365Z" alt="enter image description here">
<div>
<h3>Как итог</h3>
<div>
<p>Это проект, которым мы гордимся от и до. Мы вложили в него очень много сил и задействовали в проработке все отделы Mish: продуктовый, коммуникационный, отдел разработки и тестирования. У него клёвый и самобытные брендинг, интерфейс внешний и внутренний, иллюстрации, разработка и тестирование. При этом мы продолжаем работать над следующим сезоном проекта, оказывая полную продуктовую поддержку и подкидывая новые идеи к реализации. </p>
</div>
<br>
<br>
<h4>Совместно с <a href="https://metacorp.gg/">Metacorp</a></h5>

Начни игру.jpg

Начни Игру

Начни Игру.jpg

PickselMocap.mp4

Веб-кабинет владельца магазина, приложение и сайт для покупателей сервиса покупок, работающего по стандартам Open Banking.

<img src="/uploads/Brend_1_b2c16f78d5.jpg?updated_at=2023-04-05T09:57:51.104Z" alt="enter image description here">
<video
src="/uploads/tagline_animation01_picksell_aca725850c.mp4"
loop
autoplay
muted
playsinline></video>
</div>
<div>
<h3>Единая корзина покупок</h3>
<p>Когда клиент пришел к нам с этим проектом, наши арт-директора прыгали от радости: сложный кейс, не имеющий аналогов, где одна только логика чего стоит. Грубо говоря, для покупателя это быстрый шопинг, а для магазина новый канал продаж. Сервис создает полный цикл магазин-клиент, где пользователи приложения сканируют QR-коды товаров различных магазинов, а приложение формируют для них единую корзину покупок. Пользователи платят напрямую со&nbsp;своего счета магазину, что позволяет экономить бизнесу на&nbsp;эквайринге и&nbsp;обеспечивает безопасность переводов по&nbsp;единому европейскому формату. </p>
</div>
<video
src="/uploads/tagline_animation02_picksell_d0b30c9b03.mp4"
loop
autoplay
muted
playsinline></video>
</div>
  <img src="/uploads/prilka_1_3db4c40648.jpg?updated_at=2023-04-05T09:58:28.785Z" alt="enter image description here">
  <img src="/uploads/prilka_2_14395fbc68.jpg?updated_at=2023-04-05T09:58:56.386Z" alt="enter image description here">

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

  <img src="/uploads/Adminka_1_f5c9ba7351.jpg?updated_at=2023-04-05T09:55:22.412Z" alt="enter image description here">
  <img src="/uploads/Adminka_2_72de15d20c.jpg?updated_at=2023-04-05T09:54:59.867Z" alt="enter image description here">

<div>
<h3>Система QR-кодов</h3>
<div>
<p>Далее встроили в&nbsp;интерфейс канал коммуникации между клиентом и&nbsp;магазином, следуя стандартам безопасности и&nbsp;открытости: Picksell предоставляет все необходимые данные покупателя магазину, но бережно их хранит, а покупатель управляет своими персональными данными. В общем, всем сильно проще следовать директиве GDPR (без нее никуда).</p>
<p>Также создали систему QR-кодов, с&nbsp;помощью которой покупатели могут набирать единую корзину товаров из&nbsp;различных магазинов, чтобы быстро и&nbsp;легко оформить покупку. А еще это простой и&nbsp;удобный способ продажи товара с заранее заложенным агентским вознаграждением, например, для блогеров.</p>
</div>
</div>

  <img src="/uploads/veb_pokupatelya_1_257d05082b.jpg?updated_at=2023-04-05T09:57:51.128Z" alt="enter image description here">
  <img src="/uploads/veb_pokupatelya_2_1e2c28b857.jpg?updated_at=2023-04-05T09:55:40.777Z" alt="enter image description here">

 <div>
 <h3>Инструменты магазина</h3>
 <p>Мы&nbsp;продумали и&nbsp;отобразили в&nbsp;интерфейсе разные варианты доставки товаров покупателям, а&nbsp;также интегрировали полную аналитику продаж и&nbsp;информацию о&nbsp;складских остатках в&nbsp;личный кабинет магазина.</p>
 </div>
  <img src="/uploads/Lending_3_765ce761ec.jpg?updated_at=2023-04-05T09:59:34.716Z" alt="enter image description here">
<div>
<h3>Коммуникации</h3>
<div>
  <p>А что там по маркетинговой коммуникации? В ход пошли как классические инструменты (персональные скидки подписчикам магазинов, снижение цены на залежавшиеся корзинах товары), так и более современные и нетипичные для Европы — QR-коды.</p>
  <p>Для клиентов создали комфортное пространство, где они могут планировать свои покупки, делиться товарами, делать списки, дарить подарки в системе, а также видеть подробный анализ своих расходов.</p>
  <p>В качестве промоматериалов мы создали несколько лендингов, где доступно и наглядно объяснили суть платформы Picksell. </p>
  </div>
</div>

  <img src="/uploads/Lending_2_4bf729d939.jpg?updated_at=2023-04-05T09:54:59.860Z" alt="enter image description here">

<div>
<h3>Идеальная экосистема</h3>
<div>
<p>Всего за&nbsp;полгода мы&nbsp;разработали уникальную экосистему, предлагающую набор сервисов для работы с&nbsp;заказами, покупателями и&nbsp;логистикой, а также удобную платформу для покупок, переосмысляющую концепцию шопинга.</p>
<p>Самым сложным в&nbsp;нашей работе было абстрагироваться от&nbsp;существующих маркетплейсов и&nbsp;разработать по-настоящему работающий инструмент, не&nbsp;создающий конкуренции между магазинами. Но нам это удалось. Была проделана очень внушительная работа, которая стала для нас большим испытанием, но результат того стоит.</p>
</div>
</div>
<video controls src="/uploads/2203_2_043d79ac11.mp4"></video>

Picksell.jpg

Picksell

Пиксель.jpg

Kaspersky.png

Сайт с модульными решениями для всех продуктов и активностей, связанных с KasperskyOS.

<video
src="/uploads/behance_kaspersky_animacziya_1_abf35a75ca.mp4"
loop
autoplay
muted
playsinline></video>
</div>
<div>
<h3>Безопасное будущее</h3>
<p>Решения на&nbsp;основе операционной системы KasperskyOS предназначены для разных отраслей (умный город, транспортная инфраструктура, госучреждения, индустриальная автоматизация) и&nbsp;содержат в&nbsp;себе технологии KasperskyOS (кибериммунитет, микроядро, гибкая система безопасности). Эти решения используются повсеместно для построения надежных IT-инфраструктур: интернет вещей, управление виртуальными рабочими местами, ПО&nbsp;для умных автомобилей и&nbsp;т.д.</p></div>

  <img src="/uploads/2_54adf5e916.jpg?updated_at=2023-03-31T15:07:58.027Z" alt="enter image description here">
<div>
<h3>Переосмысление</h3>
<div>
<p>Мы&nbsp;предложили клиенту дизайн сайта в&nbsp;зелено-фиолетово-голубых тонах, поскольку основной цвет бренда — холодный зеленый. Здесь прямая ассоциация с высокими технологиями и будущим.</p>
<p>Так как сайт предназначен для b2b-аудитории и представителей гос. органов, важно было, чтобы ничто не&nbsp;отвлекало пользователей от&nbsp;чтения информации. Визуально сайт выглядит стильно, современно, но&nbsp;в&nbsp;то&nbsp;же время сдержанно, с&nbsp;большим количеством &laquo;воздуха.</p>
</div>
</div>

  <img src="/uploads/3_11269287f4.jpg?updated_at=2023-03-31T15:07:58.396Z" alt="enter image description here">
<div>
<h3>Главная страница</h3>
 <div><p>Главная страница сайта витринная. Она содержит основной промо-блок (с&nbsp;опциональным функционалом &laquo;карусели&raquo;) и&nbsp;опцию быстрой связи с&nbsp;командой по&nbsp;техническим вопросам.</p>
  <p>Решения на&nbsp;основе KasperskyOS можно приобрести только через партнеров, для чего и&nbsp;был создан отдельный раздел на&nbsp;сайте.</p>
  <p>Контент для сайта создавался параллельно с&nbsp;работой над версткой, а&nbsp;иногда и&nbsp;специально под дизайн.</p></div>
</div>

  <img src="/uploads/4_b8e9d56ee0.jpg?updated_at=2023-03-31T15:07:58.409Z" alt="enter image description here">
  <img src="/uploads/5_138f2823c8.jpg?updated_at=2023-03-31T15:07:57.426Z" alt="enter image description here">
  <img src="/uploads/6_f1d6590503.jpg?updated_at=2023-03-31T15:07:57.629Z" alt="enter image description here">
  
<div>
<h3>Модульность</h3>
<p>Так как разработчики KasperskyOS планируют выпускать в&nbsp;будущем новые решения, то&nbsp;модульность и&nbsp;простота в&nbsp;генерации новых страниц и&nbsp;разделов изначально была заложена при разработке дизайна сайта.</p>
</div>
  
  <img src="/uploads/7_e24cbee64e.jpg?updated_at=2023-03-31T15:07:58.561Z" alt="enter image description here">

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


KasperskyOS

8 Mocap quad_00.png

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

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

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

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


8 Mocap gorisontal_00.png

Восьмёрка

МСТ.png

Редизайн для Fenix+ 3 — универсального программного обеспечение для расчета пожарных рисков на гражданских и производственных объектах.

  <img src="/uploads/001_a85af274f3.jpeg?updated_at=2023-04-03T11:47:49.306Z" alt="enter image description here">
<div>
<h3>ПО для прогнозирования рисков</h3>
<p>Fenix+ 3 — это универсальное программное обеспечение для расчета пожарных рисков на гражданских и производственных объектах, а также для расчета противопожарных расстояний между зданиями и сооружениями. Это очень важное для организаций ПО, которое позволяет независимо провести моделирование эвакуации людей и динамики развития пожара.</p>
</div>

  <img src="/uploads/002_22601a4fd7.jpg?updated_at=2023-04-03T11:47:52.238Z" alt="enter image description here">
  <div>
<h3>Интерфейс</h3>
<p>Изначально у&nbsp;клиента уже была первая версия проекта на&nbsp;стандартных Windows компонентах, уже был работающий продукт и&nbsp;люди, которые им&nbsp;пользовались. Клиент хотел сделать проект более современным и&nbsp;попробовать взглянуть на&nbsp;него не&nbsp;внутренней командой, а&nbsp;свежим взглядом. Поэтому изначальной задачей было подправить визуал. Но&nbsp;в&nbsp;ходе работы мы&nbsp;постепенно находили новые проблемные места и&nbsp;начали предлагать перепроектирование рабочей области так, чтобы ключевые элементы с&nbsp;одной стороны оставались на&nbsp;тех&nbsp;же местах, но&nbsp;с&nbsp;обновленной логикой и&nbsp;поведением.</p>
</div>
  <img src="/uploads/003_9a6c566e01.jpg?updated_at=2023-04-03T11:47:51.631Z" alt="enter image description here">
<div>
<h3>Глубокий анализ</h3>
  <p>Мы&nbsp;предложили клиенту несколько вариантов перепланировки основной рабочей области главного экрана так, чтобы функционал можно было дополнять и&nbsp;безболезненно расширять без последующего редизайна. В&nbsp;ходе работы мы&nbsp;подробно анализировали интерфейсы профессионального&nbsp;ПО как для 3D&nbsp;моделирования, так и&nbsp;привычные программы для дизайнеров, чтобы понять подходы к&nbsp;расположению управляющих элементов на&nbsp;экране. Благодаря этому анализу нам удалось расположить рабочие панели, чтобы пользователь мог быстрее и&nbsp;эффективнее решать нужные ему задачи. При этом основные разделы остались на&nbsp;своих прежних местах, что позволило сохранить привычки текущих пользователей, но&nbsp;упростило новичкам освоение программы и&nbsp;использование отдельных модулей. </p>
</div>
  <img src="/uploads/004_12b42564ca.jpg?updated_at=2023-04-03T11:47:52.181Z" alt="enter image description here">
  <img src="/uploads/005_18aeb90891.jpg?updated_at=2023-04-03T11:47:51.765Z" alt="enter image description here">
<div>
<h3>Что в итоге?</h3>
  <p>В итоге был полностью переомыслен подход к дизайну и расположению элементов. Создали большой UI-Kit. Разработали более ста узкоспециализированных иконок, чтобы даже на&nbsp;компактных дисплеях их&nbsp;назначение было понятно без подписей. При этом переиспользовали наработки и в дальнейшем над редизайном связанных с Fenix+ 3 программ. </p>
</div>

МСТ.jpg

МСТ

Data-Track.png

На примере ПО для Абинского
металлургического завода

 <img src="/uploads/1_11_4f6b371f78.png" alt="enter image description here">
 <div>
<h3>Что же это такое?</h3>
<div>
<p>Data-Track — это MES (от англ. manufacturing execution system), т.е. система управления производственными процессами — специализированное прикладное программное обеспечение, предназначенное для решения задач синхронизации, координации, анализа и оптимизации выпуска продукции в рамках производства. MES-системы относятся к классу систем управления уровня цеха, но могут использоваться и для интегрированного управления производством на предприятии в целом.
</p>
</div>
</div>
  <img src="/uploads/2_f908d5038d.png" alt="enter image description here">
 <div>
<h3>Зачем же это нужно?</h3>
<div>
<p>Прежде всего, для систематизации и визуализации данных, выделении главного, поскольку в основе ПО лежат excel-таблицы, которые заложены во всех заводских процессах: планы производства, загрузка склада, перемещение материалов и т.д. А это значит, что требуется удобный интерфейс, ведь сотрудники работают подолгу с ним, иногда в условиях недостаточной освещенности.
</p>
</div>
</div>
  <img src="/uploads/3_ecfb833ed6.png" alt="enter image description here">
 <div>
<h3>Проблематика</h3>
<div>
<p>Еще перед началом работ вскрылось множество проблем, которые и подтолкнули нас к поиску наиболее оптимальных решений. Проблемы следующие: </p>
 <ul>
 <li>Много бумажного документооборота. Много процессов на производстве фиксируется только на бумаге. Их сложно отслеживать, хранить и передавать;</li>
 <li>Сложные условия на рабочих местах. Сотрудники работают подолгу с этим интерфейсом, иногда в условиях недостаточной освещенности; </li>
 <li>Много данных. Нет возможности быстро на одном экране увидеть ситуацию на производстве; </li>
 <li>Неактуальность. Как правило, для руководства доступны данные только за предыдущий день. Нет возможности следить за производством в реальном времени; </li>
 <li>Скорость работы. Данные между отделами передаются в течение нескольких суток; </li>
</ul>

</p>
</div>
</div>
  <img src="/uploads/4_e8d08a61ed.png" alt="enter image description here">
 <div>
<h3>Что же мы сделали</h3>
<div>
<p>В итоге мы разработали современный интерфейс в Figma. Также создали дизайн-систему, позволяющую быстро собирать любые требуемые интерфейсы.
Использовали следующие цифровые технологии и решения: </p>
 <ul>
 <li>HTML/CSS/JS;</li>
 <li>React (CRA);</li>
 <li>Storybook;</li>
 <li>Цифровой двойник;</li>
 <li>Датчики и камеры.</li>
</ul>

</p>
</div>
</div>
  <img src="/uploads/5_ce5fae8f9c.png" alt="enter image description here">
 <div>
 <h3>Технологическая независимость</h3>
<div>
<p>Одно из преимуществ данного ПО — технологическая независимость, то есть используются открытые технологии на базе open-source. Исходный код таких программ доступен для просмотра, изучения и изменения, что позволяет убедиться в отсутствии уязвимостей и неприемлемых для пользователя функций (к примеру, скрытого слежения за пользователем программы), принять участие в доработке само́й открытой программы, использовать код для создания новых программ и исправления в них ошибок.
</p>
</div>
<br>
<br>
<h4>Совместно с компанией <a href="https://dc.ru/">ДАТА-ЦЕНТР Автоматика</a></h5>

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

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

hello@mish.design

Москва

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