Чому і як потрібно використовувати текстури в дизайні, inspireme - спільнота творчих людей

Текстури стають невід'ємною частиною дизайну. Це не тренд - це простий і ефективний спосіб додати глибини сайту. Володіння силою текстури - це величезна відповідальність. Текстури збільшують ефективність сайтів і є якісним інструментом в арсеналі дизайнерів. Вони можуть направляти погляд користувача і підкреслювати важливість ключових елементів.

Однак, протягом довгого часу текстури були синонімом «брудного» і «неохайного» дизайну. Їх надмірне використання помітно на більшості сайтів світових музичних груп, і залишає неприємний присмак у роті у дизайнерів. В результаті того, що вони часто неправильно використовуються, їх переваги давно забулися. Текстура може зробити сайт єдиним цілим, але вона не повинна бути його основним фокусом.

Текстура і шаблони

Перш ніж ми почнемо більш глибоко розглядати текстури, давайте розглянемо, чим текстури відрізняються від шаблонів. Часто ці слова використовуються як синоніми. Зазвичай шаблони - це невеликі повторювані мозаїчні елементи, в той час як текстури - це більші зображення, які не повторюються. Уявіть собі діаграму Вена з текстурами з лівого боку і шаблонами з правого, з невеликим накладенням посередині. Таким чином, деякі текстури - це також ще і шаблони. Деякі набори музичних текстур, які можна знайти на Tileables. являють собою досить хороші приклади.

функція текстур

Ми любимо текстури в веб-просторі по ряду причин. Дизайнерські рішення не повинні грунтуватися тільки на думки «Відмінно, все виглядає добре». Дизайн повинен служити меті, і кожне рішення з приводу текстур має прийматися після зважування всіх «за» і «проти». Давайте почнемо з того, що розглянемо деякі ключові переваги.

Залучення уваги закликом до дії

Текстури можуть виділяти елементи. такі як назви, заголовки, іконки і кнопки. Вони привертають увагу до закликів до дії і основним заголовкам. Це, напевно, найпростіший спосіб, який зробив текстури модними.

При мінімальному використанні текстури відокремлюють контент від решти сайту. Вони спрямовують погляд користувача до потрібних елементів. Вони можуть стати відмінним способом розділити ключові елементи бренду.

Привернути увагу можна різними способами, але два основних способи можна продемонструвати на прикладі брендингу: це логотип з текстурою на чистому тлі і чистий логотип на фоні з текстурою.

Зверніть увагу, як гранжевий логотип Poco People виділяється на чистому тлі.

Брендинг Cultural Solutions UK полягає в зворотному: чистий логотип на фоні з текстурою.

Посилення архітектури інформації

Текстура може використовуватися для направлення погляду. І, також як і лінії, поля і контраст, вона може використовуватися для поділу контента на логічні частини. Важливо ефективно використовувати текстури разом з іншими методами. Мета полягає в тому, щоб не відмовлятися від інших методів інформаційної архітектури, а посилити їх ефективність.

Використовуючи ковзний банер з текстурою, A Modern Eden виділяє контент всередині нього.

Бачите, як можна використовувати текстури, не порушуючи кращих традицій? Високий контраст і чіткість очевидні, і працюють разом з текстурами.

Sky's Guide Service відмінно розділяє контент текстурними елементами.

На прикладі вище кожен елемент має власну текстуру з певною метою. Sky's Guide Service розділяє контент на логічні секції, і користувач бачить, де вони починаються і де закінчуються. Текстура підсилює інформаційну архітектуру, створюючи логічні області контенту, які допомагають користувачеві точно обробляти інформацію.

Також текстура відмінно підходить до стилю і тематиці сайту. Всі елементи виконані в одному стилі і відповідають логічної темі, а тому підсилюють основне послання сайту.

Побудова атмосфери і підтримка індивідуальності

Все частіше і частіше клієнти хочуть дизайн сайту, який може більше, ніж просто відображати контент зручним для користувача способом. Вони хочуть сайти, які підсилюють їх індивідуальність і дозволяють користувачам дізнаватися бренд. Текстура може використовуватися для того, щоб досягти цього декількома способами.

Незважаючи на велику кількість текстури на сайті Deda. вона стримана і непомітна.

Дейдра "Deda" Бейн саме це і робить для свого особистого бренду. Вона використовує текстуру щоб надати сервісу особа - майже в буквальному сенсі. Без текстури сайт був би слабким, і йому б не вистачало індивідуальності його творця. Завдяки чіткості і правильної інформаційної архітектурі, дизайн був би цілком милим, але йому б не вистачало чогось особливого.

Текстура надає «невідчутності» веб-дизайну: того самого wow-ефекту і сексуальності видатних сайтів.

Підказки та основні рекомендації

Все це добре і мило, але ви напевно хочете уникнути стандартних помилок, поки будете відпрацьовувати певні техніки і способи мислення.

Зберігайте чіткість

Ніколи не жертвуйте чіткістю заради текстури. Багато з нас роблять цю помилку, і будуть продовжувати це робити ще довгий час. Чіткість у веб-технологіях - це найважливіше. Якщо користувач не зможе навіть просто прочитати повідомлення, в чому сенс взагалі його складати заради текстури?

Уникайте таких варіантів:

Іноді ми занадто сильно захоплюємося. Цей постер показує нам що може статися, якщо занадто захопитися текстурами.

Чи не стьобала дохлу коняку

У друкованих матеріалах складно переборщити з текстурами - звичайно, в залежності від жанру. У мережі, однак, текстура може виявитися занадто відволікає, якщо її використовувати дуже активно.

На сайті Hinder чіткість втрачається в меню, а текстури сильно відволікають увагу (До того ж потрібно стежити за автоматичним відтворенням музики).

Практика означає поліпшення

Експериментуйте зі своїм дизайном. Пробуйте нове. Застосовуйте текстури в тих місцях, де б ви їх зазвичай не використовували. Використовуйте текстури, якими ви ніколи не користувалися. Ви ніколи не знаєте, що ви можете відкрити, поки не спробуєте.

Якщо щось безглуздо - відмовтеся від цього

Відточите свою техніку, перш ніж використовувати її на сайті клієнта. Завжди переконуйтеся, що використання вами текстури засноване на логічною схемою, як якщо ви створюєте будь-який інший сайт. Якщо ви не можете виправдати що-небудь з того, що ви зробили, як щось поліпшує сайт, краще приберіть це.

Немає сенсу використовувати занадто багато текстури. Загальна мета веб-технологій - це поширення інформації. Як у вас вийде це робити, якщо ваш контент нечітабелен? Крім того, тонкощі і нюанси - це найкращий спосіб демонструвати досконалість теми.

Враховуйте ефект, якого ви намагаєтеся досягти

Як ми знаємо з власного досвіду, досить легко захопитися текстурами. Щоб уникнути цього, не забувайте про кінцевий ефект, якого ви намагаєтеся досягти. Якщо ви хочете витончений текстурований фон, просто зробіть його і переходите до наступного пункту вашого списку. В іншому випадку, ви ніколи це не зробите.

Зберігайте джерела, щоб не довелося шукати потім

Ви можете заощадити досить багато часу, якщо будете завантажувати і зберігати джерела, які здаються вам корисними. Організоване зберігання файлів - це відмінний резервний план. Повірте нам: немає нічого більш нервує, ніж наштовхнутися на ідеальний набір кистей і потім не мати можливості згадати, де ти їх бачив. Наші кисті становлять досить довгий і різноманітний список. Ми збираємо їх на протязі багатьох років на таких сайтах, як deviantART і Brusheezy. в безкоштовних розділах різних дизайнерських блогів, і створюючи свої власні.

вивчайте маски

Вивчення роботи з масками шару допоможе вам заощадити багато часу в майбутньому і стане потужним інструментом у вашому арсеналі. Маски - це також фантастичний спосіб експериментувати з вашим дизайном, не порушуючи його. Нескладно знайти відмінні уроки; швидкий пошук в Google привів мене до статті під назвою "Understanding Layer Masks in Photoshop."

Чи не жертвуйте якістю заради часу завантаження

Існує безліч цікавих способів зробити так, щоб текстури не збільшували час завантаження. Але не варто занадто сильно жертвувати якістю текстури, тому як замість того, щоб виглядати закінченим і професійним, сайт буде виглядати старомодним. Повторювані текстурні шаблони - це хороший спосіб скоротити час завантаження фонів і більших елементів.

Звичайно ж, ми хочемо робити дизайн відповідно до потреб веб-простору, але так як швидкість з'єднання по всьому світу росте, швидкість завантаження не повинна бути вашою основною турботою. Проте, використовуйте текстури раціонально: сайт з безліччю текстур неминуче буде витрачати дуже багато часу на завантаження. Простий спосіб, пов'язаний з розміром файлу, це використання повторюваних текстур, особливо для фонів. Tileables - це відмінний ресурс для початку. Також ми завжди дізнаємося про CSS Sprites і використовуємо Smush.it щоб ще більше стиснути файли.

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

Вибирайте текстури логічно

Останнє і, напевно, настільки ж важливе, як і збереження чіткості - це вибір текстур, які логічно відповідають вашому дизайну. Якщо ви створюєте сайт для магазину меблів, тоді текстури з іржею навряд чи будуть доречні. Текстури повинні створювати індивідуальність, не збивати з пантелику відвідувача, незалежно від того, чи добре вони виглядають. Юзабіліті завжди має бути на першому місці.

Текстури: Зроби сам

Один із способів знайти текстури - це зробити їх самостійно. Ми великі прихильники цього способу, так як він допомагає заощадити час і отримати саме той результат, який вам потрібен. І не турбуйтеся: це не так складно, як може здатися.

фотографуйте

Найбільш простий метод - взяти в руки свій старий добрий цифровик і сфотографувати текстури, які вас оточують, особливо ті, які ви б ніколи розглядали в якості «текстур». Унікальні текстури можуть визначити ваш стиль. Наприклад, ви б коли-небудь подумали, що верхівка пирога і бульбашки в раковині можуть стати працюючої текстурою? А це все навколо вас.

Це фото з Lost and Taken демонструє, що різні фотографії можуть використовуватися в якості спеціальних текстур.

Якщо ви озирнетеся навколо, ви побачите купу сміття: старі будинки, бетонні стіни, іржавий метал, кору дерев, обвітрену деревину. Все це відмінні екземпляри. Фактично простий цифрової камери буде достатньо для початку. Ми починали знімати наші текстури на старий Nikon Coolpix 4200. і вони були бездоганні.

Сканер теж підійде

Ще один відмінний варіант - це старий добрий планшетний сканер. Старий папір, картон, килимки під мишку (ідея взята у Trent Walton), паперові пакети, шкіра - список того, що ви можете відсканувати, можна продовжувати ще довго. Сканувати на дуже великому дозволі від 600 до 1200 DPI, щоб текстури були високої якості, і їх можна було адаптувати під будь-який проект, в тому числі для великих друкованих матеріалів. Зображення з високою роздільною здатністю дозволяють вибирати окремі частини картинки і використовувати їх в якості текстури.

Коли ви з цим розберетеся, ви можете починати створювати елементи з використанням звичних художніх технік. Наприклад, трохи вугілля по гарному папері стане відмінним завершальним штрихом для створення фону в стилі гранж, який ви хотіли. А як щодо бризок акрилової фарби для додання глибини вашому інтерфейсу? Або слідів кави на папері? Можливості безмежні.

Лід на пирозі

Вірите чи ні, деякі майже даремні фільтри в Photoshop можна також використовувати для створення текстур. Текстури з шумом можна створювати за допомогою фільтра шумів. Граючись із значеннями і рівнями в цьому фільтрі, можна отримати результати для різних цілей. Тут також є текстурний фільтр, але він занадто даремний і рідко використовується. Однак все одно він здатний допомогти вам частково домогтися необхідного ефекту.

Експеримент на швидку руку з фільтрами шуму. Найкраще використовувати невеликий шум, але переконайтеся, що ви бачите ефект.

Якщо вам потрібна цілісна текстура, тоді вам простіше працювати з рівномірним розподілом. «Монохромний» говорить про те, що текстура не матиме кольорового шуму, який може конфліктувати з іншими квітами в вашому дизайні.

Це переклад статті під назвою "The Whys And The Hows Of Textures In Web Design" від Jon Savage and Simon H. Перекладено спеціально для InspireMe зі схвалення видання Smashing Magazine.

Схожі статті