Как давать наименования цвету в гайдлайне, чтобы было понятно

Суть проблемы

При разработке сложных проектов приходится все документировать, включая цвет. Но мало понимать, что это должно быть задокументировано, важно еще и понимать каким образом.

Для документирования цвета есть выбор между двумя системами. Давайте разберемся какие между ними отличия и какая подойдет для вашего проекта.

Я заметил, что эта система часто встречается у начинающих дизайнеров, я не исключение. Тоже с нее начинал.

Суть этой системы – один и тот-же цвет может быть применен к разным объектам. Например черный может быть как цветом текста, так и цветом кнопки. В этом методе мы фиксируем лишь сам цвет, а его назначение в гайде не прописывается.

В чем минусы:

Вообще этот принцип пришел из графического дизайна. Там фирменные цвета могут просто быть и как-то называться без привязки к объектам и это нормально.

Я тоже использовал этот метод пока в фигме не появились переменные – они то и расставили все на места. В переменных можно задать для одного параметра несколько значений, поэтому интуитивно невозможно задать название «черный» параметру, который может быть и белым и черным в зависимости от темы.

Здесь главным становится не цвет, а объект. Например чтобы прописать правила цветов для кнопки и текста, которые имеют один и тот-же цвет нужно прописать 2 одинаковых цвета, но с разными названиями. По началу это кажется бредом – зачем фиксировать одни и те-же параметры по несколько раз?

Дело в гибкости и удобстве использования. Здесь стоит оценивать систему не по простоте ее создания, а по простоте использования. Когда у вас в гайдлайне будут названия цветов привязанные к объектам вы станете быстрее принимать решения и если понадобится изменить цвет именно шрифта – вы сможете это сделать не трогая фон того-же цвета.

А так же при такой системе можно использовать переменные, где параметр цвет зависит от контекста. Если тема светлая, то текст черный, а если тема темная, то белый. И при этом нет путаницы с названиями. Объект «text» так и будет иметь название «text-color», но сам цвет изменится.

На небольших проектах можно использовать цвет-ориентированную систему. Называть цвета своими именами – синий, красный и т.д.

На крупных проектах, где легко запутаться нужно применять объект-ориентированную систему. У вас будут объекты с разными названиями, но с одинаковыми параметрами цвета. Это позволит более гибко вносить изменения и быстрее принимать решения по тому какой цвет применить к объекту.

Спасибо, что уделили время этому материалу! Если понравился, присоединяйтесь к телеграм каналу «Прагматичный дизайнер», там будет много авторской информации от дизайнера, который старается упростить и автоматизировать как можно больше в своей работе.