Дизайн для всех школ и детских садов Перми
Типовой сайт для школ и детских садов, собранный из 13 универсальных блоков с гибкой вариативностью по запросу Министерства образования города Перми с возможностью визуально выделиться за счет четырех цветовых и графических решений, и через кастомные блоки.
а если вам надоело смотреть резюме, этот кейс можно прочитать в виде комикса
Клиент
Министерство образования г. Перми
Задача
На момент старта у учреждений были неунифицированные сайты — устаревшие, неудобные, визуально запутанные. Их нужно было привести их к единой системе: навигационно прозрачной, узнаваемой, визуально целостной. При этом важно было оставить заведениям возможность выделиться.
За разработку CMS и верстку отвечали другие подрядчики. Моей зоной ответственности был визуал и презентация решений перед ЛПРами, в том числе переговоры и защита проектных решений перед представителями минобразования.
Список работ
  • дизайн типовых блоков, из которых можно собрать любой сайт с адаптивами под 3 разрешения:
  • разработка решений для визуальной дифференциации;
  • руководство по использованию и расширению дизайн-кода;
  • авторский надзор: контроль за реализацией дизайна на реальных сайтах.
География
Пермь, Россия
Сфера
Образование/госсектор
Срок реализации
4 недели
Команда
2 дизайнера (визуал+ исследования), CMS-команда (отдельно)
>70%
Пользователя отметили упрощение навигации (опрос)
на 40%
Ускорилось восприятие ключевой информации (тесты, глубинки)
>200
Школ и детских садов в очереди на внедрение дизайн-системы
Процесс
Discovery
Я провела серию глубинных интервью с родителями школьников и детсадовцев, со старшими школьниками. Из глубинок были вычленены критерии, на которые ориентируются родители при принятии решения об обучении, основные сценарии при посещении сайтов, наиболее актуальные блоки.
Параллельно я провела исследование контекста и ограничений:
  • аудит текущих школьных и детсадовских сайтов, паттернов взаимодействия самой администрации с сайтом
  • изучила опыт Москвы, где был реализован похожий проект
Чтобы найти опору для визуала, я провела опросы среди родителей.

Мы рассматривали текущие школьные сайты и референсы, предложенные ЛПР-ами, проверяли эмоциональные ассоциации с цветами, формами, стилями.

По результатам интервью и опросов я выделила пять характеристик, которые чаще всего звучали как важные при выборе школы и эти маркеры легли в основу визуального кода, с помощью которого школа может рассказать о себе.
  • законодательные ограничения, например, приказ, регулирующий содержание сайтов государственных учреждений
  • реальную практику управления сайтами
Prioritization
Для успешной работы над дизайн-системой было важно определить, какие элементы и блоки нужно проектировать в первую очередь и точно отстаивать решения, а какие можно отложить или пойти на компромисс. Учитывая, что работа шла с Министерством образования, нужно было понимать и характер общения с ЛПР-ами: это люди, которым важно видеть, что они принимают решения, значит, им нужно дать возможность принимать решения в какой-либо части проекта, что означало в некоторых вопросах быть гибкой. Чтобы систематизировать этот процесс и управлять ресурсами, я использовала подход, основанный на матрице Value–Effort — оценке ценности и затрат на каждый элемент.
Design
После установочного созвона, на который я приходила уже с исследованиями аудитории и бенчмаркингом, можно было переходить к дизайну.
Было создано две основные цветовые палитры: для школ — яркая, смелая и амбициозная, для детсадов — более мягкая и плавная, дружелюбная, при этом перекликающаяся с цветовой схемой школ, всё на результатах опросов и глубинных интервью, а также с учётом психологии цвета и предпочтений целевой аудитории.
Для каждой цветовой палитры я разработала уникальные графические артефакты, абстракции — визуальные элементы, которые помогают создавать индивидуальность и поддерживать тематическую направленность школы.
Разработка цветовых решений и визуальных артефактов
Delivery
Разработка типографической системы, проектирование универсальных блоков, адаптивность

Для проекта был выбран шрифт Mulish: хорошая читабельность, дружелюбность. Разработаны правила для использования начертаний, кеглей, межстрочных интервалов.

Из-за специфики проекта сначала были спроектированы мелкие внутриблочные элементы — текстовые блоки, кнопки, теги и т.д., эти элементы объединялись в микроблоки, на базе микроблоков были построены полноценные дизайнерские блоки. Строились они так, чтобы могли свободно использоваться в любой последовательности без потери целостности дизайна.

Часть связанная с адаптивной работой проходила совместно с разработчиками, проектирующими CMS. Я попросила свести нас напрямую (что изначально не планировалось), чтобы можно было лучше понимать ограничения дизайна и их требования.

В процессе согласований разрабатывались и уточнялись отдельные блоки — меню, подвал, новостные блоки, различные варианты галерей и текстовых секций, списков документов, карты сайта и хлебных крошек.
После финального согласования я подготовила дизайн к передаче, что было сделано:

Подготовка полного пакета материалов для разработки
  • Были сформированы финальные макеты всех блоков, включая адаптивные версии под три разрешения.
  • Создан подробный UI KIT с атомарными элементами, токенами, микроблоками и полноценными блоками.
  • Разработано руководство по использованию цветовых схем, типографики, блоков и рекомендаций по контенту (так, чтобы его могли применять люди с разным уровнем технической подготовки).

Передача дизайн-системы команде разработки
  • Провела несколько созвонов с разработчиками для детального обсуждения реализации.
  • Организовали систему обратной связи и коммуникации для оперативного решения вопросов во время разработки.
Iteration
Через несколько месяцев после запуска пилотных сайтов и внедрения дизайн-системы ко мне вернулись за авторским надзором.

  • Я провела подробный аудит созданных страниц, составила детальный отчёт на 85 страниц, где классифицировала ошибки по уровню критичности — красный, жёлтый и зелёный уровни и по характеру ошибок: использование блока, верстка, взаимодействие.
  • В двух наиболее проблемных блоках были внесены доработки и переработки для улучшения их применимости на практике, еще один блок был доделан, поскольку он появился в нормативной системе уже после передачи дизайна.
  • Даны дополнительные рекомендации для команд школ по корректному использованию блоков и дальнейшему расширению дизайн-системы.
Результат
Результатом стал универсальный визуальный каркас для сайтов школ и детских садов Перми: 13 модульных блоков, 4 цветовых и графических темы для визуальной идентичности, гибкая система атомарного дизайна и подробная документация. Решения протестированы на пользователях, адаптированы под реальные ограничения и требования учреждений. Реализован авторский надзор и детальный аудит первых внедрений.
since 2020
Политика конфиденциальности
Техподдержка: helga.more@mail.ru
Сайт создан: