12.6.2015.

TheElementsandPrinciplesofDesignappliedtoWebDesign

TheElementsandPrinciplesofDesignapplied
toWebDesign
Definitionsreferencedfrom,"DesignforCommunication,
ConceptualGraphicDesignBasics",byElizabethResnick
TheElementsofDesign
Lineistheelementoflengthasamarkconnectinganytwopoints.Linescanorganize,direct,
separate,beexpressive,suggestanemotion,orcreaterhythm.Theycanjoinelementsordividethem
usingarule,whichisalinethatseparatesoneelementinadesignfromanother.Let'stakealookat
someexamples:
TheMorningNewsuseshorizontalandverticallinestoseparateandorganizecontent.
Pelanideausesthickhorizontallinesasseparatorsofinformation.Decorativelinesareusedin
theleftcolumnsuggestinganemotion.
TrufCreativeuseshorizontallinestoseparateheadlinetextfromthemaincontentofthepage.
Linesareusedinthebodyofthehomepagetodividechunksofinformation.
Shapereferstotheexternaloutlineofaformoranythingthathasheightandwidth.Anexample
wouldbethethreebasicshapes:thecircle,thesquare,andthetriangle,consideredtobethe
fundamentalshapesfoundinalldesign.Examplesofshapeinwebdesign:
eScienceconference2008websiteusesrepeatingcirclesinthebackgroundofthewebpage.
Circleshapesarealsousedintheanimationtransitionsonthehomepagemainfeature.
NorthWestWebDesignAgencyusesrectanglesasacontainerforblocksofinformation.
Textureisthelookandfeelofasurface.Intwodimensionalform,textureisessentiallyvisualand
addsrichnessanddimensiontowork.Texturecanalsorefertopattern,whichisvisualtexture.
Examples:
EdgePointChurchusesastuccowalltexturethatframesthebackgroundofthepage,anduses
distressedlogoanddisplaytype.
JesusRodriquezVelascousesillustrationtocreateatextureintheheaderportionofthelayout.
OpenDoorsStudentSiteusesadistressedandworntextureinthebackgroundtopportionofthe
layout,andintheblocksofinformationinthelayout.
Spacereferstothedistancebetweenshapesandforms,butitisbestunderstoodindesignaswhite
spaceornegativespacetermsusedtorefertotheemptybutoftenactiveareasthatarevoidofvisual
elements.Exampleshere:
Fritulausesanarrowcontentwidthtoexploittheemptyspaceonbothsidesofthecontent.The
logo/illustrationoccupiesthetopleftemptyspace,andsmallblocksoftextoccupyaportionof
therightemptyspace.
WebDotsusesaverynarrowcolumnforthecontent.
Sizeishowbigorsmallsomethingisinscaletootherobjects.Scalereferstotheprocessofmaking
sizerelationships.Unlessthereisascaleofreferencewithinadesign,itisimpossibletodiscernthe
relativesizeofobjectsandthemeaningtheyrepresent.Examplesofsizeandscale:
http://learn.daveharperdesign.com/design/

1/4

12.6.2015.

TheElementsandPrinciplesofDesignappliedtoWebDesign

3000kusesalargesizedimagetooccupythetopportionofthelayout.Thescaleoftheheadline
textwithinthelargeimage,islargewhencomparedtothesmallerbodycopy,immediately
beneaththelargeimage.
BlackEstateVineyarduseslargescaledtypeforheadlineandsubheadtext.Thesizedifference
betweentheheadlinesandbodycopyisdramatic.
Valueistherelativelightnessordarknessofanareaorobject.Valueaddsdimensionbycreatingthe
illusionofdepthinadesign.Withtheadditionofcolor,youcancreateandconveyamoodtoenhance
astrongconcept.Examplesofvalue:
Defiance,aCSSZenGardencreationfromJamesEhly,usesredandblacktoconveyacertain
moodandfeeling.
Elitespringwaterusesgreensandbluestoconveyahealthly,environmentallyfriendly
message.

Oncetheconceptisformallyrealized,itwill
needtobeapplied.Theprinciplesofdesign
balance,emphasis,rhythm,unity,andcontrast
definethestructuralfoundationofadesign
anddeterminehowthevariousdesignelements
areorganizedwithinthewebpage.
ThePrinciplesofDesign
Balanceoccurswhenallthedesignelementsareequallydistributedthroughthedesign.Thereare
essentiallytwotypesofbalance:symmetricalandasymmetrical.Symmetricalelementsarearranged
equallyonbothsidesofacompositiontosuggestastableorstaticmotion.Asymmetricalelements
createadeliberateimbalancetosuggestvarietyordynamicmovement.Examplesofbalance:
GiseleJaquenodisusingasymmetricallybalancedthreecolumnlayout.Themajorityof
contentisplacedinthecentercolumn,andothersupportingcontentisplacedintwocolumns
equallysizedonbothsidesofthecentercolumn.
JeffreySarmientohasanasymmetricallybalancedlayoutwiththeweightofthecontentand
imagesbeingontheleftside,andtherightnarrowercolumnismoresparcewithinformation.
Theasymmetricalbalanceactivatesthecontent.
Dinulovicusesasymmetricallybalancedlayoutthroughoutthewebsite.Thiscreatesastable
feelingwhichisappropriateforthethemeandcontentofthesite.
Mosaikohasasymmetricalbalanceinthelayout.Thelargesizedbananaimageatthetopright
ofthelayoutisbalancedoutwiththeequallysizedbananapealinthelowerleftcornerofthe
layout.
Emphasisindicatesthemostimportantelementonthepagebasedonthemessage.It'stheelementthat
standsoutandgetsnoticedfirst.Themostemphasizedvisualelementinadesigniscalledafocal
pointbecauseitattractstheviewer'sattentionfirst.Howcanyoucreateemphasisinadesign?By
takinganelementandmakingitbigger,bolder,orbrighter,byputtingitinacontrastingcolor,orby
surroundingitwithwhitespace.Examplesofemphasis:
GiorgioMolinarouseslargescaledtypeonthefrontpage,togiveemphasistothesubject
http://learn.daveharperdesign.com/design/

2/4

12.6.2015.

TheElementsandPrinciplesofDesignappliedtoWebDesign

matterofthewebsite.
Toucouleurplacesalargesizedillustrationinthemostprominentpositionofthelayout.The
userhastoscrolldowntoreadthebodycopyonthepage.Thisforcestheviewertospendtime
lookingattheillustration.Thus,theemphasisisplacedontheillustration.
Ifyouaregoingtoexploittheprincipleofemphasisinawebdesignlayout,makesure
thatyouhaveagoodreasonfordoingit,otherwiseitcouldcausefrustrationand
confusionintheuser.
Rhythmisapatterncreatedbyrepeatingelements.Rhythmdenotesthemovementinthewaythat
elementsdirectourgazetoscanthemessageforunderstandingtheinformation.Thetermsequenceis
usedtorefertotheviewingorderoftheelementsandtodeterminetheflowofamultipagepublication
suchasamagazine,bookorlargewebsite.Examples:
TheCollegeofArtsandSciencesattheUniversityofMiamicreatesvisualpatternsthroughout
theirwebsite.Thethumbnailimagesinthebodyofthepageareeachtreatedinasimilar
manner:Samephysicalsize,withaheadlineoftextandablockofcopydirectlytotherightof
theimage.Thissimpletreatmentofinformationwithinawebpagecreatesavisualpatternthat
easilyallowsthereadertoscanthroughthecontent.Theseblocksofinformationarerepeated
downthepage,creatingarhythmtotheflowofcontent.
CameronMollcreatesrhythminthisportfoliopageofhiswebsitebycreatingaconsistent
designtreatmentforeachportfolioimageandaccompanyinginformation,andthenrepeating
thesecontentblocksdownthepage.Thisallowstheusertoscanthrougheachpiecequickly.
CNN.comusesconsistentdesignelementsontheentrypage,thatarethenrepeateddownthe
page.Thisisseenintheblocksofinformationthathaveaconsistentheadlinefontsizeand
color,andalsointhethumbnailimagesize.Thisgivesordertothemassofinformation
displayedonthepage,andallowstheusertoquicklyscanthroughtofindthetopicorsubject
theyarelookingfor.
Unityisachievedwhenallthedesignelementsrelatetooneanotherandprojectasenseof
completeness.Aviewerwillalwaysseekunityinamessage.Withoutit,theviewerwillloseinterest.
Designersuseideasdrawnfromgestalttheorytohelpunifytheirdesigns.Gestalttheoryisthe
psychologicalprocessbywhichaviewerunitesdisparatedesignelementsintoawholeformthatis
greaterthanthesumofitsparts.Twosuchideasaregroupingandfigure/ground.Groupinghappens
whenelementsareclosetogetherandvisuallyappearaspartofagroup.Figure/groundoccurswhena
viewercanidentifyanobject(figure)asashapedistinctfromitsbackground(ground).This
perceptionisdependentonthedesignprincipleofcontrast.
Onabasiclevel,unityindesigncanbeachievedwhenalloftheelementswithinthe
designorlayoutrelatetoeachother.Forexample,animagemustrelatetothetextitis
nextto,otherwisetheoverallmessagewillnotmakesensetotheviewer.
ActivatePsychServicescreatesunityintheirdesigninoneaspect,bytakingthecolorsfromthe
logoandreusingthecolorsintheoveralldesign.Theblueistakenfromthelogoandasimilar
shadeofblueisusedintherightcolumnofthepage.Theyellowistakenfromthelogoand
usedinthebackgroundcontainerofthepage.Thecolorsrelatetoeachother,thereforecreating
avisualunityinthedesign.
GlingGlocreatesunityintheirdesignintheconsistentuseofcolor(yellow)andintheuseof
thefontsonthepage.Allofthefontsonthispagearesansserif.Theheadlinefontsarea
similarsizetothelogotypetreatment,andaresimilarlyboldandinallcaps.Thisrepeated
treatmentcreatesavisualharmonythatunitesthepage.Ifthedesignerofthiswebsitedecided
touseavarietyofunrelatedfonts,atvarioussizes,itwouldcreatevisualnoiseinthepage,
discouragingtheviewerfromremainingonthewebsite.
Unityiswhatmakesthecontentattractiveandunderstandabletotheviewer.Wherethere
http://learn.daveharperdesign.com/design/

3/4

12.6.2015.

TheElementsandPrinciplesofDesignappliedtoWebDesign

isnounityinthedesign,themessagecanappearconfusingandundesirabletotheviewer.
Contraststressesthevisualdifferencesinsize,shape,andcolorbetweentheelementstoenhancethe
perceptionofamessageintended.Contrastalsodrawsanddirectstheviewer'sattentiontospecific
areasofinformation.Examples:
TheWebStandardsProjectusescontrastintheirdesigntodrawanddirecttheviewer's
attentiontospecificareasofinformation.Theheaderportionofthepageusesablack
backgroundcolorwithwhitetext.Thiscontrastswiththebodyofthepagethathasawhite
backgroundcolorwithblacktext.Thecontrastseparatestheheaderfromthelowerrightportion
ofthepageandhelpstheusertounderstandthesetwoareasashavingdifferentlevelsof
importance.Thedifferentlevelsofimportancereferstoheirarchyofinformation.Creatinga
heirarchyisimportanttoadesigner,becausewhenitiscorrectlyapplied,itgivesyoutheability
toleadtheeyeoftheviewerthrougheachareaofinformationintheorderyou(thedesigner)
specify.
Contrast,thewebapplicationcompanywebsite,usescontrastasthecentralvisualthemeofthe
design.Thewhitecontrastswiththeblack.Itseparatesblocksofinformation,andleadsyour
eyefromoneblockofinfotothenext,ondownthepage.

http://learn.daveharperdesign.com/design/

4/4