Цветовая палитра в духе Airbnb
Палитра в духе Airbnb - яркий, ориентированный на фото вид маркетплейса: чистая белая база, тёплый коралловый основной цвет для действий и бирюзовый вторичный акцент для мелких выделений.
Посмотрите, как палитра в духе Airbnb выглядит в реальном, живом интерфейсе ниже - не на плоском свотче. Переключитесь на «Ваша палитра», чтобы увидеть свои цвета в том же интерфейсе.
Как выглядит палитра в духе Airbnb?
Маркетплейсы и сервисы объявлений живут за счёт фотографий - самого продаваемого продукта, - поэтому окружающий интерфейс обычно намеренно сдержан: светлая нейтральная база, не конкурирующая с фотографиями, и один-два тёплых, дружелюбных акцентных цвета, зарезервированных для поиска, кнопок и мелких бейджей, а не крупных цветовых блоков.
Этот мокап - строка поиска сверху и сетка карточек объявлений ниже - заимствует этот подход с фокусом на фото и тёплым акцентом, чтобы показать, как палитра работает в макете с плотной сеткой и зависимостью от изображений. Это оригинальный макет в этом духе, а не копия реальной брендовой системы какого-либо конкретного маркетплейс-продукта.
Ключевые визуальные характеристики
- Чистый белый или почти белый фон, позволяющий фотографиям объявлений нести визуальный вес
- Заметная строка поиска, оформленная как элемент hero-уровня, а не маленькое поле в шапке
- Сетка карточек объявлений с фото на первом плане и минимумом текста поверх
- Тёплый коралловый цвет, последовательно используемый для иконок, кнопок и действия «в избранное»
- Скруглённые углы повсюду - и у карточек, и у кнопок, и у строки поиска
Цветовые характеристики
- Нейтральная база от белого к светло-серому, чтобы фотографии оставались визуальным фокусом
- Тёплый коралловый основной цвет, зарезервированный для призывов к действию и иконок «сердечко»/избранное
- Более холодный бирюзовый вторичный акцент, используемый экономно для мелких выделений и бейджей
Типографика
- Дружелюбный, скруглённый шрифт без засечек для заголовков и названий объявлений
- Жирные цифры цены и рейтинга, выделенные на фоне более лёгкого вспомогательного текста
- Компактный кегль в карточках объявлений, чтобы уместиться в сетку с акцентом на фото
UI-паттерны
- Крупная, скруглённая строка поиска как основной элемент hero-блока
- Адаптивная сетка карточек объявлений, каждая с фото на первом месте
- Небольшие детали рейтинга и цены поверх нижней части каждой карточки
- Иконка сердечка/избранного в углу каждой карточки объявления
Частые вопросы
Какие цвета обычно используются в интерфейсе в духе Airbnb?
Чистая белая или светло-серая база, позволяющая фотографии выделяться, тёплый коралловый основной цвет для кнопок и иконок избранного и более холодный бирюзовый вторичный акцент для мелких выделений.
Это официальные цвета бренда Airbnb?
Нет - это оригинальный макет, вдохновлённый общим видом маркетплейс-продуктов с фокусом на фото вроде Airbnb, а не копия его официальной цветовой палитры или защищённого товарным знаком дизайна.
Почему у маркетплейс-приложений такая сдержанная цветовая палитра?
Реальные фотографии продаваемого продукта - комнаты, машины, товара - делают основную визуальную работу, поэтому насыщенная цветовая палитра вокруг них конкурировала бы за внимание вместо того, чтобы их обрамлять.
Можно ли посмотреть свои цвета в этом интерфейсе в духе Airbnb, а не только палитру по умолчанию?
Да - переключите тумблер «Ваша палитра» над предпросмотром, чтобы увидеть свои текущие цвета в живом интерфейсе в духе Airbnb вместо цветов по умолчанию.