Как добиться эффекта wow на сайте? Примеры, которые вам понравятся.

В этой статье попробую ответить на этот достаточно сложный вопрос. В качестве примеров будут использованы мои реальные работы на существующих сайтах. Те, что не являются моей разработкой, и позаимствованные с просторов сети интернет будут подписаны. Некоторые примеры будут слишком просты для “крутых” дизайнеров и могут показаться не эффектом WoW. Но для большинства посетителей они будут вызывать именно такой эффект, потому что среди конкурентов ничего не встречается подобного. На практике достигнуть эффекта wow достаточно просто - главное сделать так,  чтобы пользователь обратил на это внимание или увидел что-то впервые. Многие веб-дизайнеры задаются вопросом как же добиться эффекта wow на сайте. Часто они пренебрегают пользовательским опытом и делают эти эффекты в угоду красоте, забывая про функциональность. Это главная ошибка, которую нельзя допускать.

Важно помнить, что на сайте главный посетитель, а не творческий порыв дизайнера.

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

Параллакс.

Самый простой способ вызвать эффект WoW - параллакс. Разбейте страницу на несколько слоев. Заставьте двигаться слои по разному. Например, один слой временно закрепите до нужного момента или анимируйте эти слои с разной скоростью в зависимости от взаимодействия пользователя. Можно один фон передвигать медленнее, чем основной. Таким образом достигается глубина сайта.

Пример как можно поиграть различными элементами на сайте при прокрутке:

Еще один пример как показать пользователю, что инструмент легок в работе

Куда же без моих любимых крестиков и ноликов, которые были сделаны для главной страницы этого сайта

Вот хороший пример из сети интернет. Очень приятная на мой взгляд анимация скроллинга.

Видео в фоне.

Другой простой способ использовать видеофон. Простой и лаконичный видеоролик в фоне может легко донести информацию. Главное сделайте видеоряд максимально понятным с беглого взгляда,  чтобы не отвлекать посетителя от главной информации.

Видео в фоне сайта очень быстро объясняет куда попал пользователь. Быстро покинувших сайт легко отфильтровать и убрать из аудиторий ремаркетинга.

Пример видео бекграунда для швейного производства.

Естественно примеры с моего сайта.

Анимация статичных элементов

Совершенство кроется в деталях. Сделайте необычными обычные вещи. Добавьте анимацию на привычные для пользователя элементы страницы и тем самым вызовите эффект WoW. Например, анимируйте кнопку или любой другой элемент, с которым взаимодействует пользователь. Добавьте максимум необычности в привычные вещи.

Простая анимация шестеренки на сайте заставляет пользователя внимательно прочитать текст

Зачем делать скучные кнопки в веб-формах, если можно сделать ее с приятной анимацией?

УТП, которое обязательно попадет в глаза каждому посетителю

Одна из моих любимых фишек - анимация во время скролинга. Кстати, на некоторых страницах этого сайта не всегда написаны приятные слова, зато правда=)

 

Типографика

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

Размытие

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

Размывание фона, как способ заставить прочитать скучную статью:

Форма обратной связи, которую приятно заполнять

Вместо выводов

Всегда помните, что главный на сайте пользователь, а не веб-дизайнер, который сотворил сие чудо. Не переусердствуйте с количеством анимации и количеством Java скрипта. Сделайте всё для того чтобы сайт быстро загружался. Сейчас интернет очень быстрый и не всякий пользователь захочет ждать пока прогрузиться ваша страница. Максимально оптимизируйте ваш код и не заставляйте вас ждать. По статистическим данным, если пользователь не увидел сайта в течении 5 секунд, навсегда покидает ресурс. Поэтому лучше статичный, но быстрый сайт, чем красивый, но без посетителей. Если у вас возникла необходимость в сайте с эффектом WOW, то смело оставляйте заявку - все будет в лучших традициях современного веб-дизайна.