SMM кейсы: как использовать Google+ для продвижения бренда?
Previous
выбрать за меня
Twitter предоставил бесплатный доступ к аналитике приложений
Next
веб-дизайн, тренды
Юзабилити

Анимационный дизайн сайтов и мобильных приложений: 14 основных трендов

Автор: Аслан Патов09.12.2014

Функциональность нельзя приносить в жертву внешним эффектам – это незамысловатое правило, казалось бы, должно быть главным ориентиром веб-разработчиков.

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

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



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

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

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

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

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



Transition-эффект в верху страницы

Существует множество способов добавить анимацию в верхнюю часть страницы, если требуется.

веб-дизайн, тренды

Эффекты загрузки страницы

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

Бесконечный скроллинг

Наиболее яркий пример – это, пожалуй, то, как Samsung демонстрирует дополнительный материал во время прокрутки страницы сайта…



веб-дизайн, тренды

Наведение курсора

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

веб-дизайн, тренды

Анимированные диаграммы

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

веб-дизайн, тренды

Замедленное движение

Некоторые сайты применяют возможности CSS-анимации. Вот, например, слегка меняющийся фон страницы.

веб-дизайн, тренды

 

Модульный скроллинг

Прокручиваться могут не только целые страницы, но и отдельные колонки.

веб-дизайн, тренды

Эффект сгиба

Во многих мобильных приложениях используется такая опция.

веб-дизайн, тренды

Индикатор прогресса и кнопки

Кнопка submit также способна выполнять функцию индикатора прогресса.

веб-дизайн, тренды

Замедленная демонстрация изображений

Лучшей иллюстрацией такого подхода служит, пожалуй, страница на сайте газеты The Guardian с фотографиями высадки в Нормандии. Проведите курсором слева на право (и обратно), чтобы пролистать фотографии.

веб-дизайн, тренды

Переходы в мобильном меню

Пример смещающегося перехода от Paper. Другие примеры мобильной анимации можно найти на сайте Capptivate.

Минимализм/инновационные формы

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

веб-дизайн, тренды

 

Кнопки скроллинга, множество указателей

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

веб-дизайн, тренды

Навигация

Навигация по типу pushdown и выдвигающиеся слайдеры (как можно видеть на сайте Medium) превращаются в устойчивый тренд веб-дизайна.

веб-дизайн, тренды

Реакция на статью
поделюсь
100%
интересно
0%
полезно
0%
не уверен
0%
скучно
100%
где автор?
100%
Комментарии
Оставить отзыв

    You must log in to post a comment

    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Уведомления о новостях, статьях и инфографике будут приходить раз в неделю.
    ПОДПИШИТЕСЬ НА НАШУ РАССЫЛКУ!
    Позвольте нам обновлять ваши знания раз в неделю.