Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Паттерны в веб-дизайне: новый тренд 2015 года

9 июня 2015 | Опубликовано в статьюшечки | 1 Комментарий »

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

 

Генерируемые паттерны

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

Что действительно ново в 2015 — применение таких узоров в дизайне для бизнеса.

001_prizmaspace

002_giantsteps

007_poke

003_jam3

004_fornasetti

Большие данные в паттернах

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

Это, а также рост популярности систем SaaS (программное обеспечение как услуга), в которых продается не продукт, а абстрактный концепт, дали толчок для создания паттернов, словно созданных в спирографе.

005_plaid

006_optimizely

008_acorns

 

Творческие паттерны

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

Геометрические или более естественные, органические узоры, ломающие цифровой шаблон — такие паттерны подчеркивают творческое мастерство и передают идею индивидуализма. Ключ к созданию таких узоров — изменения в повторении, которое добавляет теплый человеческий фактор дизайну.

009_craft

010_echo

011_forbettercoffee

Анимированные паттерны

Веб-дизайнеры не останавливаются на обычном визуальном повторении паттернов. Годами создавались зацикленные анимированные GIF-изображения для формирования повторяющихся узоров. Эта техника чаще используется в сочетании с SVG для создания историй, украшенной анимацией, которая оказывается практичной и в случае с мобильными устройствами.

Такие повторяющиеся паттерны варьируются от цикличного фона до целых серий анимаций, работающих вместе с различной скоростью для достижения бесконечного изменения характера движения. В 2015, имея в виду рост числа используемых мобильных устройств, цикличные SVG помогают применять анимацию без ущерба для скорости.

012_greenman

013_rallyinteractive

014_fieldwork

Сетчатые паттерны

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

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

015_carbure

016_residence-mixte

017_aark

019_offprint

Автор статьи Benjie Moss

Перевод — Дежурка

Смотрите также:




Комментарии

  1. Имя
    Thumb up Thumb down +2

    Этому «новому» тренду 100 лет в обед

[an error occurred while processing the directive]


[an error occurred while processing the directive]