Používanie spôsobu, akým ľudia spracovávajú vizuálne informácie vo webovom dizajne

Navrhovanie webových stránok a užívateľských rozhraní sa v posledných rokoch ľahšie zjednodušilo. Existuje toľko nástrojov, ktoré môžete používať, čo zbytočne začína od začiatku pri vývoji užívateľských rozhraní (pozrite si našu novú kompozíciu používateľského rozhrania). Ale tu nie som, aby som hádal o smrti webového dizajnu.

Namiesto toho sa budem snažiť vysvetliť základné koncepcie založené na psychológii za množstvom nástrojov vizuálneho dizajnu (od najzákladnejších centier CSS až po najpokročilejšie prémiové témy). Nebudete ich len používať, ale pochopíte ich. Som presvedčený, že to tiež uľahčí modifikáciu existujúcich s úspechom rovnako.

Pozrime sa na to, ako funguje ľudská myseľ a telo, pokiaľ ide o spracovanie vizuálnych informácií a ako sa tieto vedomosti interpretujú do navrhovania pre web.

Zásady perceptuálnej organizácie

Podľa Gestaltovej psychológie, celok je iný ako súčet jeho častí. Následovníci tejto školy myslenia tvrdia, že existuje niekoľko zásad o tom, ako ľudské myšlienkové skupiny čelia. Nie sú to len teórie, myslíte si, ale skutočné praktické fakty o organizácii vizuálnych skupín.

Nižšie nájdete niektoré zákony a obľúbené a známe spôsoby použitia týchto zásad. Môžete dokonca nájsť nové nápady pre ďalší dizajn.

Zákon podobnosti

Prvá zásada to uvádza malé objekty, ktoré sú podobné, sú vnímané ako skupina, skôr ako niekoľko inštancií toho istého malého objektu. Podobnosť môže byť založená na tvare, farbe, tieňovaní alebo inej kvalite. Tento princíp je základom dizajn vzorov ako aj mnoho geometrických a minimalistických návrhov loga.

Tento obrázok sa napríklad zobrazuje ako kruhové logo namiesto samostatných trojuholníkov. Trojuholníkový tvar na dne orla nás vedie k tomu, že tvar je tiež súčasťou obrazu.

Pravdepodobne ste aj tento zákon nevedeli pri vytváraní niekoľkých, rovnako veľké vybavené polia obsah pre vaše webové stránky. Ak chcete preukázať, že určité prvky obsahu majú rovnaký význam alebo zdieľajú podobné informácie, vytvoriť konkrétny tvar len na tento účel. Týmto spôsobom používateľ okamžite spojí tento konkrétny tvar s konkrétnou oblasťou informácií.

Zákon blízkych

Podľa tohto zákona objektov, ktoré sú bližšie navzájom sú považujú za rovnakej skupiny. Rovnaké štvorčeky, keď sú vykreslené vedľa seba v tesnej blízkosti, vytvárajú pocit zoskupenia.

Tento princíp sa vo veľkej miere využíval na webe v poslednej dobe, najmä pri práci s ním obsahové slučky, napr. na blogoch a internetových obchodoch.

Môžete okamžite zoskupiť názov, zobrazený obrázok, metaúdaje a výňatok spolu bez hraníc alebo pozadia. Môžete byť schopní vyčistiť zbytočné linky a farby z vášho dizajnu, aby bol viac minimalistický, ale napriek tomu úplne zrozumiteľný.

Pre vaše pohodlie uvádzam aj Wikipédiu, ktorá uvádza:

Zákon dobrej formy

Taktiež známy ako zákon Pragnanz alebo Good Gestalt, tento zákon hovorí, že máme tendenciu zoskupovať veci, ak sú vytvoriť vzor, ​​ktorý je jednoduchý, pravidelný a usporiadaný. Naša myseľ sa snaží oddeliť zložité a percepčne ťažké formy do mnohých skupín jednoducho pochopiteľných tvarov; to vedie k dôležitosť zrozumiteľnosti.

To je tiež jeden z možných dôvodov úspechu grid-based design a toto vytvorilo tabuľkové a rámcové (našťastie veci temného veku dizajnu) webové štruktúry tak populárne.

Ak budete dodržiavať tento princíp, pravdepodobne nebudete mať za následok vytvorenie webovej stránky plnej zložitých tvarov obsahových blokov, ktoré by boli prepojené na základe ostatných vyššie uvedených zákonov. Napriek tomu môžete zoskupte svoje objekty dohromady zaujímavým spôsobom, napr. v tvare diamantu alebo kite, pretože sú stále vnímané ako riadne a stručné tvary.

Teória farieb, vnímanie a používanie

Farebné videnie a vnímanie farby je zväčša subjektívne založené na ako reagujú mozgy divákov na svetlé vlny odrážajúce farebné objekty alebo tvary. Pravidlom je, že rôzni ľudia, aj bez zraku, vidia ten istý objekt v odlišnej farbe (možno si spomeniete na šaty).

Vlastnosti farieb

Stále existujú tri objektívne vlastnosti farby; odtieň, hodnota a intenzita.

odtieň je názov farby označenej na farebnom koliesku alebo v dúhu. Existuje šesť (alebo dvanásť, v závislosti od toho, s kým hovoríte) základné odtiene: červená, oranžová, žltá, zelená, modrá a fialová.

Žltá, modrá a červená sú primárny, oranžová, zelená a fialová sekundárne odtiene; tiež existujú terciárne odtiene, ktoré sú priamymi zmesami dvoch primárnych a sekundárnych odtieňov (napríklad žltozelená alebo červená fialová).

hodnota je ľahkosť alebo tma farby, označovaná ako vysoká hodnota pre svetlé farby alebo nízkou hodnotou pre tmavé farby.

intenzita odkazuje na jas alebo tmavosť farby; to znamená, že farba s rovnakým odtieňom a rovnakou hodnotou môže byť stále stmavená alebo rozjasnená zmenou intenzity a vytváraním rôznych farebných výstupov.

Najvyššia intenzita každej farby je odtieň, ktorý zobrazujú na farebnom koliesku (pozri nižšie), zatiaľ čo najnižšia farba je šedá.

Farebné kontrasty

S odkazom na vyššie uvedené zákony podobnosti vytvárajú myšlienky prijímateľov skupiny skupín, ktoré si prezerajú na základe podobných a odlišných vlastností - často farby.

Ak si vyberiete svoju farebnú paletu pre vaše webové stránky, najmä ak idete na minimalistický prístup alebo ak navrhujete oblasť s obsahom textov, napr. blogy alebo reklamy, mali by ste byť si vedomí rôznych farebných kontrastov ktoré vám môžu pomôcť nájsť správne farebné hodnoty pre dosiahnutie najlepšieho výsledku.

Existuje 7 farebných kontrastov podľa Johannesa Ittena, hoci spomeniem len 3.

1. Kontrast odtieňa

Žltá, červená a modrá pri plnej intenzite sú priame a živé kontrasty. Sekundárne odtiene prinášajú menej ostré rozlíšenie, ale stále fungujú rovnako ako terciárne odtiene, aj keď nevyrábajú ako úžasné výsledky ako pri primárnych odtieňoch.

2. Doplnkový kontrast

Dve farby sú v doplnkovom kontraste, ak sa pri zmiešaní vytvoria neutrálne sivé. Tie sú tiež nazývané podivné páry. Ak sú priľahlé, zvyšujú živosť a intenzitu, zatiaľ čo sa zmiešajú, navzájom sa rušia. Každá farba má jednu a len jednu doplňujúcu; na farebnom koliesku sú dvojice navzájom diagonálne proti sebe.

3. Svetlo-tmavý kontrast

Ak chcete experimentovať s jednofarebnou webovou stránkou, pomocou rôznych hodnôt rovnakého sfarbenia môže priniesť úžasné výsledky. Často používané v minimalistickom dizajne webových stránok, môžete vytvoriť skvelé výsledky na základe kontrastu svetlo-tmavý, ak chcete používateľom poskytnúť možnosti farebnej tému. Tento kontrast sa používa aj pre dizajn v odtieňoch sivej.

Ak chcete pokračovať v zostávajúcich 4 farebných kontrastoch, môžete ich nájsť tu.

Vytváranie palet a kontrola kontrastov

Vedieť, že teória je skvelá, interpretácia vašich myšlienok je úplne iná vec. Nemali by ste sa však obávať, že web poskytuje veľkú podporu vašim farebným žonglovaním. Existuje množstvo nástrojov, ktoré vám pomôžu vytvoriť vlastné farebné vzory založené na pravidlách farebného kontrastu, napr. Paletton alebo Adobe Kuler.

Na webové účely môžete skontrolovať kontrasty, ktoré ste vybrali na webAIM, na stránke Jonathana Snooka alebo si stiahnete inštanciu analyzátora farebného kontrastu v The Paciello Group tu.

záver

Keď začnete pracovať s novou témou alebo začnete upravovať existujúce témy, skúste premýšľať o princípoch vnímania, aby ste organizovali svoj obsah a nezabudnite brať do úvahy farebné pravidlá, keď dáte svojmu dizajnu svoju konečnú podobu a odtieň.

Upozornenie redaktora: Tento hosť príspevok je napísaný pre Hongkiat.com od Marton Fekete. Marton je maďarský vývojár stránok, ktorý sa nedávno pripojil k aplikácii WordPress. Je to redesign nadšenec a spisovateľ na voľnej nohe, ktorý má rád hranie RPG vo voľnom čase.