Строгость, четкость, прямолинейность в стилистике дизайнов сайтов уходят на второй план, когда веб-мастера решаются на использование волнистых и «мягких» линий. Там, где раньше были однотонные фоны, начинают появляться изогнутые линии-разделители или градиентные переходы цвета из одного в другой. Легкие, воздушные элементы способны вызывать самые разные эмоции и ощущения в дизайне. И что особенно приятно – волны и нежные линии можно сочетать и применять различными способами, что дает большой простор для фантазии дизайнера. Разумеется, что и дизайны сайтов выглядят все по-разному и найти полностью похожие друг на друга достаточно проблематично.
Ах, да, такая тенденция, обратим внимание, может подкрасться к вам совсем незаметно, ибо проявляется в самых разных формах. Вы и сами сразу не осознаете, что плавно перешли от строгой чопорности к игривой воздушности, а ведь визуально все будет выглядеть очень даже недурно.
Давайте посмотрим более внимательно на формы и проявления тренда волн и «мягких» линий в веб-дизайне. Возможно, некоторые примеры сайтов будут повторяться, но сразу оговоримся, тому есть несколько причин, и по ходу нашего рассказа вы и сами узнаете о них.
Акценты
Не всегда прямоугольники и круги могут придать настроение сайту. Тогда есть вариант попробовать добавить изогнутые линии и волны. Основные моменты могут быть подчеркнуты крупными элементами, но также и небольшими кружочками, пятками, кляксами. В результате плавных кривых форм без острых углов, дизайн сайта получает иной вид, стиль и некоторую привлекательную изюминку.
Наглядно представить, о чем идет речь, можно на Papillons de Nuit, momentomultimedia, brring, mi-pad, oprette, topnology. На каждом из них, в той или иной степени, основные моменты подчеркнуты именно волнами. Фоны имеют разделение на светлый и контрастный цвет. И на каждом есть что-то особенное, то это анимация, то сочетания волн и кругов. Достаточно часто применяют и «мягкие» линии, сглаживающие собой острые углы прямоугольника. Такие элементы выглядят нестрого, но все еще четко и основательно.
Вне зависимости от тематики сайта: интернет-магазин, дизайн-студия, строительная компания, финансовое учреждение – решения, найденные дизайнерами, отлично смотрятся и не нарушают современных трендов веб-дизайна. Да, это немного весело выглядит, ярко и достаточно привлекательно на фоне конкурентов. Но именно такой подход позволяет обеспечить и дополнительный траффик на сайт.
Нажми меня!
Минималистический стиль, плоские элементы и иллюстрации – популярны и стандартны на сегодняшний день. Но добавление волн может помочь в привлечении внимания к отдельным деталям и, в особенности, к призывам к действию.
Разумеется, что можно использовать стрелочки, треугольнички, но и волны вполне отлично могут с этим справиться, обеспечивая более тонкий подход к дизайну. Пользователи не будут ощущать, что их заставляют нажимать или покупать, их не заставляют обращать внимание на призыв. Но они будут его явно видеть и понимать, что, да, он есть и его можно использовать.
Recruitz, celineandjad, orange-idea, designerspace, oprette, mi-pad используют волны как разделитель между призывами к действию и дополнительной информацией о деятельности компаний. Такой мягкий переход позволяет глазам плавно перемещаться между элементами и проще воспринимать большой объем данных. Также создается и эффект глубины между элементами, а потому вся конструкция сайта выглядит не такой уж и простой. Что уж говорить о ярких оттенках цветов, контрастности и четкости линий. И это при том, что в качестве волны используются и растительные элементы. Но ведь смысл-то в волнистом движении.
Волновая иллюстрация
Одновременно с тем, как волны и «мягкие» линии используются в оформлении фона, применяют их и в качестве иллюстраций. Такой подход к дизайну в корне отличается от многих других подходов, заменяя собой и использование больших иконок, прямых линий, указателей, так популярных в последнее время. Но результативность не хуже и посетители все также могут с легкостью ориентироваться на таких сайтах и находить нужное достаточно быстро.
Волнистые линии помогают и обработать белое пространство. Проект Retrace Health использует волны в качестве разделения неба и белого фона, которое еще и анимируется. Движение волны едва заметное, но позволяет очень четко разделить пространство с заголовком от прочей информации. С одной стороны, визуально пространство страницы занято, с другой – обеспечен акцент на главном.
Аналогично, волновая иллюстрация использовалась на oprette, amnrus, district0x, withtiny, elje-group, iammoving. Разумеется, вместо волнистых линий и границ можно было нарисовать и прямые, но визуально проект воспринимался бы совсем иначе. Более тоскливо, строго. Волны придают дизайну некий эффект загадочности и необычности.
Серьезным все по плечу
Волны и «мягкие» линии могут сделать больше, чем просто предстать во всей своей красе. Они могут быть и на фоне, и в виде элементов, даже если проект настолько серьезный, насколько возможно, и использование прямых линий куда как более востребовано. В таком случае волнистые линии позволяют сбалансировать концепцию в целом, добавить изюминку, немного акцента.
Проект Ghafari состоит почти полностью из прямых линий в оформлении. Но если приглядеться, то можно видеть и появление волнистых линий. Глаза посетителей сами тянутся к интересной форме, подсознательно ищут подтекст такому использованию. Кнопочки, яркие цвета, крупный шрифт в заголовках, симметричное расположение инфоблоков. Сайт серьезен и строг. Но лёгкая, воздушная волна уравновешивает эту «тяжесть», сглаживает жесткие формы, но не разбивает дизайн в целом.
Этот метод применения волн и «мягких» линий важен для более обстоятельного рассмотрения. Дело в том, что не все элементы дизайна действительно несут что-то важное для посетителя. Иногда дизайн таких элементов более невидим и несет в себе второстепенную роль. Но как раз на него и ложится сбалансирование дизайна в целом, всей концепции, подачи материала.
Посмотрим на momentomultimedia, brring, amnrus, heartbeat, thecoloradan, pomegranate-travel, ninefeettall. Такие серьезные и строгие сайты, но волновые элементы есть везде и в разных вариациях использования . Воспринимается это ничуть не хуже, если бы волнистых линий не было бы вовсе. Где-то, напротив, «мягкие» линии сгладили углы, а потому дизайн получился, в целом, более дружественным, приятным и спокойным. В психологии даже считается, что острые и прямые углы не слишком хорошо влияют на эмоции людей и их душевное состояние.
Градиенты и волны – друзья навек
Волны и плавные линии, как мы обычно их понимаем, это элементы в рисовании, дизайне, которые позволяют сделать слоистую конструкцию. А она уже воспринимается менее шаблонно. Чтобы было понятнее, поясним, что слоистость заключается в том, что волны рисуются в несколько линий, которые пересекают друг друга, но не следуют параллельно друг с другом. Если на фоне используется градиент, то это не значит, что переходы должны быть оформлены по прямой линии. Попробуйте волны, тем более, что они будут чуть более естественнее выглядеть.
Например, Algolia используют сочетание разных элементов: от градиентов до округлых кнопочек и рамочек. Вся же конструкция отлично смотрится, легко воспринимаемся и проста в создании.
В тоже время iammoving, topnology, peekabeat, beoplay, thecoloradan также имеют в своем дизайне волны или округлые мягкие линии, которые и градиент передают и разделителями служат. Иными словами, с помощью одного применения волны веб-дизайнеры могут создать весьма интересную концепцию, которая не потребует дополнительной балансировки.
Анимация
Что приходит на ум при слове «волна»? Океан – самое простое; море, шторм, прибой. Именно поэтому, какая бы в целом на сайте не использовалась бы анимация, но аминирование волны всегда стандартное и реалистичное. И именно поэтому никто и никогда не забывает, что такое волна, а те, кто не бывал на море/океане, всегда знают, это еще с детства. Но это применимо, если рассматривать мысли обычного человека.
Что же до интернета, то анимация волн обычно имитирует и поток океана, движение облаков или горных хребтов. На переднем плане машинка едет или стоит на дороге, а за счет движение гор создается иллюзия движения авто. Но, так или иначе, такая анимация успокаивает, придает душе гармонию. Есть мнение, что на течение воды можно смотреть вечно и, смотря на нее, человек отдыхает. Дизайн сайта не должен раздражать, он должен привлекать. Логично, что анимация волн особенно хорошо подходит для этого, вне зависимости, вода ли это по сюжету или облака, горы и прочее. Волнистое плавное движение – главное.
Проекты Futuramo, elje-group, topnology, oprette, celineandjad, amnrus, riocriativo используют анимацию волны в самых разных сюжетах. При этом волны двигаются естественным образом и иногда даже не имеют ничего общего с тематикой сайта. Они попросту создают сцену, они работают с эмоциями и подсознанием человека, улучшают пользовательский опыт и позволяют заинтересовать посетителя, помочь ему изучить контент.
Самые простые сюжеты, а захват внимания аудитории велик. Зачастую использование анимации волн проходит через весь дизайн (на всех страницах), что создает, эдакий, эффект рассказа истории о компании. А это совершенно иное восприятие для пользователя, иная изюминка.
Вывод
Линии с большой кривизной создают иное направление и настроение проектов. Простое добавление волнистой линии или сочетание с прямыми могут в корне изменить все восприятие сайта, и даже отношение к компании, и к сотрудникам, и к веб-дизайнеру. Но если рассматривать сам дизайн, то он становится более простым, легким, привлекательным, воздушным.
И знаете, пользователи ничуть не против такого визуального опыта. Да, волны редко используются в разных проявлениях. И причина тому – сложность. Не создания анимации даже, не рисования, а продумывания сочетания и применения в целом. Тренды основываются на четких, прямых линях, а они проще в использовании. Волны нужно продумать, какой изгиб, длина, где их разместить, сколько нарисовать, какой градиент применить для придания глубины.
Бывает, это сложно, бывает, в этом не видят смысла. Но это не значит, что волнистые линии никому ну нужны или они «убивают» дизайн. Все дело в том, как их применять и сочетать. Мы привели много примеров, и если подробно рассмотреть каждый из них, то можно увидеть и тренды, и стандарты, и волны в тесном, ажурном, изящном и тонком переплетении. Разве дизайны выглядят плохими, устаревшими и не функциональными? Мы этого не заметили.