Успех дизайна сайта зависит от многих аспектов. Но когда речь начинает идти о пользовательском опыте, то, как правило, именно детали и вносят ощутимую разницу. Казалось бы, похожие сайты немного отличаются друг от друга и, соответственно, как результат, имеют разную популярность и конверсию. Это, если не говорить о маркетинге в целом. Каждый элемент веб-дизайна влияет на качество конечного продукта (любой сайт, который создается мастером – продукт его работы, творчества), но некоторые особенности усиливают проект гораздо больше, чем всё прочее.
Динамические элементы не остаются незамеченными посетителями и всегда бросаются в глаза. Они влияют на эмоции, позволяют улучшить известность сайта, делают интерфейс в целом заманчивым и привлекательным. И это при том, что анимация может быть как явной, фоновой, так и проявлять себя только при взаимодействии с элементами сайта. Разумеется, что от общей идеи дизайна зависит обилие динамических эффектов, но с учетом последних стандартов и тенденций их стараются использовать в небольшом количестве.
Одними из самых популярных тенденций в среде веб-дизайнеров являются эффекты mouse over или эффекты при наведении указателя мышки. Такие эффекты не очевидны сразу, но стоит переместить указатель на пункт меню, кнопку или инфоблок, то они меняются по тональности, цвету, иногда даже форме или немного по размеру. Такой эффект является беспроигрышным решением для повышения эмоционального восприятия сайта. Постоянные читатели нашего блога наверняка вспомнят различные примеры сайтов, где, так или иначе, используются эффекты mouse over.
Мы же сегодня рассмотрим наиболее яркие проекты с различными эффектами для указателя мышки и посмотрим, как проще всего их можно создать с помощью Photoshop, CSS, где взять идеи и готовые кусочки программного кода.
Font Smith
Сайт предлагает посетителю выбрать название шрифта из множества вариантов иконок. Во время же выбора, передвигая курсор, можно увидеть, как каждая клетка меняет свой цвет и представляет сам шрифт. Особо красиво смотрится след движения по клеткам, если курсор двигать очень быстро.
Pixels by Tomer Lerner
Томер Лернер создал свой сайт практически полностью анимационным. Под курсором мышки на главной странице движутся геометрические фигуры, между страницами происходит загрузка, а вокруг названия в следующем блоке образовывается прямоугольник. Передать словами красоту и простотуэтого сложно, поэтому лучшим будет увидеть воочию.
Trainrobber
Проект предлагает интерактивное путешествие в стиле Дикого Запада и изучение различных новаторских проектов. Посетитель может выбрать раздел и сквозь туман отправиться на изучение нового. При этом все это также анимировано.
М11
Команда М11, занимающаяся декорациями для различных мероприятий, кино и телевидения, создала сайт, который умудрился получить сразу несколько наград. Анимация же здесь использовалась весьма тонко. Кнопочки, иконки меняются только при наведении мышки, а переходы между экранами (страницами) смотрятся весьма живо и нераздражительно.
The Selfie Collection
Selfie Collection представляет проект с фотографиями селфи и предметами с аукционов. Для нас интерес представляет дизайнерское решение, при котором каждое изображение, будучи активным, становится обладателем текстового блока с описанием предмета на аукционе, позволяющем по клику перейти на торги. Цветные плитки весьма популярны в плоском дизайне и, собственно, легкая анимация смены цветов этих блоков выглядит вполне естественно и привычно.
Joint
Минималистический дизайн, характеризуется использованием текстовых блоков и меню. Практически весь вид сайта представляет собой навигационное меню, причем, интуитивное. Разумеется, что та или иная категория открывает дополнительные страницы в стороне и уже на них содержатся изображения, видео, записи и прочее. Но, в целом, выполнено все весьма оригинально.
Принципы использования Mouse Over
При всей существующей красоте анимации необходимо помнить, что использование на сайте такого эффекта не должно быть навязчивым и раздражительным. Обычно используют для выделения важных элементов («Нажми сейчас», «Это интересно»), для визуального эффекта от наведения курсора, но в тех местах, где это логично и где пользователь может ожидать, выделение нужной и важной ссылки, пунктов меню, категорий.
Более того, эффект должен работать только тогда, когда наведен указатель мыши и никак иначе: ни до, ни после. Если посетителя заинтересует анимация меню, он сам «подергает» курсором за иконки, но принуждать его к этому не стоит.
Реализация Mouse Over
Эффект Mouse Over в веб-дизайне обычно реализуется четырьмя способами:
- HTML (прописать изменение одной картинки на другую через свойство ссылки)
- Смена одной картинки на другую посредством JavaScript
- Стили CSS
- Flash, Shockwave, Java
Но интересно то, что веб-мастер может воспользоваться различными ресурсами, где приводятся примеры анимации и соответствующий код CSS. А это значительно упрощает работу и ускоряет её. Достаточно затем заменить изображения и, Voi la, эффект готов и заказчик в восторге.
iHover
Проект с огромным количеством примеров анимационных эффектов, описанных в CSS3. Нужно просто подвести курсор к кружочку и эффект появится. При этом ниже существует список программного кода, разбитого на колонки и строки (слева направо). Находите нужный эффект и смотрите ниже код. Эффекты и взаправду красивые.
CSS3 Hover Effects
Еще один ресурс с примерами и кодом для анимации. Сам же код CSS можно найти по ссылке «VIEW TUTORIAL», а затем просто использовать подзаголовки с названием «1 EXAMPLE», «2 EXAMPLE» и так далее.
Animated SVG Icons
Анимированными могут быть и иконки, если по ним кликнуть мышкой. Примеры возможной анимации представлены на портале ниже.
3D Thumbnail Hover Effects
Почему эффект анимации не сделать трехмерным? Вполне можно и это несложно. Примеры представлены по ссылке в заглавии, а исходных код можно увидеть по ссылке в верхнем меню «BACK TO THE CODROPS ARTICLE».
Hover.css
Огромное количество 2D анимационных эффектов, таких как смена фона, рамки, тени и свечения или создания выносок, загнутых уголочков и многое иное. Все свойства анимации предлагаются в одном файле hover.css, который и предлагают создатели загрузить и затем веб-дизайнеру остается только выбирать нужное и подключать к общему своему проекту. Подробнее описано в Tutorial, где и азы использования CSS тоже есть.
Использование Photoshop
Несмотря на то, что эффектов Mouse Overs неимоверное количество, в веб-дизайне вполне можно создать анимацию и самостоятельно силами Photoshop. И речь не идет о шкале анимации, что мы использовали, рассматривая типографику. Достаточно иметь плагины и расширения для работы с CSS и создать нужные изображения.
Например, мы создали две простенькие кнопочки, одна из которых имеет чуть объемный вид, а другая – утопленный, словно по ней кликнули. Разумеется, что сам графический эффект может использоваться самый разный, но для примера мы используем самый яркий.
Шаг 1
Создаем кнопочки, пишем текст, добавляем эффекты и цвета. Само собой, рассказывать подробно уже не будем.
Шаг 2
Все слои разбили по группам. Затем выделяем обе кнопочки и нажимаем Изображение -> Кадрирование. Таким образом, у нас на экране остается только рабочая область без фона.
Шаг 3
Уже её сохраняем в формат PNG-8, в данном случае web_button2.png
Шаг 4
Теперь в той же папке, где сохранили изображение, создадим файл HTML web_button2.html например, в Блокноте. И пишем вот такой простенький код HTML, где указываем width и height блока, соответствующего размерам блока с кнопками, а в качестве фона используем созданный нами файл PNG.
Шаг 5
Также во второй части CSS описываем действие через свойства a:hove и a:focus и снова используем изображение, но обратите внимание, уже сдвинутое по вертикали на 50px ниже. То есть при появлении курсора мышки, изображение загрузит в этот блок другой вид кнопочки, нижний.
Таким, самым простеньким способом мы создали анимационную кнопочку средствами Photoshop и CSS/HTML. Разумеется, если анимация более сложная и смена картинок или цветов происходит более замысловато, то и сам код будет другим. Но для этого мы и привели примеры ресурсов выше, где можно найти и эффекты и примеры кода.
Особенностью же их использования может стать тот момент, что изображения будут сменяться не посредством использования готового файла PNG, а задания общего визуального стиля через CSS для возможности работы с любыми изображениями. Для чего и придется использовать плагин, например, тот же CSS Hat.
С другой стороны, если создаются анимированные иконки меню, то их удобнее сделать в картинках, ибо каждая иконка имеет свое изображение и смысл.
Резюмируя
Создаются ли веб-мастерами интернет-магазин или блог, сайт услуг или визитка для Landing Page, но эффект наведения мышки на изображение mouse hover effects всегда придает проекту утонченность, изюминку и способен заинтересовать посетителя. С каждым годом эффект становится популярнее, но использование его таит в себе множество условностей, особенностей и правил. Несмотря на доминирование плоского простого дизайна, легкая анимация будто бы немножко освежает проект, а потому пренебрегать ею не стоит, но и злоупотреблять тоже.
Анимированные иконки, сменяющиеся картинки или появление надписей на статичных изображениях, смена цвета на кнопочках, или появление текста рядом с изображением – все это mouse over effects. Что же касается использования CSS, а не JQuery, то первый гораздо проще в обработке и он быстрее загружается. Тем более что и язык проще, удобнее разбивать на модули, имеются готовые функции и свойства, которые всего-то и необходимо прописать и описать.
Веб-дизайн – поистине искусство создания сайтов, словно бы художник творит новое свое полотно. И неважно, какая тематика проекта – крохотная изюминка прекрасна только своим скромным наличием.
