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_Skosyrskaya_sajt_f2218ecdfd.jpg

medium_Skosyrskaya_sajt_f2218ecdfd.jpg

small_Skosyrskaya_sajt_f2218ecdfd.jpg

thumbnail_Skosyrskaya_sajt_f2218ecdfd.jpg

Skosyrskaya_sajt_f2218ecdfd.jpg

small_mish_Logo.jpg

thumbnail_mish_Logo.jpg

mish_Logo.jpg

Frontend

React

JavaScript

TypeScript

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>

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

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

hello@mish.design

Москва

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