Пастельные тона в веб-дизайне — это не только недавняя тенденция, но и прием, который дизайнеры используют уже многие годы для создания эффектной визуализации.
С «пастельными» тонами у нас чаще всего ассоциируются бледно-розовый, голубой и желтый, однако пастельная палитра на самом деле гораздо шире. Пастельные цвета отнюдь не спокойные — в сочетании с правильными элементами они могут смотреться достаточно смело и вызывающе.
Итак, давайте взглянем на 10 способов применения пастели в дизайне веб-сайтов.
Пастельная обработка фотографии
Фотографии, обработанные пастелью, или же сделанные при правильном освещении могут стать отличной визуальной основой для сайта. Приглушенный тон изображений дает дизайнеру отличную площадку для размещения других элементов.
Пастельные оттенки могут сыграть контрастом для, например, логотипа или кнопок. Посмотрите, как идеально лого Solasie сочетается с фотографией в пастельных тонах. Также на таком фоне хорошо будет смотреться «прозрачная» кнопка.
Пастельный фон
Выбрав пастельный фон, вы можете использовать много цветов, не боясь переборщить — ведь пастель, как известно, смягчает совмещенные с ней цвета.
Популярный сегодня тренд — использовать на пастельной основе вариации одного оттенка, чтобы получить монохромную цветовую схему, как это сделано на сайте Dear Mum. Оттенки одного цвета прекрасно контрастируют с белым текстом, а своеобразный шрифт придает сайту современный, «хипстерский» вид.
Яркая пастель
Сочетание «яркая пастель» звучит необычно и непривычно и вместе с тем дает вам шанс создать уникальный дизайн.
Отличный пример — сайт Marie Catrib. Пастель на фоне достаточно яркая, но не отвлекает внимания от женщины. Яркость пастельных цветов помогает сфокусироваться на изображении. Более бледны цвет фона был бы не так эффективен, не так ли?
Пастель для настроения
Пастельные тона создают атмосферу легкости, спокойствия и непринужденности. Если вам и вашему делу близки эти слова, то смело применяйте пастель в дизайне своего сайта!
Сайт Sweez на личном примере показывает, как цвет отражает настроение. Глядя на изображение, вы сразу представляете себя в тихом, спокойном местечке с чашкой теплого, вкусного капучино в руках. Не так ли?
Пастель в иллюстрациях
Пастельные тона — отличный выбор для иллюстраций, так как притягивают внимание пользователя.
Пастель позволяет вам использовать иллюстрации там, где их меньше всего ожидаешь увидеть.
Контраст с пастелью
Вопреки распространенному мнению, пастель отлично сочетается с прочими элементами дизайна.
Дизайн сайта Kinder Fotografie — наглядный пример успешного микса пастельных оттенков, ярких фотографий и текста. На пастельном фоне достаточно много мелких деталей, однако первое, что бросается в глаза — фотографии детей и слово «улыбки» ('smiles'). И только после пользователь уже обращает внимание на прочие милые мелочи.
Пастель для навигации
Пастельные оттенки — отличный выбор для создания инструментов навигации. Обычно дизайнеры обрамляют сайт черными или белыми панелями с навигационными элементами, однако что нам мешает добавить немного цвета?
Плюсом пастельных тонов в этом случае является то, что они не отвлекают внимание от основного дизайна на себя. На сайте Wonderfully Wild, к примеру, первое, что видит пользователь — это фотография. Навигационная панель же сливается с основной областью, но все же заметна благодаря грамотному выбору цвета.
Пастель в плоском дизайне
По сути, современная тенденция использования пастельных тонов вышла как раз таки из плоского дизайна. Многие из ярких пастелей, так любимых дизайнерами, являются упрощенными версиями некоторых супер ярких цветов, бывшими популярными на волне плоского дизайна.
Чем хороши пастельные оттенки в плоских дизайнах? Тем, что при тех же характеристиках, они не бросаются пользователю в глаза и не раздражают. Сочетание пастели и плоских очертаний позволяет легко использовать цвет, чтобы направить пользователя в нужную часть экрана или подчеркнуть важные текстовые элементы.
Пастельный шрифт
Использование пастели не ограничивается фоном или изображениями. Это цветовой стиль также уместен в шрифтах (хотя тут нужно быть осторожней).
Пастель идеальна для крупных, жирных шрифтов на простом и неприметном фоне — для создания необходимого контраста. Формула проста: увеличенный, броский шрифт требует приглушенных цветов остальных элементов.
Пастель для элементов интерфейса
Применение пастельных цветов для оформления элементов пользовательского интерфейса — забавная идея, также взявшая свое начало из плоского дизайна.
На сайте Duy Tran каждый «пастельный» блок на самом деле увеличенная кнопка. Разные цвета помогают пользователям различать блоки и их предназначение, а минималистичное изображение в главной части сайта создает отличный контраст (ни одно изображение слайдера не сливается с кнопками).
В заключение
Ключевая цель использования пастельных тонов в дизайне — это привнести свежесть. Сочетание пастели с глубокими насыщенными цветами, яркими изображениями или белыми контрастными элементами помогает создать эффектную цветовую палитру.
Пастель ассоциируются с расслабленностью и умиротворенностью — если это именно те чувства, которые вы хотите внушить посетителям вашего сайта, смело используйте пастельную палитру. Но не забывайте, что пастель накладывает обязательства на другие элементы вашего дизайна.
Автор: Кэрри Казинз
Источник:
