Как работать с эффектами и текстурами в дизайне

Первый веб-сайт появился более 30 лет назад. Он представлял из себя черно-белую страницу с описанием новой технологии World Wide Web. Первые рекомендации по применению стилей CSS были утверждены в 1996 году.

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

Но тогда, возникает вопрос, как привлечь и удержать внимание пользователя, если главные требования веб-сайтов это простота, понятность и хорошая конверсия? Сегодня мы разберем такие приемы, как применение текстур и эффектов. Как, когда и нужно ли вообще их использовать?

Текстура, используемая в веб-дизайне, представляет собой изображение, имитирующее поверхности из реального мира, такие как дерево, стекло, бумага, металл и пр.

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

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

Существует несколько определений, в которых можно запутаться. Поэтому, прежде, чем продолжить, давайте выясним, в чем разница между текстурой, паттерном и фоновым изображением.

Начнем с самого простого.

Фоновое изображение — это картинка или фотография, занимающая все пространство на экране.

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

Паттерн — по-русски узор. Представляет из себя повторяющийся элемент, который содержит в себе рисунок.

Он может быть простым и повторять набор геометрических фигур, а может состоять из витиеватого текста.

Текстура же представляет из себя более крупные изображения, которые обычно не повторяются.

Это могут быть как непосредственно фотографии определенных текстур, так и графическая имитация.

Конечно, текстура и паттерн могут быть 2 в 1, но это чаще исключение, чем правило. Если мы представим диаграмму Венна, то общая часть будет крайне мала.

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

• Как мы уже говорили, текстура помогает ассоциировать веб-сайт с чем-то определенным

Т. е., используя текстуру, мы вызываем у пользователя некие чувства, которые, в идеале, должны совпадать с тем, что мы задумали.

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

• Также, используя текстуру, мы можем направлять пользователя

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

• Текстура может задавать атмосферу

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

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

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

Поговорив о том, что и зачем использовать, пришло время обсудить как.

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

Поиск баланса

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

Сохранение читаемости

Этот принцип относится не только к текстуре, а в принципе к читаемости текста на веб-сайтах, но в сочетании с текстурой нужно быть более аккуратными. Не стоит располагать большой блок текста на пестрой детальной текстуре. Проверяйте контрастность. Мыслите критически.

Поддержка определенного стиля

В примерах выше мы видим, что хорошо то использование текстуры, которое создает гармонию на всей странице. Анализируйте бренд, аудиторию, конкурентов, чтобы понимать, что уместно, а что нет. Такие тонкие нюансы, как текстура газеты и сетка газетной страницы, как текстура меловой доски и рисунки мелом, должны быть продуманы. Гранжевые текстуры отлично подходят рок-группам, но плохо сайту для Барби, мы же все это понимаем?

Подводя мини-итог, можно сказать, что текстура полезна только там, где она нужна, но это отличный способ добавить едва заметного настроения и атмосферы, передать задумку. Главное, практиковаться, анализировать веб-сайты, где есть текстура, смотреть насколько она выигрышно и уместно смотрится, пробовать в своих макетах. Насмотренность все еще остается отличным решением.

Брать текстуру можно на стоках, на ресурсах как платных, так и бесплатных, а также сделать фото или создать в графическом редакторе, если достаточно навыков.

Давайте теперь разберем другие способы сделать веб-сайт более интересным и привлекательным.

Эффекты — это трансформация объекта или изображения для достижения необычного результата.

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

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

Один из самых популярных эффектов, которого можно добиться, используя режимы наложения это двойная экспозиция (double exposure или multiple exposure). Конечно, для того, чтобы добиться невероятного результата, придется попрактиковаться, но даже самый быстрый вариант может хорошо вписаться в вашу концепцию.

На самом деле, те или иные эффекты будут реализовываться через режимы наложения. Сложность только в количестве слоев и масок или использования дополнительных инструментов. Какие-то эффекты можно сделать в Figma, для каких-то понадобится Photoshop, также ускорить реализацию вашей идеи можно с помощью расширений и виджетов. Далее мы рассмотрим эффекты, для которых потребуется чуть больше времени и навыков, чем выбор режима наложения.

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

Еще один эффект, который набирает популярность в работе с визуальными экспериментами, — это эффект стекла. Данный эффект достаточно чистый, лаконичный, но в то же время так необычно преображает изображения, что можно добиться вау-эффекта, используя лишь его. Его можно использовать в тематике моды, брендов одежды, аксессуаров.

Как и текстуры, некоторые эффекты служат для того, чтобы передавать общее настроение сайта. Если это продажа антиквариата, старых кассет и пластинок, а может, реклама кинотеатра под открытым небом, сидя в старых машинах, то можно использовать и такие эффекты под старину:

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

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

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

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

Можно использовать один из самых популярных и обычных эффектов — эффект шума, чтобы придать веб-сайту динамичности.

Во всем есть свои исключения. В использовании эффектов и текстур тоже. Фестивальные сайты тому доказательство. Одна из причин, почему дизайнер может размахнуться в дизайне, — это количество пользователей и количество посещений на каждого пользователя. Есть очень крутые, продуманные, фееричные сайты, мы смотрим на такие под впечатлением, а потом закрываем и не возвращаемся, потому что это одноразовая «акция». Покупать одежду в масс маркете, где, прежде чем добраться до каталога, надо пройти загрузку, анимацию логотипа, горизонтальную прокрутку меню, никто не будет. Во всем нужен баланс.

Но давайте напоследок взглянем на веб-сайты, где кажется, что все чересчур, но при это отлично смотрится.

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

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

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

Главное – баланс. Помнить о пользователе, но пробовать новое.