Чек-лист по стайлгайду проекта

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

Что должен содержать стайлгайд?

Конечно же, в первую очередь нужен сам макет в формате .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/

Понравилось? Поделись этим с другими!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.