Веб-дизайн и анимация

"Давайте будем ходить реально ногами по жизни."
Е. Лахова, лидер движения "Женщины России"

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

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

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

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

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

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

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

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

Случай 2. Смена отображаемой информации
Очень удобно использовать анимацию в веб-дизайне для отображения нескольких информационных элементов в одной и той же области экрана. Например, отображение пояснений к карте. Когда мышь наводится на определенный участок карты, в углу экрана появляется информация, относящаяся к этому участку.
Также имеет смысл использовать анимацию в веб-дизайне для отображения активных областей (например, на той же карте). При наведении мыши активная область начинает как-то выделяться (к примеру, мигать). Такой эффект в веб-дизайне обозначает на понятном пользователю языке, что при нажатии на область что-то произойдет. А вот что именно - должно быть указано во всплывающей подсказке.
Важно при этом, чтобы эффект анимации проявлялся только при наведении мыши на область, а не присутствовал все время. Представьте себе, что на карте все активные области будут постоянно мигать и переливаться разноцветными огоньками. С такой картой будет очень трудно работать.

Случай 3. Отображение объемных структур
Экран компьютера дает только двумерное представление об объекте. Поэтому изображение трехмерных структур ставит перед веб-дизайном непростую задачу. Конечно, чтобы дать пользователю полное представление о таком объекте, можно объект представить в разных проекциях. Но часто более эффективным (и эффектным) является анимированное изображение объекта, позволяющее пользователю изучить его со всех сторон. При этом движение объекта должно быть достаточно медленным - чтобы пользователь мог спокойно рассмотреть его. Лучшим вариантом, конечно, является управляемая анимация - когда пользователь сам может поворачивать объект как ему нужно. Но это уже довольно сложная анимация, выполняемая средствами флэш-программирования. Да и "вес" такой картинки будет весьма не мал.

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

Случай 5. Привлечение внимания
Несмотря на приведенную выше критику, иногда в веб-дизайне анимацию можно и нужно использовать для привлечения внимания. Но важно, как использовать. Если, например, мы хотим выделить в меню название страницы, на которой находится пользователь, мы можем поставить мигающую кнопку. Но "мигнуть" она должна всего несколько раз. Только, чтобы обратить внимание пользователя на себя. А дальше ей достаточно изменить немного цвет.
Или выплывающий текст. Если какое-то важно сообщение сделано в виде текста, "выплывающего" из-за края экрана - это вполне разумный прием в веб-дизайне для привлечения внимания. Но важно при этом соблюдать меру. Текст должен "выплыть" только один раз. Лишь только для того, чтобы пользователь обратил на него внимание. А дальше текст должен стоять на месте.
Рассмотрим флэш-анимацию. Это очень мощный инструмент, позволяющий делать веб-сайты, которые не только великолепно выглядят, но и удобны для пользователя. Но:
Ни одна российская поисковая система пока не индексирует текст в флэш-роликах таких веб-сайтов (а значит, содержание такого флэш-сайта будет недоступно для поиска). Яндекс делает только первые шаги в этом направлении.
Большинство посетителей веб-сайтов сегодня пользуются низкоскоростным модемным входом. А значит, вся эта красота Вашего веб-сайта им будет просто недоступна. Вариант изготовления веб-сайта в двух версиях - обычной и флэш - обходится заказчику слишком дорого.
Поэтому мы не рекомендует своим Клиентам увлекаться флэш. Но при этом скрупулезно отслеживаем информацию, посвященную расширению применения флэш в разработке веб-сайтов. И как только Яндекс объявит о начале индексации флэш-роликов, настанет время более активного использования технологии флэш в разработке веб-сайтов.
Вывод из сказанного следующий. Если анимацию употреблять с конкретными целями и не злоупотреблять ею, то это вполне приемлемо. Проблемы появляются, когда анимированные изображения используют просто так - чтобы показать, что веб-дизайнер это умеет делать. Или применяются в таком количестве, что пользователь без раздражения уже смотреть на них не может. Даже если эти картинки - произведения искусства. Важно помнить: все таки пользователь пришел на Ваш веб-сайт получить информацию, а не любоваться мастерством веб-дизайнера.

Статьи по теме

Гигантская подборка сервисов для веб-дизайна. Логотипы, фотобанки, иконки, шрифты и прочее

Онлайн-сервисы для работы с визуальным контентом и дизайном сайта, собрали бесплатные и недорогие площадки. Материал обновлен...

2023-12-28

Дизайн сайта: особенности творческого процесса

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

2019-08-07

Создание логотипа: семь сервисов в помощь

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

2019-01-30

20 ценных уроков дизайна от "Мстителей"

Может это и звучит как-то странно, но марвеловские супергерои могут не только скрасить наш досуг своими приключениями, но и дать нам нес...

2015-05-11

15 трендов веб дизайна в 2014-2015 году

1. Первостепенность дизайна для мобильных устройств. Разработка дизайна теперь начинается с маленьких экранов, следующим шагом являетс�...

2014-06-05

Как не надо верстать сайт или 7 ошибок начинающего веб-мастера

Прежде чем приступить к продвижению сайта в сети Интернет, необходимо позаботиться об отсутствии в нем ошибок, связанных с неправильно�...

2011-12-27

Факторы, определяющие хороший логотип

Если вы решили создать логотип, то нужно подумать о том, где он может использоваться. Существует пять факторов, которые определяют наско�...

2011-12-27

Борьба поисковиков и оптимизаторов

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

2011-04-13

Почему не стоит скачивать шаблоны с варезников

Нам часто задают один и тот же вопрос, — какой смысл платить нам за установку шаблона, если полно варезников, где все шаблоны можно скача�...

2011-04-13

О пользе точности темплейтов

Лирическое отступление: Темплейты для сайта (сториборды, вайрфреймы) - спроектированные проволочные схемы страниц сайта. Темплейты пок...

2011-04-07

Методы веб-дизайна и юзабилити

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

2011-04-07

Шаблонные решения для web-сайтов

При проектировании стандартных элементов веб-сайта посмотрите, как это сделано на других веб-сайтах, и не изобретайте велосипед. Меньше...

2011-04-07

Как сделать картинки в стиле Карсона

Самое модное сейчас в дизайне — шрифты. Их в работе должно быть как можно больше. Неважно, ЧТО вы этими шрифтами пишете, главное — раск�...

2011-04-07

Переживания должны передаваться

Поток безопасного оформления сайтов, не оставляет после их просмотра никаких переживаний, кроме безысходности. Несмотря на все огранич...

2011-03-29

Про заказчиков

Сегодня наш выпуск посвящён не дизайну или дизайнерам, а тому, с кем они имеют дело — заказчикам. Заказчики делятся на несколько групп. Т...

2011-03-29