>19comments(/design/designers-guide-golden-ratio-12121546#comments-list)
Jun9,201416:26pm
url=http://www.creativebloq.com/design/designers-guide-golden-ratio-12121546&text=The%20designer%27s%20guide%20to%20the%20Golden%20Ratio
270
GRAPHICDESIGNFEATURE
TheGoldenRatioissomethingeverydesignershouldknowabout.We''llexplainwhatitisandhowyoucan
useit.
There''sacommonmathematicalratiofoundinnaturethatcanbeusedtocreatepleasing,naturallookingcompositionsinyourdesignwork.We
callittheGoldenRatio,althoughit''salsoknownastheGoldenMean,TheGoldenSection,ortheGreekletterPhi.
Inthisarticle,we''llexplainwhatitis,howyoucanuseit,andpointtosomegreatresourcesforfurtherinspirationandstudy...
Thedesigner''sguidetotheGoldenRatio>
306
Share
01.WhatistheGoldenRatio?>
BasedontheFibonacciSequence
(http://en.wikipedia.org/wiki/Fibonacci_number)(whichyoumay
rememberfromeitheryourschoolmathematicslessonsorDanBrown''s
novelTheDaVinciCode),theGoldenRatiodescribestherelationship
betweentwoproportions.
Fibonaccinumbers,likemanyelementsfoundinnature,followa1:1.61
ratio-thisiswhatwerefertoastheGoldenRatio,andasitformssucha
commonsightinnature,itfeelspleasingtotheeyewhenweusethis
sameratioinourdesignwork.
TheGoldenRatioistherelationshipbetweentwonumbersonthe
FibonacciSequence...
>
It''sbelievedthattheGoldenRatiohasbeeninuseforatleast4,000
yearsinhumanartanddesign,butitmaybeevenlongerthanthat-
somepeoplearguethattheAncientEgyptiansusedtheprincipletobuild
thepyramids.Inmorecontemporarytimes,theGoldenRatiocanbe
observedinmusic,art,anddesignallaroundyou.
UseoftheGoldenRatioiswelldocumentedinartanddesignthroughout
history,andcanbeseenineverythingfromarchitecturetothegrand
masters.Byapplyingasimilarworkingmethodologyyoucanbringthe
samedesignsensibilitiestoyourownwork.Herearejustacoupleof
examplestoinspireyou:
TheParthenon
AncientGreekarchitectureusedtheGoldenRatiotodeterminepleasing
dimensionalrelationshipsbetweenthewidthofabuildinganditsheight,
thesizeoftheporticoandeventhepositionofthecolumnssupporting
...andplottingtherelationshipsinscaleprovidesuswithaspiral
thatcanbeseeninnatureallaroundus
>
Examples>
thestructure.Thefinalresultisabuildingthatfeelsentirelyin
proportion.Theneo-classicalarchitecuremovementreusedthese
principlestoo.
TheLastSupper
LeonardodaVinci,likemanyotherartiststhroughouttheages,made
extensiveuseoftheGoldenRatiotocreatepleasingcompositions.Inthe
lastsupper,thefiguresarearrangedinthelowertwothirds(thelarger
ofthetwopartsoftheGoldenRatio),andthepositionofJesusis
perfectlyplottedbyarranginggoldenrectanglesacrossthecanvas.
Nature
TherearealsonumerousexamplesoftheGoldenRatioinnature-you
canobservetheratioallaroundyou.Flowers,sea-shells,pineapples,and
evenhoneycombsallexhibitthesameprincipleratiointheirmake-up.
SousingtheGoldenRatioinyourdesignworkisbothappropriateand
foreshadowedinoureverydayenvironment.
CreatingaGoldenRectangleisprettystraightforward,andstartswitha
basicsquare.FollowthestepsbelowtocreateyourownGoldenRatio:
Step01
Drawasquare.Thiswillformthelengthofthe''shortside''ofthe
rectangle.
Step02
03.HowtoconstructaGoldenRatiorectangle>
Divideyoursquareinhalfwithaverticalline,leavingyouwithtwo
rectangles.
Step03
Inonerectangle,drawalinefromonecornertotheoppositecorner.
Step04
Rotatethislinesothatitappearshorizontallyadjacenttothefirst
rectangle.
Step05
Createarectangleusingthenewhorizontallineandoriginalrectangleas
guides.
UsingtheGoldenRatioissimplerthanyoumightthink!Therearea
coupleofquicktricksyoucanusetoestimateitintoyourlayouts,oryou
canplanalittlemoreandfullyembracetheconcept!
Thequickway
Ifyou’veevercomeacrossthe''RuleofThirds''you’llbefamiliarwiththe
ideathatbydividinganareaintoequalthirdsbothverticallyand
horizontally,theintersectionofthelineswillprovideanaturalfocalpoint
fortheshape.
Photographersaretaughttopositiontheirkeysubjectononeofthese
intersectinglinestoachieveapleasingcomposition,andthesame
principlecanbeusedinyourpagelayouts,webmockups,andposter
designs.
Althoughtheruleofthirdscanbeappliedtoanyshape,ifyouapplyitto
arectanglewithproportionsapproximately1:1.6,yougetveryclosetoa
GoldenRectangle,whichmakesthecompositionallthemorepleasingto
theeye.
Fullimplementation
05.HowtousetheGoldenRatioin
yourdesignwork>
WinaniPhone6
Youremailaddress
Enterthecompetition
YouagreetobecontactedbyFutureandourtrustedthirdparties.CompetitionopentoUKresidentsonly.
Andgetthehottestpre-launchnewsand
rumours,intoyourinbox,everyweek
PromoTs&Cs(//www.techradar.com/iphone6/signup)
IfyouwanttofullyimplementtheGoldenRatiointoyourdesign,you
candosoeasilybyensuringthattherelationshipbetweenyourcontent
areaandsidebar(inawebsitedesign,forexample)adherestothe1:1.61
ratio.
It’sokaytoroundthisupordownbyapointortwotomakethe
numbersworthwithpixelsorpoints-soifyouhaveacontentareaof
640px,asidebarof400pxwillmatchtheGoldenRatiowellenoughto
work,eventhoughit’sactuallyaratioof1:1.6.
Ofcourse,youcanalsosub-dividethecontentandsidebarareasup
usingthesameratio,andtherelationshipbetweenawebpage’sheader,
contentarea,footerandnavigationcanalsobedesignedusingthesame
basicGoldenRatio.
goldenRATIO(https://itunes.apple.com/us/app/goldenratio-
tool-for-every/id485258055?mt=12)
UsingtheGoldenRatioinaweb-pagelayoutprovidesanatural,
eye-pleasingresult
>
06.GoldenRatiotools>
GoldenRATIOisanappprovidinganeasywaytodesignwebsites,
interfacesandlayoutsaccordingtothegoldenratio.AvailableintheMac
AppStorefor$2.99,theappfeaturesabuilt-incalculatorwithvisual
feedback,a''favourites''featurethatstoresyouscreenpositionand
settingsforrepetitivetasks,anda''Click-thru''modewhichmeansyou
canuseitasanoverlayinPhotoshopandstillworkonthecanvas.
GoldenRatioTypographyCalculator(http://www.pearsonified.com/typography/)
ThiscalculatorfromPearsonifiedhelpsyoutocreatetheperfect
typographyforyourwebsiteinlinewithGoldenRatioprinciples.Just
enterafontsize,contentwidth,orbothintothefieldonthewebsite,and
clicktheSetmytype!button.Ifyou’dliketooptimizeforcharactersper
line,youcanenteranoptionalCPLvalue.
Phicalculator(http://www.thismanslife.co.uk/projects/phiculator/)
GoldenRATIO''sfavouritesfeaturestoresyoursettingsforrepetitive
tasks
>
ThissimplebutusefulfreeappisavailableforbothMacandPC.Giveit
anynumberanditwillcalculatethecorrespondingnumberaccordingto
thegoldenratio.
AtriseGoldenSection(http://atrise.com/golden-section/)
Phicalculatordoesonejob,anditdoesitverywell>
Thison-screenrulerandgridsoftwaresavesyouallthatmessingabout
withcalculationsandallowsyoutodesignusingthegoldensection
proportionvisually.Youcanseeandchangetheharmoniousformsand
sizes,whilebeingdirectlyintheprocessofworkingonyourproject.A
regularlicensecosts$49,butyoucandownloadafreetrialversionthat''s
goodfor30days.
CreateartusingtheGoldenRatio(http://www.digitalartsonline.co.uk/tutorials/creative-
lifestyle/creating-art-using-golden-ratio/)
Atrise''stoolletsyoudesignvisuallyaccordingtotheGoldenRatio>
GoldenRatiotutorials>
InthistutorialforDigitalArts,RobertoMarrasshowshowtousethe
goldensectioninyourartwork,tocreatepiecesthatwork
proportionally.
TheGoldenRatioinWebDesign(http://code.tutsplus.com/tutorials/the-
golden-ratio-in-web-design--net-2272)
ThistutorialfromTuts+explainshowtoapplytheprinciplesofthe
GoldenRatiotoyourwebdesignprojects.
ApplyingDivineProportionToYourWebDesigns
(http://www.smashingmagazine.com/2008/05/29/applying-divine-proportion-to-web-design/)
ThisSmashingMagazinetutorialexplainsdivineproportionandthe
RuleofThirdsanddescribeshowyoucanapplybothofthemeffectively
toyourweblayouts.Somegoodstartingpointsyoucanbuilduponor
developfurther.
Words:SamHampton-Smith
(https://plus.google.com/116123079188371614383?rel=author)
Thisisanupdatedandexpandedversionofanarticlepreviously
publishedonCreativeBloq.
Tags:Graphicdesign(/tag/graphic-design),Webdesign(/tag/web-design),
Illustration(/tag/illustration),Feature(/tag/feature)
19COMMENTS
LogintoCreativeBloqwithyourpreferredsocialnetworktocomment
Weusecookiesonthiswebsite.Byusingthissite,youagreethat
wemaystoreandaccesscookiesonyourdevice.Findoutmore
andsetyourpreferenceshere
(http://www.futureplc.com/cookies-policy/)
x
loginwithyourCreativeBloqaccount
UsernamePassword
or
Advertising(/Advertising)AboutUs(/About-Us)Contact(/Contact)
CreativeBloqispartofFutureplc,aninternationalmediagroupandleadingdigitalpublisher.Weproducecontentacrossfive
coreareas:
TechRadar(http://www.techradar.com/)
T3(http://www.t3.com/)
Mac|Life(http://www.maclife.com/)
GizmodoUK(http://www.gizmodo.co.uk/)
More...(http://www.futureplc.com/what-we-do/portfolios/technology/)
Technology
CVG(http://www.computerandvideogames.com/)
PCGamer(http://www.pcgamer.com/)
GamesRadar(http://www.gamesradar.com/)
TtalFilm(http://www.totalfilm.com/)
More...(http://www.futureplc.cm/what-we-do/portfolios/entertainment/)
Entertainment
MusicRadar(http://www.musicradar.com/)
Guitarist(http://www.musicradar.com/guitarist)
FutureMusic(http://www.musicradar.com/futuremusic)
Rhythm(http://www.musicradar.com/rhythm)
More...(http://www.futureplc.com/wha-we-do/portfolios/music/)
Music
DigitalCameraWorld(http://www.digitalcameraworld.com/)
MollieMakes(http://www.molliemakes.com/)
PhotographyWeek(http://photographyweek.digitalcameraworld.com/)
TheSimpleThings(http://www.thesimplethings.com/)
Mor...(http://www.futureplc.com/what-we-do/portfolios/creative/)
Creative
BikeRadar(http://www.bikeradar.com/)
Cyclingnews(http://www.cyclingnews.com/)
FootballWeek(http://www.thefootballweek.net/)
TriRadar(http://www.triradar.com/)
More...(http://www.futureplc.com/what-we-do/portfolios/sport-and-auto/)
Sport&Auto
AboutFuture(http://www.futureplc.com/about/)Jobs(http://www.yourfuturejob.com/)PR(http://www.futureplc.com/news/)
Advertising(http://www.futureplc.com/what-we-do/advertising-solutions/)DigitalFuture(http://advertising.digitalfuture.com/)
PrivacyPolicy(http://www.futureplc.com/privacy-policy/)CookiesPolicy(http://www.futureplc.com/cookies-policy/)
Top▲
Login
Forgottenyourusernameorpassword?(/user/password)
Don''thaveanaccount?
Joinnow.It''scompletelyfreeandtakessecondsJoin(/user/register)
Terms&Conditions(http://www.futureplc.com/terms-and-conditions/)Subscriptions(http://www.myfavouritemagazines.co.uk/)
InvestorRelations(http://www.futureplc.com/investors/)ContactFuture(http://www.futureplc.com/contact/)
?FuturePublishingLimited,QuayHouse,TheAmbury,BathBA11UA.Allrightsreserved.EnglandandWalescompanyregistration
number2008885.
|
|
