Kasutades teed Inimesed töötlevad visuaalset teavet veebidisainis

Veebilehtede ja kasutajaliideste kavandamine on viimastel aastatel muutunud lihtsamaks. Seal on nii palju tööriistu, mida saate kasutada, mistõttu on kasutajaliideste arendamisel nullist alustamine (vaadake meie värsket kasutajaliidese koostamist). Aga ma ei ole siin, et väita veebidisaini surma üle.

Selle asemel püüan ma selgitada põhilisi, psühholoogiapõhiseid kontseptsioone visuaalsete disainivahendite hulgast (kõige lihtsamate CSS-komplektide ja kõige arenenumate teemade vahel). Sa ei kasuta lihtsalt neid, vaid ka neid. Olen kindel, et see lihtsustab ka olemasolevate muutmist edukalt.

Vaatleme, kuidas inimmeel ja keha toimivad visuaalse teabe töötlemisel ja kuidas neid teadmisi veebi kujundamisel tõlgendatakse.

Prepeptuaalse organisatsiooni põhimõtted

Gestalti psühholoogia järgi, kogu on erinev selle osade summast. Selle mõttekooli järgijad väidavad, et on mõningaid põhimõtteid selle kohta, kuidas inimmeeles rühmad objektid. Need pole lihtsalt teooriad, meeles, vaid tegelikud praktilised faktid visuaalsete rühmade korraldamise kohta.

Allpool leiate mõned seadused ja nende põhimõtete populaarsemad ja tuntud kasutused. Sa võid isegi leida uusi ideid oma järgmise kujunduse jaoks.

Sarnasuse seadus

Esimene põhimõte kinnitab seda väikesed objektid, mis on sarnased, tajutakse grupina, selle väikese objekti mitu eksemplari. Sarnasus võib põhineda kuju, värvi, varjundi või mõne muu kvaliteediga. See põhimõte on aluseks mustri disain samuti palju geomeetrilisi ja minimalistlikke logo.

Näiteks näitab see pilt eraldi kolmnurga asemel ringikujulist logo. Kotka põhjas olev kolmnurkne kuju muudab meid arvatavaks, et kuju on ka pildi osa.

Tõenäoliselt kasutasite seda seadust teadmatult ka mõne loomisel, sama suurusega Objekte teie veebisaidile. Kui soovite näidata, et teatud sisuelemendid on sama tähtsad või jagavad sarnast teavet, luua just selleks otstarbeks vajalik kuju. Sel moel seostab teie kasutaja selle konkreetse kuju kohe konkreetse teabevaldkonnaga.

Läheduse seadus

Selle seaduse kohaselt objektid, mis on lähemal üksteisele loetakse samasse rühma kuuluvaks. Samad ruudud, kui need on üksteise kõrval tihedas, regulaarses läheduses, loovad grupeerimise tunde.

Seda põhimõtet on viimasel ajal veebis suures osas kasutatud, eriti töötades sisu silmused, nt. blogides ja veebipoodides.

Pealkirja, esiletõstetud kujutise, metaandmete ja väljavõtte saate kohe rühmitada isegi ilma piiride või taustata. Teil võib olla võimalik oma disainist eemaldada mittevajalikud jooned ja värvid, et muuta see minimalistlikumaks, kuid siiski täiesti arusaadavaks.

Teie mugavuse huvides tsiteerin ka Wikipediat, mis ütleb:

Hea vormi seadus

Seda seadust nimetatakse ka Pragnanzi või Hea Gestalti seaduseks, mis sätestab, et kaldume esemeid rühmitama koos, kui nad seda teevad moodustavad lihtsa, korrapärase ja korrektse mustri. Meie mõistus püüab eraldada keerulisi ja tajujõulisi vorme mitmeks lihtsalt arusaadava kujuga rühmaks; see viib tähtsus.

See on ka üks võimalikest põhjustest, millele. \ T võrgupõhine disain ja see pani laua- ja raami-põhised (õnneks disaini tumedate aegade asjad) veebistruktuurid nii populaarseks.

Kui peate seda põhimõtet silmas pidades, siis tõenäoliselt ei jõua veebisaidi loomiseni, mis on täis keerukaid sisulõigu plokke, mis oleksid ühendatud teiste ülaltoodud seadustega. Siiski saate grupeerige oma objektid huvitaval viisil kokku, nt. teemant- või harksaba kuju, kuna neid tajutakse endiselt korrapäraselt ja lühidalt.

Värviteooria, taju ja kasutamine

Värviline nägemine ja värvi taju on suuresti subjektiivne põhineb kuidas vaatajate aju reageerib valgete lainete suhtes, mida peegeldavad värvilised esemed või kujundid. Reegel on, et erinevad inimesed, isegi ilma nägemishäiretega, näevad sama objekti erinevas värvis (võib-olla mäletad kleit).

Värvi omadused

Ikka on olemas kolm värvi objektiivset omadust; värvitoon, väärtus ja intensiivsus.

Värvitoon on värvi nimi, mis on märgitud värvirattale või vikerkaarele. On kuus (või kaksteist, olenevalt sellest, keda sa räägid) põhilised toonid: punane, oranž, kollane, roheline, sinine ja violetne.

Kollane, sinine ja punane on esmane, oranž, roheline ja violetne sekundaarne toonid; ka seal on kolmanda taseme toonid, mis on kahe primaarse ja sekundaarse tooni otsesed segud (nt kollane roheline või punane lilla).

Väärtus on värvi heledus või tumedus, millele viidatakse kui kõrge väärtus heledate värvide või madala väärtusega tumedate värvide jaoks.

Intensiivsus viitab heledus või hämarus värvi; see tähendab, et sama värvi ja sama väärtusega värvi saab veel heledaks või heledamaks muuta, muutes intensiivsust ja luues erinevaid värvi väljundeid.

Iga värvi kõrgeim intensiivsus on toon, mida nad värvilises rattas näitavad (vt allpool), samas kui madalaim värv on hall.

Värvikontrastid

Viidates ülalmainitud sarnasuse seadustele, loovad tajutajate meeled sarnaste ja erinevate omaduste alusel sageli vaadeldavate väikeste objektide rühmi - sageli värve.

Kui valisite oma veebisaidile oma värvipaleti, eriti kui kasutate minimalistlikku lähenemist või kujundate teksti-rasket sisu, nt. blogid või reklaamid olge teadlikud erinevatest värvikontrastidest mis võivad aidata teil leida parimad värvitoonid parima tulemuse saamiseks.

Johannes Itteni järgi on 7 värvitooni, kuigi ma ainult mainin 3.

1. Värvitooni kontrastsus

Kollane, punane ja sinine täisintensiivsusega on otsesed ja erksad kontrastid. Sekundaarsed toonid muudavad vähem terava eristuse, kuid töötavad ikka, nagu ka tertsiaarsed toonid, kuigi nad ei tooda fantastilised tulemused nagu primaarsetes toonides.

2. Täiendav kontrasti

Kaks värvi on üksteist täiendavas kontrastis, kui nad kokku segunevad neutraalse halliga. Neid nimetatakse ka kummalised paarid. Kui nad on külgnevad, suurendavad nad elavust ja intensiivsust, samas segavad nad üksteist välja. Igal värvil on üks ja ainult üks täiendav; värvirattal on paarid üksteise suhtes diagonaalselt.

3. Heledus-tume kontrast

Kui soovite katsetada ühevärvilist veebisaiti, kasutades sama tooni erinevaid väärtusi võib tuua suurepäraseid tulemusi. Tihti kasutatakse minimalistlikus veebidisainis ka suurepäraseid tulemusi, mis põhinevad heledale ja tumedale kontrastile, kui soovite oma kasutajale teema värvi valikuid pakkuda. Seda kontrasti kasutatakse ka halltoonide disainiks.

Kui soovid jätkata ülejäänud 4 värvi kontrastsust, leiate need siit.

Palettide loomine ja kontrastide kontrollimine

Teooria mõistmine on suur, ideede tõlgendamine on veel üks asi. Te ei tohiks siiski muretseda, veeb pakub suurt toetust teie värvi jugglingi vajadustele. On palju tööriistu, mis aitavad teil luua värvilahenduse alusel kohandatud värvimustrid, nt. Paletton või Adobe Kuler.

Veebi eesmärkidel võiksite kontrollida kontraste, mida kasutasite veebis AIM, Jonathan Snooki saidil või laadige värvi kontrasti analüsaatori eksemplar, mille pakub Paciello Group siin.

Järeldus

Kui hakkate uue teemaga töötama või alustate olemasolevate muutmist, püüdke mõelda arusaamade põhimõtetele, et oma sisu organiseerida ja meeles pidada, et kujunduse lõpliku vormi ja värvitooni andmisel kaaluvad värvisätted.

Toimetaja märkus: See külaliste postitus on kirjutatud aadressile Hongkiat.com Marton Fekete. Marton on Ungari saidi arendaja, kes hiljuti WordPressi külge ühendas. Ta on ümberkujundatud entusiast ja vabakutselise sisuga kirjanik, kes armastab mängida RPG-sid vabal ajal.