Коришћење начина на који људи процесирају визуелне информације у Веб дизајну

Пројектовање веб страница и корисничких сучеља постало је много лакше у посљедњих неколико година. Постоји толико много алата које можете користити, што га чини бесмисленим почети од нуле при развоју УИ-а (погледајте нашу нову компилацију корисничког интерфејса). Али ја нисам овде да расправљам о смрти веб дизајна.

Уместо тога, покушаћу да објасним основне, психолошки засноване концепте који стоје иза мноштва алата за визуелни дизајн (од најосновнијих ЦСС комплета до најнапреднијих премиум тема).. Нећете их само користити, већ ћете их и разумети. Уверен сам да ће то такође олакшати модификовање постојећих са успехом.

Погледајмо како функционише људски ум и тело када је у питању обрада визуелних информација и како се ово знање тумачи у дизајнирању за веб.

Принципи перцептивне организације

Према гешталт психологији, цјелина се разликује од збира њених дијелова. Сљедбеници ове школе мишљења тврде да постоји неколико принципа о томе како људски ум групише објекте. То нису само теорије, већ стварне практичне чињенице о организовању визуелних група.

У наставку ћете наћи неке од закона и популарније и познате употребе ових принципа. Можда ћете чак моћи да пронађете неке нове идеје за ваш следећи дизајн.

Закон сличности

Први принцип каже да мали објекти који су слични перципирају се као група, радије него вишеструке инстанце тог истог малог објекта. Сличност може бити заснована на облику, боји, сјенчању или неком другом квалитету. Овај принцип је основа паттерн десигн као и многе геометријске и минималистичке дизајне логотипа.

На пример, ова слика приказује као кружни лого уместо одвојених троуглова. Трокутасти облик на дну орла нас наводи да је облик и дио слике.

Вјеројатно сте и овај закон несвјесно користили приликом стварања неколико, кутије са садржајем исте величине за ваш сајт. Ако желите да покажете да су одређени елементи садржаја од истог значаја или да деле сличне информације, створите специфичан облик само за ту сврху. На тај начин ће ваш корисник одмах повезати тај одређени облик са одређеним подручјем информација.

Закон близине

Према овом закону објеката који су ближи једни другима се сматрају истом групом. Исти квадрати, када се приказују један поред другог у блиској, регуларној близини, стварају осећај групирања.

Овај принцип је у великој мери коришћен на вебу у последње време, посебно када се ради са њим цонтент лоопс, на пример. на блоговима и вебсхоповима.

Можете одмах груписати наслов, приказану слику, метаподатке и извод заједно, чак и без икаквих граница или позадина. Можда ћете моћи да избришете непотребне линије и боје од свог дизајна да бисте га учинили минималистичнијим, а ипак потпуно разумљивим.

Ради ваше удобности, цитирам и Википедију која наводи:

Закон добре форме

Такође познат као Закон Прагнанза или Доброг Гесталт-а, овај закон каже да тежимо груписању објеката заједно образац који је једноставан, правилан и уредан. Наш ум покушава да раздвоји комплексне и перцептивно тешке форме у многе групе једноставно разумљивих облика; ово води до важност концизности.

Ово је такође један од могућих разлога за успех дизајн заснован на мрежи и то је створило тако популарне веб-структуре на бази столова и оквира (захваљујући стварима мрачног доба дизајна).

Ако задржите овај принцип на уму, вероватно нећете завршити са креирањем веб сајта испуњеног сложеним облицима садржајних блокова који би били повезани на уму преко других горе наведених закона. Ипак, можете групишите објекте на занимљив начин, на пример. у облику дијаманта или змаја, јер се они још увијек перципирају као уредни и концизни облици.

Теорија боја, перцепција и употреба

Боја вида и перцепција боје је углавном субјективно на бази како мозак реагује на светлосне таласе који се рефлектују у шареним објектима или облицима. Правило је да различити људи, чак и без икаквих оштећења вида, виде исти објекат у различитим бојама (можда се сећате хаљине).

Својства боја

Ипак, постоје три објективна својства боје; нијанса, вредност и интензитет.

Нијанса је име боје која је означена на точкићу боја или у дугиној боји. Постоји шест (или дванаест, у зависности од тога са ким разговарате) основне боје: црвена, наранџаста, жута, зелена, плава и љубичаста.

Жута, плава и црвена су Примарни, наранџаста, зелена и љубичаста секундарни хуес; такође, постоје терцијарни нијансе које су директне мешавине две примарне и секундарне боје (нпр. жуто зелена или црвена љубичаста).

Вредност је лакоћа или тама боје, која се назива Велика вредност за светле боје или ниска вредност за тамне боје.

Интензитет односи се на осветљеност или пригушеност боје; то значи да се боја исте боје и исте вриједности може и даље затамнити или освијетлити промјеном интензитета и стварањем различитих излазних боја.

Највећи интензитет сваке боје је нијанса коју приказују на точкићу боја (види доле), док је најнижа боја сива.

Цолор цонтрастс

Позивајући се на горе поменуте законе сличности, умови посматрача стварају групе малих објеката које гледају на основу сличних и различитих својстава - често боје.

Када одаберете палету боја за вашу веб локацију, поготово ако се одлучите за минималистички приступ или ако дизајнирате садржајну садржајну област, нпр. блогове или огласе, требали бисте будите свесни различитих контраста боја то вам може помоћи да пронађете праве вредности боја за најбољи резултат.

Постоји 7 контраста према Јоханнес Иттен-у, иако ћу споменути само 3.

1. Контраст боје

Жута, црвена и плава са пуним интензитетом су директни и живописни контрасти. Секундарни тонови чине мање оштру разлику, али и даље раде, као што то чине терцијарни тонови, иако ни они не производе одлични резултати као код примарних нијанси.

2. Комплементарни контраст

Две боје су у комплементарном контрасту ако се умешају заједно стварају неутралну сиву. Они се такође називају чудни парови. Ако су сусједне, оне повећавају живост и интензитет, док се међусобно мијешају. Свака боја има један и само један комплементарни; на коло боја, парови су дијагонално супротни један другом.

3. Контраст светло-тамно

Ако желите да експериментишете са веб-локацијом у једној боји, користећи различите вредности исте боје може произвести одличне резултате. Често коришћени у минималистичком веб дизајну, такође можете да направите одличне резултате на основу контраста светло-тамно ако желите да пружите опције за боју теме свом кориснику. Овај контраст се такође користи за дизајн у сивим тоновима.

Ако желите да наставите са преосталих 4 контраста боја, можете их пронаћи овде.

Креирање палета и провјера контраста

Познавање теорије је велико, тумачење ваших идеја је сасвим друга ствар. Не треба да бринете, али веб пружа одличну подршку за ваше потребе за жонглирањем у боји. Постоји мноштво алата који вам помажу да креирате прилагођене узорке боја на основу правила контраста боја, нпр. Палеттон или Адобе Кулер.

За веб сврхе, можда ћете желети да проверите контрасте које сте изабрали да користите на вебАИМ-у, на локацији Јонатхан Сноок-а или да преузмете инстанцу Цолор Цонтраст Анализер-а од стране Тхе Пациелло Гроуп овде.

Закључак

Када почнете да радите са новом темом или почнете да мењате постојеће, покушајте да размишљате о принципима перцепције како бисте организовали садржај и запамтите да размотрите правила боја када дајете дизајну свој коначни облик и тон.

Напомена уредника: Овај гост пост је написан за Хонгкиат.цом Мартон Фекете. Мартон је мађарски програмер сајта који је недавно закачен на ВордПресс. Он је редизајнирани ентузијаст и слободни писац садржаја који воли да игра РПГ-ове у своје слободно време.