Защо и как да използвате текстура дизайн, inspireme - общност от креативни хора

Текстурите стават неразделна част от дизайна. Това не е тенденция - това е прост и ефективен начин за добавяне на дълбочина до сайта. Притежаването на силата на текстура - това е огромна отговорност. Текстурите се увеличи ефективността на уеб сайтове и са качествен инструмент за дизайнери арсенал. Те могат да насочат потребителите, за да видите и да се подчертае важността на ключовите елементи.

Въпреки това, той отдавна е синоним на текстурата на "мръсни" и "разхвърляна" дизайн. Тяхната прекомерна употреба забележим на повечето сайтове, уърлд музика, групи, и оставя лош вкус в устата си дизайн. В резултат на факта, че те често се злоупотребява, ползите от тях отдавна са забравени. Texture може да направи сайта си едно цяло, но това не трябва да бъде негов основен фокус.

Текстури и модели

Преди да започнете да търсите в текстурата по-дълбоко, нека да разгледаме как различните текстура от шаблона. Тези думи често се използват взаимозаменяемо. Обикновено, шаблони - е малко повтарящи мозаечни елементи, а текстурата - това е най-голямата картина, която не се повтарят. Представете си, Виена диаграма с текстури от лявата страна и правилните модели, с малко припокриване в средата. По този начин, някои текстури - това също е повече и шаблони. Някои групи от мозаечни текстури, които могат да бъдат намерени на Tileables. Те са доста добри примери.

текстура функция

Ние обичаме текстурата в уеб пространството в продължение на няколко причини. дизайнерски решения не трябва да се основават само на мислене: "Добре, всичко изглежда добре." Дизайнът трябва да служи на целите, и трябва да се приема всяко решение по отношение на структурата, след претегляне на всички "за" и "против". Да започнем с това, което смятаме някои от ключовите предимства.

Привличането на вниманието на призив за действие

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

С минимални използване на съдържание текстура е отделена от останалата част на сайта. Те пренасочват потребителя към преглед на елемент. Те може да бъде чудесен начин за споделяне на ключовите елементи на марката.

Привлечете вниманието на най-различни начини, но двете основни начини, по които могат да докажат, по примера на търговска марка: логото с текстура на чиста фон и ясно лого на фона с текстура.

Забележете как логото гръндж Poco Хората стои на чист фон.

Branding Културни Solutions Великобритания е обратна: чиста логото на фона с текстура.

Укрепване информация архитектура

Texture може да се използва, за да видите посоки. И, както и линии, ниви и замяна на това може да се използва за разделяне на съдържанието в логически части. Важно е да се използват ефективно текстурата, заедно с други методи. Целта не е да се откаже от други методи за информационна архитектура и подобряване на тяхната ефективност.

С помощта на подвижния банер с текстура, модерен Eden идентифицира съдържанието вътре в нея.

Вижте как можете да използвате текстурата без да се счупи най-добрите традиции? Висок контраст и яснота са очевидни, и работим с текстури.

Ръководство за обслужване Sky е отлично споделено съдържание текстурни елементи.

В горния пример, всеки елемент има своя собствена текстура за конкретна цел. Ръководство за обслужване на Небе споделено съдържание на логическата част, и потребителят може да видите къде започва и свършва. Texture повишава информационната архитектура, създаване на логически зони на съдържание, които помагат на потребителя да точно да обработва информация.

Също така, текстурата е перфектен за стила и темата на сайта. Всички елементи са изработени в същия стил и отговарят на логически субект и следователно засилване на основното послание на сайта.

атмосфера изграждане и поддръжка на индивидуален

Все по-често клиентите искат да се изработи сайт, който може да направи повече от това просто да се покаже съдържанието лесен за употреба начин. Те искат сайтове, които засилват тяхната идентичност и позволяват на потребителите да разпознават марката. Texture може да се използва, за да се постигне това по няколко начина.

Въпреки големия брой на текстури да Деда сайт. тя сдържан и занижени.

Диърдри "Деда" Bain прави точно това за вашата лична марка. Той използва за да се получи консистенция на услугата лице - почти буквално. Без текстура сайт ще бъде слаб, а той не би имал достатъчно личността на своя създател. Благодарение на по-голяма яснота и дясното информационната архитектура, дизайн ще бъде доста хубаво, но това би било липсва нещо специално.

Texture дава "недосегаемост" Уеб дизайн: много уау-ефект и сексуалността изключителни обекти.

Съвети и препоръки ключовите

Всичко това е добро и хубаво, но най-вероятно искате да избегнете стандартните грешки, стига да отговаря на определени техники и начини на мислене.

Поддържане на яснота

Никога не жертват яснота за текстура. Много от нас направи тази грешка и ще продължи да го прави за дълго време. Яснота в уеб технологии - това е най-важното. Ако потребителят не ще бъде в състояние дори да прочетете съобщението, това, което по смисъла на всички нейни компоненти за текстурата?

Избягвайте тези опции:

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

Не се закрепи умрял кон

Печатната материал е трудно да се прекалява с текстури - разбира се, в зависимост от жанра. Мрежата, обаче, структурата може да е твърде разсейващо, ако го използвате много активно.

Hinder яснотата на сайта се губи в менюто, и текстура много отвличане на вниманието (Също така гледам за автоматично възпроизвеждане на музика).

Практика означава подобряване

Експериментирайте с дизайна си. Опитайте нови неща. Нанесете текстурата в тези места, където бихте обикновено не ги използват. Използвайте текстури, които никога не сте използвали. Вие никога не знаете, че можете да отваряте, докато не опиташ.

Ако нещо е безсмислено - откаже от тази

Усъвършенствайте техниката си, преди да можете да го използвате на сайта на клиента. Винаги се уверете, че използвате текстура на базата на логически модел, като че ли се създаде друг сайт. Ако не можете да се оправдае нещо от това, което сте направили, като нещо, което подобрява сайта, е по-добре да я премахнете.

Няма никакъв смисъл да се използва твърде много текстура. Общата цел на уеб технологии - е разпространението на информация. Както можете да получите, за да го направя, ако съдържанието не се чете? В допълнение, тънкостите и нюансите - е най-добрият начин да се докаже, съвършенството на теми.

Помислете за ефекта, който се опитвате да се постигне

Както знаем от нашия собствен опит, че е доста лесно да се пресели от текстурите. За да избегнете това, не забравяйте за крайния ефект, който се опитвате да постигнете. Ако искате елегантна текстура фон, просто го направи и преминете към следващата точка от списъка си. В противен случай, вие никога няма да успее да го направи.

Дръжте източници, така че да не трябва да се грижат

Можете да спестите много време, ако изтеглите и запишете на източниците, които изглеждат полезни за вас. Той организира файловете - това е чудесен резервен план. Повярвайте ни, няма нищо по-смущаващо, отколкото да се препънат по перфектен набор от четки и по-късно, не е в състояние да си спомните къде сте ги видели. Нашата четка доста дълъг и разнообразен списък. Ние ги събираме в продължение на години в сайтове като DeviantArt и Brusheezy. в свободните части от различни дизайнерски блогове и създаване на своя собствена.

Научете маска

Проучване на работа с маски на слоевете може да Ви помогне да спестите много време в бъдеще и ще бъде мощен инструмент в арсенала си. Маската - тя също е фантастичен начин да експериментират с дизайна си, без да го счупи. Това е лесно да се намери един велик урок; бързо търсене в Google ме доведе до статия, озаглавена "Разбиране маски на слоевете в Photoshop."

Не жертваме качеството за времето за изтегляне

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

Разбира се, ние искаме да направим дизайна в съответствие с нуждите на уеб пространството, но и скоростта на връзката в целия свят расте, скоростта на изтегляне не трябва да бъде основната ви грижа. Независимо от това, рационално използване текстура: сайт с много текстури неизбежно ще прекарват много време, за да се зареди. Един лесен начин, свързан с размера на файла е да се използват повтарящи се текстури, особено за произход. Tileables - това е един голям ресурс, за да започнете. Също така, ние винаги се запознаят с CSS Sprites и използвайте Smush.it, за да компресирате файлове.

Има доста забележима разлика в качеството на текстури. Texture лявата сгъстен. Право - също, но не толкова много.

Изберете текстура логично

На последно място, а може би също толкова важно, колкото и запазването на яснота - набор от текстури, които логично да съответстват на вашия дизайн. Ако се създаде уеб сайт за съхранение на мебелите, а след това текстурата с ръжда е малко вероятно да бъде подходящо. Texture трябва да създаде личност, не се обърка посетителите, независимо от това дали са или не изглежда добре. Ползваемост винаги трябва да са на първо място.

Textures: Направи си сам

Един от начините да се намери текстурата - това е да ги направят сами. Ние сме големи привърженици на този процес, тъй като това помага да се спести време и да получите точно резултата, който искате. И не се притеснявайте: това не е толкова трудно, колкото може да изглежда.

стрелям

Най-прост метод - да заемат добрите стари цифров фотоапарат и да правите снимки на текстури, които са около вас, особено тези, които никога не биха се разглежда като "текстура". Уникални текстури могат да определят стила си. Например, може би някога мисълта, че на върха на тортата и мехурчета в мивката може да се превърне в работещ текстура? И това е навсякъде около вас.

Тази снимка от Загубени и Взети показва, че различни картини могат да се използват като специално текстура.

Ако се огледате, ще видите един куп боклук: стари къщи, бетонни стени, ръждясал метал, кора, закален дърво. Всичко това е отлична екземпляра. В действителност, един прост цифров фотоапарат ще бъде достатъчно, за да започне. Ние започнахме нашата фотосесия текстура на стария Nikon Coolpix 4200. и те бяха безупречно.

Скенерът също е хубаво

Друг чудесен вариант - това е един добър стар плосък скенер. Стари хартия, картон, черги под ръката ми (идеята е взета от Трент Уолтън), хартиени торби, кожа - списък на това, което можете да сканирате, можете да продължат дълго време. Сканиране на много висока резолюция 600-1200 DPI, с текстура на високо качество, и те могат да бъдат адаптирани към всеки проект, включително и големи печатни материали. Изображения с висока резолюция ви позволяват да изберете конкретни части на снимката и да ги използвате като текстури.

Когато вие ще разберете това, можете да започнете да създавате елементи, използващи конвенционални техники в изкуството. Например, някои въглища на красива хартия ще бъде перфектен завършек за създаване на среди в гръндж стил ви харесва. Какво ще кажете за акрил спрей, за да добавите дълбочина във вашия интерфейс? Или следи от кафе във вестника? Възможностите са безкрайни.

Лед на тортата

Вярвате или не, някои почти безполезни филтри в Photoshop също могат да бъдат използвани за създаване на текстури. Texture шум може да бъде създаден с помощта на филтър шум. Докато играят с нива и ценности в този филтър, ние можем да получим резултати за различни цели. Има и текстура филтър, но това е твърде безполезно и рядко се използва. Но все пак той е в състояние да ви помогне да се постигне желания ефект частично.

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

Ако имате нужда от структура от една част, ако е по-лесно да се работи с равномерно разпределение. "Черно-бяло" показва, че структурата няма да има шум цвят, който може да се намесва с други цветове в дизайна си.

Това е превод на статия, озаглавена "ЗАЩО и отделени от материи в уеб дизайна" от Джон Савидж и Саймън H. Преведено специално за InspireMe с одобрението на публикуването Smashing Magazine.