Gestalt theory was introduced in the field of psychology in 1912.

Its major contributors

were Wesheimer, Koffa, and Kohler !Ware, 2""#$. Gestalt aimed to e%plain the way
people percei&e structures in the en&ironment by e%amining psychological phenomena.
'ost theories of the time lie structuralism and beha&iourism were analysing an
e%perience as a sum of components, which were studied in isolation. (he proposed
solution was encapsulating the solutions of the isolated elements !Wertheimer, 19#)a$. In
contrast to such approaches, Gestalt theory does not face an e%perience as *numbers+ or
sum of indi&idual elements that can be combined, but as parts of the larger units, namely
the *wholes+, separated from and related to one another !Weirtheimer, 19#)b$. ,s
Wertheimer !19#)a$ e%plicitly states-
Gestalt theory in ,rt and .isual /ommunication 0ducation
What made gestalt theory appealing to &isual artists, educators, and &isual
communicators is that the school of psychology sought to e%plain 1pattern seeing2 in
human beha&iour. In 1933 the 4ew 5ahaus in /hicago, used illustrations by Wertheimer,
Koffa, and Kohler to assist his discussion of the laws of &isual organi6ation and
psychological forces. 7ome major contributors ha&e been 8rofessor 9udolf ,rnheim and
9oy 5ehrens, who in 2""2 incorporated Gestalt in her interacti&e media :esign
curriculum. !Graham, 2"")$
(he influence of goals on attention has been demonstrated using eye tracing systems.
;ne such study was carried out by <arbus !19=>$? participants were initially ased to
loo freely at a painting, and eye saccades were mapped !fig. %1$. @ig. %# on the other
hand, shows the focus of attention when participants were ased to gi&e the ages of the
people in the painting. Aere the fi%ations are clearly on the faces of the people, and less
on the en&ironment in general
While itBs well worth reading ,rnheimBs boo, to summarise there are si% common, basic
Gestalt 8rinciples-
7imilarity
/ontinuation
/losure
8ro%imity
@igureCGround
7ymmetry and order
8If you+&e e&er wondered why some design approaches seem more coherent, connected
or unified than others, it may be because the designer has used the Gestalt principles to
help bring together their design elements.
In the 192"s a group of psychologists in Germany de&eloped a series of theories of &isual
perception, describing how &iewers group together different objects into groups or a
single coherent whole when the separate elements are arranged together in a particular
way. (he prominent founders of the collection of theories and principles are 'a%
Wertheimer, Wolfgang Kohler, and Kurt Koffa.
(he term Gestalt means Bunified wholeB, which is a good way of describing the o&erD
arching theme behind the principles- if you collect together your design elements in an
arrangement using one of the approaches, your design will feel more connected, coherent
and complete.
9udolf ,rnheim
(hese principles were de&eloped o&er a number of years, but came to prominence in part
thans to 9udolf ,rnheimBs 19E3 boo, ,rt and .isual 8erception- , 8sychology of the
/reati&e 0ye !I754- 9>)D"DE2"D"21=1D>$ which has become one of the mustDha&e art
boos of the 2"th century, and regularly features on uni&ersity course te%t lists.
While itBs well worth reading ,rnheimBs boo, to summarise there are si% common, basic
Gestalt 8rinciples-
7imilarity
/ontinuation
/losure
8ro%imity
@igureCGround
7ymmetry and order
WeB&e broen each of these down with a simple e%ample below.
"1. 7imilarity
Gestalt (heory
(his design has similarity because the indi&idual elements that mae up the design ha&e
the same basic shape characteristics
When objects loos similar to one another, &iewers will often see the indi&idual elements
as part of a pattern or group. (his effect can be used to create a single illustration, image
or message from a series of separate elements.
Gestalt (heory
,ttention is drawn to the different element in this composition because it breas the
pattern of similarity
(he similarity between different elements can be shape, colour, si6e, te%ture or &alue. (he
more commonality that indi&idual elements ha&e, the greater the sense of coherence,
thans to similarity.
Gestalt (heory
(his co&er for the 5eatles+ album Aard :ay+s 4ight uses the principles of similarity and
anomaly
, particular element can be emphasi6ed when it+s dissimilar, breaing the pattern of
similarity. (his effect is called an anomaly.
"2. /ontinuation
Gestalt (heory
In this e%ample the eye is led through the first design element towards the star that aligns
with the cur&e
/ontinuation is the principle through which the eye is drawn along a path, line or cur&e,
preferring to see a single continuous figure than separate lines. (his can be used to point
towards another element in the composition, and is seen where a line is cut through one
object, often in a cur&e, aligning perfectly with a secondary element.
Gestalt (heory
(his illustration consists of 3 lines that meet at the central point, but we prefer to see two
intersecting lines rather than 3 lines that con&erge
"#. /losure
Gestalt (heory
(he World Wildlife @und logo uses the closure principle to describe a panda, e&en though
the shape is not fully closed
/losure is a common design techniFue that uses the human eye+s tendency to see closed
shapes. /losure wors where an object is incomplete or the interior space of an element is
not fully closed, but the &iewer percei&es a complete shape by filling in the missing
information. (his techniFue is often associated with stenciled artwor, but is also closely
associated with logo forms.
"3. 8ro%imity !also nown as grouping$
Gestalt (heory
(he arrangement of bo%es on the left are not close enough to ha&e pro%imity, while the
group on the right is percei&ed as a single whole element
8ro%imity uses the close arrangement of elements to create a group association between
those objects. If indi&idual elements are also similar, they will tend to be percei&ed as a
single whole, e&en though they are separate elements.
Gestalt (heory
(he shapes don+t ha&e to be regular to achie&e pro%imity. 7imilar shapes arranged
together to describe a bigger image, such as this illustration of a flame
8ro%imity or grouping can be achie&ed with lots of different commonality including
shape, colour, te%ture, si6e or any other &isual attribute.
"E. @igureC ground
Gestalt (heory
@igure and ground often uses the idea of light and shade to help create an image that
jumps out from a series of shapes
(his principle describes the eye+s tendency to see and separate objects from their
surrounding bacground. , classic e%ample uses a &aseCcandlestic illustration to show
two faces peering at each other, but you can also see this effect in a &ariety of logo
designs. It wors because human eyes want to see the figure !foreground object$ and
bacground !ground$ as two different planes of focus.
Gestalt (heory
'/ 0scher+s famous woodbloc 7y and Water 1 !19#)$ uses the figure and ground
principle
0&erything that is not figure is considered ground, which can be used to create some
interesting &isual effects and trics, particularly when the designer or artist introduces
deliberate ambiguity D a fa&ourite techniFue of the surrealist '/ 0scher.
"=. 7ymmetry and order
8ut simply, this principle says that a composition should not pro&ide a sense of disorder
or imbalance, as otherwise the &iewer will waste time trying to locate the missing
element, or fi% the problem, rather than focusing on the message or instruction.
Gestalt (heory
(he symmetrical figure that maes up the windmill shown below pro&ides a sense of
order and balance, allowing the &iewer to concentrate on the rest of the design rather than
concerning themsel&es with what might be causing imbalance
<ou can achie&e symmetry by pro&iding a good balance or sense of symmetry in your
design elements, such as the windmill illustration below. (his pro&ides the &iewer with a
feeling of harmony.
Percepcija ili Opaanje je proces kojim mozak organizira podatke dospjele iz raznih
osjetila i interpretira ih tvorei smislenu cjelinu. Percepcija nam omoguava da
ra6ne mrlje boje &idimo ao odreGeni predmet, da mnoHt&o 6&uo&a Iujemo ao go&or,
da ombinaciju slatog, iselog i ostalih ousa ousimo ao odreGeno jelo itd.
7adrJaj KsarijL
1 8ercepti&na organi6acija
1.1 Grupiranje
1.2 ;d&ajanje figure od po6adine
1.# 8ercepcija dubine
1.#.1 5inoularni 6nao&i
1.#.2 'onoularni 6nao&i
2 8ercepti&na onstantnost
# 8ercepti&ne &are
3 .idi joH
E .anjse po&e6nice
8ercepti&na organi6acijaKuredi M uredi NdL
;sno&a percepcije jest organi6acija podataa i6 osjetilO. (e procese prouIa&a grana
psihologije 6&ana geHtalti6am.
GrupiranjeKuredi M uredi NdL
4aIelo blisosti
4aIelo sliInosti
4aIelo 6at&aranja
4aH mo6a Iesto mnoHt&o objeata dijeli u grupe, i to po ra6nim naIelima. 4ajpo6natija
su naIela blisosti !objeti oji su bliJe bit Pe u jednoj grupi$, sliInosti !sliIni Pe objeti
t&oriti jednu grupu$ i 6at&aranja !mo6a Pe automatsi 6at&oriti QrupeQ da bi percipirao
po6nati obli$.
;d&ajanje figure od po6adineKuredi M uredi NdL
:&a profila ili &a6aR
S s&aodne&nom je Ji&otu &rlo &aJno ra6lio&ati figuru od po6adine, odnosno 6nati Hto
je objet oji gledamo, a Hto je njego&a oolina. 7a strane je pria6ana slia od oje je
to nemoguPe ra6lio&ati- moguPe je &idjeti bijelu &a6u na crnoj podlo6i ili d&a crna lica i6
profila na bijeloj po6adini. 4o, goto&o je nemoguPe &idjeti oboje isto&remeno !d&a lica
i6meGu ojih je &a6a$. (reba napomenuti da je isti mehani6am &rlo Iest od auditornih
podraJaja, odnosno ad moramo ra6lio&ati go&or od oolne bue !&idi Kontinuitet
preinutog tona$.
8ercepcija dubineKuredi M uredi NdL
8ostoji &iHe 6nao&a pomoPu ojih naH mo6a odreGuje udaljenost ra6liIitih predmeta.
5inoularni 6nao&iKuredi M uredi NdL
5inoularni su 6nao&i oni oji u s&ojoj osno&i imaju Iinjenicu da posjedujemo d&a oa.
;sno&a trodimen6ionalnog &ida jest ra6liIitost sliO na mreJnici !&idi stereosopija$.
Tbog ra6liIitog poloJaja naHih oIiju, s&ao oo gleda s&ijet i6 drugog uta, pa se na
mreJnicama st&araju d&ije ra6liIite slie. 'o6a i6 tih podataa Qsh&atiQ oji su objeti
bliJe a oji dalje, pa mi percipiramo s&ijet trodime6ionalno.
;sim ra6liIitosti slia na mreJnici, mo6a 6a percipiranje dubine oristi i on&ergenciju
oIiju. Kad gledamo u nei predmet, oba su naHa oa usmjerena u istu toIu. Uto je
predmet bliJe, oIi gledaju &iHe Qu riJQ, odnosno primanute su bliJe jedno drugome.
'onoularni 6nao&iKuredi M uredi NdL
'onoularni su 6nao&i oni pomoPu ojih moJemo percipirati dubinu i ad 6aJmirimo
na jedno oo.
Vedan od naIina jest usporeGi&anje relati&ne &eliIine ra6nih objeata te 6aljuIi&anje u6
pomoP isust&a. ,o &idimo uPu raj planine oja je pri&idno iste &eliIine ao i uPa,
6aljuIit Pemo da je planina &rlo daleo, jer i6 isust&a 6namo da je nemoguPe da planina
bude tao mala, ili da uPa bude tao &elia.
7aturno&i 8rirodni sateliti :iona i 9eja
,o jedan objet preri&a drugi, 6nat Pemo da je on ispred, odnosno da je &rlo mala
&jerojatnost da je onaj drugi objet na nei naIin odre6an baH tao da ro6 taj dio &idimo
onaj pr&i objet. 4a slici sa strane &idimo :ionu ao preri&a 9eju.
Winearna perspeti&a oristi pri&idno spajanje paralelnih pra&aca u jednoj toIi u daljini
!&idi 8ogreHne percepcije &eliIine i oblia$.
8romjene &ida od retanja promatraIa. Kad se promatraI gledajuPi u nee udaljene
statiIne objete rePe, ut i6meGu njih se mijenja pa promatraI moJe sh&atiti odnos
i6meGu objeata.
,tmosfersa perspeti&a D &rlo udaljeni predmeti su Iesto !o&isno o atmosfersim
priliama$ 6amuPeni i pla&asti. 'o6a to oristi ao bi laHe ustano&io udaljenost
predmetO. I tu se preteJno radi o isust&u.
8ercepti&na onstantnostKuredi M uredi NdL
8ercepti&na onstantnost nam omoguPuje da nei predmet percipiramo baH ao taj
predmet i6 ojeg god uta i i6 oje god udaljenosti ga gledali !&idimo jabuu, telefon,
/: itd.$. :a nema percepti&ne onstantnosti, jedan bismo predmet mogli percipirati ao
besonaIno mnogo ra6liIitih predmeta !ruJite oo stolice i u&ije nano&o &idite no&i
predmet$.
8ercepti&ne &areKuredi M uredi NdL
Gla&ni Ilana- 8ercepti&ne &are
8ercepti&ne &are !ili ilu6ije$ su Qri&oQ percipirane poja&e oje Iesto mogu biti
6bunjujuPe. 4ajIeHPe su optiIe ilu6ije, ali je ra6lia u tome Hto optiIe &are uljuIuju
samo poja&e oje percipiraju oIi, a percepti&ne uljuIuju s&e poja&e oje percipiramo
!na bilo oji naIin$. 4ee su percepti&ne &are u6roo&ane nesa&rHPenoHPu naHih osjetila
!tromost oa, primjerice$, a nee radom naHeg mo6ga.
(oIe u reHetiKuredi M uredi NdL
(oIe u reHeti
Aermanno&a ilu6ija
.rlo po6nata optiIa &ara oja re6ultira percepcijom mutnih polupro6irnih toIaa na
presjecima elemenata reHete. Q;trioQ ju je Wudimar Aermann 1)>". godine. Gledajte u
nei od primjera sa strane !na desnom primjeru se bolje &idi$. 4a presjecima crtO reHete
&idjet Pete crne mutne toIe. ,li, ao gledate ra&no u presje, &idjet Pete samo pra6ninu
!bijeli prostor$ D toIe se &ide na presjecima u oje ne gledate diretno.
4anadne slieKuredi M uredi NdL
4anadna slia D naon netremiInog gledanja trebao bi se &idjeti ljudsi portret !Isus,
ao hoPete$
4anadne slie, ili paDslie su optiIe &are oje oriste adaptaciju oa da bi se, naon
netremiInog gledanja, na neutralnoj po6adini &idio negati& dotiIne slie. Gledajte u sliu
desno netremice d&adeseta seunda !najlaHe je Q6abuljitiQ se u jednu od Ietiri oomito
posta&ljene toIe u sredini$. ;dmah naon toga pogledajte u neu neutralnu !najbolje
bijelu$ po6adinu !pra6an papir, 6id ili sl.$. 4a po6adini Pete &idjeti ljudsi portret !u
originalu je o&a &ara napra&ljena s namjerom da pria6uje Isusa$, oji 6apra&o ne
postoji.
9ijeI je o &eP spomenutoj osjetilnoj adaptaciji. ;o se automatsi Qpri&ia&aQ na
trenutaInu oliIinu s&jetlosti. Kod o&a&ih ontrasta, pojedini se dijelo&i mreJnice
ra6liIito pri&ia&aju na s&jetlost. Kad se pogleda u neutralnu po6adinu, dijelo&i mreJnice
joH ostaju pri&inuti na prijaHnje stanje, odnosno pos&jetljuju dijelo&e oji su bili
pretamni !na neutralnoj po6adini re6ultirajuPi s&jetlijim podruIjima$, a potamnjuju
dijelo&e oji su bili s&ijetli !re6ultirajuPi tamnim podruIjima$. S&jetno aJemo da slia
ostaje na mreJnici joH neo &rijeme.
9a6liIite percepcije geometrijsih lio&aKuredi M uredi NdL
4ecero&a oca i d&a moguPa naIina percepcije
7chrXdero&e stube D oja je ploha prednja- , ili 5R
Kod geometrijsih objeata oji su nacrtani !d&odimen6ionalni su$, a mogu se percipirati
ao trodimen6inalni objeti Iesto dola6i do ra6liIitih moguPnosti percepcije. 7 lije&e je
strane t6&. 4ecero&a oca, 6apra&o obiIna projecija JiIanog modela oce na d&ije
dimen6ije. 7 desne strane slie nala6e se d&a moguPa naIina percepcije D pr&i je taa& da
je donji lije&i &adrat prednja ploha oce, a drugi taa& da je gornji desni &adrat
prednja ploha oce. 'oguPe je da &am se ta d&a naIina i6mijenjuju do gledate u sliu.
,o ocu percipirate na samo jedan naIin, probajte trepnuti. 7chrXdero&e stube !desno$
rade po istom principu D moguPe ih je percipirati tao da je ploha , ispred plohe 5 i
obrnuto.
Q(riQ je u tome da se trodimen6ionalni objeti ne mogu projicirati na d&odimen6ionalnu
po&rHinu be6 jaog i6obliIenja. :a je JiIani model oce st&arno ispred nas, 6bog
on&ergencije oIiju 6nali bismo oja je stranica prednja. Kao je papir !ili 6aslon$
d&odimen6ionalan, oba su &adrata na istoj udaljenosti od oa pa to omoguPa&a mo6gu
da Q6amisliQ obje situacije. Tanimlji&o je da je mo6gu goto&o nemoguPe 6amisliti figuru
oce ao ploHnu, odnosno ao sup od tri &adrata !d&a &ePa i jednog manjeg$ i d&a
pra&outna trouta. Ista st&ar &rijedi i 6a 7chrXdero&e stube.
8ogreHne percepcije &eliIine i obliaKuredi M uredi NdL
:uljine linijaKuredi M uredi NdL
'YllerDWyero&a &ara D s&e su &odora&ne linije jednae duljine.
8on6o&a &ara D d&ije su &odora&ne linije jednae duljine.
Koja je od pr&e d&ije &odora&ne linije na lije&oj slici duljaR SnatoI tome Hto se Iini da je
druga linija po redu dulja, one su jednae duljine. Vednao tao, na trePoj liniji odo6go
o6naIite sredinu, pa poslije pro&jerite metrom !nacrtajte na papir$. 4esumnji&o Pete
sredinu o6naIiti bliJe raju !repu$ strelice nego Hto ona to jest.
Vedno od objaHnjenja je to da dijelo&i strelice oji QstrHeQ i6 pri&idno dulje crte &i6ualno
jednosta&no produJuju tu crtu. :rugo je to da mo6a te crte percipira ao
tordimen6ionalne, a 6a uto&e pretposta&lja da su pra&i. WaHi primjer 6a sh&aPanje o&og
objaHnjenja je 8on6o&a &ara !slia desno$ D mo6a sliu pericpira ao traInice !ili Hto
sliIno$ pa &odora&ne crte prilagoGa&a njima. .aJno je napomenuti da 'YllerDWyero&a
&ara ne 6a&ara&a s&e ljude. 4a one oji Ji&e u oolini be6 mnogo pra&ih uto&a !malo
6grada, ruJne nastambe i sl.$ o&a &ara nePe utjecati, odnosno oni Pe rePi da su crte
jednae duljine.
8oloJaj i obli linijaKuredi M uredi NdL
Ilu6ija 6ida D s&e su hori6ontalne linije ra&ne i usporedne.
Aeringo&a ilu6ija D cr&ene su linije ra&ne i paralelne.
Vedna od najpo6natijih ilu6ija o&og tipa je t6&. ilu6ija 6ida !eng. /afZ wall illusion$
9icharda Gregoryja !lije&o$. .odora&ne linije 6ida su usporedne. 7&aa QciglaQ 6ida mora
biti oruJena neutralnim dijelom !u o&om sluIaju si&e boje$. VoH jedna ta&a &ara je
Aeringo&a ilu6ija !0wald Aering, 1)=1.$
Ta obje ilu6ije je 6asluHan naH mo6a. Kod Aeringo&e, on percipira pra&ce oji se sijeu
u sredini !u naHem sluIaju pla&e crte$ ao paralelne linije oje se pri&idno spajaju u
daljini. /r&ene crte !oje jesu paralelne$ 6atim prilagoGa&a pla&ima. Ilu6ija 6ida nema
&e6e s percepcijom dubine. ;&dje je problem u si&im crtama !oje su pri&idno naoHene$.
,o pogledate u umanjenu &er6iju !npr. o&u slije&a$, primijetit Pete da se si&e linije be6
problema &ide na spoju crne i crne QcigleQ te na spoju bijele i bijele. 4o, na spoju crne i
bijele QcigleQ, crta se ne &idi dobro, odnosno i6gleda ao dio crne QcigleQ. 4o, ad bi to
bilo toIno, si&e bi se linije Iinile ispresijecanima. Tato mo6a traJi najjednosta&nije
rjeHenje, a to je da postoje ra&ne crte i6meGu sloje&a QcigalaQ, ali da su one nagnute na
jednu stranu.
Kri&a percepcija bojaKuredi M uredi NdL
,delsono&a ilu6ija D polja , i 5 su iste boje. !animacija$
Aori6ontalni pra&outni je ispunjen jednom bojom.
8olja , i 5 na slici lije&o su potpuno iste nijanse si&e boje. ,o ne &jerujete, pogledajte
GI@ animaciju. Ta tu je &aru 6aduJan (ed ,delson, oji ju je otrio 199E. godine.
Vednao tao, dugaIi pra&outni na slici desno ne prela6i i6 s&jetlije u tamniju nijansu
si&e boje, nego je cijelom duJinom jednae boje.
'ehani6am je u biti jednosta&an D mo6a sta&lja boje u ontest, Hto je sa&rHeno logiIno
!prepo6nat Pemo boju objeta i ao je on u sjeni i ao je na s&jetlu$. Tato mo6a u
,delsono&oj &arci u6ima u ob6ir sjenu oja preri&a polje 5 i prema tome odreGuje oje
je to polje boje. 4a desnoj slici se Iini da boja pra&outnia prela6i i6 s&jetlije u tamniju
jer mo6a !pono&o$ usporeGuje taj pra&outni s oolinom !oja prela6i i6 tamnije u
s&jetliju$.
.iHe6naIne slieKuredi M uredi NdL
8ata ili 6ecR
8ostoje nee slie oje moJemo &idjeti na ra6ne naIine. 4a priloJenoj slici moguPe je
&idjeti gla&u pate !lije&o je ljun$ ili 6eca !lije&o su uHi, desno usta$.
4aH mo6a u&ije pouHa&a optiIe podraJaje !oji su 6apra&o sup boja$ interpretirati
ao smislene cjeline. (o postiJe uoIa&anjem po6natih oblia i 6aljuIi&anjem u sladu s
njima. 4o, postoje oblici oji mogu biti interpretirani ao &iHe ra6liIitih po6natih
predmeta. S o&om sluIaju, lije&i dio objeta moJe podsjePati na 6eIje uHi ili patin ljun.
;stata slie je napra&ljen tao da se 6apra&o pomoPu obje &er6ije mogu percipirati
smislene cjeline.
4emoguPe slieKuredi M uredi NdL
'./. 0scher- 7lap !Waterfall$
8rouIite 6elene i cr&ene dijelo&e oce.
:a bi oca st&arno postojala, mora biti prere6ana.
,o pogledate sliu '.7. 0schera 7lap, &idjet Pete da slap pada sOm u sebe, odnosno,
teIe u6&odno. Iao to u st&arnosti nije moguPe, slia se na pr&i pogled Iini potpuno
normalnom. 'alo se bolje usredotoIite i na stupo&e oji drJe onstruciju ojom teIe
&oda. TbunjeniR
4emoguPa oca oristi d&a naIina percepcije 4ecero&e oce i pouHa&a ih spojiti u
jedan, tao da je oca podijeljena na d&a dijela oji su pria6ani na ra6liIite naIine
percepcije. (a je oca u st&arnom s&ijetu nemoguPa, osim ad bi se napra&ila ao na
donjoj slici !&idi se da su 6elene stranice prere6ane$, a gledatelj bi 6at&orio jedno oo i
stao na toIno odreGeno mjesto. 8enroseo& trout i nemoguPe Q&[leQ oriste sliIan
mehani6am.
4emoguPe slie taoGer oriste i6obliIenja pri projeciji trodimen6ionalnih tijela na
d&odimen6ionalnu po&rHinu, ali na taa& naIin da je nacrtanu st&ar nemoguPe napra&iti !a
ni 6amisliti$ u tri dimen6ije.
8enroseo& trout
4emoguPe Q&[leQ D 6amislite ih u trodimen6ionalnom s&ijetu.
T&uIne &areKuredi M uredi NdL
7hepardo& tonKuredi M uredi NdL
7hepardo& je ton otrio 9oger 7hepard. 7luHajuPi ga, dobi&a se dojam da se ton stalno
sniJa&a ili po&isuje, ali je ujedno stalno iste &isine.
/rystal multimedia.png 8osluHajte\
9adi se o neolio dionica sinusoidnog 6&uInog &ala oje su ra6manute 6a jednu
ota&u. 7&e se dionice jednaom br6inom Qsni6ujuQ, odnosno fre&encija im se stalno
smanjuje. :ionice jedna po jedna 6a&rHa&aju, postupno se stiHa&ajuPi, do isto&remeno
druga dionica poIinje, postupno se pojaIa&ajuPi. (ao sluHatelj ne primjePuje promjenu
dionica, Hto do&odi do toga da ton 6&uIi nepreinuto.
Kontinuitet preinutog tonaKuredi M uredi NdL
/rna linija predsta&lja ton, a si&i pra&outnici Hum. !@reFuency D fre&encija, (ime D
&rijeme
Kad se ton !obiIno po&isujuPi ili sni6ujuPi$ narato preine !recimo E"ms$, a u to se
&rijeme ubaci jednao rata Hum, naHe uho ton percipira ao nepreinut.
/rystal multimedia.png 8osluHajte\
;pet moJemo 6ah&aliti mo6gu D be6 o&oga u gradsoj guJ&i &jerojatno ne bismo nioga
niHta ra6umijeli.
.are opipaKuredi M uredi NdL
8ercepcija toplineKuredi M uredi NdL
S6mimo tri posude i u njih sta&imo redom hladnu, mlau i toplu &odu. Vednu ruu
sta&imo u posudu s hladnom &odom, a drugu u posudu s toplom &odom i osta&imo tao
jednu minutu. Tatim obje rue sta&imo u posudu s mlaom &odom D &oda u posudi je
isto&remeno i topla i hladna.
8ono&o se radi o osjetilnoj adaptaciji. Vedna se rua Qna&ilaQ na toplo, a druga na
hladno, pa drugaIije reagiraju na mlau &odu !ruci oja se Qna&ilaQ na toplo, mlaa &oda
je hladnija nego drugoj ruci$.
8ercepcija mjesta podraJajaKuredi M uredi NdL
Vedna osoba ispruJi podlaticu !s dlanom prema gore$ i 6aJmiri, a druga ju Halja &rlo se
polao pomiIuPi od 6apeHPa do lata. 8r&a osoba mora rePi ad druga osoba doGe do
lata. .ePina ljudi to aJe puno ranije.
.are njuha i ousaKuredi M uredi NdL
4ajpo6natija se &ara o&og tipa temelji na Iinjenici da ono Hto podra6umije&amo pod
ousom &eliim dijelom sadrJi i miris. ;dnosno, miris hrane ima &eli udio u naHoj
precepciji njena ousa. Tato je &rlo teHo prepo6nati o ojoj se hrani radi ad je 6aIepljen
nos, odnosno ad nema podraJaja mirisa. VoH se bolje taj uIina &idi ad jedemo jednu
&rstu hrane do miriHemo drugu. 8robajte jesti jabuu do &am je pod nosom &ruPa a&a\
19 @actors (hat Impact /ompositional 5alance
by 7te&en 5radley on
:ecember 2", 2"1"
,rchi&ed in Web :esign
<ou are here-
Aome C 5log C Web :esign C
19 @actors (hat Impact /ompositional 5alance
A('WECV7 @ramewor
A('WECV7 @ramewor
0&erything you need to build A('WE sites ] mobile apps. Get your free trial now\
&ia ,d 8acs
Imagine a boulder leaning too far o&er the cliff+s edge. 7eeing that boulder you thin it
should come crashing down the mountainside. It+s out of balance and you feel the tension
of the impending crash. , similar feeling happens in your &isitors when the composition
of your design is &isually out of balance.
In a couple of pre&ious posts I taled about &isual balance and in each I briefly mentioned
the idea of &isual weight in order to achie&e &isual balance. (here+s more to &isual
balance than I mentioned in those pre&ious posts and I thought the topic deser&ing of its
own post.
andinsyDcompositionD).jpg
/omposition ) by Kandinsy !abo&e$ is a study in &isual weight, direction, and balance.
4otice the small circle just abo&e the center. It+s the optical center for the wor.
What is .isual 5alanceR
.isual balance !8:@$ results from 2 major factors, &isual weight and &isual direction. If
you thin about objects in the real world it+s not hard to understand.
/onsider the image below of a small bloc and a large bloc on a le&er.
(ension created by two blocs on fulcrum being &isually unbalanced
<ou liely see the larger bloc as being much hea&ier than the smaller bloc. 4ote too
how your eye is attracted more toward the color red, gi&ing additional &isual weight to
the bloc.
(he main force acting on the large bloc is gra&ity which is acting downwards. (here+s
tension because you+d e%pect the large bloc to mo&e down on the le&er. (he blocs in
the image are out of balance based on the relati&e weights of the blocs and the direction
of the forces acting on them.
While I described the image abo&e in terms of what the image is depicting physically, the
same thing is happening &isually. (he blocs are out of balance based on their &isual
weight and &isual direction.
.isual WeightD (he percei&ed weight of a &isual element. It+s a measure of how much
anything on the page attracts the eye of your &iewer.
.isual :irection ^ (he percei&ed direction of the &isual forces. It+s the direction we thin
an element should be mo&ing if it was gi&en a chance to mo&e based on the forces acting
on it.
(he optical center is located just abo&e the geometric center
;ptical /enter
;bjects and elements balance around a point. In the image of the blocs it+s the fulcrum
of the le&er. ;n a page it+s the optical center. (he optical center is a point that attracts the
&iewer+s eye unless other &isual elements pull the eye elsewhere.
5y default a reader+s eye will naturally start in the upper left and proceed toward the
lower right, passing through the optical center. 4aturally in a country that reads from
right to left you would re&erse things a bit.
0&ery shape has a geometric center. :raw 2 lines from corner to corner on a rectangle
and the point where the lines meet is the geometric center. (he optical center is slightly
abo&e the geometric center.
When designing you should balance your elements around the optical center and not the
geometric center.
Ssing si6e, shape, &olume, &alue, color, and percei&ed phsyical weight to show &isualD
weight
13 @actors that Influence .isual Weight
'any factors affect the percei&ed &isual weight of your design elements and these will be
summari6ed in the table below. 7ome are ob&ious and some not so ob&ious.
'ost of these factors come from the wor of 9udolph ,rnheim, a noted author of the
psychological principles of art. I+&e mi%ed in some other factors I disco&ered during my
research, though many are related to ,rnheim+s wor and mainly add a little more detail.
9emember that &isual weight is a measure of how much something attracts your eye. If
you eep that in mind some of the factors below will mae more sense.
@actor 0ffect
7i6e Warger objects appear &isually hea&ier than smaller objects
7hape ;bjects of regular shape appear hea&ier than irregularly shaped ones
;bjects of compact shape are &isually hea&ier than those not compact
@orm ] 7pace8ositi&e forms weigh more than negati&e space. , large space can be
balanced against a smaller positi&e form.
Isolation ;bjects isolated in a space appear hea&ier than those surrounded by other
elements
:ensity 8acing more elements into a gi&en space gi&es more weight to that space.
'ultiple small objects can balance one larger object
/olor 9ed seems to be hea&iest color while yellow seems to be lightest. In general
warmer colors appear hea&ier than cooler colors.
AighDIntensity colors appear hea&ier than lowDintensity ones. , small area of bright color
can counterbalance a larger area of dull neutral color.
.alue , darer object will ha&e more weight than a lighter object. (he higher the &alueD
contrast !between object and bacground$, the hea&ier the weight of the object_
Intrinsic Interest /omple%, intricate, or peculiarly shaped objects appear &isually
hea&ier than objects not possessing these features.
(e%ture ,n element with more comple% te%ture is hea&ier &isually than one with a
simple te%ture or no te%ture at all. , bloc of te%t has the Fuality of a rough te%ture
.olume #Ddimensional &olumes carry more mass and &isual weight than 2D
dimensional surfaces
:epth (he greater the depth of field of an area, the greater the &isual weight it carries.
8ercei&ed physical weight ,n element that loos lie a car will appear hea&ier than an
element that loos lie a feather.
WocationC8osition (he &isual weight of an object increases in proportion to its
distance from the center !or dominant area$ of the composition.
, large object placed near the center can be counterbalanced by a smaller object placed
near the edge
,n object in the upper part of a composition appears hea&ier than an object in the lower
part.
;bjects on the right of the composition appear hea&ier than those on the left
;rientation .ertical objects appear hea&ier than hori6ontal objects. , diagonal
orientation carries more &isual weight than a hori6ontal or &ertical one.
_,n interesting point about &alue is that while darer elements loo hea&ier, e%periments
ha&e shown they actually felt lighter in what+s considered the brightnessDweight illusion.
It+s not something we+ll worry about in our designs, but I thought it interesting.
Keep in mind that &isual weight is a combination of all of the abo&e. <our largest element
on the page may also ha&e the lightest &alue. ,nother element that+s smaller, but also
bright red in color may carry more &isual weight as a result.
structural networ showing the forces are strongest along a%es and centers
E @actors that Influence .isual :irections
(here are se&eral factors that affect &isual direction, though not Fuite as many as those
affecting &isual weight. Where we can eFuate &isual weight with what attracts our eye the
most, we can eFuate &isual direction with where an object leads our eye. (hat area where
the eye is led gains more of our attention.
;nce again I+ll summari6e the factors in the table below.
@actor 0ffect
Wocation of elements (he &isual weight of an element attracts neighboring elements,
imparting direction to them
7hape of element (he shapes of an object creates an a%is that imparts directional
forces in two opposing directions along that a%is
7tructural 7eleton ;bjects appear to mo&e along the structural a%is of a design as a
whole or parts of the design
7ubject matter of an element ;bjects in a design may naturally point in a direction. @or
e%ample an arrow
;bjects opposing the intrinsic directional forces of an object can impart &isual direction
to other elements in the composition
'o&ement ;bjects can be designed to appear mo&ing in any direction
, couple more points worth mentioning. (he center and the corners of the page are each
magnets attracting the eye. (he center is a little stronger, though, which means the point
of balance between center and corner is a little closer to the corner than the center
,lso because we generally read from left to right and mo&e through a page from top left
to bottom right any diagonal that runs from upper left to lower right is seen as
descending. 5y contrast any diagonal that runs from lower left to upper right is seen as
ascending. 4aturally both would be re&ersed in cultures were reading is done right to left.
(aylor ] I&es, home page design
(he (aylor ] I&es home page abo&e uses both &isual weight and &isual direction to create
balance. (he weight of the large and small red ampersands on the right are balanced by
the na&igation at the top and the te%t bloc down the left. (he te%t bloc has a downward
&isual direction, which contributes to the two sides of the design balancing.
Aow .isual Weight and :irection Impact :esign
4aturally &isual weight and &isual direction affect the balance of a composition, but
understanding weights and direction gi&e us greater control o&er a &ariety of design
principles.
5alance ^ <our composition needs to be in balance, whether symmetrical, asymmetrical,
or radial. <ou+ll achie&e this balance by placing elements of combined eFual &isual
weight on either side of the optical center
:ominanceC@ocal 8oints ^ @ocal points are elements that attract the eye. (hey+re
elements of greater &isual weight. (he dominant element of a design is the element with
the greatest &isual weight.
7cale ^ is generally considered to be the relati&e si6e of different objects. Aere we can
consider it in the conte%t of the relati&e &isual weight of different objects.
8roportion ^ is the relationship in scale between elements. :ifferent proportions in a
composition relate to different inds of balance and can help establish &isual weight and
depth.
Aierarchy ^ 5y creating a scale of focal points or elements of different &isual weights you
can create a hierarchy of design elements. (he difference in &isual weights is what maes
certain elements stand out impro&ing scanability.
@low ^ (hrough focal points, hierarchy, and &isual direction you can lead the eye from
one part of your design to the ne%t. <ou+ll create a flow through your design.
:epth ^ 0lements with greater &isual weight appear to mo&e forward in a design while
&isually lighter elements recede into the bacground. We can use this understanding to
create depth in a design.
@or a practical e%ample ha&e a loo at how Wue Wroblewsi uses &isual weights in the
design of a web form.
oldDguard.jpg
4otice how &isual weight is used in the ;ld Guard home page design abo&e. In addition
to being compositionally balanced the design uses the different weight circles to create
hierarchy and flow. 7imilar for the te%t on the page. (he design creates focal points and
uses proportion and scale to achie&e its hierarchy and flow.
,dditional 9esources
I drew a lot of information from the two 8:@s below in writing this post and wanted to
call your attention to them. (he first is notes of 9udolph ,rnheim+s wor by @rederic @.
Weymarie. (he second is a 8:@ on map design, but it tals a great deal about &isual
weight, direction, and balance, as well as a &ariety of other design principles.
5oth are relati&ely short and highly worth reading.
,rt and .isual 8erception
'ap :esign
,nd to show that we designers don+t ha&e a monopoly on using these principles here are
a few articles from the worlds of photography and interior design.
8hotography
8hotography 9ules of /omposition- .isual Weight
.isual weight and balance in photography
.isual Weight (utorial !8:@$
Interior :esign
Is .isual Weight 'aing <our 9oom 7mallerR
Ssing .isual Weight in :ecorating
.isual Weight
.isual weight- when design is a balancing act
.incent .an GoghBs 7tarry 4ight
.an Gogh used &isual weight and direction to created a balanced composition with a
great amount of flow through it.
7ummary
,ll elements in a design ha&e a &isual weight. (hey will also ha&e a &isual direction.
Wearning to control both will lead to greater control o&er se&eral principles of design,
most notably &isual balance.
.isual weight as a measure of how much the eye is attracted to something and &isual
direction is a measure of where the eye is led. , number of factors affect each and
through a combination of these factors we balance the elements in a composition. 7ome
of these factors are ob&ious, some not so ob&ious, and one or two counterintuiti&e.
5y default the point around which we balance a composition is the optical center, which
sits slightly abo&e the geometric center. (he eye will naturally mo&e through this optical
center while &iewing a composition unless you mo&e this balance point through the
principle of dominance.
;ne way you can gain a greater sense of &isual weight, &isual direction, and &isual
balance is to study your fa&orite wors of art. 8ay attention to the different elements in
the composition and note which elements are being used to counterbalance others and
how the combination of elements balances the composition as a whole.