Как выбрать идеальную цветовую палитру и сочетание шрифтов

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

Представление бренда

Какой у вас бренд? Что это собой представляет? Какова его личность? Кто ваша целевая аудитория? Какие люди покупают ваши продукты или услуги? Ваши ключевые принципы дизайна должны помочь ответить на эти вопросы.

Минималист, максималист или «в самый раз»?

Обычно можно увидеть очень чистые и минималистичные интерфейсы, которые содержат только логотип компании и немного текста, что придает аккуратный и чистый вид, излучающий изысканность. Apple делает это лучше всего, экспериментируя с многочисленными шрифтами и макетами.

Обычно очень простые цветовые схемы смешиваются с серым, белым и большими областями негативного пространства. Но если вы продаете много вещей, максимизация площади экрана работает лучше — eBay и Amazon.com — отличные примеры. Цветовые палитры веб-сайтов просты, но доминирующие цвета исходят от продуктов.

Сезонность

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

Мудборды

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

Чтение сайтов

Сайты для чтения, такие как газеты, писательские сайты, блоги и другие, очень насыщены текстом. Большинство браузеров предоставляют режимы чтения «дзен», поэтому учтите и это — выбирайте только два-три шрифта или одно семейство шрифтов. Включите изображения и элементы дизайна, чтобы разбить длинные фрагменты текста.

Выбор идеальной цветовой палитры

Цвета передают больше, чем просто красоту и стиль — они также вызывают эмоциональные реакции у вашей аудитории; помните, что цветовая символика универсальна во всех культурах. Цвет — это лишь один из аспектов дизайна, на который стоит обратить внимание, и для веб-сайтов существует множество неотразимых цветовых палитр.

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

Цветовые схемы (комбинации цветовой палитры)

Цветовая схема объединяет несколько цветов из одной или нескольких цветовых палитр для достижения определенной цели дизайна и передачи определенного стиля, настроения или визуального сообщения. Вот некоторые примеры:

• Монохроматические цветовые схемы (один цвет) — меняйте оттенки, оттенки, тона и оттенки. Нейтральные цвета, такие как белый, серый или черный, расширяют палитру, создавая светлые и темные оттенки, чтобы не выглядеть плоскими.
• Нейтральная цветовая схема (ахроматические белые, серые и черные оттенки в сочетании с почти нейтральными оттенками, такими как бежевый, коричневый, кремовый и т. д.). Ненасыщенные цвета передают нейтральную эстетику, могут быть классическими и хорошо сочетаться с яркими цветами.
• Дополнительная цветовая схема (противоположные стороны цветового круга). Популярными являются синий и оранжевый, красный и зеленый, желтый и фиолетовый.
• Аналоговая цветовая схема (группа из трех цветов, расположенных рядом друг с другом в цветовом круге). Базовый оттенок и два соседних оттенка хорошо гармонируют, например, красные, розовые и оранжевые оттенки, передающие тему восхода или заката.
• Триадная цветовая схема (три цвета, расположенные на равном расстоянии друг от друга на цветовом круге). Примерами являются синий, красный и желтый как один набор, а также фиолетовый, зеленый и оранжевый как другой набор. Обязательно используйте оттенки и уменьшите насыщенность, чтобы избежать цветовых конфликтов.

Существует несколько онлайн-инструментов для создания цветовых палитр, и Coolors — один из популярных бесплатных сайтов. Это может помочь быстро и точно создавать цветовые палитры.

Источник: Coolors.co, 2023 г.

Проектирование для людей с дальтонизмом

Около 300 миллионов человек во всем мире страдают той или иной формой дальтонизма (в основном красно-зеленого). Это очень большая потенциальная клиентская база, которая может не видеть некоторые или большинство элементов вашего веб-сайта. Четыре основные формы красно-зеленой дальтонизма:

• Протанопия : оттенки красного незаметны и воспринимаются как черные; цвета воспринимаются как оттенки синего или золотого. Темно-коричневый путают с темными оттенками других цветов, таких как красный, оранжевый или зеленый.
• Дейтеранопия : Зелень незаметна; обычно видны синий и золотой цвета. Оттенки красного и зеленого воспринимаются взаимозаменяемо. Желтые и яркие оттенки зеленого выглядят одинаково.
• Протаномалия : красный цвет выглядит как темно-серый; все красные менее яркие.
• Дейтераномалия : наблюдайте в основном синие, желтые и вообще приглушенные цвета.

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

Инструменты специальных возможностей Adobe Color позволяют перетаскивать ползунки, чтобы получить правильные значения цвета. Вы также можете перетащить свою тему на веб-сайт, чтобы проверить текущие схемы палитры.

Методы сочетания шрифтов

Как учат во многих онлайн-программах по графическому дизайну, четырьмя фундаментальными принципами типографики являются контраст, пространство, иерархия и размер. Основная цель — сбалансировать удобочитаемость и стиль в вашем дизайне. Вот несколько ключевых идей по сочетанию шрифтов, которые вы можете попробовать:

• Поиграйте с легкими, обычными и жирными шрифтами (тот же шрифт).
• Комбинируйте разные семейства шрифтов и гарнитуры.
• Включите кернинг или интервал между отдельными буквами в слове, фразе или предложении.
• Используйте буквицы, в которых первая буква основного текста большая, часто стилизованная и открытая для любого дизайна. Это классический метод, используемый в старых книгах.
• Эстетика шрифта должна быть сбалансирована с общим дизайном.
• Сделайте некоторые области шрифта причудливыми или необычными, чтобы передать волнение или новизну, но сохраняйте простоту, если простота требуется!
• Включите шрифты CJK — китайские, японские и корейские шрифты для придания особого изящества. Проконсультируйтесь с носителем языка о тонких нюансах перевода.
• Используйте второстепенные шрифты, когда основной шрифт не имеет желаемого стиля или воздействия.

Вот некоторые примеры:

• Абриль Толстяк и Поппинс
• Алегрейя (жирный и обычный)
• Барлоу Конденсед и Монтсеррат
• Баклан Гарамонд и Проза Либре
• DM Serif Display и DM Sans
• Эпилог и кто угодно, компания Etcetera Type

• IBM Plex Sans Condensed и IBM Plex Sans
• Карла и Инконсолата
• Карла и Мерривезер
• Libre Baskerville (жирный и обычный)
• Libre Baskerville и Source Sans Pro
• «Лобстер-2» и сценарий «Каушан», автор: Impallari Type
• Монтсеррат и Хинд
• Нунито и ПТ Санс
• Нунито Санс (жирный и обычный)
• Освальд и Source Sans Pro

• Освальд и Source Serif Pro
• Playfair Display и Лато
• Дисплей Playfair и исходный код Sans Pro
• Кватроченто и Лора
• Кватроченто и Кватроченто без
• Зыбучие пески (жирный и обычный)
• Робото в сокращенном виде и Робото
• Stint Ultra Expanded и Pontano Sans
• Ультра и PT с засечками
• Работа Санс и Мерривезер
• Йесева Уан и Жозефин Санс

Инструменты для сопряжения шрифтов

1. Google Fonts — это обязательный к посещению сайт, где можно найти общие идеи по выбору сочетаний шрифтов. Все шрифты имеют открытый исходный код и могут использоваться бесплатно.
2. FontPair позволяет просматривать интерактивные пары шрифтов и любые шрифты из Googe Fonts, которые можно использовать бесплатно.

Разработайте свои шрифты

Почему бы просто не сделать свои шрифты? Apple перешла с Helvetica Neue на собственный шрифт под названием San Francisco, который им очень понравился. Бесплатный онлайн-инструмент — Birdfont с открытым исходным кодом — создавайте и тестируйте свои шрифты!

Цвет и шрифт прочь!

Вышеупомянутые методы вторичны только по отношению к сообщению и UX. Дизайн зависит от обратной связи и является итеративным: при A/B-тестировании на небольшой выборке пользователей и клиентов можно ожидать внесения некоторых изменений в дизайн. Используйте свое воображение и создайте путь!