Google — один из самых узнаваемых брендов в мире, известный своей простой, чистой эстетикой дизайна. Ключевой частью визуальной идентичности Google является использование цвета, в частности, отчетливых оттенков синего, красного, желтого и зеленого, которые составляют его логотип и используются во всех его продуктах и услугах. Но каковы конкретные шестнадцатеричные цветовые коды этих цветов, особенно для кнопок и значков, которые можно найти в популярной поисковой системе Google и других приложениях?
Цветовая палитра Google развивалась с годами, но оттенки оставались в пределах постоянного диапазона. Оригинальный логотип Google, разработанный в 1998 году, в основном использовал синий, красный и желтый цвета. По словам дизайнеров, цвета были выбраны, чтобы представить доступность информации в Интернете (синий), активный характер поиска (красный) и радость от нахождения того, что вам нужно (желтый).
В 2013 году Google представил новый плоский минималистичный логотип, в котором были устранены тени. Эта итерация логотипа представила более яркие синий, красный, зеленый и желтый цвета. Зеленый был добавлен, чтобы отразить эволюцию Google в сторону более разнообразных услуг, выходящих за рамки только поиска.
В течение следующих нескольких лет Google выпустил обновленный брендинг и интерфейсы, которые слегка изменили цвета, сохранив их в тех же общих тонах. В настоящее время основные логотипы продуктов Google используют следующие шестнадцатеричные коды:
– Синий: #4285F4
– Красный: #EA4335
– Желтый: #FBBC05
– Зеленый: #34A853
Конкретные оттенки, используемые для кнопок и значков Google, немного отличаются от цветов в его логотипах. Элементы интерфейса, как правило, используют менее насыщенные версии основных цветов бренда, чтобы поддерживать удобство использования на разных экранах, в разных условиях освещения и с учетом потребностей доступности.
Вот некоторые из наиболее часто используемых шестнадцатеричных кодов для кнопок продуктов Google:
| Элемент | Шестнадцатеричный код |
|---|---|
| Кнопки поиска | #1a73e8 |
| Кнопки входа | #1a73e8 |
| Кнопки Google Assistant | #1a73e8 |
| Кнопки воспроизведения | #1a73e8 |
| Кнопки добавления | #1a73e8 |
| Значки меню и уведомлений | #5f6368 |
Как вы можете видеть, многие элементы интерфейса Google имеют один и тот же синий оттенок #1a73e8, включая кнопки поиска, входа и другие кнопки действий. Это обеспечивает единообразный опыт во всех продуктах.
Для неактивных значков меню и уведомлений Google использует холодный серый оттенок #5f6368, чтобы различать эти элементы, пока они не нажаты.
Интерфейсы Google не всегда использовали один и тот же синий цвет для кнопок и значков. Вот как менялся «цвет действия — синий» Google за последнее десятилетие:
– 2010: #16A0D3
– 2014: #4285F4
– 2016: #4285F4
– 2018: #1A73E8
В 2014 году Google перешла на тот же синий цвет #4285F4, который используется в ее логотипе. К 2018 году Google начала переходить на немного более темный синий цвет #1A73E8 для элементов интерфейса.
#4285F4 по-прежнему используется для некоторого брендинга, но #1A73E8 теперь является универсальным синим цветом действия для большинства продуктов Google.
Отличительный синий цвет Google не только функционален для дизайна интерфейса, но и ассоциируется с брендом Google. Дизайнеры, стремящиеся подражать чистой, простой эстетике Google, могут легко включить этот синий в свои собственные проекты.
Однако не просто копируйте #1a73e8 напрямую. Вот несколько советов по работе с синим цветом Google:
– Используйте его умеренно в качестве акцентного цвета для интерактивных элементов.
– Попробуйте немного более светлые или темные оттенки. Прямой #1a73e8 может быть подавляющим.
– Убедитесь, что он соответствует минимальным стандартам цветового контраста, особенно с белым текстом.
– Протестируйте на разных экранах, чтобы убедиться в доступности.
– Сочетайте с нейтральными серыми тонами, текстурированными фонами и белым пространством.
– Дополняйте цветами вашего собственного бренда.
Помимо культового синего, другие цвета помогают различать разнообразную линейку продуктов Google:
Google Maps: #1967d2 синий с #d1e877 зеленый
YouTube: #ff0000 красный с #282828 темно-серым
Gmail: #D14836 красный с #3c4043 темно-серым
Google Drive: #00897B зеленый
Google Calendar: #A79B8E бежевый
Google Docs/Sheets: #0F9D58 зеленый
Google Chrome: #FFCD40 желтый
Каждый продукт получает свою собственную цветовую обработку, при этом все еще ощущая связь через общие серые тона и белое пространство.
Тщательно разработанные интерфейсы Google полагаются на цвет для передачи функциональности, установления иерархии и поддержания идентичности бренда. Используя в первую очередь #1a73e8 «синий действия» для интерактивных элементов во всех продуктах, Google создает интуитивно понятную согласованность для пользователей.
Этот фирменный синий достаточно светлый для доступности, но при этом обеспечивает достаточный контраст. Он хорошо работает как со светлым, так и с темным фоном. Хотя не каждый дизайнер захочет сразу принять синий цвет Google, он дает уроки о том, как вдумчиво использовать цвет для упрощения и унификации многоплатформенных продуктов. Анализ и изучение тщательно отточенной палитры Google могут вывести на новый уровень любой визуальный дизайн.