as a designer, hierarchical is one of my favorite words ......use the same size, the same font, the...

Yournotadesigner.Whyshouldyoucare,atleastali5le,aboutdesign?Let’stakeahugestepbackandlookatthebigpictureforamoment.Whydoyouevenhaveawebsite?-  Showpeopleyourbrandiscredible-  Sellmorewidgets-  Convertmoreleads-  Getyourmessageout-  Helppeopledosomeprocess-  Getmorevisitorstoyourbrickandmortarestablishment-  AccomplishsomegoalUsually,peoplethinkthatifyouwanttoaccomplishgoalslikethese,yourfocusneedstobeonstrategy,content,andSEO.That’strue.Theythinkofdesignasa“nice-to-have”.

1

Alotofdesignisthestuffthatpeopleappreciatesubconscioulyifit’sgood,butnoNceconsciouslyifit’sbad.[Whenasiteiswell-designed,it’smorecompellingUseableCredibleLikeableSNckyanddoesit’sjobbe5erinaccomplishingyourstrategicgoals]Here’swhatwillcovertoday.It’slotsofli5lethings,groupedinthesefourareas:HierarchyConsistencyColorType

2

HierarchyAsadesigner,hierarchicalisoneofmyfavoritewords,eventhoughit’shardtosay.Onceyoustartthinkingabouthierarchy,somuchdesignfallsintoplace.Here’swhatImean.Oneverypage,themostimportantcontentonyoursiteshouldbethemostvisible.Thesecondmostimportantcontentshouldbesecondmostvisible.Thethirdmostimportantthingshouldbethethirdmostobvious.Andsoon.

3

Onapagelikeyourhomepage,youmayopttoevenstopatoneortwoimportantthings,tomakethemblindinglyobvoius.Designiswhatmakesthethingsobvious.What’sthemostimportantthing?Usually,it’sverysimplecontentthatassuresyourvisitorsthey’reintherightplaceandoffersthemachancetodothethingyouwantthemtodo.Itshouldn’tcompetewithotherelements.HerearesometacNcs:

4

-  Putitatthetop

5

-  biggest

6

-  It’sinacolorthatstandsout

7

-  Afontthatstandsout

8

-  Leavespacearoundit

9

-  PeoplelookatpagesinanFpa5ern.-  Putyourcontentwherethey’llseeit.

10

-  Groupedwithastrikingimageorpa5ern

11

BADWhentherearetoomanychoicesthatseemequallyimportant,you’renotgivingyou’revisitorsmoreinrormaNonormoreopNons,you’rejustmissinganopporutnitytotellthemwheretolookanddowhatyouwantthemtodo.Humanslookforthethingthatbreaksthepa5ernorstandsout.Thiskindoflayoutjustmakesthemsad.

12

SomeNmesyourmostimportantmessagemightbemorecomplicated.Formuseums,forexample,youmightneedtoshowarangeofcurrentexhibitstoenNcepeopletovisit.That’sok,maybeyouneedtouseaslider,butstaymindfulofthehierarchyanddon’tgivepeopletoomanycompeNngchoicesatonce.

13

Asimpleexampleofhierarchyisthestylesthatcomebuilt-intoWordPress.Usually,youshouldbeabletodefinetheseinyourthemeopNons,pagebuilderopNonsorusingCSS.Visually,thewayyoumakethesestyleslookshouldreflecttheirimportanceinthehierarchy.Heading1(orH1)isthemostimportantandisusuallyuuedforpageNtles.Heading2(orH2)issecondmostimportantanisusuallyusedforpostNtlesandsubNtlesinyourtext.Heading3(orH3)isthirdmostimportantandisusedforsub-subheadsintextand,byconvenNon,ohenfortheNtlesofwidgetsinWordPress.TrynottochangetoomanycharacNcsofanelementatonce.RestraintIsleadstosomethinglookinglikegood,considereddesignmoreeasilythanusingeverystyleandfeatureyoucan.Forexample:MyH1hereisbigandpinkandcapsH2isali5lesmaller,andnotcapsH3isthesamesizebutthelessbold,textfont

14

ConsistencyConsistencyissomethingweallunderstandingeneral.Andonthemacro-levelweknowweneedtobeconsistentwithourmarkeNng,wriNngourblogandhowourbrandpresentsitself.Butonamicro-level,consistencyisuptherewithhierarchyintermsofbigthingsthatcanhelpyourdesignworkbe5erandlookbe5er.Whenindoubt,goformakinglikethingsthesameratherthanaddingvariety.Whetheryou’redesigningwithCSSorchoosingopNonsinyourpremadethemeorpagebuilder,hereareabunchofdesignbitstobeconsistentabout:

15

Bu5onsIftheyareforthesameorananalogouspurpose,makethemlookthesame.Usethesamesize,thesamefont,thesameeffects,thesamehovercolorandeffects,thesamepaddingandmargins(akaspacearoundthem).Linethemupthesameway(leh,rightorcenter)relaNvetothetextorimagesnearthem.Conversely,ifyouhaveabu5onthatconveyssomethingdifferent,andyouneeditstandout,makeitthesameastheothersbutchangeoneobviousaspect.Usuallythebackgroundcolor.

16

COLORSWe’lltalkmoreabouthowtochoosecolorslater,butonceyouhaveapale5e,useitconsistently.Keeplikeandanalogousitemsorcontentthesamecolorthroughoutyoursite.EverysitehaselementsthatrepeatmanyNmesthroughout.Ifyoukeepthecolorsoftheserepeatedelementsconsistent,ithelpsyourvisitorstorecognizethemquicklyandnothavetothinkabouttheinterface.Thussavingtheirbrainpowerforyourcontentandmessage.Examples:•  PageNtlesarealwaysblue.•  Paragraphsoftypearealwaysdarkgrey.•  Linksarealwaysorange—bonuspointsforkeepingthesamelinkstylein

paragraphs,bulletlistsandsidebarwidgets!•  TesNmonialsgoinpinkboxes.

17

SpacingYouwanttomakesurethespaceabove,belowandtothesidesoflikeelementsisthesame.Forexample:•  Alwayshavethesameamountofspacebetweenaheadingandaparagraph•  Havethesameamountofspaceahereachparagraph•  Usethesameamountofspacearoundimagesandhaveone,orafew,consistent

sizesandalignmentsfordisplayingimages•  Ifyouhaveabunchofwidgetsinasidebarorfooter,makesuretheyareevenly

spaced•  Makesurethatitemsinanymenuandsubmenuareevenlyspaced

18

AlignmentThefewerdifferentalignmentsonasite,theNdieritisgoingtolookandtheyeasieritwillbetounderstand.Forexample:•  Usually,youaregoingtowantallyourtexttobeleh-jusNfied.They’remaybe

occasionswherecenter-orright-alignmentiscalledforbutdon’tgomixingthemupto“createinterest”.

•  Wheneverpossible,thinkaboutwhetheranitemisliningupwiththethingsaboveandbelowit.Forexample,yourblockquotesandbulletlistsarebothindented.PerhapsindenNngthemthesameamountwouldkeepthingsvisuallysimpler.

•  Maybethelehindentforallyourtextisthesameastheindentforyoulogo.•  Itdoesn’thavetobeeverysingleelement—“breakingthegrid”isavaliddesign

technique—butkeepingelementslinedupwillmakeyourdesignseempurposefulandunclu5eredinawaythatincreasescomprehension.

19

Youdon’tneedtoknowcolortheory.Herearelotsofhackstogetcoolcolorsforyoursite.

20

Hack1:keepitsimpleYoucanmakeanicesitewithonlytwocolors,especiallyifyou’reusingphotostoo.Iwouldsuggestspringingbetween2and5.Themorerestrainedyourpale5etheeasieritwillbetomakeacoherentdesign.

21

Hack2:rememberwhatyou’retryingtoconveyYoucolorpale5eshouldreflectyourbrandandyouraudience.Ifyou’vegonethroughtheexercise,whichIhighlyrecommend,ofchoosingsomebrandadjecNvesorguidingwords,theseshoulddescribeyourcolorpale5etoo.Forexample,you’vedecidedyourbrandis:YoungFreshInnovaNveWhatkindofcolorsdoesthatsuggesttoyou?Thereisn’tarightanswer.Therearelotsofpossiblerightanswers,buttherearesomeprobableincongruous,ordareIsay,wronganswers.Or,yourbrandis:EstablishedConservaNveDependableWhatpale5edoesthatsuggest?

22

Hack3:neutralsplusabrightortwo

23

Hack4:colorsfromaphotoh5p://labs.Nneye.com/color/

24

Hack4:colorsfromaphotoh5p://labs.Nneye.com/color/Also:www.pictaculous.com(fromphoto)www.degraeve.com/color-pale5e(fromimageonweb)

25

Hack5:colorsfromawordpale5r.com/Putinaword(place,feeling,season,animal)getpale5tes

26

Hack#6Choosecolorsfromartwww.colorlisa.com(fromart)

27

Hack#7Therearelotsofsiteswithpremadepale5esforyoutostealwithimpunity!colorhuntDesign-seeds.com

28

Hack#8IntuiNve,funColorpale5egeneratorsColor.hailpixel.comcoolors.co

29

Hack#8.5Colortheorybased,robustpale5egeneratorsPale5on.comcolor.adobe.com/create/color-wheel

30

Personally,Ithinktypographyisthecat’spajamas.InfactanewbookenNrelyaboutPalaNnocameoutrecentlythatI’mpre5yexitedtoread.Luckilyforyou,thisisashorttalk,soI’mjustgoingtogiveyousomehacksforgeqnggoodfontsonyoursite,stat.Studiesshowthatgoodtypographyputspeopleinbe5ermoodanddisposesthemtofeelmoreposiNvelyaboutthecontent.Italsoincreasescomprehensionofthecontent.

31

Hack1:Choose2fontsforyourwholesiteLikecolors,arestrainedpale5eoffontsforyoursitewillmakeitlookmoreprofessionalandmakeiteasierforyoutodesign.ThegeneraladviceoutthereistokeepitsimplebyusingjusttwofontsonasiteOneforheadlinesandoneforbodycopyPersonally,Iliketoaddathirdtothat,forinterfaceelements,likebu5onsandwidgetNtlesandthelike.Butthat’sjustme.

32

Hack2:Whenindoubt,chooseoneserifandonesansserif.useaserifforyourtext,andasansserifforyourheadline.Seriffontshavetheli5lebracketsSansdon’t

33

Hack3:Choosefontsthatagreewiththemoodofyourbrand.ThinkofyourbrandadjecNvesoryourmissionorthetoneofyourcontent.Lookatthefonts.Dotheysupportthatmood?DotheyatleastNOTcontradictit?[examples]

34

Hack4Ingeneral,avoidnoveltyfontsandcheesyhandwriNngfontsunlessyouhavealegitreasontousethem.

35

Hack#5Someonehasalreadychosenfontsthatgowelltogetherforyou.Siteswithpre-madefontpairingsreliablepsd.com/ultimate-google-font-pairings https://femmebot.github.io/google-type/

36

Hack#6Don’tgetstuckwiththefontsyourthemecomeswith.YoucanaddfontsfromgoogleorotherfreeandpaidserviceswithasmalladdiNontoyourcode.Therearealsoseveralpluginsforaddinggooglefontstoyoursitewithoutneedingtoknowcodeatall.

37

Hack#7Justuseoneofthesecombos,they’repre5ymuchalwaysavailable.

38

Hack#8:sizeDon’tmakeyourtypetoosmall.Beingabletoreadtexteasilymakespeoplehappy.Iliketokeepmyparagraphtextatleast16pxandmyheadingsthesameorlarger.Inless-importantareas,likefootersorsidebars,youcangosmaller—hierarchyofimportance.

39

Hack9:Line-heightErronthesideofspaciousline-height.Itlooksmoreelegantandprofessionalandiseasiertoread.For16pxtypetry24pxline-height.

40

Hack#10:UsethecorrectpunctuaNoncharactersWordPressisreallygoodaboutleqngyouaddspecialcharacters(usethekeycommandifyouknowthem,orusethatbu5onthatlookslikeanOmegaintheNnymceeditor).Usingtherightonesmakesyoursitemoreprofessionalandreadable.Believeme,therearepeopleouttherewhowilljudge.Useanemdashtosetoffphrases.(withorwithoutspacearoundbothends,butbeconsistent)UseanendashbetweennumberorNmeranges.Useahyphenforcompoundwords.Usearealellipsescharacterinsteadofthreeperiods.

41

Hack#11:DonotputtwospacesaherperiodsThisoneisforusolderpeople.Iknowyou’re6thgradetypingteachertoldyouitwascorrect,butthatwasfortypewriters.Digitalfontshavethecorrectspacingbuiltinaheraperiodsandifyou’reusingtwospaces,it’swaytoomuchandlooksunprofessional.Iwouldbesohappyif2spacesaherperiodsjustwentaway.

42

IfyouhavequesNons,lookformeatthehappinessbar.Oraskotherpeopletheretohelpwithyourdesignhappiness.YoucangettheslidesandnotesandahandoutwithallURLs+moreatdurablecreaNve.com/wc17

43