Дизайн для всех школ и детских садов Перми

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

Клиент

Министерство образования г. Перми

Задача

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

За разработку CMS и верстку отвечали другие подрядчики. Моей зоной ответственности был визуал и презентация решений перед ЛПРами, в том числе переговоры и защита проектных решений перед представителями минобразования.

Список работ

География

Пермь, Россия

Сфера

Образование/госсектор

Срок реализации

4 недели

Команда

2 дизайнера (визуал+ исследования), CMS-команда (отдельно)

>70%

Пользователя отметили упрощение навигации (опрос)

на 40%

Ускорилось восприятие ключевой информации (тесты, глубинки)

>200

Школ и детских садов в очереди на внедрение дизайн-системы

Процесс

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

Параллельно я провела исследование контекста и ограничений:

Чтобы найти опору для визуала, я провела опросы среди родителей.

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

По результатам интервью и опросов я выделила пять характеристик, которые чаще всего звучали как важные при выборе школы и эти маркеры легли в основу визуального кода, с помощью которого школа может рассказать о себе.

Prioritization

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

Design

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

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

Delivery

Разработка типографической системы, проектирование универсальных блоков, адаптивность

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

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

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

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

После финального согласования я подготовила дизайн к передаче, что было сделано:

Подготовка полного пакета материалов для разработки

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

Передача дизайн-системы команде разработки

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

Iteration

Через несколько месяцев после запуска пилотных сайтов и внедрения дизайн-системы ко мне вернулись за авторским надзором.

• Я провела подробный аудит созданных страниц, составила детальный отчёт на 85 страниц, где классифицировала ошибки по уровню критичности — красный, жёлтый и зелёный уровни и по характеру ошибок: использование блока, верстка, взаимодействие.
• В двух наиболее проблемных блоках были внесены доработки и переработки для улучшения их применимости на практике, еще один блок был доделан, поскольку он появился в нормативной системе уже после передачи дизайна.
• Даны дополнительные рекомендации для команд школ по корректному использованию блоков и дальнейшему расширению дизайн-системы.

Результат

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