Контекст
Яндекс Практикум — центр обучения IT-профессиям. Особенность Практикума — асинхронный формат и упор на практические навыки. Студенты знакомятся с материалом в удобное для себя время и тут же практикуются в тренажёре.
Тренажёр — миниатюрная веб-страница, встроенная в текст урока, в которую студент должен дописать недостающий код.
VЁRSTKA — курс Практикума по HTML и CSS вёрстке, в работе над которым я участвовала как продуктовый дизайнер.
Задача
У курсов Практикума мощная визуальная идентичность: иллюстрации, инфографика и увлекательный нарратив — всё работает на вовлечение студентов. Тренажёр — место, где код встречается с интерфейсом — должен выглядеть не как чужой элемент, а органично вписываться в эту эстетику.
Над написанием курса VЁRSTKA работали 4 разработчика с разным уровнем — от джуна до сениора. Моей задачей было разработать дизайн-систему, которая обеспечит единообразие визуального оформления тренажёров и их соответствие стилю всего продукта, несмотря на разницу в опыте разработчиков.
Решение
Инструментов на старте у меня было только два: визуальный референс от ведущего иллюстратора и собственный опыт прохождения курсов по веб-вёрстке, давший мне представление о том, как устроено обучение в тренировочной среде, т.е. что именно я буду дизайнить.
Я выделила ключевые элементы изобразительного языка, чтобы опираться на них:
- контраст тонкой линии и жирного текста;
- плотная компоновка элементов;
- яркие фирменные цвета;
- умышленное нарушение правил.
Также я учла ограничения. Особенность тренировочной среды в том, что это не готовый веб-сайт, а анатомическое пособие по веб-разработке. Код каждого урока преподаватель собирает вручную, оставляя в нём лакуны, которые потом будет заполнять студент. Поэтому код должен быть предельно простым и объяснимым.
В рамках этого стиля и ограничений я разработала и сверстала базовые веб-элементы — от заголовков до форм, — чтобы авторы курса могли быстро собирать тренажёры из готовых «кирпичиков».
Результат
Моя дизайн-система позволила интегрировать тренажёры бесшовно в общую визуальную экосистему курса, поддерживая и усиливая его нарратив. Благодаря ей:
- курс вышел в срок — за 20 месяцев;
- работа 4 разработчиков с разным опытом была скоординирована и едина;
- появилась база для дальнейшей поддержки и масштабирования курса.
Команда
Тимлид, автор уроков — Александр Патлух
Авторы уроков:
- Алёна Батицкая
- Алексей Казаков
- Наталия Рыжова
Ведущий иллюстратор — Анна Римша
Нарративный директор — Елизавета Золотухина