Стайлгайд, или руководство по стилям, — это файл, содержащий документацию ко всему проекту. Его наличие позволяет упростить процесс разработки сайта, облегчить работу верстальщику и программисту.
Что должен содержать стайлгайд?
Конечно же, в первую очередь нужен сам макет в формате .PSD, .SKETCH, .FIGMA, .XD.
1. Цветовая схема
Описание всех используемых цветов в проекте.
2. Типографика
- Информация об используемых шрифтах, их начертаниях. Лучше с исходниками (.OFT, .TTF, .EOT, .WOFF).
- Заголовки — все виды заголовков с размерами, междустрочным интервалом и отступами.
- Абзацы, цитаты, списки.
3. Элементы форм
- Текстовые поля и описание их состояний: покой, фокус, ошибка.
- Выпадающие списки и описание их состояний.
- Checkbox и RadioButton и их состояния: активная, неактивная.
4. Используемые иконки
В отдельной папке собрать все необходимые для проекта иконки с уже нужным размером. В идеале если иконки будут в формате SVG, ну можно и в PNG.
5. Состояние кнопок и ссылок
Как и с формами, должны быть описаны их состояния при наведении, при нажатии, неактивный элемент, посещенная ссылка и обычное состояние.
6. Меню и его элементы
- Все уровни меню и их состояния.
- Меню при прокрутке — как будет меняться, изменения внутренних элементов, если таковые будут.
- Адаптивное меню.
7. Таблицы
8. Иллюстрации и картинки
Сгруппировать все графические иллюстрации и картинки, что используются на сайте, в папке.
Также стайлгайд может содержать описание диаграмм и графиков, если таковые используются на сайте.
Источник: https://www.instagram.com/kris_anfalova/
