Динамика веб-страниц. Экшн в окне браузера.

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



Я выделяю три вида динамики:

- объектная

- цветовая

- динамика света

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




Часто для создания объектной динамики я применяю «стрелку»:


(как всегда, все примеры взяты из моего портфолио)


Стрелка вмещает в себе главное меню, форму поиска и заканчивается сочной кнопкой «GO». В совокупности с поперечными тенями и нижним скосом образует динамику слева направо. Взгляд движется от широкого к узкому(в случае теней) и от крупного, яркого к меньшему(в случае нижнего скоса). Таким образом мы не только показали на горизонтальную ориентацию составляющих блоков, но и упорядочили сам контент.

Вдогонку:


«Стрелочки-стрелочки-сердечки… вспоминаем статью про рифму!»


Цветовая динамика реализуется за счет такого качества объекта, как цвет. В данном случае мы можем манипулировать не столько оттенками, сколько насыщенностью (яркостью).

В этом примере, вопреки главной заповеди дизайнера «Не скопируй», хорошо видна динамика справа налево за счет галстуков и градиентной полосы (о ней чуть позже):




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




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

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


Невидимый источник света, направляющий взгляд из левого верхнего угла в правый нижний(именно к ждущим пользователя ссылочкам :-) )


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

Как всегда, оригинал этой и других статей в моём блоге.