Тема для сегодняшней дискуссии выбрана не случайно. Воплотив в жизнь принципы, о которых говорилось в
предыдущих статьях, посвященных нюансировке, вы могли убедиться, что нюансировка – это
пассивный инструмент подачи контента. Это значит, что с её помощью мы можем улучшать подачу информации на визуальном уровне и на уровне очевидности, но не можем контролировать последовательность её восприятия пользователем. Например, на странице среди прочей информации есть два интерфейса с одинаково хорошо проработанными нюансами. И нам необходимо показать, что сначала необходимо заполнить первый интерфейс, а только потом второй. Эту задачу можно решить путем написания краткой инструкции, что недопустимо для уважающего себя дизайнера юзабилити-корректных ресурсов. Тогда на выручку приходят принципы создания динамики в дизайне веб-страницы (
активный инструмент), позволяющие за счет объектов, их расположения и света корректировать и направлять внимание пользователя, путешествующего среди многообразия контента.
Я выделяю три вида динамики:
- объектная
- цветовая
- динамика света
Объектная динамика создается за счет предмета, который олицетворяет объект веб-страницы либо за счет пространственных соотношений этих объектов (их определенная последовательность либо разница в габаритах), создающих эффект движения. Т.е. не только иконка ракеты, стремительно рассекающей пространство поперек страницы, может олицетворять динамику, но и, например, блоки текста, расположенные в следующем порядке, создают динамику, заставляя двигаться взгляд пользователя от верхнего левого угла в нижний правый:
Часто для создания объектной динамики я применяю «стрелку»:
(как всегда, все примеры взяты из моего портфолио)
Стрелка вмещает в себе главное меню, форму поиска и заканчивается сочной кнопкой «GO». В совокупности с поперечными тенями и нижним скосом образует динамику слева направо. Взгляд движется от широкого к узкому(в случае теней) и от крупного, яркого к меньшему(в случае нижнего скоса). Таким образом мы не только показали на горизонтальную ориентацию составляющих блоков, но и упорядочили сам контент.
Вдогонку:

«Стрелочки-стрелочки-сердечки… вспоминаем статью про рифму!»
Цветовая динамика реализуется за счет такого качества объекта, как цвет. В данном случае мы можем манипулировать не столько оттенками, сколько насыщенностью (яркостью).
В этом примере, вопреки главной заповеди дизайнера «Не скопируй», хорошо видна динамика справа налево за счет галстуков и градиентной полосы (о ней чуть позже):

В следующем примере динамику создают не столько наклон или кегль букв логотипа, сколько его цвета (от яркого красного к белому):

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

Невидимый источник света, направляющий взгляд из левого верхнего угла в правый нижний(именно к ждущим пользователя ссылочкам :-) )
Хотел бы еще поведать об устойчивых динамических конструкциях и гибриде цветовой и объектной динамик, но, боюсь, что это еще целая статья… следующая статья.
Как всегда, оригинал этой и других статей в моём
блоге.