color

ME
NHNG IU CN BIT V

FLAT DESIGN
Cun sch tip theo ca colorME
v nhng kin thc chung cho cng ng
 color

ME

MC LC

1 NH NGHA

2 HNH KHI

3 B CC

4 LI KT
1
color

ME

NH NGHA
Cun sch ny s cho bn bit, thit k phng l g. Chng ta hy
cng nhau nh ngha v thit k phng thng qua mt s phng
php nhn din nh.
1
color

ME

LCH S
Thit k phng, hay cn gi l Flat Design. L thut ng ch v mt
phong cch thit k mang li cm gic hnh ha 2D, cc k ti gin.
Xut hin t lu, nhng n nm 2013, c s quay li t ph.

NH NGHA
1
color

ME

LCH S
Nguyn nhn ca s quay li ny chnh l Windows 8. Chc hn cc
bn cn nh, Windows 8 bng n vo nm 2013 vi im c trng
nht l mn hnh Start c thit k theo phong cch phng. Vi
nhng Icon trng, ch trng trn nhng tm ch nht nhiu mu

NH NGHA
em li cm gic kh l lm v bt mt cho ngi dng. Sau khi Mi-
crosoft cho ra i Windows 8, mt nm sau , Google cp nht
ton b giao din theo phong cch Material Design, mt nhnh ca
Flaat Design, cn giao din phng ca Microsoft i theo nhnh
Metro Design.
1
color

ME

MU SC
V mu sc, Flat Design hng n s dn gin, d kt hp, khng
qu chi, khng qu m. V vy, tone mu Pastel lun l la chn
hng u ca cc Designer khi chi a vi thit k phng. Cc bn
c th xem thm cc tone mu thng thy trong Flat Design ti:
FlatUIColors.com.
NH NGHA
1
color

ME

HIU NG
Flat design c ti gin v mi mt, k c hiu ng. Tt c nhng
hiu ng thng thy trong Realism Design nh Drop Shadow hay
Gradient Overlay c loi b gn nh tuyt i ra khi phong
cch thit k ny.

NH NGHA
1
color

ME

HNH KHI
Thit k phng thin v dng nhng hnh khi ti c bn nh hnh
ch nht, hnh elip, hnh tam gic hay hnh ch nht c bo trn
bn gc. iu tuyt vi nht l Adobe Illustrator c b x l hnh
khi cc k hon ho, khin cho vic thit k theo Flat Design ngy

NH NGHA
nay d dng hn bao gi ht.
1
color

ME

HY BT U
V gi l lc chng ta cng bt u cuc hnh trnh tm hiu v Flat
Design. Hy c k tng phn nh, s c rt nhiu kin thc v tips
hay ang ch bn pha trc.

NH NGHA
2
color

ME

HNH KHI
Nh nhc n trc , Flat Design c to ra t nhng hnh
khi rt c bn, vy vi nhng hnh khi ta c th lm c g?
Hy cng colorME tm hiu xem nh.
2
color

ME

NGOI TRI
u tin, chng ta hy cng nhau tp v nhng hnh th thng c
xung quanh cuc sng hng ngy nh, bt u t nhng th m
bn c th nhn thy mi ngy. V d nh di y, chng ta ang
c mt hnh mt tri cc v rt d thng ch vi nhng hnh

HNH KHI
trn.
2
color

ME

NGOI TRI
Hay nhng ci cy, nhng tn l c v bi hnh trn, hnh bn
cu v hnh ch nht. Nhng hnh nh ny em li cho ta cm gic
rt n gin, khin ai cng tin rng mnh c th v ra n mt cch
d dng.

HNH KHI
2
color

ME

NGOI TRI
V l l do v sao cng ngy cng nhiu Designer la chn Flat
Design, khng nhng d thc hin, m n cn khin h c cm gic
nh mnh c th iu khin mi th theo thch. Khng ai c th
ngh ra rng mnh c th v ra nguyn mt ci u quay ch vi

HNH KHI
nhng hnh khi cc k c bn.
2
color

ME

NGOI TRI
Phc tp hn mt t, vi s gip sc ca nhng hnh ch nht c
bo trn bn gc, chng ta c th v ra mt cn nh nh xinh nh
th ny.

HNH KHI
2
color

ME

NGOI TRI
Cn hnh bn di, bn cn dng thm Direct Selection Tool can
thip v Vector mt hnh trn cho sn ban u a n v hnh
qu trng, sau mi thm cch hnh khi c bn khc to nn
hnh khinh kh cu. Giai on ny i hi cng sc hn mt t nh.

HNH KHI
2
color

ME

NGOI TRI
Bn c ang cm thy nhng hnh va ri qu nhm chn? Nhng
khng, khi ghp tt c nhng th nh nht vo mt bc tranh
tng th, bn s c mt kt qu ng kinh ngc.

HNH KHI
2
color

ME

NGOI TRI
Li khuyn cho cc bn, khi mi luyn tp Flat Design nhng ngy
u tin, hy luyn tp v nhng ngi nh tht nhiu, c rt nhiu
kiu nh m bn mnh cung cp di y, vic v theo nhng ngi
nh ny s gip bn phn no lm quen vi vic phn tch hnh khi

HNH KHI
trong AI hn.
2
color

ME

NGOI TRI
Li khuyn cho cc bn, khi mi luyn tp Flat Design nhng ngy
u tin, hy luyn tp v nhng ngi nh tht nhiu, c rt nhiu
kiu nh m bn mnh cung cp di y, vic v theo nhng ngi
nh ny s gip bn phn no lm quen vi vic phn tch hnh khi

HNH KHI
trong AI hn.
2
color

ME

NGOI TRI
Li khuyn cho cc bn, khi mi luyn tp Flat Design nhng ngy
u tin, hy luyn tp v nhng ngi nh tht nhiu, c rt nhiu
kiu nh m bn mnh cung cp di y, vic v theo nhng ngi
nh ny s gip bn phn no lm quen vi vic phn tch hnh khi

HNH KHI
trong AI hn.
2
color

ME

NGOI TRI
Li khuyn cho cc bn, khi mi luyn tp Flat Design nhng ngy
u tin, hy luyn tp v nhng ngi nh tht nhiu, c rt nhiu
kiu nh m bn mnh cung cp di y, vic v theo nhng ngi
nh ny s gip bn phn no lm quen vi vic phn tch hnh khi

HNH KHI
trong AI hn.
2
color

ME

NGOI TRI
Hoc i lc, bn c th v vi thm nhng th nh cy n
ng, cc loi cy ci m bn c th to ra c t nhng hnh
khi c bn. y l lc bn gin c ton b th gii xung quanh
mnh bng nhng vt th nh b ri.

HNH KHI
2
color

ME

NGOI TRI
Sau , hy bt u lng ghp mi th li vi nhau, c th bt u
t nhng hnh lang vi nhng b bn gh pha di mt b n
chm, hy th nghim mi th xem no, Flat Design d hn bn
ngh nhiu.

HNH KHI
2
color

ME

NGOI TRI
C gng lm tht nhiu, chng my chc, bn s t v ra c
nguyn mt thnh ph ca mnh. Mi ngy v mt t, mi ngy v
mt t, lp lui lp li nh vy cho n khi bn tin rng Flat Design l
chuyn nh.

HNH KHI
2
color

ME

NGOI TRI
Di y l mt s bi tp cho cc bn luyn tp, hy th mt ln
c gng ht mnh v mt ci g , bn s vt qua c bn thn
mnh. Adobe Illustrator khng hn khng km ch l mt cng c.
Bn mi l nhn vt chnh ca cu chuyn.

HNH KHI
color

ME
2
color

ME

NGOI TRI
Thm rt rt nhiu mu nh khc na dnh cho bn. ng ngi
luyn tp, ng ngi kh, hy nhn tht k, phn tch v sao chp li
nhng ngi nh di y, bn s ln tay rt nhanh thi.

HNH KHI
POLICE

POLICE

STORE

STORE $

$
2
color

ME

NGOI TRI
Khi chn vi chn thnh th ng c, hy ngh n nhng th
khc trong thin nhin, my, ni, rng, bin, tt c mi th u c
th a vo Flat Design mt cch d dng.

HNH KHI
2
color

ME

NGOI TRI
Khi chn vi chn thnh th ng c, hy ngh n nhng th
khc trong thin nhin, my, ni, rng, bin, tt c mi th u c
th a vo Flat Design mt cch d dng.

HNH KHI
2
color

ME

NGOI TRI
Khi chn vi chn thnh th ng c, hy ngh n nhng th
khc trong thin nhin, my, ni, rng, bin, tt c mi th u c
th a vo Flat Design mt cch d dng.

HNH KHI
2
color

ME

NGOI TRI
Khi chn vi chn thnh th ng c, hy ngh n nhng th
khc trong thin nhin, my, ni, rng, bin, tt c mi th u c
th a vo Flat Design mt cch d dng.

HNH KHI
color

ME
2
color

ME

TRONG NH
Bn c mt khi u rt tt. Gi y, chng ta hy cng bt tay
vo xy dng nhng vt dng m bn dng mi ngy nh. Bt u
t chic ng h nh xinh bn di. Bn hon ton c th phn tch
n ra thnh nhng khi hnh rt c bn.

HNH KHI
2
color

ME

TRONG NH
Hay chic cp vng ny cng vy. Tt c mi th u vn ch ang
dng vic ct ghp nhng hnh khi, v PathFinder chnh l cng
c c lc nht ca bn trong Flat Design.

HNH KHI
2
color

ME

TRONG NH
Mt chic mn hnh my tnh th sao? Hon ton n gin ng
khng, nu bn ang thc mc lm sao lm c chn my tnh
th n gin lm, ch vic dng hnh Elip khot i hnh Ch nht
thi, Minus Back trong PahtFinder s thc hin tc v ny trong

HNH KHI
nhy mt.
2
color

ME

TRONG NH
Qu a cu khng phi l mt hnh qu phc tp, tuy nhin trong
trng hp ny, c th bn s cn n s gp sc ca cng c Scis-
sor .

HNH KHI
2
color

ME

TRONG NH
Cn y l mt bai ton tng hp, bt bn ct ghp nhiu ln. Hy
th phn tch v lm theo xem sao nh.

HNH KHI
2
color

ME

TRONG NH
Di y l mt set rt phong ph v a dng, bn luyn
tp trong mt bui chiu ri . Hy cng nhm nhi tng vt phm
mt nh. C ln, sp n ch ri.

HNH KHI
2
color

ME

TRONG NH
Di y l mt set rt phong ph v a dng, bn luyn
tp trong mt bui chiu ri . Hy cng nhm nhi tng vt phm
mt nh. C ln, sp n ch ri.

HNH KHI

color

ME
PORT
PASS
2
color

ME

TRONG NH
Tip tc luyn tp vi mt chic la bn n gin no. C th bn
bt u phi dng dn Pentool ri , v ra 2 hnh tam gic bn
tronng la bn.

HNH KHI
2
color

ME

TRONG NH
Chic t gi y cng khng phi l th qu kh nhn vi bn
na, hy cn nhc xem nn dng nhng khi hnh nh th no
c th xy c mt chic t nh th ny nh.

HNH KHI
2
color

ME

TRONG NH
Khng ai ng rng mt chic Smart Phone li c th c v li ch
bng mt vi ng nt nh th nay ng khng. Lm mt bi tp
nh gii tr no.

HNH KHI
2
color

ME

TRONG NH
V tt nhin, my nh cng c th biu din c bng Flat Design.
Ch vi ton hnh khi c bn, bn c th m t c rt rt nhiu
th khc na.

HNH KHI
2
color

ME

TRONG NH
Tuy nhin, vi hnh bn di y, vic dng nhng khi hnh qu c
bn dng nh l mt vic bt kh thi. Vy nn ng chn ch
na, hy bt u v hnh ny vi Pentool i.

HNH KHI
2
color

ME

TRONG NH
Thm mt set na cc bn luyn tp.

HNH KHI
2
color

ME

TRONG NH
Thm mt set na cc bn luyn tp.

HNH KHI
2
color

ME

TRONG NH
Thm mt set na cc bn luyn tp.

HNH KHI
color

ME
2
color

ME

NGI
v ngi, d l Flat hay Realism, u khng phi l vic d, tuy
nhin Flat Design vn c i cht d dng thc hin hn cho ngi
mi bt u, hy th tham kho mt chng trai bn di c v
theo phong cch Flat Design nh.

HNH KHI
2
color

ME

NGI
Tng t nh hnh trc, chnh sa li o qun v biu cm gng
mt, ta c hnh dng mt c gi cng phong cch thit k.

HNH KHI
2
color

ME

NGI
Hay thm ch l mt nhm ngi.

HNH KHI
2
color

ME

NGI
Vi phong cch hot ha sn c ca Flat Design, vic dng nhng
hnh ngi c phong cch chibi l hon ton kh thi. Mnh khuyn
cc bn nn tm c thm ti liu v v chibi trc khi bt tay vo
thc hin nh.

HNH KHI
2
color

ME

NGI
Di y l mt nhm ngi c cng phong cch thit k ca
chng trai trc , nhn c nh mt minigame ng khng?

HNH KHI
2
color

ME

NGI
i lc, tnh cht cng vic i hi tc phm ca bn phi c tnh
Formal cao, th nhng hnh ngi di dng Icon kiu ny l la
chn hng u.

HNH KHI
2
color

ME

NGI
i lc, tnh cht cng vic i hi tc phm ca bn phi c tnh
Formal cao, th nhng hnh ngi di dng Icon kiu ny l la
chn hng u.

HNH KHI
2
color

ME

NGI
Mt team nhn rt chuyn nghip ng khng.

HNH KHI
2
color

ME

NGI
Di y l phong cch thit k kh tr trung v mi l. Vi hiu
ng bng t thn (bn google thm nh) v bng , nhn bc
hnh rt c chiu su d vn tun th nguyn tc ca thit k
phng.

HNH KHI
2
color

ME

NGI
Di y l phong cch thit k kh tr trung v mi l. Vi hiu
ng bng t thn (bn google thm nh) v bng , nhn bc
hnh rt c chiu su d vn tun th nguyn tc ca thit k
phng.

HNH KHI
2
color

ME

NGI

HNH KHI
2
color

ME

NGI
Icon kiu ny lm Avatar i din cng rt n ng khng?
nhng tone mu Pastel khi thit k phng bn nh.

HNH KHI
2
color

ME

NGI
Cch n mc ca mt ngi hon ton c th cho bn bit rng
ngi l ai. Nng cao ln thm mt bc na, bn phi trang tr
v v o qun cho nhn vt ca mnh sao cho khi nhn vo, ngi
xem bit c nhn vt ca bn l ai.

HNH KHI
2
color

ME

NGI
Cch n mc ca mt ngi hon ton c th cho bn bit rng
ngi l ai. Nng cao ln thm mt bc na, bn phi trang tr
v v o qun cho nhn vt ca mnh sao cho khi nhn vo, ngi
xem bit c nhn vt ca bn l ai.

HNH KHI
2
color

ME

NGI
Cch n mc ca mt ngi hon ton c th cho bn bit rng
ngi l ai. Nng cao ln thm mt bc na, bn phi trang tr
v v o qun cho nhn vt ca mnh sao cho khi nhn vo, ngi
xem bit c nhn vt ca bn l ai.

HNH KHI
2
color

ME

NGI
Cch n mc ca mt ngi hon ton c th cho bn bit rng
ngi l ai. Nng cao ln thm mt bc na, bn phi trang tr
v v o qun cho nhn vt ca mnh sao cho khi nhn vo, ngi
xem bit c nhn vt ca bn l ai.

HNH KHI
2
color

ME

NGI
Cch n mc ca mt ngi hon ton c th cho bn bit rng
ngi l ai. Nng cao ln thm mt bc na, bn phi trang tr
v v o qun cho nhn vt ca mnh sao cho khi nhn vo, ngi
xem bit c nhn vt ca bn l ai.

HNH KHI
2
color

ME

NGI
Cch n mc ca mt ngi hon ton c th cho bn bit rng
ngi l ai. Nng cao ln thm mt bc na, bn phi trang tr
v v o qun cho nhn vt ca mnh sao cho khi nhn vo, ngi
xem bit c nhn vt ca bn l ai.

HNH KHI
color

ME
2
color

ME

NGI
Cn gi l lc luyn tp a nhng con ngi phng kia vo
nhng bc thit k tht ri.

HNH KHI
color

ME
2
color

ME

NGI
Cn gi l lc luyn tp a nhng con ngi phng kia vo
nhng bc thit k tht ri.

HNH KHI

WEB
WEB DEVELOPMENT
DESIGNER WEB ONLINE
SEO MARKETING
2
color

ME

NGI

HNH KHI
 color

3
ME

B CC
Thc ra trong thit k phng, khng c qu nhiu b cc phc tp,
c 2 b cc c dng nhiu nht l nhn thng v nhn t trn
xung, hy th tham kho xem bn nh.
color

ME
color

ME
color

ME
color

ME
color

ME
color

ME
color

ME