2018

WebDesi
gnCheat
sheet
ForBegi
nner
s.

HoganChua

Hoganchua.
com
 Page1

Cont
ent
s

1.I
ntr
oduct
ion

2.Wor
kFl
ow

3.Col
our
s

4.Font
s

5.Desi
gni
ngLayout
s

6.Fi
ndi
ng&Wor
kingw.I
mages

7.Logo&Favi
con

8.Fi
nalWor
ds

Hoganchua.
com
 Page2

I
ntr
oduct
ion
Thedesignofyourwebsi
tei
sveryi
mportantt
okeepyourvi
sit
ors
engagedandactual
lywantt
oknow mor
eaboutyouandyour
busi
ness.

Eventhoughyoucanprett
ymuchbuildanyt
hingwi
tht
hisDr
agnDr
op
Buil
der
,makingitl
ookniceisanot
herthi
ng.

Thisisasi
mplegui
deyoucanfol
low,sot
hatt
heendr
esul
tlooks
prof
essi
onal
,cl
eanandpol
ished.

Thesearejustgener
algui
del
i
nesasi
ndesignther
eisn’tari
ghtand
wrong.However,i
tcanhel
pyoumakequi
ckerandbetterdeci
sions.

Idon’
tconsi
dermyselfaprofessi
onaldesignersoifyouareaprofessi
onal
youcanignor
ethis.ButIwishIhadsomet hingli
kethiswhenIcreated
myfir
stwevsi
te.HencewhyIcr eatedthi
s.

Let
’sgetst
art
ed.
..

Hoganchua.
com
 Page3

Wor
kFl
ow
Bui
ldi
ngawebsit
eisverysimil
iart
obuildi
nganhouse.Youcan’
tski
p
st
epsandexpectabeauti
fulandstabl
ehouse.

Alotoft
utor
ial
s( evenmyol der
sones)ski
ppedst
rai
ghtt
obuil
ding
befor
etalki
ngaboutt hedesign&i
mages,whichi
snotthebestwayt
o
buil
dabeaut i
fulwebsit
e.

Itwasn’tunti
lIreal
i
sedthatpeopl
e’swebsi
tesdi
dn’
tlookgr
eatdespi
te
theamazi ngdragndropbuil
der.Sothi
siswhyIwanttoexplai
nhow i
t
actual
lyworks.

Thi
nkofawebsi t
el i
keanhouse.Youneedt obuyt heland,design,
getthemater
ial
sandt henthedeveloperwi l
lbuil
ditforyou.
Youcan’tbui
l
dthehouseunt i
lyouhavedesi gneditandhavegot
mostofthematerail
sr eady.Otherwise,it’
snotgoingt oturnout
wellandbeveryineff
icent.Imaginegettingapi eceofwoodf rom the
warehouseever
ytimeyouneededi t
,ratherthanhavingi tal
lready.

Andthenj
ustl
i
keyourhouse,yourwebsi
tei
ssomet hi
ngyou
wil
lneedt
oconti
nual
l
ytweak,updat
eandmai nt
ain.

1.Domai
n 2.I
nst
all
& Wor
dPr
ess& 3.Desi
gn

Host
ing Theme

4.I
mages

& 5.Bui
l
d 6.Mai
ntai
nence
Cont
ent

Hoganchua.
com
 Page4

Col
our
s
Col
our
sevokeemot
ions,sochoosi
ngt
her
ightcol
our
swi
l
lmakea
bi
gdi
ff
erencef
oryouandyourbr
and.

Mostpeopl
egetst
art
edwi
thoutchoosi
ngcol
our
sfi
rstandt
henchoosi
ng
r
andom col
our
sast
heyar
ebui
l
dingandi
tendsupamess.

Idon’
twantt
ogeti
ntocol
ourt
heor
ybutt
hisi
swhatIf
oundt
obet
he
easi
estwayt
ogetagr
eatr
esul
tforabegi
nner
.

TI
P#1-ChooseONEMai
nCol
our

Youcanuse10di
ff
erentcol
our
sandyourwebsi
tecanl
ookgr
eat
,
butwhendoyouuset
hosecol
our
s?That
’st
hepr
obl
em f
ornon-
desi
gner
s.

Lucki
l
y,Yourwebsi
tedoesn’
tneedmanycol
our
stol
ookgood.
I
nfact
,youcanj
ustuseneut
ralcol
our
s(eg.Appl
e.com)andi
tst
il
llooks
amazi
ng.
Themosti
mpor
tantpar
tar
ethei
mages,whi
chI
’l
lbecover
ingi
nasecond.

I
fyoudohaveamai
ncol
our
,youdon’
tneedt
ooverusei
tei
ther
.Itmaybe
j
ust10% orl
essofyourwebsi
te,wi
tht
her
estofwebsi
teconsi
sti
ngofneut
ral
col
our
s(whi
teandgr
eys)andi
mages.

Col
ourmeani
ngs:ht
tp:
//
www.
col
or-
wheel
-pr
o.com/
col
or-
meani
ng.
html
Fi
ndCol
our
sHer
e:ht
tps:
//
fl
atui
col
ors.
com/

Hoganchua.
com
 Page5
Col
our
sCont
inued.
..

Ti
p#2Pi
ckanAccentCol
our

Youraccentcol
ourwi
l
lbeusedf
ort
hear
easyouwantt
obr
ingat
tent
iont
o.
Thatcoul
dbebut
tons,cal
ltoact
ionar
eas,i
conset
c.

Ti
p#3UseNeut
ralCol
our
s(Shades)

Whenyoudon’
tknow whi
chcol
ourt
ouse,j
ustuseaneut
ralcol
our
(
akashades)
.Ital
mostal
wayswi
l
llooksgood,i
t’
sli
kewear
ingawhi
tet
-shi
rt
.
Youcanmat
chi
twi
thanyt
hing.

Ti
p#4UseShadesofMai
nCol
our(
Monochr
omat
ic)

Somet
imesyouneedt
ouseadi
ff
erentcol
ourt
oseper
atet
heel
ement
s.
Thi
nkofwear
ingawhi
tetshi
rtandbl
uej
eans.Yourbel
t,woul
dbean
el
ementandwear
inganavybl
uebel
tisaneasymat
ch.

Ti
p#5UseaNeut
ralCol
our
sforyourHeader& Foot
er

Usi
ngal
i
ghtordar
kshadef
ort
hesesect
ions,meansi
t’
ssupereasyt
o
mat
chwi
thanyi
mage.

Unl
essyouar
etaki
ngyourowni
mages,i
t’
shar
dert
ofi
ndI
magest
hat
mat
cheswel
l
.Itcanbedone,buti
ttakesmor
eti
me&ef
for
t.

Fi
ndshadesofcol
our
s:ht
tp:
//
www.
0to255.
com/
Exampl
eofsi
tet
hatdoest
hiswel
l:ht
tps:
//
www.
upwor
k.com/

Hoganchua.
com
 Page6

Font
s
Si
mil
art
ocol
our
s,youdon’
tneedmanyf
ont
sorf
ancyf
ont
stomakeawebsi
te
l
ookgr
eat
!Yet
,manypeopl
echooser
andom f
ont
swhi
chmi
ghtbecoolbutnot
r
eadabl
e.

Thenumber#1t
hingyoushoul
dbewor
ri
edaboutr
egar
dingf
ont
s,i
swhet
heror
noti
tseasi
l
yreadabl
ebyyourvi
sit
ors.

Ther
ear
etwodi
ffer
entt
ypesoff
ont
s(Typef
aces)

Ser
if SanSer
if

Pl
ain St
rokesevenwi
dth
Thi
ck&Thi
nSt
rokes
Cur
ves

Ty
pe Type
Tr
adi
ti
onal
,El
egant&Handcr
aft
edLook. Si
mpl
e,Cl
eanandModer
n.

Goodf
orl
ongr
eadi
ng,suchasbl
ogpost
s. Mostwebsi
teswi
l
luset
hist
ypef
ace.

e.
g.For
bes’
sBl
og,Tayl
orSt
it
ch&Many e.
g.Appl
e,Googl
e&Tesl
a

Fashi
onBl
ogs.

Hoganchua.
com
 Page7

RecommendGoogl
eFont
s

Somef
ont
sar
efr
eeandsomear
epai
d.Buti
fyouar
efol
l
owi
ngoneof
myt
utor
ial
sandusi
ngt
heThemi
fyThemes,t
henyougetaccesst
ohundr
eds
ofFr
eeGoogl
eFont
s.

Youcanuse“
WhatFont
”aChr
omeext
ensi
ont
oinspectf
ont
sonanywebsi
te.
Butsomet
imesi
tmi
ghtnotbeavai
l
abl
e.YoucandoaGoogl
esear
chon
“
Simi
l
iarGoogl
efont
sto.
..
..
”anduset
hati
nst
ead.

RecommendedSer
if RecommendedSanSer
if

Ca
rdo OpenSans

Me
rri
wea
the
r Lat
o

PtSe
rif Robot
o

Youcanal
sot
ry:
Ral
eway
,Monst
err
at&PTSans

Hoganchua.
com
 Page8

Desi
gni
ngLayout
s
Evenwi
thadr
ag&dr
opbui
l
der
,itcanbeover
whel
mingwhen
i
tcomest
odesi
gni
ngyourpages.

Youcanuset
het
empl
atesorevenr
epl
i
cat
epopul
arwebpages
youl
i
ke.Buthavi
ngabasi
cunder
standi
ngf
ir
stwi
l
lhel
p.

Ti
p#1-TakeI
nspi
rat
ion

Youshoul
dopenupaf
ew webpagesyoul
i
keandseewher
eandhow t
hey
l
ayoutt
hei
rcont
ent
.Youcanpr
ett
ymuchcopyt
hei
rexactl
ayouti
fyouwant
.
Obvi
ousl
yyoushoul
dhaveyourowni
magesandcont
ent
!

Ti
p#2-BodyFontSi
ze

Thi
sist
extsi
zef
oryourmai
ncont
ent
.Ir
ecommendsomewher
ebet
ween
16-
18pxdependi
ngonf
ontt
ype.

Headi
ngsandSubheadi
ngcanbeanysi
ze,butmakesur
etohavesome
hi
erar
chy
.eg.

Headi
ng1
Subheadi
ng
Bodyt
ext

Hoganchua.
com
 Page9

Desi
gni
ngLayout
sCont
inued.
..

Ti
p#3-Li
neLengt
h

Use45-
90char
act
ersperl
i
nef
oraneasyr
ead.Youdon’
twantyourt
ext
t
ogof
rom onesi
deoft
hepaget
otheot
hersi
de.

Al
sot
ryt
ofor
matyourt
exti
ntoeasyt
oreadpar
agr
aphs,especi
all
yifyou
haveal
otoft
ext
.

Noonewant
’st
oreadasol
i
dbl
ockoft
ext
!

Ti
p#4Separ
ateCont
ent

Useal
otofwhi
tespace,t
hisgi
vesi
tacl
eanandsi
mpl
elook.
Thi
swi
l
lref
lectbackonyourbusi
ness.

Youcanal
sousedi
viderl
i
nes,Backgr
oundI
mages,Col
our
s(Neut
ralor
Gr
adi
ent
s)t
osepar
atesect
ions.Thi
sbr
eakst
hingsdownf
oryourvi
sit
ors,
andmakesi
teasi
ert
oconsume.

Ti
p#5-UseGr
adi
ent
s

Gr
adi
ent
sar
egr
eatf
orsepar
ati
ngcont
entbutal
soover
layi
ngi
mages,
sot
extbecomesvi
sibl
eort
omat
chi
magewi
thcol
ourscheme.I
t’
sal
so
hel
psgi
veawebsi
teamor
efr
esh,new,coolvi
be.

Fi
ndgr
adi
ent
son:ht
tps:
//
uigr
adi
ent
s.com/

Hoganchua.
com
 Page10

I
mages
Onyourwebsi
te.i
magesar
ethe3r
del
ementt
oapagebesi
dest
ext&
col
our
s.Abadi
magewi
l
lrui
nyourchancesofpeopl
eact
ual
l
ylooki
ng
f
urt
heronyourwebsi
te.Yet
,it
’soneoft
hemostover
lookedar
easi
n
bui
l
dingawebsi
te.

I
’m nott
alki
ngaboutphot
ogr
aphy
,becausei
’
m pr
ett
ybadatt
hatandst
il
l
l
ear
ningmysel
f.

I
’mt
alki
ngaboutsel
ect
ingt
her
ighti
mage,appl
yingt
extont
op,cr
oppi
ngt
o
ensur
ethesi
zei
snott
oobi
gwhi
chsl
owswebsi
teort
oosmal
lwhi
ch
st
ret
chest
hei
mageandl
ooksl
ow qual
i
tyandbl
urr
y.

#1Wher
edoIgett
hem?

I
fyoucan’
tgetyourowni
magest
aken,whi
chIr
ecommendbecausei
t’
s
mor
erel
evant
,aut
hent
icandever
ythi
ngwi
l
llookconsi
stentt
hengot
o
ht
tps:
//
unspl
ash.
com/
.

Theyhaveanawesomecol
l
ect
ion,whi
char
eal
lhi
ghqual
i
tyandyoucan
usef
orper
sonal
/commer
cialpur
poseswi
thoutcr
edi
ti
ngt
hem.

Ot
herpl
acest
ogett
hem ar
e:
ht
tps:
//
pixabay
.com/
Vi
deoSi
tes:
ht
tps:
//
pixabay
.com/
en/
videos/
ht
tp:
//
mazwai
.com/
ht
tp:
//
www.
cover
r.
co/
ht
tps:
//
www.
pond5.
com/(
Pai
d,butawesome!
)
Hoganchua.
com
 Page11

I
magescont
inued.
..

#2Chooser
evel
entanduni
quei
mages

BAD

Why?
I
tmaybeobvi
oust
osome,butI
’vest
il
lseenmanypeopl
ewhoar
e
maki
ngwebsi
tesf
ort
hemsel
ves–usesomet
hingsi
mil
ar.I
tlooksver
y
st
ock,ever
yoneknowst
hat
’snotr
eal
l
yyou.Soi
t’
snotuni
queoraut
hent
ic.

Peopl
eval
ueAut
hent
ici
tyandRel
evancemuchmor
ethanl
ooki
ng
“pr
ofessi
onal
”.

Al
so,i
fthi
sisf
oraHer
oImage(
Mai
nImage)-I
fyouputt
exti
nmi
ddl
e,i
t’
s
notr
eal
l
yvi
sibl
e.

Thebestopt
ioni
sgetyourowni
magesbutt
henextopt
ion,f
indsomet
hing
l
esscl
i
che.Seet
henextpagef
orsomeexampl
es.

Hoganchua.
com
 Page12
I
magescont
inued.
..

BETTER

Headi
ng1

Gr
eat
,ifyouar
eaf
reel
ancerandi
t’
syourst
yle.
Hi
ghqual
i
ty,r
elevantandeasi
l
yaddt
exti
fit
’syouher
oimage.

Headi
ng1

Good,butI
fyouwantt
oputt
extoveri
t,youmust
putaover
laycol
our
/gr
adi
entont
opt
oensur
etexti
svi
sbi
ble.
Hoganchua.
com
 Page13
Bef
oreUpl
oadi
ngt
oYourWebsi
te.

I
t’
simpor
tantt
ocr
opyouri
mages,becausemostof
tent
hannot–i
twoul
d
bet
ool
argeandt
hatwoul
dmeani
twi
l
ltakel
ongerf
orpaget
oload.
Andsomet
imes,youmi
ghtr
eal
i
seyouri
magei
sn’
tbi
genoughandi
twi
l
l
l
ookl
ow r
esol
uti
onandst
ret
ched.

1.UseFot
or@ ht
tps:
//
www.
fot
or.
com/(
FreeI
mageEdi
ti
ng)

2.Her
oImages–Icr
opi
ttoar
ound1800x1000–Somet
imest
o1600x900
becauset
hei
magemi
ghthaveal
otofdet
ailandt
hef
il
esi
zei
stoobi
g.

3.Forsi
mil
arf
unct
ional
i
tiesl
i
kePhot
oshopt
ryPi
xlrEdi
tor@
ht
tps:
//
pixl
r.
com/
edi
tor
/

Not
e:Ishow youhow t
odoi
tst
epbyst
epi
nthet
utor
ial
s

Hoganchua.
com
 Page14

Logo& Favi
con
Fi
leFor
mati
sImpor
tant

Whenyouar
eaddi
ngi
naLogo&Favi
con,i
tmustbea.
PNG f
il
ewhi
ch
meansi
t’
str
anspar
ent
.Asyoucanseef
rom t
heexampl
ebel
ow,i
trui
ns
ani
cel
andi
ngpageandseemsunpr
ofessi
onal
.

Si
zeofLogo& Favi
con

Thesi
zeofl
ogo,doesn’
tmat
termuchbecauseyoucanscal
eit
.Anyt
hing
ar
ound300pxwi
dthx100pxhei
ghti
spl
ent
ly
.Whenyouar
eedi
ti
ngt
he
si
zeofl
ogoi
nthecust
omi
zer
,justchanget
hehei
ghtandt
hewi
dthwi
l
l
scal
edownpr
opor
ti
onal
l
y.Iuse32pxhei
ghtf
ort
he“
headert
opbar
”.

Favi
conshoul
dbe32x32px.JustanI
con,not
ext
.AndPNG f
ormat
.

Get$5Logos&Favi
cons@ ht
tps:
//
www.
fi
ver
r.
com/
Hoganchua.
com
 Page15

Fi
nalWor
ds
Thankyouf
orf
oll
owi
ngmyt
utor
ial
sandt
hisgui
de,t
rul
yappr
eci
atei
t!

Onanothernot
e,
Idogetal
otofr
equest
sforcont
entonSEO,Tr
aff
ic&Conver
sions.

Unfort
unatel
y,
Idon’
thavemuchcontentonthatyetbuther
ear
e
somereal
lygr
eatplacestogetstart
ed.

Tr
SEO/ af
fic/
Conver
sions

ht
tps:
//
nei
l
pat
el.
com/
blog/
ht
tps:
//
backl
i
nko.
com/
blog

ht
tps:
//
conver
sionxl
.com/
blog/

Bl
oggi
ng

ht
tps:
//
smar
tbl
ogger
.com/

Youcanf
indmeat
suppor
t@hoganchua.
com
ht
tps:
//
www.
facebook.
com/
HoganChuaOf
fi
cial
/

ht
tps:
//
www.
inst
agr
am.
com/
hoganchua/

Hoganchua.
com