Это не типичный обзор текстур для веб-сайтов или ресурсов, где их можно загрузить и повыбирать. И тем более, мы не будем рассказывать о том, как текстуры создать самому, нарисовать или обработать свою собственную фотографию части напольного покрытия. Об этом мы уже рассказывали и не один раз.
А если вы планируете создать текстуру или просто задались непростым вопросом о том, как подобрать её для конкретного проекта. Наверняка, многие не раз задумывались о том, существуют ли какие-то тонкости, нюансы, может, общие правила или тенденции того, как к тематике или стилизации веб-дизайна можно было бы выбрать некоторый рисованный фон. Вот именно о таком моменте мы и поговорим сегодня.
Хотя существует много способов использования текстур в веб-дизайне, можно получить гораздо более прекрасные результаты и затратить на это невероятно малое количество времени, если следовать другим, более модернистским путем. Особенно если учесть, что в 2018 году к текстурам внимание общественности приковано более всего, и они в приоритете.
Простота и неброскость
Некоторые читатели могут сейчас подумать, как такое может быть, чтобы веб-дизайнеры говорили о неброскости и скромности. Дизайн ведь должен быть ярким, запоминающимся, впечатляющим. Но дизайн тогда прекрасен, когда пользователи его и не замечают. И к текстурам это относится более всего. Их-то можно и совсем не заметить. Это могут быть почти невидимые элементы, которые способствуют общей читаемости и удобству использования, обеспечивая при этом глубину или визуальный интерес.
Простые и неброские (не аляповатые) фоновые текстуры – идеально подходят для таких скромных дизайнов. Так, например, дизайн сайта Github's Universe Conference (для конференции, которая прошла в конце прошлого года) использует текстуру черного фона с едва уловимыми белыми точками, имитирующими звездное небо. При этом текстура неба очень хорошо создает объемность дизайна и, оставаясь на заднем плане, подчеркивает и выделяет логотип, заголовок, элементы управления.
Такие неброские текстуры очень хорошо отличаются от прочих, поскольку обладают редким повторяющимся узором и бывают любого цвета. Но идея в том, что их не создают для привлечения внимания. Пользователи не должны фокусироваться на них. Их (текстур) задача только в том, чтобы подчеркнуть все прочие элементы интерфейса, блоки, секции, текст и так далее. Выделить их. И все.
Аналогичные скромные и едва уловимые текстуры использовались для thetestcenter, varyavega, voltfordrive, dreamsdesign, smithinst. В некоторых примерах такие неброские текстуры были дополнительно анимированы, но анимация эта насколько легкая, что практически и не привлекает к себе взгляд пользователя. На других сайтах текстура применялась только к некоторым секциям лендинга, а не ко всей странице в целом.
Большой и упитанный
Может быть, утончённость и скромность не ваша вещь? Тогда стоит обратить внимание на крупные и большие узоры фоновых текстур. Такие увеличенные в разы размеры узоров хорошо смотрятся там, где передний план сам по себе тяжел для восприятия и где нет никаких иных изображений/фотографий. Использовать такие текстуры сложно, так как, с одной стороны, вы хотите, чтобы в качестве фона была нарисована черепица или кирпичная кладка, а с другой – чтобы такой рисунок не бросался в глаза и элементы интерфейса были хорошо различимы. Здесь нельзя допустить того, чтобы фон вдруг стал в фокусе у пользователей.
Чтобы добиться успеха, придется уделить внимание анализу поведения ваших пользователей, выступить и самим в качестве такого обывателя. Понравится ли вам самим, вашим знакомым дизайн в целом, будет ли удобно использовать сайт? Резкое снижение трафика, низкие конверсии – те самые признаки того, что что-то в вашей визуализации что-то неправильно, а пользователи либо перестали посещать сайт, либо им неудобно и они быстро его покидают.
Для примера крупных текстур посмотрим на dogbreedcartoon, studiorevele, tirrenascavi, geex-arts. Здесь в большинстве случаев в качестве крупного узора использовались обычные геометрические фигуры, но настолько плотно рассыпанные по холсту, что любая иная графика превратила бы дизайн в «кашу». Но в данном случае, поверх таких текстур были использованы только текст или тонкие линии стрелок, которые четко видны, понятны и смотрится все в целости более гармонично.
Трендовая текстура
Текстура, созданная по последним трендовым веяниям в сфере веб-дизайна, способна превратить сайт одним своим присутствием на нем в ультрасовременный и свежий. Геометрия и яркие цвета, градиенты – то, что модно в 2018, и, разумеется, что сайт apacio выглядит неимоверно привлекательным и занятным. Благодаря сочетанию яркой цветной геометрии на темном фоне создаётся приятная текстура и глубина, что помогает пользователям сосредоточиться на большом тексте и призывах к действию, поскольку эти элементы очень ярко и живо контрастируют с фоном. Отметим также простой без засечек шрифт для заголовков, легкую тень и вот уже создан потрясающий эффект объемности, будто бы текст находится над текстурой.
Но между тем, взаимодействие текстур между собой тоже создает аналогичный эффект. Обратите внимание, что более темные, тусклые по цвету элементы визуально выглядят еще дальше, будто они совсем далеко. Затем более яркие и крупные объекты, и уже на переднем плане текст и кнопочки. Да, это в моде, это в тренде и это… просто красиво.
То же самое можно сказать и о текстуре на brontidebg, где отдельные листочки рассыпаны по всему холсту, но от их размера, сочетания с элементами создается ощущение глубины в дизайне; twotwentytwo, где с каждым крупным элементом можно взаимодействовать, но и каждый такой элемент фона также перекрывает текст; namethatplace, makeitdriveable, republic.
Изображение в текстуре
Еще один тренд, который имеет некоторые условности. Суть в том, что вся текстура не должна иметь повторения. Она создается одна, большая (или маленькая) и размещается на странице один раз. Обычно, в качестве таких текстур используют фоновые изображения (видео), которые подходят к тематике сайта, бренда или для сообщения о чем-то. Таким образом, они создают еще один уровень визуальной привлекательности и интереса, возможности взаимодействия.
Между тем, вся хитрость заключается в том, чтобы эффективно разместить и «обыграть» изображение в фоне, а потому обычное приглушение цветов и яркости, тонирование – не единственные возможные варианты. Хотя отметим, что именно снижение яркости позволяет создать эффект глубины и многоуровневость в веб-дизайне.
В качестве примеров посмотрим на oxeva, valnetinc, okkapi, papertiger, theshift. На каждом из проектов используется один тип текстурного фона из изображения. Но дополнительно где-то картинка сочетается с эффектами затемнения и приглушения яркости, с эффектами вырезания по маске, анимацией. Даже логотип и тот накладывают в виде трафарета поверх фонового изображения. При этом сами изображения бывают иногда размытыми, иногда с подчеркиванием детализации, акцентируя внимание на важных моментах, относящихся к сайту.
Так или иначе, но изображение/фотография в фоне используется один раз, не множится, не повторяется, но насыщается дополнительными художественными эффектами, что делает её более яркой, живой, притягивающей и интересной.
Сочетания цветов
Смешивание и сопоставление оттенков и тонов одной палитры – еще один способ создать интересную текстуру для фона. При этом текстура получается достаточно смелой, яркой и подходит для того, чтобы подчеркнуть размещенные на ней текст и простенькую графику, и элементы. Но если вы решите изменять цвет в пределах рабочей палитры, то это уже придаст дизайну глубину и поднимет визуальный интерес. Здесь нужно быть аккуратными, чтобы не переиграть, а то получится, что пользователям будет совсем не интересно смотреть на заголовок, тексты и кнопки.
У проекта typesoftype как раз есть подходящий пример такой текстуры. Цвета комбинируются с гигантскими буквами и создается геометрический узор. Здесь нет теней, градиентов, но есть строгие линии буквенных форм, которые задают динамику текстурному изображению, придают глубину, баланс, и помогают взгляду пользователя сосредоточиться на заголовке. Иными словами, помогают его заметить, прочитать, обратить на него внимание, а не просто, после открытия страницы, сразу начать её листать вниз.
Также интересный подход к реализации сочетания цветов у hotel-frida, где дизайнеры использовали в фоне цветные брызги. С одной стороны, и фон не пустой, с другой, в целом, под стилистику всего дизайна подходит очень отлично. Если же посмотреть на dtofilms, то периодически во время пролистывания страницы одноцветный фон заполняется сиреневыми квадратиками, которые создают некоторое подобие текстурного узора.
Смешиваем градиент
Градиенты модны и визуально привлекательны. Из года в год их используют в большей или меньшей степени, но редко когда они отсутствовали в трендах вообще. Когда же дело доходит до использования градиента в качестве фоновой текстуры, вы можете использовать его самостоятельно или сложить его с фотографией.
При этом подходит любая комбинация сочетания цветов, главное, чтобы подходило по контрасту к палитре проекта и фотографии. Кроме этого градиент позволяет быстро создать глубину в 2D пространстве. Поскольку все визуальное волшебство градиентов зависит даже не просто от сочетания конкретных цветов, а от того, как (под каким углом, в каком тоне и пр.) они будут смешаны, то частенько придумать самим интересный и «живенький» эффект бывает сложно. На помощь может прийти проект WebGradients, на котором таких градиентов невероятное количество.
Что же касается непосредственного использования градиентов фоном в веб-дизайне, то посмотрим на mobipaid, где существует несколько градиентов, с помощью которых создается объемность, а также и текстуры. При этом небольшие анимации буквально перекрывают собой визуально градиент и на него поначалу и внимания-то никакого не обращаешь. Зато кнопки призыва к действию яркие, четкие и пропустить их уже сложно. Легкость и воздушность фоновых градиентов позволяют взгляду проще ориентироваться на странице, понять, где и что находится. Темные участки градиента расположены даже там, где и элементов-то никаких нет, а потому взгляду и не хочется туда перемещаться. Четкие волнистые линии разделили градиенты так, что взгляд будто бы плывет от анимации к кнопкам, к иконкам и далее к контенту. Идеи концепции открытости в веб-дизайне как раз и нашли свое воплощение.
А еще стоят внимания проекты adova-group, monopo, kikk, faits-marquants, на которых использовались сложные градиенты, многоцветные, анимационные, с дополнительными художественными эффектами и оформлением. И как можно заметить, градиенты располагались дизайнерами так, чтобы переход от одного цвета к другому помогал взгляду пользователя изучать контент и взаимодействовать с интерфейсом.
Заключение
Отличная, красивая, эффектная текстура фона может добавлять дизайну объем, повышать его визуальный интерес, привлекать к себе с эстетической точки зрения. Несмотря на то, что до сих пор многие дизайнеры используют самые простые фоны с одним цветом, вполне можно добавить легкую и незаметную текстуру и сайт преобразится, оставаясь при этом строгим и брутальным.
Трюк с текстурами заключается в том, что они должны быть тонкими и практически сливаться с фоном, незаметными, неброскими. Они должны подчеркивать и выделять собой то, что находится на переднем плане. Не перекрывать их, а будто-то бы преподносить пользователю на… «тарелочке». Такая работа может быть непростой, а созданный баланс становится хрупким и при дальнейшей работе с дизайном любой новый элемент может разрушить структурность и визуализацию.
Удобным вариантом могут стать множественные контрасты между фоновыми текстурами и изображениями переднего плана, элементами интерфейса, текстом. Тогда заменять элементы или менять их количество может стать проще и быстрее. Например на impossibleisinevitable, simila, текстуры нет как таковой (скриншот в начале материала), но эффект блика и свечения придает градиенту и фону именно визуальное ощущение присутствия текстурного узора.