Сценарий первый: изменение представления ссылок
По умолчанию всё линки при наведении выделяются подчёркиванием. Это типовая функция, заложенная в основу гипертекстовой разметки веб-страниц, и она существует со времён первого сайта. Понятно, что казённый подход уже приелся и пользователям, и дизайнерам – смешно делать креативную картинку, заниматься продающими качествами и при этом оставаться в стандартных рамках выделения переходов. Так что первым делом в стилях нового сайта прописывают правила, по которым отображаются текстовые фрагменты-ссылки. При этом для различных разделов могут формироваться индивидуальные требования и, соответственно, внешний эффект.
Сценарий второй: интересные кнопки
Всевозможные функциональные элементы применяются на большинстве сайтов из различных тематических ниш. В продающих одностраничниках они используются для вызова бланков заказов или форм обратной связи, а информационные ресурсы предлагают подписки – для любой цели найдётся своя кнопка. Hover помогает придать им разнообразие: при наведении курсора можно изменить цвет, форму, текст надписи или добавить анимацию. Объект способен полностью отказаться от начальных свойств. При этом как только мышка будет передвинута в другую часть визуального поля, всё вернётся к исходному виду.
Сценарий третий: изображения
Картинки – это идеальный полигон для hover-экспериментов. Перечислим лишь малую долю эффектов, которые можно использовать в этом разделе.
- Затемнение (осветление), применение различных фильтров, изменение цветовой палитры.
- Смена фотографии под курсором.
- Масштабирование (увеличение/уменьшение) всего снимка либо его части. Этот пункт целиком касается любой визуальной трансформации (вращения, растворения, запуска анимационных действий).
- Добавление заголовков, описаний, информационных блоков, гиперссылок.
Как и во всех других случаях, варианты применения ограничиваются только фантазией разработчика проекта.
Поскольку все интернет-течения давно уже стали явлением комплексным, нельзя рассматривать один приём в отрыве от полной концепции дизайна. Здесь всегда используют целую гамму выразительных средств, имеющих целью организацию визуального полотна веб-страницы. Продолжим тему в следующей статье.
Дизайн для человека
Сайт должен продавать
Ничего лишнего
Интуитивно понятен
Рекомендации друзьям
Ориентация на развитие
