Diseinatzaileentzako hierarkia bisualaren printzipioak

Diseinatzaileentzako ikusizko hierarkia-printzipioak diseinu-kontzeptu bat dira, ikuslearen begiak diseinuan zehar nola mugitzen diren gidatzeko eta zein elementu diren garrantzitsuenak edo bisualki erakargarrienak zehazteko.

Hasieran harrizko oholak, papirozko korrituak eta papera zeuden. Ondoren, ordenagailu pantailak eta tablet elektronikoak etorri ziren. Orriak bistaratzeko teknologiak eboluzionatzen duen heinean, diseinatzaileei edukia antolatzeko modu argia geratzen zaie. Baina zein da hobea? Azken batean , hierarkia bisuala.

Hona hemen hierarkia bisualaren definizioa: Hierarkia bisuala antolamendua da elementu grafikoak diseinuan elementu bakoitzaren garrantziaren arabera. Ikusmen pisua zehazten du elementuaren garrantzia diseinuaren hierarkian, ikusleari zertan zentratu behar duen eta zein ordenatan esanez.

Diseinatzaileentzako baliabideak. 50 doan

Hau gero eta arazo garrantzitsuagoa bihurtzen ari da, responsive frameworkek diseinatzaileak hainbat orrialdetan aldi berean pentsatzera behartzen baitituzte. Testu trinkoaren eta arreta-tarte laburren aurrean, diseinatzaileek 6 printzipio garatu zituzten irakurlearen begia informazio garrantzitsuenera bideratzeko.

Ikusizko hierarkiaren 6 printzipio hauek liburuxketatik hasi eta aplikazioetaraino guztia diseinatzen lagunduko dizute, azken erabiltzaileak diseinatzaileentzako irakurketa esperientzia positiboa izango duela ziurtatuz.

Kultura guztiak goitik behera irakurtzen dira, eta kultura gehienak ezkerretik eskuinera irakurtzen dira. Baina ezagutza hori garrantzitsua den arren orrialdearen diseinua, diseinatzaileek badakite zeregina askoz zailagoa dela.

Azken ikerketek frogatu dute jendeak orrialde bat eskaneatzen duela irakurri aurretik interesatzen zaien ikusteko. Eskaneatu ereduek bi formatako bat hartu ohi dute, "F" eta "Z", eta hori aprobetxa dezakezu zure diseinuan.

F-Ereduak. Ikusizko hierarkiaren printzipioak

F-txantiloiak aplikatu testu-orri tradizionalei, hala nola, artikulu edo blog-mezuetan. Irakurleak ezkerreko aldea eskaneatzen du orriak gako-hitz interesgarriak bilatzea ezkerrera lerrokatuta dauden goiburuetan edo gaiaren hasierako esaldietan, gero gelditu eta irakurtzen du (eskuinean) zerbait interesgarria topatzen duenean. Emaitza F baten itxura du (edo E bat, edo are marra horizontalagoak dituen zerbait; baina "F" terminoa itsatsita).

Nola erabil dezakezu hau? Lerrokatu informazio garrantzitsua ezkerrera eta erabili izenburu labur eta lodia, buletak eta arreta erakartzeko antzeko beste elementu batzuk paragrafo-blokeak hausteko.

Z-eredua. Ikusizko hierarkiaren printzipioak

Z-ereduak beste orri mota batzuei aplikatzen zaie, hala nola iragarkiei edo webguneei, non informazioa nahitaez bloke-paragrafoetan aurkezten ez den. Irakurleak orriaren goiko aldea eskaneatzen du lehenik, non informazio garrantzitsua aurki daitekeen, gero diagonalean kontrako ertzera mugitzen da eta gauza bera egiten du orriaren behealdean.

Web-diseinatzaileek normalean diseinatzen dituzte beren orriak portaera honekin esplizituki bat etortzeko, informazio garrantzitsuena izkinetan jarriz eta beste informazio garrantzitsu bat goiko eta beheko barren zehar orientatuz eta diagonala konektatuz.

Behean 2010eko muntaia konferentziaren diseinuan, elementu garrantzitsuak logotipoa dira (goian ezkerrean), "erregistratu orain" botoia (goian eskuinaldean) eta hiztunen zerrenda (behean), estrategikoki Z ereduko leku politetan kokatuta daudenak.

2. Tamainak axola du. Ikusizko hierarkiaren printzipioak
_

Oso erraza da: jendeak gauza handiak irakurtzen ditu lehenik. Young Vic-en beheko iragarkian "zatitu" baino lehen zure begiak "errendimendua" erakartzen badituzu, berehala harremanetan jarri beharko zenuke pertzepzio-psikologo batekin: seguruenik, diru ona irabazi dezakezu anomalia arraro gisa probatuta.

Interesgarria da joera hori goitik beherako araua baztertzeko nahikoa sendoa dela. Goiko irudian, "hack"-ek "jarduteko denbora" gainidazten du, handiagoa eta ezkerrera delako (beraz, ezkerretik eskuinera arauak laguntzen du).

Baina Urteko Txostenaren hurrengo orrialdean: 2012ko Giza Eskubideen Kanpaina (bosgarren hedabideen zutabean garatua) irakurtzen dugu letra-tipoa "Berdintasunaren aldeko borroka kanpainaren ibilbidean" gainean dagoen testuaren aurretik "Hauteskundeak 2012". Ikusmen-hierarkiaren printzipioak

"2012ko hauteskundeak" da informazio-maila goreneko ordena: beheko informazioa zein gai orokorrari dagokion adierazten digu. Baina diseinatzaileak erabaki zuen artikuluaren izenburua irakurleentzat interesgarriagoa zela, eta, beraz, baloratu zuen lehenik irakurtzeko.

3. Espazioa eta ehundura. Ikusizko hierarkiaren printzipioak

Arreta pizteko beste modu bat da eman edukiari arnasa hartzeko leku nahikoa . Botoiaren inguruan espazio negatibo esanguratsua badago edo testu-blokeko lerroak oso ondo jarraitzen badira, elementu horiek errazago ikusiko dituzte irakurleek.

Beheko irudian ikus dezakezun bezala (DrawtoClick-en webgunearen parte), tartekatzea alternatiba dotorea edo osagarria izan daiteke tamaina erabiltzeko. Hemen, “Notre agence vouscompagne...” salmenta puntua letra oso txikian idatzita dago, baina espazio zuri ugariz inguratuta dago, bere garrantzia adieraziz. Jarraian, “Le Compendre”, “Le Réaliser” eta “Le Partager” esamoldeek enfasi gehigarria jasotzen dute, inguruko espaziotik aldenduta.

Jendeak "ehundura"ri buruz hitz egiten duenean hierarki bisualari dagokionez, ez du esan nahi ehunduraren efektu grafikoak. Aitzitik, "ehundura" mota honek orrialde bateko espazioaren, testuaren eta bestelako xehetasunen antolaketa edo egitura orokorrari egiten dio erreferentzia. Bright Pink-ren adibide honek ondo ilustratzen du kontzeptua:

Lehenengo irudian, "Kirola" hitza "badminton" baino gorago dago hierarkian, altuagoa, handiagoa eta ausartagoa delako. 2. irudian, bi hitzak gutxi gorabehera baliokideak dira, “badmintona” nabarmentzen duen eta bere espazioan jartzen duen laukizuzen beltzari esker.

Hirugarren irudian, atzeko zirriborrak "Kirolak" espazioa eten egiten du, baina ez "badminton" espazioa, eta, beraz, alderantzizkoa da non "badmintona" hierarkian altuena den. Garapen hori aurreikusten zaila da, beraz, diseinatzaileek askotan "ehundura" zentzu holistikoarekin lotzen dute.

4. Letra-tipoaren pisua eta parekatzea. Ikusizko hierarkiaren printzipioak

Letra-tipoa hautatzea funtsezkoa da hierarkia bisuala ezartzeko. Letra-tipo baten atributu garrantzitsuenen artean pisua, bere letrak osatzen dituzten trazuen zabalera eta estiloa daude, hala nola, serif eta sans serif. Beste aldaketa batzuek ere, etzanak adibidez, zeresana izan dezakete.

Ohartu nola entzungailu The Tea Factory-ren beheko web-diseinuan hitz hierarkiaren ordenan eragiten du: "te perfektuak berotzen laguntzeko" da jokoaren izena, baina letra-tipoaren pisuaren eta etzanaren desberdintasunek, hitzen kokapenaz gain, gehiago sortzen dute. irakurketa esperientzia dinamikoa, ez hain lineala. "://azbyka.com.ua/foto/tea-factory.jpg" />

Zenbait kasutan, helburua hainbat informazio aurkeztea da berdin premiazkoa dela. Denak tamaina eta pisu berdinean ezartzeak baliokidetasuna bermatuko du, baina itxura monotonoa ere emango du. Letra-tipoen bereizketa hori saihesteko modu bat da, beheko Trendi aldizkariaren azala bezala. Ikusizko hierarkiaren printzipioak

Inprimatzeko liburuxka bat prestatzea.

Hemen, orriaren periferiaren inguruko bost zirikatzaileak hierarkian berdinak dira, baina aniztasuna lortzen dute ondo parekatuta dauden bi letra-tipo aldatuz: bata pisu ertaineko serif bat eta bestea sans-serif arin baina altua.

5. Kolorea eta itzala. 

Hona hemen beste hutsegite bat: kolore distiratsuak kolore isiletatik edo gris tonuetatik nabarmentzen dira, tonu argiagoak "urrunago" agertzen diren bitartean, eta, beraz, hierarkian beherago jaisten dira tonu aberats eta ilunagoak baino. Where Are They webguneak argi distiratsua eta koloretako atzeko argia kontrastatzen ditu zuri-beltzeko sareta efektuarekin argitasunaren efektuarekin:

Guggenheim webguneak kolorea erabiltzen du informazio garrantzitsua azpimarratzeko, esate baterako, kokapenaren aukeraketa, gaur egun ikusten ari diren erakusketen zerrenda eta erakusketa berezietarako estekak. Ikusizko hierarkiaren printzipioak

Ontzi pertsonalizatuetarako letra-tipo onena

Whitney Museum webguneak, berriz, hierarkia bat ezartzen du letra-tipo baten barruan, pisua eta tonua (beltza) kolorea erabiliz (hau da, oinarrizko tonuari zuria gehitzea, arinagoa bihurtuz). "Cory Archangel on Pop Culture" argi eta garbi "New on Whitney Stories" azpitik dago ikusizko hierarkian, ez bakarrik baxuagoa delako, baizik eta bere itzala arinagoa delako, hondo zuriaren aurrean gutxiago nabarmentzen duelako. Ikusmen-hierarkiaren printzipioak

Koloreak esanahi berezia du mugikorren diseinua pantailaren tamaina txikiak beste estrategia batzuk erabiltzeko gaitasuna mugatzen duen aplikazioak, hala nola, tamaina aldatzea eta tarte zabala. Grainger Industrial Supply aplikazioan, "Jarraitu ordaintzera" botoia gorriz koloreztatuta dago, agertzen den edozein orrialdetan nabarmentzen delarik. Bilaketa-emaitzen panela, aldiz, grisa da, eta hierarkian gutxi gorabehera beste elementu batzuen parekoa da, hala nola bilaketa-barra eta produktuen estekak.

6. Diseinatzaileentzako zuzendaritza.

Orrialde-diseinuak lerro bertikal eta horizontalen sareta bat jarraitzeko diseinatu ohi dira, konbentzioz eta formatu irakurgarriena delako. Sistema horretan, hierarkia ezartzeko modu berri bat dago: sareta haustea.

Kurba edo diagonal batean kokatzen den testua automatikoki nabarmentzen da sare-blokeatutako testuaren aurrean, protagonismoa hartzen duena. Hau aspalditik estrategia eraginkorra da publizitatean, Frost Design-en autobus geltokiko kartela adibidez.