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.