Текстура и узор — невоспетые герои визуального дизайна

Было весело общаться (ха-ха) в Ayagigs Web3 Fellowship, обучающей программе, проводимой в сотрудничестве с Coinbase .

Я высоко оцениваю работу ведущего дизайнера продукта Аджири Омафокпе и сотрудника программы Фолушола Эстер . Они действительно много сделали для того, чтобы сделать программу гостеприимной, познавательной, интересной, и они несут всю группу, которую вы любите видеть.

Мы закончили базовую фазу и переходим к основной фазе, но до этого у нас была неделя испытаний, которая началась в понедельник, 21 ноября 2022 года, чтобы проверить, что мы узнали на базовом этапе. Это было сложно, выполнять всевозможные тесты, включая MCQ, QA, практический тест (вы не поверите, что это было сделано за 2 дня), и эта статья была последним заданием на неделю испытаний.

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

Итак, начнем,

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

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

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

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

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

Варианты использования текстур и паттернов

Текстура в основном используется при разработке веб-приложений, а не мобильных приложений. Паттерны популярны как в веб-дизайне, так и в дизайне мобильных приложений. Причина проектирования должна заключаться не только в том, что он « красиво выглядит », а в том, чтобы выполнять определенную функцию, и основная цель использования текстуры и шаблона при проектировании состоит в том, чтобы повысить уровень и видение веб-страницы. Давайте рассмотрим некоторые из вариантов их использования:

Привлекайте пользователей кликать

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

Улучшенное визуальное представление информации

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

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

Создайте атмосферу и подчеркните индивидуальность

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

Держите это разборчивым

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

Используйте текстуру экономно

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

Практика делает совершенным

При использовании текстур и узоров старайтесь больше. Только после пробы вы узнаете окончательный результат. Поместите текстуру в место, о котором вы никогда не думали, и вы можете найти разные вещи. Чем больше вы используете шаблоны и текстуры, тем лучше у вас получается.

Используйте его с намерением

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

Исследуйте, исследуйте, исследуйте...

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

Отобранные вручную ссылки для изучения текстур

365 текстур для скачивания (JPG, PSD, PAT, ABR) — WeGraphics

Фоны | ГрафическийБургер

Библиотека шаблонов

шаблоны ava7 /// 1905 бесплатных бесшовных фоновых шаблонов

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

Бесплатные генераторы SVG, инструменты для работы с цветом и инструменты для веб-дизайна (fffuel.co)

Pattern Monster — Генератор шаблонов SVG

Тонкие узоры | Бесплатные текстуры для вашего следующего веб-проекта (toptal.com)

Генератор шаблонов | Создавайте бесшовные шаблоны без лицензионных отчислений (doodad.dev)

Спасибо за чтение и хорошего дня!

использованная литература

• UXdesign.cc