Hover: эффект стильного дизайна

Леонид Родинский

Копирайтер
25 Декабрь в 18:00

Для большинства пользователей понятие псевдокласс ничего не объясняет и, честно говоря, слава богу. Потому что для начала пришлось бы вникать в суть Cascading Style Sheets (каскадных таблиц), более известных под названием CSS. А затем переходить к динамическому состоянию элементов сайта, изменяемых в процессе интерактивного сотрудничества. Скучные технические подробности, результат действия которых в той или иной мере знакомый всем интернавтам – при установке курсора мышки происходит визуальная трансформация. Например, ссылка меняет цвет, а на картинке появляются надписи или кнопки. Фантазия разработчиков в применении hover-эффекта ограничивается только требованиями заказчика и некоторыми особенностями программного обеспечения. По понятным причинам он не поддерживается на мобильных устройствах (там попросту нет указателя, который можно навести на объект). Рассмотрим отдельные варианты использования этого дизайнерского приёма.

Сценарий первый: изменение представления ссылок

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

Сценарий второй: интересные кнопки

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

Сценарий третий: изображения

Картинки – это идеальный полигон для hover-экспериментов. Перечислим лишь малую долю эффектов, которые можно использовать в этом разделе.

  • Затемнение (осветление), применение различных фильтров, изменение цветовой палитры.
  • Смена фотографии под курсором.

  • Масштабирование (увеличение/уменьшение) всего снимка либо его части. Этот пункт целиком касается любой визуальной трансформации (вращения, растворения, запуска анимационных действий).
  • Добавление заголовков, описаний, информационных блоков, гиперссылок.

Как и во всех других случаях, варианты применения ограничиваются только фантазией разработчика проекта.

Поскольку все интернет-течения давно уже стали явлением комплексным, нельзя рассматривать один приём в отрыве от полной концепции дизайна. Здесь всегда используют целую гамму выразительных средств, имеющих целью организацию визуального полотна веб-страницы. Продолжим тему в следующей статье.

Наши работы

  • Кейс продающего лендинга для хостела
    Задача: 

    Разработать мультилендинг для хостела

    Что мы сделали: 

    создали продающую структуру

    внедрили стильный дизайн

    добавили мотивационные блоки

    Результат: 

    Стильный, продающий сайт с простой структурой

  • Скриншот мультилендинг demetrahouse
    Задача: 

    Разработать мультилендинг с дальнейшим преобразованием в полноценный сайт

    Что мы сделали: 

    разработали продающий мультилендинг

    ​внедрили презентабельный дизайн

    наполнили сайт первичным контентом

    Результат: 

    Эффективный мультилендинг с высокой конверсией

    Сайт: 

    demetrahouse.ru

  • Кейс Разработка продающего сайта sense-t.ru в тематике очистительные сооружения
    Задача: 

    Разработать сайт с тщательной проработкой каждой страницы

    Что мы сделали: 

    разработали продающий дизайн

    ​сделали удобную структуру сайта

    наполнили сайт правильным контентом

    Результат: 

    сайт, который продает

    Сайт: 

    sense-t.ru

  • Кейс Доработки интернет-магазина scrapassorti.ru в тематике СКРАПБУКИНГ
    Задача: 

    Доработать интернет-магазин с целью повышения продающих свойств

    Что мы сделали: 

    Изменили дизайн интернет-магазина

    Внедрили доработки на нескольких главных страницах

    Улучшили юзабилити сайта

    Результат: 

    Эффективный интернет-магазин с высокими конверсионными показателями

    Сайт: 

    scrapassorti.ru

  • Кейс Разработать мультиязычный сайт отеля
    Задача: 

    Разработать продающий мультиязычный сайт отеля в Греции

    Что мы сделали: 

    Разработали концепцию будущего сайта

    ​Разработали прототипы страниц

    Нарисовали 2 варианта дизайна!

    Зарегистрировали отель на booking.com и других подобных сервисах

    Подключили модуль Channel Manager от Travelline

    Результат: 

    Отличный минималистичный сайт на 3 языках

    Всего лишь за 8 недель отличный мультиязычный сайт

    Первые заявки с сайта пришли уже через несколько дней после старта!

    Сайт: 

    clubhsb.com

Наша команда

  • Вадим Скопинцев
    Генеральный директор

    Сделаем лучшее решение для привлечения клиентов из интернета, сделаем продажи!

  • Дмитрий Карпинский
    Директор по пропаганде

    Экспонента, бизнес должен и будет расти по экспоненте! Продавать, будете продавать!

  • Диана Зайцева
    Руководитель отдела развития

    «Протачиваем» Ваш ресурс для получения им продающих свойств. Захватываем клиентов для Вас!

  • Дмитрий Трацевский
    Руководитель разработки

    Разработанные нами сайты работают как часы!

  • Леонид Белкин
    Менеджер проектов

    Сделаем Ваш сайт продающим. Конверсия будет расти!

  • Татьяна Николаева
    Менеджер проектов, переводчик

    Пишем только уникальные и интересные тексты на русском и английском. Вам понравится!

  • Кирилл Миченус
    Разработчик

    Разработаем классный, продающий сайт. Внедрим интересные идеи!!

  • Павел Шульга
    Старший специалист по контекстной рекламе

    Грамотно используем Ваш рекламный бюджет. Выйдем на максимум заявок!

  • Евгения Лю-Ти-Фу
    PR-менеджер

    Ваша имидж в наших руках. Если вас нет в Интернете, то вас нет в бизнесе!

  • Марина Петренко
    Контент-менеджер

    Раскрываем все положительные стороны Вашего бизнеса для увеличения целевой аудитории!

  • Владимир Гришин
    Дизайнер

    Яркий, продающий дизайн сайта – залог успеха компании. Уделим внимание деталям!

  • Виктор Токмачев
    Менеджер по работе с иностранными клиентами

    Наши идеи подходят всем - иностранные клиенты охвачены!

  • Татьяна Ромакина
    Копирайтер

    Создадим уникальные продающие статьи. Лучший контент для Вашего сайта!

  • Леонид Родинский
    Копирайтер

    Написать уникальные тексты и заголовки – этого мало. Наполняем сайты неповторимым содержанием!

  • Анастасия Бондарева
    Копирайтер
  • Вячеслав Киосе
    Копирайтер

    Текст – это не просто слова. Посетители Вашего сайта получат информацию с внятным и понятным смыслом.

  • Павел Константинов
    Копирайтер

    Когда Вы чего-то не знаете или не понимаете – спросите того, кто знает, а лучше нескольких, и создайте свой собственный взгляд на вещи.

  • Стань одним Из нАс
    Трудоустройство

Клиенты

Наши услуги

Разработка дизайна

Дизайн для человека
а не человек для дизайна

Сайт должен продавать
остальное - тлен и пыль

Ничего лишнего
только целевые клиенты

Сроки: 
от 1 недели
Результаты: 
Индивидуальное решение, которое отличает Вас от других компаний
Оплата: 
По договору, наличный и безналичный расчет
Цены: 
от 15 тыс. рублей (дизайн сайта)
Дизайн и разработка сайтов

Интуитивно понятен
Дизайн доступен всем

Рекомендации друзьям
Вас рекламируют клиенты

Ориентация на развитие
Сайт легко развивать

Сроки: 
от 1 недели
Результаты: 
Индивидуальное решение, которое отличает Вас от других компаний
Оплата: 
Наличный, безналичный, по договору
Цены: 
от 15 тыс. рублей (дизайн сайта), от 50 тыс. рублей (лендинг)
Сроки: 
от 1 недели
Результаты: 
Индивидуальное решение, которое отличает Вас от других компаний
Оплата: 
Наличный, безналичный, по договору
Цены: 
от 15 тыс. рублей
Редизайн сайта

Каждый продукт продаёт
Продукты под спрос клиентов


"Живой" сайт привлекает
Компания живет => продает


Ежедневное развитие
Каждый день развиваем сайт!

Сроки: 
от 7 дней
Результаты: 
разработка нового дизайна для Вашего сайта; активное привлечение новых клиентов
Оплата: 
по договору, наличный и безналичный расчет
Цены: 
от 5 000 рублей за тип материала
Создание продающих интернет сайтов

Ваши клиенты довольны
Дизайн понятен клиенту

Больше клиентов любит Вас
Вас рекомендуют друзьям

Сайт для развития
Каждый день сайт улучшается

Сроки: 
от 3 недель
Результаты: 
Эффективный сайт под ключ для Вашего бизнеса
Оплата: 
Наличный, безналичный, по договору
Цены: 
от 50 тыс. рублей
САМОЕ ИНТЕРЕСНОЕ НА СТРАНИЦЕ
“ЗЕКСЛЕР” В Facebook и ВКОНТАКТЕ