Изображения и видеоролики — самые популярные варианты, когда дело доходит до оживления. Но являются ли они единственными методами, которые дадут тот самый толчок и вдохнут новую жизнь в ваш проект.  Никто не собирается спорить с тем, что изображения и видео являются проверенными временем и проверенными аудиторией. Тем не менее, они не единственные варианты, способные творить чудеса на фронтальных страницах. Благодаря постоянно развивающимся веб-технологиям каждый год мы наблюдаем новые тенденции.

Новые подходы к решению поставленных задач побуждают нас избегать банальностей в интерфейсах. Когда дело доходит до чего-то нового, возникает проблема совместимости и поддержки на различных девайсах. Это не только камень преткновения, но, как правило, «нет» — ответ от большинства клиентов. Но давайте будем абсолютно честны: есть ли решение, которое на 100% совместимо со всеми браузерами? (Есть все еще люди, использующие IE6 и 7.) Скорее всего, что, что бы вы ни выбрали для работы в своем проекте, вам все равно понадобится подкручивать для старых браузеров. Так что, если план В неизбежен в конце концов, почему бы не сказать «да» новым технологиям и прогрессу?

360-градусная панорама

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

Nova Skoda

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

Parallax

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

Code Resolution

Игра с курсором мыши

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

Ursa Major Supercluster

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

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

BrainFutures

Анимация

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

Взгляните на сайт Synapses Creatives. На их домашней странице изображена небольшая рабочая конвейерная система и городской антураж. Идея заключается в том, чтобы изобразить сферу компетенции компании и одновременно проявить креативность.

Synapses Creatives

Для тех, кто любит абстракционизм в сочетании с нетрадиционным подходом, такие сайты как Les Animals и I am Boom, демонстрируют всю красоту геометрической простоты, воплощенной в жизнь.

Les Animals начинает свое знакомство с онлайн-аудиторией с формой похожей на жидкость, анимацией фона, которая приковывает взгляд с первой секунды. Ничего необычного с точки зрения дизайна, но это действительно работает.

Les Animals

В то время как портфолио сайта – I’m Boom – делает ставку на кучу абстрактных анимаций. Почти каждая страница отмечена особым динамичным развлечением, которое получает свою красоту с достаточно простой идеи, таких как создание смеси цветов или хаотичного появление кругов в различных размерах.

I am Boom

WebGL

Еще один способ повышения привлекательности и оживления сайта, это конечно же WebGL и его сложная конструкция, такая как Three.js или GSAP.  Но черт возьми, это настоящий глоток свежего воздуха в современном веб-дизайне, то что вы считали гранью фантастики и недостижимым пару лет назад теперь можно реализовать. Огромные возможности заманчивы. Несмотря на то, что WebGL частично экспериментальный, не говоря уже о его тяжести и низкой совместимости с браузером, он предлагает посетителям реальное удовольствие, а также добавляет глоток свежего воздуха проектам.

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

Bacter

Это онлайн-портфолио компании по производству видео. Домашняя страница восхитительна. Webgl фон делает свое дело. Он привлекает Ваше внимание, но благодаря нейтральной цветовой гамме и спокойной анимации посетители могут двигаться дальше и сосредоточиться на важном содержании.

Остальные идеи

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

Sophie Hustin

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

Команда Untold Digital использует ту же технику. Для этого веб-сайта они добавляют некоторые специи на целевую страницу, включив фантастическую композицию на WebGL, размещенную в центре экрана.

Untold Digital

Вывод

“Первое впечатление-это последнее впечатление.» Не стоит недооценивать его влияние; убедитесь, что первое, что люди видят на вашем сайте, — это то, чем вы гордитесь. Это может быть эффектное изображение, заманчивый визуальный эффект, привлекательная интерактивная функция, выдающаяся анимация или просто необычный способ представления меню. Не бойтесь тенденций, поскольку они, скорее всего, помогают владельцам поражать пользователей с трепетом.

Какое решение вам больше всего нравится? Вы предпочитаете эксперименты или улучшенные версии проверенных временем вещей?