Color:2-3Shadesof(Purple-ish)Gray
BryceTham
FinalDesigns
Figure1.Final3-ColorDesign
Figure2.Final2-ColorDesign
DesignInspirationIntermsoflayout,theinitialblankdesignfeltverystructuredandrigid,asthoughitservedthepurposeofsomeformalbusinessfunction.Itimmediatelyremindedmeoftheoldcompanyhomepagesfromtheearly2000’s,wheneverybusinessandtheirmotherswantedawebsiteoftheirownbutlackedtheknow-howtomakethemaestheticallypleasing.Withthisinmind,Iwantedtocreateacolorschemethatfelthighlybusiness-like,withdarker,muted(desaturated)colorstosetthetone,invokingasenseofseriousnessandprofessionalism.Toaccomplishthis,Iinitiallycreatedacolorschemeentirelyingrayscale,asseeninFigure3below,fortwopurposes.ThefirstwastobettervisualizeformyselfwhichrelativeshadesofcolorsIshouldbeusingformyfinaldesign.ThesecondwastoensurethatwhichevercolorschemeIendedupchoosing,itwouldstillbeaccessibleforindividualswithcolor-deficientvision.Notethatthisgrayscaledesignuses4differentshadesofgrayratherthantherequired2-3inthefinaldesign;Ifeltusing4shadeswouldbemoreflexibleintermsofchoosinganinitialcolorschemeandIcoulddecidelaterwhichcolorstoeliminateorwhichsectionstocombine.
Figure3.InitialGrayscaleDesign
Thenextstepwastothendecideonaspecificcolorscheme.Todothis,Idecidedtodrawinspirationfromthefictionalcharacter“ChristianGrey”fromthepopular2005movie“FiftyShadesofGrey”(whichIfounddisappointinglytonotbearichdocumentaryaboutthecolorgray).TocreateacolorschemebasedoffofMr.Grey,IimportedapictureofhimIfoundonlineintoAdobeColoranddirectlyappliedcolorsamplesfromhissuit(andhair)tothedesign.ThisprocessisillustratedinFigure4below.
Figure4.SamplingColorsfromChristianGreyinAdobeColor.
DesignJustificationFigure1andFigure2showthefinalcolorschemesIchoseformydesigns.Igointodetailabouteachofthem,aswellastheirdifficultiesanddifferences,below.The3-colordesigninFigure1usesthefollowingcolors:adarkpurple-ishgray(#4A4853)fortheheadersandfooters,alightershadeofthiscolor(#7C7C8C)forpartsofthenavigationandsidebars,andalightyellow-ishbrownfortheremainingportionsofthenavigationandsidebaraswellasthecontentportion.Here,colorisusedprimarilyasaseparatorbetweendifferentpartsofthepage,althoughIhadsomedifficultychoosingwhethertomakethebackgroundcolorofthecontentcompletelydifferentfrompartsofthenavigationandsidebars(Idecidedagainstit,thoughyoucanseeanalternative4-colordesigninwhichIdoseparatethemin“4-ColorDesign”below).Notethatthetwosimilarshadesofpurpleareanalogous,andpurpleandyellowarecomplimentary,whichiswhythiscolorschemeworkswell.The2-colordesigninFigure2was,ifyoucanimagine,evenmorechallengingtodesignduetothefactthatIneededtofurthereliminatecolorsorcombinesectionsinordertomeetthelimitedpaletterequirement.IchosetostickwiththecolorschemeIwasusingbeforeratherthancomeupwithacompletelynewscheme,andIdiscardedthelightbrowninfavorofentirelyanalogouscolors.Toincreasethecontrastbetweencolors,Iincreasedthebrightnessofthelighterpurpleandchangedthecolorofthefootertothiscolor.Thisensuresthatthereisstillseparationbetweendifferentpartsofthepage,thoughthisseparationisobviouslyalotlessclear.
Asexpected,the2-colordesignlosessomeabilitytodelineatedifferentsectionsusingcolor,asthenumberofcolorsisevenmorelimitedthanthealreadydifficulttasktoseparatingsectionsusingonly3colors.Inimplementingthe2-colordesign,Ialsofoundthatthecontrastbetweenthecolorswasevenmoreimportantthaninthe3-colordesign,especiallywhenusingentirelyanalogouscolors,andtheuseofhuecannolongerbedependedontoseparatethesections.
4-ColorDesignInadditiontothedesignsabove,Ialsowantedtosharethis4-colordesignImadeshowninFigure5below.
Thisdesignshowsjusthowusefulhavinganadditionalfourthcolorcanbeinthedesign.Thecolorschemeherewaschosenafterbrowsingmultipleimagesofbusinesssuitsandsamplingfromthem.Noticehowthecontentportionofthepageisnowcompletelyseparatefromthenavigationandsidebarportions.Noticealsohowtheuseof2differentcolorsinthenavigationandsidebarhelpseparatethedifferentmenuitems.ThismakesforwhatIfeeltobeamoreaestheticallypleasingcolorschemeandonethatiseasiertoreadanduse.