Меню
0 Comments

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

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

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

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

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

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

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

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

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

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

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

 

 

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

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

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

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *