Контекст
Дока — open-source справочник по веб-технологиям, который развивается силами пользователей: они создают и дополняют статьи, поддерживая базу знаний актуальной.
Первичное наполнение справочника делала команда из 6 веб-разработчиков. Каждый автор писал статьи в своей манере, дополняя текст графикой и интерактивными примерами по своему усмотрению. Дизайна сайта в этот период ещё не существовало, как и единого подхода к написанию и оформлению статей.
Задача
Я присоединилась к команде из арт-директора, иллюстратора и литературного редактора в роли дизайнера-разработчика. Нам предстояло выработать стиль проекта, его tone of voice, и подготовить проект к запуску в формате open-source. Для этого нужно было решить следующие задачи:
- определить идею проекта и подобрать соответствующий визуальный стиль;
- упаковать выбранный стиль в дизайн-систему, с помощью которой авторы смогут самостоятельно создавать графику и примеры с минимальным участием дизайнеров;
- опубликовать дизайн-систему, чтобы ей могли пользоваться не только специалисты, но и пользователи проекта, среди которых есть джуны, дизайнеры, продакты и другие.
Анализ
Изучив наработки авторов, мы определили, что наполнение справочника состоит из контента четырёх типов:
- литературный текст самих статей;
- песочницы — демонстрация того, как описываемый в справочнике компонент выглядит и работает на практике;
- технические схемы — блок-схемы, диаграммы, таблицы;
- обложки статей, передающие настроение и идентичность.
Соответственно, дизайн-система должна была покрыть все эти элементы и связать их в единую визуальную и функциональную экосистему.
Процесс
Самым большим челленджем оказалось то, что дизайн-систему контентной графики нужно было начинать разрабатывать до того, как появился дизайн самого сайта-справочника. Это означало работу в стадии прототипов, то есть все наши наработки должны были быть подготовлены к тому, чтобы на финальном этапе быстро применить к ним изменения, согласующиеся с дизайном сайта, а не переделывать всё сначала.
Во многом это определило стилистику. Мы договорились для создания обложек, иллюстраций и песочниц следовать следующим принципам:
- использовать простейшие геометрические формы без дополнительного декорирования вроде рамок или теней;
- делать сплошные цветовые заливки без паттернов, текстур, градиентов и размытостей;
- ограничивать палитру тремя цветами в пределах одной обложки/иллюстрации/песочницы;
- использовать шрифтовую гарнитуру со свободной лицензией — Roboto.
Гарнитура Roboto была выбрана за визуальную нейтральность, обилие начертаний и доступность для использования, т.к. в будущем дизайн-систему предстояло открыть для контрибьюторов, то есть, любой человек должен будет иметь возможность использовать нужный шрифт.
Эти принципы позволили сделать оформление статей справочника визуально согласованным и единообразным:
Песочницы
Я владею навыками дизайнера и веб-разработчика одновременно, поэтому моей сферой ответственности были песочницы. Песочница в Доке это веб-страница, посвящённая описываемому в статье предмету. Моё понимание тем, о которых пишут разработчики, сильно облегчило задачу: я не только оформляла элементы веб-страниц, но и помогала разработчикам выразить идеи максимально понятно для читателя.
На подготовительном этапе я нарабатывала визуальную базу, оформляя веб-страницы одну за другой. Миновать этот этап было невозможно — тексты и примеры были разрознены по личным аккаунтам авторов, а весь контент хранился только в виде кода в репозитории на GitHub.
Накопив 20-30 дизайнов веб-страниц, код которых был полностью под моим контролем, я смогла проанализировать закономерности, согласовать внешний вид элементов с другими составляющими будущей дизайн-системы, и приступить к её созданию.
Результат моей работы предоставлялся в виде дизайна, HTML-разметки и CCS-кода, стоящих за этим дизайном:
Результат
Результатом работы команды стала система визуального оформления статей справочника, где дизайн технических схем, иллюстраций и песочниц согласуется как между собой, так и с дизайном сайта-платформы.
Дизайн-система песочниц оформлена в виде документации на GitHub, где дизайн элементов сопровождается сниппетами HTML, CSS и JS кода, которые каждый новый автор может скопировать в свой проект. При этом фреймворков в системе нет: код примеров сделан максимально дружелюбным для джуниоров, чтобы даже начинающий разработчик мог быстро понять, как всё работает. Это отражает ключевую ценность Доки — снижать порог входа в веб-разработку.
Дизайн-система схем представляет собой конструктор в Figma, сопровождающийся документацией и советами.
К запуску проекта нам удалось создать дизайн-систему контента, которая содержит:
- руководство по литературному стилю, включающее как языковые аспекты, так и tone of voice проекта;
- дизайн-систему примеров кода, включающую дизайн компонентов, кодовую базу и документацию;
- графический конструктор для создания схем в Figma, сопровождающийся инструкцией по использованию конструктора;
- уникальный стиль иллюстраций — единственный непубличный компонент дизайн-системы, потому что личный стиль иллюстратора — это ценность, которую нужно беречь.
В соответствии с дизайн-системой к запуску проекта было оформлено 300+ иллюстраций, схем и примеров.
Время на создание схем и примеров для статей сократилось с нескольких дней до нескольких часов.
В настоящее время дизайн-системой doka.guide пользуется 6 человек из редакции и 460+ внешних контрибьюторов.
Команда
Арт-директор, автор дизайн-системы графики — Валентина Смирнова
Продуктовый дизайнер, автор дизайн-системы примеров — Светлана Коробцева
Иллюстратор — Кира Кустова
Литературный редактор — Ольга Алексашенко