03/04 Яркие Цвета. Блокинг и Hover-эффекты

21.06.2016

Блокинг и Hover-эффекты

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

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

madebypfd

Источник: madebypdf

На сайте PFD отлично демонстрируется пример использования сразу двух тенденций. Яркие цвета на некоторых карточках отлично контрастируют с белым фоном остальных. При наведении курсора карточка затемняется (та, что в левом верхнем углу, например) и показывает количество сердечек. Изменение элемента при наведении курсора показывает, что он интерактивный.
Эти функции позволяют считать блокинг и hover-эффекты по-настоящему практичными и стильными приёмами при разработке сайта. Яркие блоки образуют макет, который подталкивает пользователей к взаимодействию, а hover-эффекты принимают эстафету, создавая интересный интерактив.

Цвет и Текстура

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

1. Фон или изображение в целом;
2. Акцент на фоне или изображении.

tacospillet

Источник: tacospillet

Дизайнеры сайта Tacospillet выбрали первый вариант: создали заполненный фон и поместили на передний план изображения с текстурой. Это решение слегка приглушает яркие цвета, успокаивает глаз и не допускает того, чтобы сайт выглядел подавляюще. А ещё текстура придаёт ему уникальный внешний вид, выделяя его из ряда других сайтов.

joyridetacohouse

Источник: joyridetacohouse

Словно по иронии судьбы при разработке сайта  Joyride Taco House используются только текстурированные акценты. Небольшая тень под шапкой ненавязчиво выделяет её, в то время как сине-зелёные буквы логотипа привлекают большую часть первоначального внимания. Текстура здесь выглядит просто и весело, что скорее всего отражает атмосферу самого ресторана.

Теги: , , , ,