Upload
others
View
1
Download
0
Embed Size (px)
Citation preview
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