Visual Hierarchia Principia ad Designers

Principia hierarchiae visualis designandi sunt conceptus designandi, qui dirigit quomodo oculi inspectoris per consilium movent et determinant quae elementa sunt potiora vel visibiliter appellata.

Primo tabulae lapideae, chartae papyri et chartae. Tunc accesserunt tegumenta computatrum et tabulae electronicae. Cum pagina technicae ostentationis evolvit, designatores relinquuntur manifesta via ad contenta ordinandi. Sed quid melius? Quid multa? , visivae hierarchiae.

Hic est definitio hierarchiae visualis: Hierarchia Visualis est dispositio graphic elementa consilio ut momenti uniuscuiusque elementi. Visual pondus determinat elementum momenti in hierarchia designant inspectoris quid intendunt et quo ordine.

Resources for Designers. L gratis

Hoc in dies magis magisque evenit exitus quam compages responsivas cogunt designatores ad cogitandum de multis simul paginis diversis. Adversus textum densum et brevem attentionem palmorum, excogitatores 6 principia elaboraverunt ad lectoris oculum ad maximas informationes dirigendas.

Haec 6 principia hierarchiae visualis adiuvabunt ut omnia designes ex opusculis ad apps, ad finem utentis positivi lectionis experientiam excogitatorum habet.

Omnes culturae a summo ad imum leguntur, et plurimae culturae a sinistra ad dextram leguntur. Sed haec scientia interest page designexcogitatores sciunt negotium multo difficilius.

Recentes studiis docuerunt homines primam paginam lustrare si prius eam legerint, ea quaerunt. Exempla scan tendunt ut unam duarum figurarum "F" et "Z" capere, et hac in consilio tuo uti potes.

F-EXEMPLUM. Principia Visual Hierarchia

F-templates ad paginas textus traditionales applicare sicut ad articulos vel ad nuntia diariorum. Lector lustrat laeva page quaerens interesting keywords in titulis sinistro-alignis vel sententiis topicis initialibus, tunc subsistit et legit (ad dextram) cum obvenit aliquid interesting. Effectus similis F (vel E, vel aliquid cum striis horizontalibus vel magis, sed vox "F" adhæsit).

Quomodo hoc uteris? Conlineare informationes magnas ad sinistram et utere brevibus, audacibus capitibus, glandibus, et aliis similibus elementis ad-grabentibus, ad impedimenta paragraphi solvendas.

Z-exemplum. Principia Visualis Hierarchiae.

Z-patterns applicare ad alia genera paginarum ut tabula vel paginae ubi informationes non necessario praebentur in paragraphis clausulis. Lector primum verticem paginae lustrat, ubi magnae notitiae verisimile est inveniri, deinde ad angulum oppositum obliquum perstare et in fundo paginae idem facit.

Designatores interretiales typice designant paginas suas ad hunc mores explicite aequandum, praecipuas informationes in angulis collocantes et alias informationes magnas dirigens in summo et fundo vectibus et diametro connectens.

In infra In consilio colloquii 2010 conventus, magni momenti elementa sunt logo (top left), a "subcriptio nunc" button (top right), et index oratorum (bottom), quae opportuna locantur in locis lepidis Z-forma.

2. Magnitudo rerum. Principia Visual Hierarchia
_

Satis simplex est: magna primum homines legunt. Si oculi tui ad "visum" ante "discissionem" trahuntur, in ima vendo pro Theatre Iuvene Vic, perceptum psychologist statim debetis contactum: probabiliter potest facere bonam pecuniam per experimentum ut raram anomaliam.

Quid interest, quod haec propensio in actu satis valida est regulam summo-down rejicere. In superiore imagine "trucidat" vincit "tempus agendi" quia maior est et ad sinistram (sic sinistra ad dextram regulam adiuvat).

Altera autem pagina nuntiationis annuae: Iura Hominis Stipendium 2012 (in quinta media columna explicatum) in magnis legebatur font "Pugna pro Aequalitate in Stipendium Sequor" ante textum directe super illud "Election MMXII." Principia Visual Hierarchia

"Electio 2012" supremus ordo notitiarum est: thema generale nobis refert ad quod indicium infra refert. Sed excogitatoris placuit ut titulus articuli lectoribus plus iucundus esset, et ideo aestimavit ut primum legeretur.

3. Spatium et textura. Principia Visual Hierarchia

Alius modus est ut operam da contentus satis locus ad respirare . Si spatium negativum significat circa conjunctionem vel lineas in textu clausurae late secutae sunt, facilius haec elementa lectoribus manifesta erunt.

Ut videre potes in imagine infra (parte DrawtoClick scriptoris), spatiorum esse potest elegans alternative vel complementum ad magnitudinem utendam. Hic, tempus sales, "Notre agencia vouscompagne...", in minimo vestigium scriptum est, sed copia spatii albi cingitur, momentum eius indicans. Infra, locutiones "Le Compendre", "Le Réaliser" et "Le Partager" addito emphasi accipiunt, e spatio circumiecto seiunctae.

Cum homines de "textura" relationem ad hierarchiam visualium loquuntur, non significant effectus graphice texturae. Immo hoc genus "texturae" spectat ad altiorem dispositionem seu structuram spatii, textus, et alia singula in pagina. Hoc Exemplum de Bright Pink illustrat conceptum bene:

In prima imagine, verbum "Lusum" altior est in hierarchia quam "badminton" quia procerior, grandior et audacior. In imagine 2, duo verba fere aequiparantur, per rectangulum nigrum, quod "badminton" exstare facit et in suo spatio ponit.

In tertia imagine, thesaurus scribbilis spatium "ludii" interrumpit, sed spatium non "badminton", ideoque in conversione consequitur ubi "badminton" summa est in hierarchia. Haec progressio difficile est praedicere, itaque designantes saepe cum sensu holistic "texturae" coniungunt.

4. Pondere pondus et geminatio. Principia Visual Hierarchia

Font selectio critica est ad constituendam hierarchiam visualem. Inter praecipua fontis attributa pondus sunt, latitudo, ictus qui litteras componunt, et stilum, ut serif et sans serif. Aliae modificationes, ut italice, partes etiam agere possunt.

Vide quomodo tincidunt ordo verbi hierarchiae influit in designatione interretialis infra pro The Factory Tea: "theas perfectus ad adiuvandum fovendum" nomen ludi est, sed differentiae fontium ponderis et cursivis, praeter verbum collocationis, plus creant dynamicam, minus linearem, experientiam legens. "

In quibusdam casibus propositum est varias informationes exhibere aeque urgere. Ponere omnes ad eandem magnitudinem ac pondus efficiet aequivalentiam, sed etiam taediosam spectabit. Differentia fontis modus est unus modus ad hanc vitandam, sicut sub operculum emporium Trendi. Principia Visual Hierarchia

Hic, quinque grammata circum paginae peripheriam eaedem sunt in hierarchia, sed varietatem efficiunt mutatis duobus fontibus bene paribus, unum medium pondus serif et alterum leve sed altum sans-serif.

5. Color et umbra. 

Hic alius est nullus ingeniosissimus: colores lucidi ex obmutato colore vel cinereo umbrae eminent, leviores autem umbrae magis "distantes" apparent et sic inferiores in hierarchia cadunt quam umbrae crassiores et obscuriores. The Ubi Sunt website lucidum lumen et coloratum reductio opponit cum effectu albo et nigro effectui luminositatis:

In Guggenheim website colore utitur ad magnas informationes illustrandas sicut locus delectu, index spectaculorum qui nunc spectatus et nexus speciales sunt. innotescere cupientes. Principia Visual Hierarchia

Musei Whitney in situ, ex altera parte, hierarchiam in uno fonte, pondere et tono (nigricante) utentes colore (quod significat album basi toni addens, leviorem facit). "Cory Archangel on Pop Culture" evidenter infra "New on Whitney Stories" in hierarchia visuali, non solum quia humilior est, sed etiam quia umbra eius est levior, eo minus conspicuum in albo prospectu facit. Principia Visual Hierarchia

Color habet specialem significationem in mobile design applicationes in quibus parvae molis amplitudo limitat facultatem tuam utendi aliis consiliis ut magnitudo varietatis et spatiorum spatiorum. In Grainger Industrial Supple app, "Perge ad Checkout" puga rubra est colorata, faciens eminere in quavis pagina ubi apparet. Angusta Proventus tabula, contra, grisa est, ut in hierarchia aliis elementis duriter aequivaleat, ut investigationis nexus et producti.

6. Directio ad gravida.

Propositiones paginae solere dispositae sunt ut linearum verticalium et horizontalium egent, tum ex conventione tum quia forma legibilia est. In tali systemate novus modus hierarchiae constituendae est: euismod praevaricationem.

Textus qui per curvam vel diametrum situm stat contra textum craticularum circumiacentem sponte eminet, scaena centri accepta. Hoc iamdiu efficax consilium in vendo, ut Frontinus Design stationem poster.

FAQ. Principia hierarchiae visualis pro designandis.

1. Quid est hierarchia visualis?

Hierarchia visualis consilium est principium, quod elementa in pagina disponere intendit ut eorum significationem extollat ​​et animum utentis dirigat. Utentes adiuvat cito intellegendi hierarchiam informationum et efficaciter penitus contenti.

2. Quare momenti in consilio est hierarchia visualis?

Magnitudo hierarchiae visualis in:

• Improved usability: Utentes adiuvat notitias quae citius indigent.
• Improved sensus: aptiorem facit contentum et amabilem.
• Stimulans commercium: Adducit ad elementa elementorum et actionem fovet.
• Simplify navigation: navigare faciliorem facit paginam quam navigare.

3. Quae sunt principia fundamentalia hierarchiae visualis?

Principia fundamentalia comprehendunt:

• Magnitudine et magnitudine: maiora elementa magis attendunt ac graviora censentur.
• Color et discrepantiae: clara et diversa elementa emineant et conspiciantur.
• Locum et accommodationem: Elementa superiora in pagina vel centro propinquiora significantius sentiuntur.
• Spatium et inane: spatio relicto circa elementa adiu- vantur.
• Curabitur: diversis fontibus, magnitudinibus, stylis textibus utentes ad momentum informationum illustrandam.
• Figurae et lineae: figuris et lineis utendo ad lineamenta et accentum creandum.

4. Quomodo magnitudine et magnitudine uteris hierarchiam visualem creare?

De magnitudine et magnitudine;

• Capita et subheadings: Magnitudines maiores utere pro titulis et quantis minoribus pro subheadings ad structuram claram efficiendam.
• Elementa Key: Magnitudinem globulis vel nexus maximis auge ut ex aliis elementis emineant.
• Imagines et graphics: Imagines magnas utere, ut animum ad partes clavis contineant.

5. Quomodo color et antithesis afficiunt hierarchiam visualem?

Effectus coloris et antithesis;

• Color accentuum: Utere nitidis vel saturatis coloribus ad exaggerandam elementorum elementorum.
• Dispositiones diversae: Diversis coloribus utere pro textu et curriculo ad meliorem readability.
• Color harmoniaFac ut colores quos eligis inter se consentiant et a notitia principali non distrahunt.

6. Quomodo recte utatur dispositio et collocatio elementorum?

Placement principia:

• Magna elementa super: Pone in summa pagina notitia clavis ubi statim visibile est.
• Locus centralis: Elementa propius ad centrum posita magis attentionem tendunt.
• Sequentia collocatione: Ordinare res in ordine logico comprehensionem informationum emendare potest.

7. Quomodo spatium album adiuvat hierarchiam visualem?

Munus vacuum;

• De elementis separatis: spatium vacuum creando inter elementa adiuvat ut ea clare separent et perceptionem meliorem efficiant.
• Focusing attention: spatio relicto circa elementum magni ponderis eminere facit et notabiliter.
• Tam mundus quam bene servetur: Spatium album utens facit consilium vultus subtilius et magis dispositum.

8. Quomodo utendi typographia ad creandum hierarchiam visualem?

Applicationem typographiae:

• Fontibus et generibusUtere diversis fontibus et generibus ad capita, subheadings et textus corporis.
• Textus magnitudine et pondere: Magnitudinem et pondus pro maximis informationibus text auge.
• Illuminatio: Italicis utere, audax, vel in luce collocari clavem verborum vel phrases.

9. Quomodo figurae et lineae influere possunt hierarchiam visualem?

Auctoritas figurarum et linearum;

• Rector lineae: Utere lineas creare duces ad auxilium utentis sequere page.
• Formae pro accentibus: Figurae geometricae momentis elementis illustrare possunt vel accentum creare.
• Contentus separationis: Lineae varias contentorum partes distinguere possunt, structuram claram creans.

10. Quae instrumenta et technicae artis visivae hierarchiae explorare possunt?

Modi Test:

• Testis cum users: Conducere tentantes cum realibus users ut feedback.
• Morum Analysis: Usus analyticus tools studere user mores in pagina.
• Feedback ex collegis: Rogamus ut consilium a proceribus recognoscendum pro ulterioribus opinionibus et commendationibus.
• Heatmaps: Tabulas resolvere caloris ad determinare quae elementa maxime attrahunt operam.
• A/B probatio: uarias consilium comparans optimam optionem determinare.

Per haec principia et normas sequendo, designatores uisum appellantem et intuitivam interfaces creare possunt quae experientiam et efficaciam contentarum interactionum emendare possunt.