Хранение текстовой документации
Дизайнерскую документацию мы разделим на 2 условные части: текстовую и компонентную.
Текстовая будет отвечать за сторителлинг. Здесь разместятся: принципы, брендбук, редполитика, гайдлайны компонентов, паттерны, различные регламенты и правила.
Для этого поднимем сайт используя концепцию Docs as Code в стеке: Markdown + Github + Docusaurus.
Почему так
Концепция соответствует нашему принципу технологичности:
Обеспечивает безопасное хранение документации: на тот случай если какой-то сервис будет закрыт, заблокирован или передумает с нами работать, мы легко сможем переехать на другое решения.
Гибкий формат хранения данных: Markdown один из самых популярный языков разметки и легко можно будет найти или написать свой интерпретатор данных, а это обеспечивает независимость от каких-либо программ или сервисов.
Низкий порог входа: у Markdown простой синтаксис, ему легко обучить коллег, которые будут работаться над проектом.
Это бесплатно: Docusaurus опенсорсный, поэтому инфраструктурная стоимость такого проекта будет низкой.
Все прелести гит: история изменений, ветвление, резервное копирование, совместная разработка и автоматизация.
Популярная практика: Мегафон, Контур.Гайды, Т-Банк, Material Design.
Подробнее про стек
Это текущий стек на большинстве моих текстовых проектах, но вы можете менять стек под себя в зависимости от условий, окружающего мира и умений.
Например, вместо Markdown можно использовать любой другой язык разметки, например reStructuredText или Asciidoc. Можно пойти дальше и использовать стандарт DITA, он гибче, но сложнее.
Вам может подойти любой гит, который вы используете в своей компании. Например, неплохо подойдет Gitlab, особенно, если он развернут локально. Это обеспечит вам дополнительную безопасность, независимость и стабильность.
Вместо Docusaurus можно использовать любой другой генератор статических сайтов: Jekyll, Hugo, Gatsby, Next.js или Eleventy. Например, Eleventy, имеет высокую скорость сборки, поддерживает множество языков шаблонизации, гибко управляется через Front Matter.
Наполнение
Давайте чуть подробнее поговорим про наполнение.
Брендбук: описывает концепцию бренда, его миссию, ценности, целевую аудиторию и содержит руководство по фирменному стилю.
Редполитика: определяет правила написания и оформления текстов в компании. Например, Тинькофф-журнал или Контур.Гайды.
Гайдлайны компонентов: содержат какие-либо подробности о работе и правилах использования компонентов. Например, компонент Search в Material или Комбобокс в Контур.Гайдах.
Паттерны: содержат описание типовых сценариев и экранов. Чтобы каждый раз не проектировать однотипный сценарий, можно один раз его описать и переиспользовать в разных частях приложения. Например, печатные формы, письма, пустые состояния, просмотр документов, экран успеха, справочники стран, ЕГРЮЛ, ОКВЭД, организаций и т. д.
Различные регламенты и правила дизайн-сообщества: принципы дизайна, регламент проведения исследований, правила запроса метрик и данных, правила визуализации данных, принципы доступности, правила доступа к витринам компонентов и прочее-прочее.
Первые шаги
Со стеком мы определились, теперь давайте зарелизим наши принципы. Для этого сделаем несколько простых шагов: