РУКОВОДСТВО ПО СТИЛЯМ (СТАЙЛ-ГАЙД)
Что это? Зачем нужно? Что содержит? (длиннопост)
Привет 👋🏻
Как часто вы забывали отрисовать какое-либо состояние кнопки или поля ввода, а потом смотрели на сайт и понимали, что он отличается от вашего макета?
Я наступал на эти грабли постоянно. Да и сейчас иногда попадаюсь в эту ловушку, особенно, когда нужно быстро затестить идеи.
Вот накидываешь прототип, естественно без создания компонентов и привязки к стилям, ведь нужно же быстро. Затем вносишь правки и плавно переходишь к дизайну. Делаешь несколько страниц, и вроде бы все хорошо.
И вот только сейчас начинаешь замечать, что на некоторых страницах одна и та же кнопка немного отличается. Где-то сбились настройки текста. А вот здесь использованы разные иконки. И всё это надо править на каждой странице вручную. Особенный кайф, когда количество страниц в макете перевалило за 50 😰
В этот момент я ненавижу весь мир, но больше всего злюсь на себя 🤬 Потому что опять забыл/забил и не сделал стайл-гайд с самого начала.
➡ Что такое руководство по стилям (стайл-гайд)?
Это файл или отдельная страница в макете, которая содержит все повторяющиеся элементы сайта (кнопки, ссылки, поля ввода, заголовки и т.д.). Иными словами — это главный документ, который задает вид будущего сайта.
➡ Зачем он нужен?
1⃣ Чтобы выдержать единый стиль всего проекта, и по окончанию разработки получить именно тот вид сайта, который вы задумывали.
2⃣ Чтобы упростить процесс дальнейшей разработки, и снять большинство вопросов от верстальщика и программиста.
3⃣ Чтобы не было разночтений. В дополнение к предыдущему пункту.
4⃣ Чтобы быстро вносить изменения в дальнейшем.
➡ Кому он нужен?
Дизайнерам, верстальщикам, программистам.
➡ Что в него входит?
🔹 Цветовая схема сайта
🔹 Шрифты, их начертания и размеры
🔹 Кнопки, ссылки, вкладки, поля ввода, иконки и т.д.
🔹 Сетка и базовые отступы
🔹 Указаны все состояния каждого элемента при взаимодействии с пользователем (при наведении, клике, загрузке)
🔹 Попапы, всплывающие уведомления, сообщения об ошибках
🔹 Компоненты
➡ Как я это использую?
В самом начале проекта создаю страницу, куда выношу все повторяющиеся элементы и создаю из них компоненты. Такая автоматизация процесса позволяет в дальнейшем менять стили во всём макете в два клика. Но об этом, позже расскажу в отдельном посте.
➡ Быстрый тест: «Как понять, что вам нужен стайл-гайд?»
Если в макете, вы использовали один элемент два и более раз, то вынесите его в руководство по стилям. Даже если оно будет совсем небольшое и включать пару кнопок, несколько заголовков и цветов. Просто сделайте это. На разработку уйдет немного времени, но в перспективе поможет сэкономить гораздо больше.
На этом всё.
❓ А вы используете стайл-гайды? Если нет, то почему?
