Студия создания сайтов Abordazh Киев
Цветовая палитра является одним из наиболее важных аспектов дизайн-системы. Дизайнеры могут использовать их для создания визуальной иерархии, определения эмоций и создания единого внешнего вида. В этой статье мы обсудим создание цветовой палитры для вашей дизайн-системы. Мы также дадим несколько советов по выбору цветов, которые хорошо сочетаются друг с другом. Давайте начнем!
Цветовая палитра — это набор цветов, используемых вместе в дизайне. Цветовая палитра — это группа цветов, которые хорошо сочетаются друг с другом, чтобы обеспечить единообразие использования цвета в ваших проектах и создать согласованность в том, как вы используете цвет в продуктах.
Создание цветовой палитры помогает связать все воедино и создает гармонию в цветах, которые вы используете. Дизайнеры используют цветовые палитры для создания визуальной иерархии, определения эмоций и создания единого внешнего вида. Цветовая палитра обычно состоит из трех-пяти цветов, хотя может быть и больше.
Звуковая цветовая палитра должна:
Когда все элементы вашего дизайна используют правильные цвета, они будут выглядеть более профессионально и изысканно. Эта сплоченность является конечной целью системы дизайна, а палитра определенных цветов бренда обеспечивает согласованность.
Палитры могут сделать вашу работу более привлекательной с эстетической точки зрения, но они также помогут вам работать более продуктивно. Не было бы проще, если бы все в вашей команде согласились с языком дизайна?
Это помогает иметь определенную цветовую палитру при работе с другими дизайнерами или разработчиками. Они могут легко увидеть, какие цвета использовать при создании новых дизайнов или добавлении к существующим. Подумайте о том, насколько более масштабируемым станет ваш дизайн с единым источником достоверной информации о выборе цвета.
Давайте посмотрим, как создать цветовую палитру для вашей дизайн-системы. Создание цветовых палитр не должно быть пугающим процессом. Выберите тон и атмосферу, которые вы хотите для своего дизайна, и оттуда все становится проще.
Тем не менее, вы часто можете обнаружить, что не знаете, с чего начать. Мы все были там. К счастью, мы создали это руководство из 11 шагов, чтобы помочь вам сориентироваться в дизайне цветовой палитры.
Создание эффективной цветовой палитры опирается на одну из самых распространенных ментальных моделей: использование того, что у вас уже есть (или что вы можете легко получить), для получения неизвестного (или того, чего у вас нет).
В данном случае это ваши базовые цвета. Базовые цвета относятся к наиболее часто используемым цветам в вашем пользовательском интерфейсе и тем, которые отличают ваш продукт.
Такие цвета задают тон дизайну, передают сообщение или вызывают эмоциональный или психологический отклик у вашей аудитории.
Некоторые из правил основных цветов включают в себя:
Вы часто найдете большинство этих цветов в дизайне логотипов вашего продукта, маркетинге и общем языке дизайна.
Разработать акцентные цвета намного проще, если вы определили основные цвета. Вы можете определить цвет акцента как вариацию основного цвета.
Обычной практикой является определение каждого акцентного цвета в трех оттенках для использования в различных ситуациях:
Вы используете цвета в своем интерфейсе, чтобы донести до аудитории дискретные вещи. Именно это имеют в виду дизайнеры, когда говорят о семантических цветах, выделяющих важную информацию. Например, вы можете выбрать:
Вот несколько вариантов цветовой схемы для вас в следующий раз, когда вы будете создавать расширенные палитры:
Соглашение об именах поможет вам собрать всех ваших дизайнеров и разработчиков на одной странице и убедиться, что они говорят на одном языке дизайна.
Выбирая соглашение об именах для своей цветовой палитры, вы избалованы выбором.
Вы можете использовать абстрактные имена, такие как bx7300, но некоторые распространенные подходы включают выбор фактических имен цветов (например, синий) или пронумерованных имен, таких как 07000.
То, что вы можете называть свои цвета как угодно, не означает, что вы должны это делать. Вам лучше использовать стандартизированную систему именования, которую легко понять.
Вот некоторые из правил соглашения об именах:
Вы никогда не ошибетесь, выбрав функциональное название для своей цветовой палитры. Это названия, которые дают назначение цвета, например, основной зеленый.
Вооружившись представлением о ваших основных и акцентных цветах, вы можете продолжить и проверить доступность этих цветов.
Пока вы это делаете, убедитесь, что ваши новые цвета совпадают, и замените или объедините цвета, которые вы используете в своем текущем пользовательском интерфейсе.
То, что у вас есть сейчас, — это просто набор основных и акцентных цветов в вашей палитре. Вам еще предстоит решить, что куда.
Ваш следующий логический шаг — назначить каждый из этих аспектов вашей цветовой палитры глобальным элементам пользовательского интерфейса. Сюда могут входить:
У вас есть цветовая палитра. Теперь вам нужно реализовать его в вашей цветовой системе CSS. Это поможет обеспечить согласованное применение цветов во всем интерфейсе вашего продукта.
Большинство дизайнеров сегодня используют смесь шестнадцатеричных значений, также известных как шестнадцатеричные коды, для определения цветовых палитр.
Вы можете сделать это без усилий, используя свой список цветовых переменных с препроцессором CSS.
После того, как все ваши цвета настроены как переменные, вы можете использовать их в своих файлах CSS, вызывая имя переменной. Это дает дополнительное преимущество, позволяя легко менять цвета глобально, если возникнет такая необходимость.
Как новые цвета, которые вы выбрали, влияют на существующий интерфейс?
Вы, без сомнения, примеряли палитру на размер в макетах дизайна, но ничто не сравнится с реальным использованием для поиска точек улучшения.
Вы, скорее всего, поймете, где цвета слишком нечитаемы или слишком яркие, или когда контрастность ваших кнопок неправильная, когда вы поглощаете реальную информацию, а не замалчиваете Lorem Ipsum.
Есть только один способ выяснить это — проверить влияние изменений, внесенных вами в существующий интерфейс.
Запустите среду разработки и дайте вашей палитре надежное применение в реальном мире. Ответы на следующие вопросы помогут:
После введения новой цветовой палитры в интерфейс убедитесь, что эта новая цветовая палитра обеспечивает достаточную контрастность для доступности.
Мы можем сделать это, проверив, что элементы нашего пользовательского интерфейса имеют достаточные показатели контрастности, как это регулируется Руководством по доступности веб-контента.
Самый простой способ — использовать плагин в выбранном вами инструменте дизайна пользовательского интерфейса. Контраст для Figma — один из примеров. Stark — это более полнофункциональная платформа для создания специальных возможностей, которая предлагает плагины для Figma, Adobe XD и Sketch. Он предлагает проверки контрастности на бесплатном плане.
Если вы работали над этим проектом самостоятельно, вам придется представить его другим дизайнерам продукта где-то в будущем.
Это можно сделать несколькими способами, но самое главное — своевременно и часто сообщать о своих дизайнерских решениях.
Отличный способ сделать это — написать короткую запись в блоге или создать скринкаст, в котором рассказывается о новых цветах, о том, как они были выбраны и как их следует использовать.
На этом этапе ваша цветовая палитра созрела для представления другим участникам процесса проектирования, таким как ваши коллеги, члены команды, партнеры или клиенты.
Две головы лучше, чем одна, и дизайн не исключение. Не бойтесь получать идеи и предложения от заинтересованных сторон при выборе цветовой палитры.
Если вы разработали цветовую палитру самостоятельно, убедитесь, что вы представили ее своей команде и получили любые предложения от своих коллег.
Поздравляем, вы почти закончили. Однако, прежде чем вы уйдете, вам нужно сделать несколько последних штрихов, прежде чем ваша палитра будет готова.
Вам следует:
Следует помнить, что выбор цветовой палитры — это не наука, и любой, кто пытается продать вам одну единственную формулу, лжет.
Большую часть времени судить будет ваш глаз, а когда вы не можете ему доверять, у вас есть члены вашей команды для консультации.
Во время доработки ищите любые несоответствия, настройки или улучшения, которые вы можете внести.
