Визуальный ритм. Учимся композиции у природы и художников
Когда элементы дизайна повторяются, интервалы между этими повторениями могут создавать у зрителя ощущение ритма и иллюзию движения. Музыканты создают ритм при помощи звуков и пауз. Дизайнеры — с помощью пробелов и повторения визуальных блоков. Ритм в веб-дизайне создается почти сразу после начала проектирования, когда на экране появляются несколько элементов. Важно то, что мы можем оказывать влияние на восприятие пользователя, прогнозировать его реакцию и эффект от заданного ритма. Такая особенность ритма открывает большие возможности для дизайнера. Есть примерно пять типов визуального ритма:
1. Случайный ритм. Повторяющиеся элементы без определенного регулярного интервала создают случайные ритмы. Падет снег, лежит галька на пляже, двигается поток машин: все это примеры случайных ритмов в действии.
2. Регулярный ритм. Как и сердцебиение, регулярный ритм повторяется снова и снова. Помните, что глазам пользователя «нравятся» свободностоящие элементы. Поэтому есть риск, что регулярный ритм в макете может стать монотонным и будет звучать как надоедливый и раздражающий звук капающего крана.
3. Переменный ритм. Могут чередоваться два или несколько разных мотивов. Такой тип ритма обычно связан с изменением размера формы, цвета. Один мотив может быть перевернут, зеркально отражен, интервал между мотивами может чередоваться, как на картине M.C. Escher - Lizard, 1942
4. Flowing Rhythm. Этот ритм создается волнообразными элементами и интервалами, изгибами мотивов и пространств. Естественный поток ритма можно увидеть в потоках и водных путях, пляжах и волнах, песчаных дюнах и ледниках, холмах и ветреных травах. Отличный пример — картина Gloria Petyarre - Bush Medicine Dreaming, 2008
5. Прогрессивный ритм. В прогрессивном ритме каждый раз, когда мотив повторяется, он немного меняется, трансформируется - мотив прогрессирует от одного элемента к другому. Этот мотив проявляется на картине Marcel Duchamp - Nude Descending a Staircase (No. 2), 1912
Добавляя интервалы или пробелы между элементами, повторяя элементы в определенной последовательности, мы расставляем акценты в макете и создаем нужный визуальный эффект. С помощью ритма мы можем задать «настроение» пользовательского интерфейса, усилить наше сообщение или сформировать необходимое впечатление.
- Ритм позволяет сохранять общую согласованность элементов в композиции, а это облегчает работу пользователя. Как только мозг распознает ритм, он может расслабиться и лучше понять остальную часть дизайна.
- Ритмический рисунок привносит в макет чувство порядка, поэтому дизайн привлекает внимание и побуждает пользователя исследовать сайт дальше.
- Ритм также может использоваться при компоновке различных видов контента на сайте. Пользователь моментально считает, какой вид контента перед ним, лишь уловив композиционный ритм.
- Типографический ритм — это использование ограниченного количества шрифтов, которые хорошо сочетаются друг с другом. Мы создаем ритм с помощью унифицированной схемы. Мимолетный взгляд на текст позволяет увидеть, какие фигуры являются более важными, а какие второстепенными.
- Ритм в цветовой палитре. Если все ссылки на нашем сайте выделяются красным цветом, а подсказки зеленым, значит пользователь будет автоматически идентифицировать красный цвет как линк, а зеленый как дополнительную информацию.
Сайт английской студии копирайтинга «Правило трех» https://rule-of-three.co.uk это отличный пример работы с ритмом в макете.
Регулярный ритм повторяется в разделе Services, Awareness, Action, сетке клиентских логотипов, в общей структуре сообщений в блоге. Когда вы прокручиваете страницу вниз, сталкиваетесь с серией горизонтальных и вертикальных линий, которые создают дополнительный ритм. Текст используется для создания прогрессивных ритмов. Стиль текста от строки к строке варьируются. Круги, линии, квадраты и треугольники повторяются так же в различных вариациях: на странице загрузки, в заголовках, логотипе и иконках.
