Di f

fe
ren
t
W ebDe si
gn
Sty
leGu i
des

1.Mat
eri
alDes
ignf
rom Googl
e

Let
sstartwiththestyleguidemos tof
youwi l
lbef amil
iarwith,whetheryou
know itbynameornot ,Google
sMateri
al
Design.Thisstyl
eguidei sapparentl
y
basedonpaperandi nk,al t
houghit
sfar
fr
om bac kwardslookingi nit
sapproach
todesign.

Hopef ul
ly,youllhaver uni ntoMat eri
al
Designbei ngus edouti nthewi ld.
Whet herthat
sf r
om us i
ngGoogl e
sown
produc t
sands ervices,s uchast he
Androidmobi leoper atings yst
em andt he
GoogleNow t ool,orthemanyot her
produc t
st hathavebeeni nuenc edby
thi
spopul arwebdes ignt r
end,ei ther
way,Mat er i
alDes igns houldntbenew to
you.

Mater
ialDes
ignpi
cksupwheretheatuseri
nter
facetr
endl eftoandhelpsdesi
gnersaddmor edepthand
per
sonali
tyt
othei
rworkwhil
estil
lhar
nessi
ngthemoder nappealofmi ni
malis
tuserint
erf
aces
.Typic
alchar
act
eri
sti
cs
oft
hispopul
arwebdesi
gnstyl
eguideinc
ludegri
d-bas
edl ayouts,ani
mati
ons,andshadows.

Thegoodnewsi sthatifyouwanttoadoptthisdesignl
anguage,t
heGoogleMateri
alDesi
gnhandbookisf
reely
avail
abl
eonlineandhel psexpl
ainthei
ntent
ionofthiswebdesignst
ylegui
de.I
t
salsoagreatexampl
eofahighly
detai
ledst
yleguideforanyonetaskedwithcreat
ingsuchadocument.

2.BBCGl
obalExper
ienc
eLanguage
Ifyou
relookingforastyl
eguidethatdoes
ntl
eave
anythingtochance,thentheins
truct
ionst
hatmake
upt heBBCGl obalExperi
enceLanguagedocument
areagr eatexample.

Createdf orwebdes igner sbuil

dingwebs i
tesforthe
BBC,t hisstyl
egui des t
ar tsbylayingoutt he
philosophybehi ndt her ules.From thenon,t his
documentdi vesdeepi ntothedet ail
s.Youllnd
i
nfor mat i
onc overingthepi xelwidthsofc olumn
gutters,gridlayoutrules ,l
ogopos i
ti
oning
guidelines,andever ythingel s
eyouc ouldpos si
bil
it
y
thi
nkofwheni tcomest oc reati
ngonl i
nec ontent.

Forinspir
ationonhow tocreateas t
ylegui
dethat
ti
esawi der angeofent
it
iestogetherunderone
mas t
erbr and,youwon
tbedi sappointedwi
ththi
s
resourcefrom theBBC.

3.Moz
il
laSt
yleGui
de
I
fyouwantt oknow mor eaboutt he
designethosoft heteam responsibl
e
forthewor l
dssecondmos tpopularweb
browser,thentheonl i
neMoz i
ll
aStyleGui
dei
s
wellworthcheckingout .

I
nt hisstyleguide,youl
lnds omegr eatexampl es
ofhow t opr oduceinstruc
t i
onst hatcovertheus eof
l
ogos ,colors c
hemes ,toneofvoi ce,andwor dmarks.
I
fyouwantt oc r
eateagui deforyourc lient
sor
team tof ol
low,thent heMoz i
ll
as etofinstr
uc t
ions
wills
how youhow i t
sdone.

4.Twit
terBrandAs
set
s 5.AdobeCorpor
ateBr
and
Guidel
ines Guidel
ines

Logodes i
gnersandt hoseofyouwhoar e TheAdobeCor porateBr andGuideli
nes
usinglogosandgraphicsaspartofyour documentisani mpres siveexampleof
project
swillappr
ec i
atethecl
eanandc l
ear how tomakes ureyourbr andand
i
ns tr
ucti
onsf r
om thi
ss oci
almedi
a companyphi losophyi sc onsis
tentl
y
behemot h. appli
edacros sawi der angeofpl at
forms
andmediums .Everyt
hi ngf rom websi
tes
IntheTwi tt
erbrandas s
etss tyl
eguide, andemails,throught opr i
ntedpostersand
youl
lnds omegoodexampl esofhow to merchandiseisc overedher enotto
wr i
teinstr
ucti
onsthathelpens ur eyour mentionthes uiteofAdobeCCappsweb
logosandot herasset
sar eus edinthe desi
gnersshoul dbeus ing.
correctway.Thisonli
nes t
ylegui de
incl
udesdet ai
lscover
ingc olorpalett
es, Althoughhugeinscale,t
heAdobebr and
logoor i
entati
on,el
ements paci
ng,anda guideli
nesmixdetai
ledinstructi
onswith
glossaryofterms. usageexamplestodemons trat
ehow to
createalar
gestyl
egui dethatisrel
ati
vely
Whet heryouwantt oens ur
eyourweb eas yt
ounderst
and,des pi
tei t
sscope.
designc l
ientsdon tbutcheryourhar
d
wor korthel ogosandbr andingbehi
ndf or I
fyoureworkingonapr oj
ectt
hats pans
yourpr oj
ec tarentdist
orted,theTwi
tter multi
plepl
atforms,thenthi
sstyl
egui de
brandas setsstyleguidei sagoodmodelt o fr
om Adobec anshow youhow toc reatea
fol
low. setofi
nstr
uctionsthatappl
ytoallas pect
s
ofyourwork.

6.Four
squar
eBr
andbook
TheFour squar
el oc
ationnderappandwebs ite
fol
low astri
ctsetofguideli
nestomakesur et
heir
contentiseasi
lyrecogniz
able,whet
herthatcontent
i
spubl i
shedont heirownpl at
formsorbeingshared
ons oci
almediaandel sewhere.

Ifyou
dliketoaddt hi
slevelofbrandident
it
yto
yourwor k,br
ows i
ngthebr andbookand
brandguidedocument sfrom Foursquar
eisa
wor t
hyinvestmentofyourt i
me.

I
nt hesetwobr i
efst
yleguides,you
l
lndpl entyof
dosanddon t
sthatcovereverythi
ngf r
om logo
usageandpos it
ioni
ng,thr
ought oiconography
rules
,badgedes i
gn,copywrit
ingguidel
ines,and
toneofvoic
er ecommendat i
ons .

Ifyoureworki
ngwi t
hiconsordesigningfortheweb
aswel lasmobi l
edevic
esands oci
almedia,thenthe
styl
egui desfr
om Foursquareoerplentyof
pointersonhow t odel
iveraconsi
stentmes s
age,
bothonandoyourownpr oper
ties.

7.MI
TGr
aphi
cIdent
it
y
Ifyouvef oundthelargers tyleguidesfrom the
l
ikesofAdobeandGoogl eabi toverwhelming,
thent hewebdes i
gns ectionoft heMI Tbrand
books houldoerawel c omec ontrast.
Simplyf eaturi
ngbas i
cinfor mat i
onaboutl ogo
pos i
ti
oni ngandwor ding,t hisisagoodexampl e
ofhow youc anc r
eatec ons ist
encyi nyourweb
designpr oj
ect
swi t
houtgoi ngover board.

8.Ubunt
uSt
yleGui
de

Theaim oftheUbunt ustyl

eguideistobri
ngthis
brandtot hewebwi t
hpr ec
isi
on.Tohelpwiththat
goal,t
hiswebdes i
gns t
yleguidei
ncludes
i
ns t
ructi
onsforaddingtheUbunt uCSSletoany
webpageadevel operordes i
gnermightbewor ki
ng
on.

Provi
dingaCSSl eisani nter
es ti
ngidea.It
saquick
wayt oens uret hatalltheelement sonawebpage
l
ookt hesame,now andi nt hefuture.The
documentt hengoesont oexplainthevariousstyl
es
thatarerequi redfors pecicelement s
,suc hasl
inks
andheadi ngs ,beforemovi ngont ocoverlayout
gri
ds,typogr aphy,forms ,tabl
es ,media,andmor e.

TheUbunt uwebdes igns tylegui

deiswel
lworth
checkingout.Thisisbec aus ei
tnotonl
yincl
udesthe
guideli
nesandi nstr
uc t
ions ,butt
henecess
aryHTML
andCSSmar kupt hatisrequi r
edtoachi
evethe
resulti
ssuppliedaswel l.

9.Mai
lChi
mpUXGui
de 10.WebSt
yleGuide:Bas
ic
Desi
gnPri
nci
plesfor

MailChimpisoneofthemos tpopularemai
l
mar ket
ingser
vic
esaround,soit
sgreatt
osee Ifyour
el ooki
ngforanoi neres
ourc
ethat
thatthey
vemadetheirst
yleguidepubli
cal
ly youc ankeeponyourdes k,t
hentheWeb
avail
able. Styl
eGui debyPat r
ickJ
.LynchandSarah
Hor t
oni sabitofaclas
sic
.
Aswel laspr ovidingfoll
owerswi t
hexamples
ofhow el ement ss houldbestyl
ed,the Admi tt
edly,theWebSt yleGuidebookhasn
t
underlyingc odei salsoanoert omake beenupdat edforawhi l
e.However,you
i
mpl ement ingt heseguideli
nesas shouldndt hattheadvi
c eonwebdes i
gn
str
aightforwar daspos s
ibl
e.Thisonli
ne fundament alsandt heneedsofweb
documenti sni celyformattedtoo,makingit designersinar angeofor gani
zat
ionsst
il
l
oneoft heeas ierwebdes i
gns t
yleguidest
o oer ssomeval ue.
fol
low.
Someideasnevergooutoff ashi
on,and
Aseverythi
ngisc overedher e,fr
om grid havi
ngaprintedbookt or
eferencewhen
l
ayoutsandt ypogr aphy,throughtoiconsand makingdesi
gndec isi
onsc
anbei nval
uable
dial
ogueboxes ,nomat terwhatplat
form you evenint
hedigitalage.
aredesigni
ngf or,yous houldbeablet oget
somepoi nt
ersf r
om t heMai lChi
mps t
yle
guide.

Webdes ignersandemai lmar ketersali

kewill
ndt heMai lChi
mps tylegui deagoods our
ce
ofins pirati
onwheni tc omest oenf or
cing
consis tencyintheirpr ojects.Youc anhearout
aboutt hes t
orybehi ndt hisgui deinan
i
nter view withFeder i
coHol gado,t heleadUX
designeratMai lChimp.

Pr
esent
edby:
www.
UtahSi
tes.
com
Sour
ce:
htt
ps:
//
pixabay.com
ht
tps:
//
www.
elegant
themes.
com/
blog/
ti
ps-
tr
icks/
best
-web-
desi
gn-styl
e-guides