Professional Web Design & Front-End Design Course

1 4th Edition
Fairway Technology | Creativo 27 Design House

4th Edition 2
 Professional Web Design & Front-End Design Course

tcef; (1)

Figma pwiftoHk;jyKjcif;
Figma udk b,fvdk toHk;jyKEkdifvJ

Sign up / Register
pwiftoHk;jyKzdkYtwGuf figma website jzpfwJh
www.figma.com udkoGm;yg/ Signup odkY try figma for free
udkESdyfNyD; register jyKvkyfEkdifygw,f/

Browser or Computer wGiftoHk;jyKjcif;

Figma [m browser awGay:rSmvJ 'DZdkif;jyKvkyfEkdifovdk?
software udkrdrdpufxJodkY instrall jyKvkyfNyD;vnf; toHk;jyK Ekdif
ygw,f/ rdrdpufxJudk install jyKvkyfzdkYtwGuf page atmufqHk;
rSm&SdwJh resources xJu download udkESdyfyg/

Desktop app xJu rdrdpufeJY oifhawmfwJh app udk download

vkyfNyD; pufxJudk install vkyfum toHk;jyKedkifygw,f/ rdrd create
vkyfxm;wJh account eJYyJ login 0ifNyD; toHk;jyKekdifygw,f./

My Account & Community

Login 0ifNyD;oGm;wJhcgus&if rdrdtrnfudk b,fzuf tay:
axmifhrSm awGY&rSmjzpfNyD; ab;u rQm;av;udk ESdyfvdkuf&if rdrd
account eJY community qdkwmudkawGY&rSmjzpfygw,f/

rdrd account rSmawmh rdrdaemufqHk;vkyfwJh file awG? rdrdudk

share xm;wJh file awGudk recent rSm awGY&rSmjzpfygw,f/
Team qdkwmuawmh rdrdeJY 'DZdkif;wpfckudk twlwl vkyfwJholawGeJY
zGJYpnf;xm;NyD; 4if;wdkYudk design share vkyfxm;wJh ae&m
jzpfygw,f/ owdxm;&rSmu 4if;ae&m[m free account
orm;awG twGuf 3 team projects yJvkyfvdkY&ygw,f..
4if;xuf ydkygu vpOfaMu; ay;&rSmjzpfygw,f/

Community rSmawmh Plugin, Resource file, wireframe,

Ui kits awGudk download vkyfEkdifwJhae&mjzpfygw,f/

3 4th Edition
Fairway Technology | Creativo 27 Design House

tcef; (2)

Figma udk pwifavhvmjcif;

pwifjcif;
rpwifcif odxm;&rSm twdkif;twm unit awGjzpfygw,f/ Website awG&JU unit awG[m tuGma0;awGudk pixel eJYwdkif;wmNyD;
resolution uawmh 72 ppi (pixel per inch) eJY wkdif;wmygw,f/ 'Dtwdkif;twmawGtm;vHk;twGuf Figma, Sketch, Adobe XD
pwJh 0bfeJY rdkbdkif;'DZdkif;zefwD;zdkY xkwfvkyfxm;wJh software tm;vHk;u yHkaocsdefxm;NyD;om;jzpfygw,f/

New Design File

Figma file pwifzdkYtwGuf home icon ab;em;u + av;udk ESdyfvdkufyg/ Design file eJY FigJam qdkNyD;ESpfckawGY&rSmjzpfygw,f/
Design file qdkwmu web design, mobile design, app design, prototype design pwJh design awGzefwD;zdkYtwGufjzpfNyD;
Figjam qdkwmuawm flow charts and mind mapping, brainstorming pwmawGzefwD;zdkYtwGufjzpfygw,f/

New Frame
Design wpfck pwifawmhr,fqdk&if rdrdu b,fvdk design rsdk;udk zefwD;rvJqdkwmudk pwifa&G;cs,f&rSmjzpfygw,f/

Oyrm/ udk,fu website design zefwD;rvm;? mobile app 'DZdkif;udk

zefwD;rvm;qdkwmudk pwifa&G;cs,f&rSmjzpfygw,f/ 'Dvdka&G;cs,fzdkYtwGuf new
design file a&G;NyD;NyDqkdwmeJY New frame qkdwmudka&G;&ygr,f/

'Dvdka&G;NyD;NyDqdk&if nmzufrSm tckvdkay:vmrSmjzpfygw,f/ 'Dae&mrSm rdrdb,fvdk 'DZdkif;rsdK;

zefwD;rvJqdkwJh tay: rlwnfNyD; a&G;cs,f&rSm jzpfygw,f/ rdrdzefwD;r,fh design ay:vdkufrNyD;
oufqdkif&m frame awGudk a&G;cs,f&rSmyg/

Layout Grid
Responsive website wpfcktwGuf 'DZdkif; pwifzdkY 'grSr[kwf
bootstrap website wpfck twGuf 'DZdkif;vkyfcsifvdkYyJjzpfjzpf
'D layout grid udktoHk;jyKygw,f/ Layout grid toHk;jyKcsif
&ifawmh rdrd a&G;cs,fxm;wJh design board udk select vkyfyg/

1/ nmzufrmS ay:vmwJh properties rSm layout grid udk a&G;cs,f yg/

2/ tay:rSm Grid tpm; Columns udka&G;yg/
3/ Count rSm 12 columns, Type rSm Center, Width rSm 70 eJY
Gutter rSm 30 jznfhay;yg/

'gqdk&if layout grid wpfck wnfaqmufNyD;oGm;ygNyD/

4th Edition 4
 Professional Web Design & Front-End Design Course

Move and ScaleTools udk avhvmjcif;

Object awGudk a&GUcsifvdkYyJjzpfjzpf wpfjcm; selection point awGudk select ay;csif
vdkYyJjzpfjzpf Move tools udk toHk;jyKygw,f/ Move tool udka&G;NyD; object udk a&GUvdkY
&ovdk BuD;csifao;csifvdkYvJ&ygw,f/ Ratio nDcsif&ifawmh shift key eJY aygif;NyD;
vkyfaqmifay;&ygw,f/ wu,fvdkY shift rudkifcsif&ifawmh atmufrSm&SdwJh scale
tool udktoHk;jyKEkdifygw,f/

Drawing Tools Group udk avhvmjcif;

av;axmifhawG? puf0kdif;awG? vdkif;eJY rQm;awG? oHk;axmifhawG? Mu,fawGeJY "gwfyHkawG
xnhf csif&ifawmh 'Dae&mrSm jyKvkyf&rSmjzpfygw,f/

1. Width & Height

'Dae&mrSm wvufpwnf;ajymcsifwmu b,fzufu properties bar taMumif;yg/ olu
rdrda&G;vdkufwJh tool tay:vdkufNyD; vkyfaqmifEdkifwJh properties awGajymif;oGm;ygw,f/
tck 'D properties bar taMumif;ajymMu&atmifyg/ tay:qHku tuGufrSm width eJY
height ajymif;vdkY&ygw,f/

2. Corner Radius
rdrdzefwD;xm;wJh object awG&JU axmifhawGauG;csif&ifawmh 'Dae&mrSm jyKvkyf&rSmyg/ olu
tckP width & height csdefxm;wJh atmufrSm&Sdygw,f/

3. Fill with color

Fill rSmawmh rdrdzefwD;xm;wJh object &JY ta&mifudkajymif;vdkY&ygw,f/ color box av;udk
ESdyf vdkuf&if sub box ay:vmrSmjzpfNyD; tJhrSm fill color tjyif? gradient ta&mifawGeJY
yHkjznhfvdkY&wJh feature awGay:vmrSmjzpfygw,f/ Opacity avsmhcsif&ifawmh atmufem;
rSm&SdwJh 100% qdkwJh ae&mrSm rdrdavsmhvdkwJh yrmP udkajymif;Ekdifygw,f/

4. Stroke
rdrdzefwD;xm;wJh object rSm abmifuGyfcsif&ifawmh 'D section rSm jyKvkyf&rSmjzpfygw,f/
ab;ywfywfvnf abmifuGyfEkdifovdk rdrdESpfoufovdk tay:? ab;zufeJY atmufzuf
BudKuf ESpf oufovdk jyKvkyfEkdifygw,f/

5. Effects
'Dae&mrSmawmh shadaw awGxnhw
f m? background blur vkyw
f mawGukd jyKvyk f Ekid yf g w,f/

Type Tools udk avhvmjcif;

Type udk toHk;jyKcsif&ifawmh wpfcsufaxmufvdkufyg odkY text area tjzpf oHk;csif &ifawmh
zdNyD;qGJvdkufyg/ NyD;&if rdrdvdkcsifwJh pmom;udk &dkufEdkifygNyD/
1. yxrqHk; tuGufrSmu rdrdtoHk;jyKcsifwJh Type face udk a&G;cs,f &rSmjzpfygw,f/
2. rdrda&G;xm;wJh font txl? tyg;? tapmif; pwmawGudka&G;&rSmyg/
3. rdrda&G;xm;wJh font size udkowfrSwf&rSmyg/
4. pmaMumif; wpfaMumif;eJY wpfaMumif;Mum;u tuGmta0;udk csdefnSd&wJhae&mjzpfyg w,f/
5. pmaMumif;awG b,f? nm nSdwJhae&mjzpfygw,f/
6. pmaMumif;awGu text area &JU tay:? tv,f? atmuf b,fvdkxm;csifvJqdkwmudk
a&G;&rSmjzpfygw,f/
5 4th Edition
Fairway Technology | Creativo 27 Design House

Type Setting Basic udk avhvmjcif;

Preview - uawmh rdrd csdefnSdxm;wmawGudk jrifae&r,fhae&mjzpfygw,f/

Resizing - uawmh pmaMumif;udk wpfaMumif;xJxm;rSmvm;? pmydk'fyHkpH xm;rSm
vm;? pwmawGudk a&G;cs,fEkdifygw,f/
Alignment - uawmh b,f?nm pwmawG nSdwJhae&myg/
Decoration - uawmh underline awG pmvHk;zsufwJh vdkif;awG jyKvkyfwJh ae&m
jzpfygw,f/
Paragraph Spacing - uawmh pmydk'f wpfydk'feJY wpfydk'fMum; b,favmuf
tuGma0;xm;rvJqdkwmudk a&G;cs,fwJhae&myg/
Paragraph Index - u pmaMumif;&JU yxrqHk; taMumif;u ab;uae
b,favmuf index vkyfrvJqdkwmudk owfrSwfwJh ae&myg/
List styel - uawmh list awGudk number 'grSr[kwf bullet eJY jyrvm;qdkwmudk
owfrSwf&rSmyg/
Case - ae&muawmh pmvHk; tBuD;awG? tao;awG ajymif;wJhae&myg/

Adding Images udk avhvmjcif;

yHkxnhfzdkYtwGuf oHk;rsdK;pOf;pm;Ekdifygw,f/
1/ Rectangle or circle wpfck zefwD;yg/ replace image udka&G;NyD; rdrd xnhfvdkonhf yHkudka&G;cs,fyg/ rdrdzefwD;xm;wJh rectangel or
circle ay:rSm click vkyfvdkufwmeJY rdrda&G;xm;wJh yHku txJudka&mufoGm;rSmjzpfygw,f/
2/ Retangle or cirle wpfckzefwD;yg/ ab;u properties xJu fill xJrSm fill with image udka&G;NyD; rdrdxnhfvdkonfh yHkudk a&G;cs,fyg/
3/ taumif;qHk;enf;vrf;uawmh rdrdxnhfvdkonfhyHkudka&G;cs,fyg/ Retangle or Circle wpfckudkzefwD;yg/ yHkESifh shape ESpfckvHk; udk
select vkyNf y;D tay: bar rSm&Sw
d hJ Mask udEk ydS v
f u
kd yf g/ 'Dvx
kd nhjf cif;tm;jzifh yHu
k kd rdrv
d o
kd vdk jyKjyif? a&GaU jymif;vdv
Yk nf; &yg w,f/

tcef; (3)

Component, Text & Color Style

Component wpfckwnfaqmufjcif;
Component u b,fae&mawGrSmoHk;vJqdkawmh rdrdzefwD;r,fh 'DZdkif;awGrSm xyfum xyfum toHk;jyKr,fh t&mawGrSm bHkxkwfxm;NyD;
toHk;jyK&rSmjzpfygw,f/ Oyrm tm;jzifh? button awGrSm trsm;qHk;toHk;jyKygr,f/ tck tajccH component jyKvkyfyHkeJY jyefvnf toHk;jyKyHk
awGudk avhvm Munhf&atmifyg/ Button Component wpfck wnfaqmufMunhf&atmifyg/
Width 200, Height 50 &SdwJh box wpfck zefwD;yg/ 4if; box xJwGif "Click Here" qdkwJh pmav; &dkufvdkufyg/ Nyd;aemuf tay: rSm&SdwJh
Create component udk ESdyfvdkufyg/ 'gqdk&if component wpfck wnfaqmufNyD;oGm;ygNyD/ 4if; Button udk copy ,lNyD; toHk;jyKEkdifyg
w,f/ 4if ;button udk jyefvnf jyifqifcsif&ifawmh layer ab;em;u Assects xJrSmoGm;NyD; jyifEdkifygw,f/

Text & Color Style

Component vdkyJ bHkxkwfxm;oifhwmuawmh text & color awGjzpfygw,f/ Website wpfckrSm type uESpfrsdK;oHk;rsdK;xuf ydkrygovdk
ta&mifuvnf; xdkenf;4if;yJjzpfygw,f/ rdrdwdkY toHk;jyKr,fh type and color awGudk bHkxkwfxm;jcif;jzifh ydkrdkvG,ful tqifajypGm
toHk;jyEkdifrSmjzpfygw,f/

4th Edition 6
 Professional Web Design & Front-End Design Course

Text Style Color Style

Text style wpfckjyKvkyfzdkYtwGuf t&ifqHk; rdrdvdkcsifwJh text Color style uvnf; text style vdkrsdK;yJ oabmw&m;csif;wlnD
style &atmif t&if jyKvkyf&ygr,f/ Oyrm? rdrdu title tjzpfoHk; ygw,f/ rdrdrSwfom;vdkwJh ta&mifudkt&if jyKvkyfxm;NyD; fill
csifwmvm;? body text tjzpfoHk;csifwmvm; qdkwmudk t&if properties rSm&SdwJh plus sign udkESdyfNyD; ta&mifudk xnhfoGif;
style vkyf&rSmjzpfygw,f/ NyD;&if text propertie xJu plus Edkifygw,f/
sign av;udkESdyfNyD; style jyKvkyf&rSmjzpfygw,f/

Edit Style
Color & text style awGudkjyifcsif&ifawmh artboard ay:udk
wpfcsufaxmufvdkufyg/ NyD;&if ab;u properties ay:rSm color
style, text style qdkNyD;ay:vmygvdrfhr,f/ ab;u icon av;udk
ESdyfNyD; rdrd vdktyfovdkajymif;vJEkdifygw,f/ ajymif;vdkuf&ifawmh
tqdkyg text & color style awG apply vkyfxm;wJh t&mawG
tm;vHk; update vdkufajymif;oGm;rSmjzpfygw,f/

Plugin
Figma toHk;jyKr,fqdk&if plugin udk csefxm;cJhvdkYr&ygbl;/ Figma plugin awG[m tawmfhudk aumif;rGefNyD;? emrnfMuD; website
tawmfrsm;rsm;[mvnf; figma rSm plugin taeeJY&SdMuygw,f/ tckajymjyay;rSmu figma toHk;jyK&if rjzpfrae install vkyfxm;oifhwJh
plugin awGyJjzpfygw,f/

Loream Ipsum uawmh erlem pmom;awG toHk;jyKzkdYjzpfygw,f/

Unsplash - "gwfyHkawG,loHk;zdkYtwGuf jzpfygw,f/

Iconify uawmh icon awG toHk;jyKzkdYtwGufjzpfygw,f/

Vector logo uawmh wpfcgwpfav vector logo awGxnhfoGif;Ekdifatmifyg/

3D icons uawmh rdrd'DZdkif;rSm 3D icon awGvdktyfvm&if toHk;jyKEkdifatmifjzpfygw,f/

Blush uawmh illustrator yHkawG toHk;jyKEkdifatmifjzpfygw,f/

Feather icon uawmh line icon awG toHk;jyKcsifwJhtcgrSm tvGeftoHk;0ifwJh plugin wpfckjzpfygw,f/

7 4th Edition
Fairway Technology | Creativo 27 Design House

tcef; (4)

Typography & Color Theory

Typography qdkwmbmvJ
Typegraphy qdkwm tEkynmeJY enf;ynm (Art+Technology)udkaygif;pyfxm;wmyg? t&ifqHk;em;vnf&rSm Font eJY Typeface
&,fudk cGJjcm; odEdkif&ygr,f/ Font qdkwm typeface awG tukefyg0ifygw,f? qdkvdkwmu font xJrSm font emrnfrsdK;pHktygt0if?
pmvHk;txl? tyg;? tapmif; tukefvHk;u font xJrSmyg0ifygw,f? Typeface qdkwmuawmh pmvHk;'DZdkif;awG? yHkpHawG awGudk ac:wmyg/

aemufwpfckodxm;&rSmu font group qdkwmvnf;&Sdygao;w,f? 'DZdkif;wlnDwJh font awGudk aygif;pyfNyD;ac:wmyg? olwdkYrSmowfrSwf

csufawG&Sdygw,f? Serif eJY Sans Serif qdkNyD; t"dutajccH tkyfpkESpfck&Sdygw,f/

Serif
pmvHk;av;awGrSm tem;owfav;awGygwJh font awGudkac:wmyg/ Roman font vdkYvnf;ac:ygw,f/ olYwdkYawGudkawmh pmtkyf&dkufwJh
ae&mrSmoHk;Muygw,f/ bmjzpfvdkYvJqdkawmh serif font tkyfpk[m print xkwfwJhtcgrSm pmvHk;awGudk &Sif;vif;pGmzwfEdkifwJh twGufyJ
jzpfygw,f/

Sans-Serif
Sans-serif qdkwmuawmh pmvHk;rSm twGefYtwufawGrygyJ? pmvHk;yHkpHtwdkif;a&;xm;wJhfont udkac:wmyg/ olUudkawmh website awGrSm
toHk;rsm;ygw,f/

wpfjcm; font tkyfpkawGudkvnf; OyrmawGeJY atmufyg Z,m;uGufawGrSm avhvmEdkifygw,f/

4th Edition 8
 Professional Web Design & Front-End Design Course

Times New Roman

Serif group PT Serif

Merriweather

Roboto
Sans-Serif group Raleway

Maven Pro

Pacifico
Scipt group Snell Roundhand

Thirsty Script
Andale Mono
Mono type group Courier New
Ocr a Extended

Golden Ratio for Font Size & Line Height

tpydkif;rSm font size awG b,favmufxm;&rvJ.. title u b,favmufxm;&if body font size b,favmufxm;oifhovJqdkwmudk
a&G;cs,f& cufcJapygw,f/ 'Dae&mrSm tMurf;rsOf; rSwfxm;vdkY&wJh font size av;awGudk ajymjycsifygw,f/
Section Title - 35 ~ 75 px
Title Font - 16 ~ 35 px
Body Font ` 12 ~ 18 px txd &Sdwufygw,f/ font size awG b,fvdkxm;oifhovJ Oyrm - title font size qdk&if b,favmuf
&Sd&if body font size u b,favmuf&SdoifhovJ qdkwmudk wpfqufwnf; ajymjyoGm;ygr,f/

Title Font Size / Body Font Size = 1.618 &Sdw,fqdk&if oifa&G;cs,fxm;wJh font size u tqifajyajyMunhfvdkYaumif;aeygw,f/
tck title eJY body font size awG&NyDqkd&if line heigh awGb,favmufxm;oifhovJqdkwmudk qufajymjyygr,f/

Body Font Size x Line Height 1.5 q &Sd&if zwfvdkY tqifajywJh taetxm; &Sdygw,f..

Color Theory
ta&mifpuf0dkif;
ta&mifpuf0ef;wGif ta&mif 12 a&mifjzifh zGJYpnf;xm;onf/ ta&miftkyfpkrsm;udk tajccHtm;jzifh oHk;rsdK;cGJjcm;xm;ygw,f/ rlvta&mif
3 a&mif? 'kwd,ta&mif 3 a&mif eJY wwd,ta&mif 6a&mif wdkYjzpfygw,f? rlvta&mif 3a&mifu teD? t0g eJY tjyma&mifwdkYjzpfygw,f/
'kwd,ta&mifawGu vdarÆmfa&mif? tpdrf;a&mif? c&rf;a&mifwdkYjzpfygw,f/ 'kwd,ta&mifawGudk b,fvdk&vJqdkwmajymjyyghr,f/
vdarÆmfa&mif&zdkYtwGuf rlvta&mifjzpfwJh teDa&mifeJY t0ga&mifwdkYaygif;pyfNyD; &vmwmyg/ 'DvkdyJ tpdrf;a&mif? c&rf;a&mif wdkYudkvJ
t0ga&mifeJY tjyma&mifaygif;&if tpdrf;a&mif? tjyma&mifeJU teDa&mifaygif;&if c&rf;a&mif qdkNyD;&vmwmyg/ wwd,ta&mifawGuvnf;
rlvta&mif eJY 'kwd,ta&mifawGaygif;pyfNyD;&vmMuwmyg/

ta&mifawGrSm tyla&mif ESifh tat;a&mifqdkNyD; &Sdygw,f/ oif ta&mifpuf0ef;udk Munhfvdkufygu c&rf;a&mifrS t0ga&mifxdonf
tyla&miftkyfpkjzpfNyD;? tpdrf;Eka&mifrS tjym&ifha&mifxdonf tat;a&miftkyfpk0ifrsm;jzpfonf/ vdkufzufta&mifrsm;rSm oifa&G;cs,f
vdkufaom ta&mif\ ab;wpfzufwpfcsufwGif&Sdaomta&mifrsm;jzpfNyD; qefYusifzufta&mifrsm;rSm oifa&G;cs,fvdkuf aom ta&mif\
rsufESmcsif;qdkifwGif&Sdaom ta&mifrsm;jzpfygw,f/
9 4th Edition
Fairway Technology | Creativo 27 Design House

Primary Color

Secoundary Color Red

Red- Red-
Tertiary Color violet orange

Violet Orange

Blue- Yellow-
violet orange

Blue Yellow
r

Blue- Yellow-
lo
Co

green green
m

3 Green
War

1
2
3
ee� 3
2 o r Wheory andith r.
l
Co colo or use wlustrato
r t h
le ool f nd Il 1
imp t a
A s ction shop
sele Photo
3 ob e
Ad
3
1
2
3

Co
ld
Co
lor

4th Edition 10
Professional Web Design & Front-End Design Course

11 4th Edition
Fairway Technology | Creativo 27 Design House

4th Edition 12
 Professional Web Design & Front-End Design Course

user ta&twGufuydkrsm;vmygNyD/ yHkrSeftm;jzifh responsive design qdkwJh acgif;pOfatmufrSm screen av;ckyg0ifygw,f/

tJhwmawG uawmh wide screen(desktop monitor), laptop, table eJY mobile phone wdkYyJjzpfygw,f/
Responsive design qdkwmbmudkqdkvdkvJqdkwmudk wpfzufu yHkrSm erlemtaeeJY Munhfedkifygw,f/

What is UI and UX?

UI qdkwm User Interface udktwdkacgufac:wmjzpfygw,f/ tckacwfrSm UI/UX [mtawmufudkacwfpm;wJh tac:ta0: wpfckNzpfNyD;
awmfawmfvnf;toHk;0ifygw,f/ UI Design qdkwm software, web application, mobiel applicaton eJY wpfjcm;aom
electronic devise awGrSmyg&SdwJh 'DZdkif;awGudk yHkazmfay;&wJh 'DZdkifemjzpfygw,f/ UI Designer wpfa,muf&UJ t"du wm0efuawmh
rdrda&;qGJvdkufwJh 'DZdkif;u pm;oHk;ol wpfa,mufudkqGJaqmifEdkifwJh 'DZdkif;jzpf&ygr,f/ &dk;&Sif;&r,f? wpfjcm;xkwfukefawGeJY,SOfvdkuf&if
ay:vGifaewJh 'DZdkif;rsdK;jzpf&ygr,f/ 'DtxJrSm colour, typography 'DZdkif; pwmawGyg0ifNyD; xkwfukefwpfckudk pm;oHk;olqGJaqmifEdkifwJh
'DZdkifrsdK;jzpfatmifzefwD; ,lEkdif &ygr,f/

UX qdkwm User Experience udkac:wmjzpfygw,f/ wpfjcm;taeeJYvnf; UXD, UED, XD qdkNyD;vnf;ac:Muygao;w,f/ ol&JUt"du

vkyfaqmifcsufuawmh pm;oHk;olawG? toHk;jyKolawG b,fvdktqifajyajytoHk;jyKEkdifrvJqdkwmudk pm;oHk;oltajcjyK pOf;pm;zefwD;wJh
'DZdkifemwpfa,mufyg/ xkwfvkyfvdkufwJh xkwfukefwpfck&JU toHk;0ifrI? toHk;jyKolem;vnfEdkifrI pwmawGudk toHk;jyKoleJY xkwfukeftMum;
csdwfqufay;wJh wm0efudk,lxm;&wJh 'DZdkifemjzpfygw,f/

UX u bmjzpfvdkYta&;BuD;wmvJ ?
UX designer awGb,favmufta&;BuD;vJqdkwmudk tckvdkavhvmEdkifygw,f/
1/ 68% aom toHk;jyKolawG[m qdk;&Gm;vSwJh UX aMumifh website awGudk qufroHk;yJxGufoGm;Muw,f/ (login, how to buy,
can't find right info)
2/ 85%aom UX jyÛemawGu oHk;pGJol ig;a,mufudk prf;oyf&HkeJY ajz&Sif;E dkifygw,f/
3/ 44% aom tGefvdkif;aps;0,folawGu olwdkY&JU qdk;&Gm;wJh tawGYtBuHKawGudk wpfjcm;oli,fcsif;awGudk jyefajymjyavh&Sdygw,f/
4/ 62% aomoHk;pGJolawGu aemufwpfBudrf0,f,lwJhtcg olwdkYt&ifu 0,f,lcJhwJhtawGYtBuHKudk tajccHNyD;0,f,lavh&Sdygw,f/

UI/UX Designer wdkY&JU wm0efrsm;

UX Designer UI Designer

Process Concept Colour, Typo

Base on Customer requires, Research Vitural design, client request

Create prototyope, wireframem sketch Mockup, graphic, layout

Require & what they Information arch, Program manage, Graphic design, brand, web design,
do Functional analyst, User testing, Data front-end design, action button, tools,
analitics, User satisfaction content, vitural tools

13 4th Edition
Fairway Technology | Creativo 27 Design House

erlem website layout yHkpHrsm;

Three Boxes
t&rf;udk&dk;&Sif;wJh layout yHkpHwpfckyg/ Three boxes layout
rSm qdk&if t"du grphic yHkBuD;&JUatmufrSm yHkao;ESpfyHkxm;wJh
layout yHkpHjzpfygw,f/ Text awGudkvnf;yHkawGeJYa&mxm;vdkY &
ygw,f/ t"du yHkBuD;u slider taeeJY xm;vkdYvnf;&ygw,f/

tay:qHk; b,fzuf box uawmh logo xm;zdkYtwGufjzpfNyD;

nmzuf box uawmh menu awG 'grSr[kwf search box xm;zdkY
twGufjzpfygw,f/

'DZdkif;
layout uawmh portfolio website awG 'grSr[kwf
product awGxkwfwJh vkyfief;awGtwGuf oifhawmfygw,f/
yHkwpfyHkcsif;pDrSm link awGxm;NyD; ESdyfvdkuf&if box tBuD;eJY
yHkawGwufvmwJh yHkpHudkvnf;vkyfEdkifovdk detail twGuf
vnf; link xm;Edkifygw,f/

Advanced Grid
trsm;tm;jzifh 'D layout awGu advertising awG article awG
ygwJh website awGrSmtoHk;rsm;ygw,f/ Layout &JU ae&mawmf
awmf rsm;rsm;rSm yHktao;awG? aMumfjimawG eJYa&maESmxm;wJh yHkpH
jzpfaewufygw,f/

yHkrSm erlemjyxm;wJh twdkif;yJ 'D layout awGu t0wftpm;

a&mif;wJh website awGeJY tpm;taomuf? toHk;taqmif
awGudk review a&;wJh website awGrSm toHk;rsm;ygw,f/

Sold box layout design rSm main graphic udkwpfyHkwnf;jy

xm;ygw,f/ wu,fvdkYoifhtaeeJY 'Dvdk'DZdkif;awGudk upgrade
vkyf&r,fqdkif&if rwluGJjym;wJh 'DZdkif;tjzpf main graphic udk
ESpfydkif;cGJvdkYvnf;&ygw,f/ wu,fawmh graphic uwpfck
wnf; jzpfayr,fh ESpfydkif;cGJwJh yHkpHrsdK;jzpfatmif zefwD;xm;wmyg/

4th Edition 14
 Professional Web Design & Front-End Design Course

Five Boxes
Five boxes layout u three box layout udktajccHNyD;zefwD;
xm;wmyg/ Graphic tom;ay; layout jzpfNyD; box tBuD;u
slider jzpfum usefwJh 4 boxes uawmh slider udk tajccHxm;
wJh yHkpHjzpfap? portfolio/product udk jywJh yHkpHjzpfap oifhawmf
ovdktoHk;jyKEkdifygw,f/

tjrif&Hk;&Sif;NyD; toHk;rsm;wJh layout yHkpHwpfckjzpfygw,f/

tckjyxm;wJh 'DZdkif;u web design awGa&;qJGwJh 'DZdkifem

wpfa,muf&JU website udkavhvmEdkifatmif xnhfoGif;xm;
wmyg/

Fixed Sidebar
'DyHkpHawGu 2000 jynhfESpfawGwkef;u acwfpm;cJhwJh Blog awGudk
jyeftrSwf&apygw,f/ wu,fvnf; 'D layout [m blog
a&;zdkYtaumif;qHk; layout yJjzpfygw,f/ 'DbufacwfawGrSm
awmh 'D fixed sidebar layout [m roHk;awmhavmufatmifudk
&Sm;oGm;NyD; c&D;oGm;aqmifyg;awGa&;wJh website awG avmuf
rSmyJ toHk;rsm;awmhwmudkawGY&rsmyg/

'D layout &JU oabmu b,fbufrSm&SdwJh sidebar xJrSm logo,

navigation pwmawGudkxnfhNyD; nmzufrSm udk,fjycsifwJh info
udkjyxm;wmyg/ b,fzuf sidebar u taojzpfNyD; nmzufrSm&Sd
wJh information awGuyJ a&GUoGm;wmyg/

15 4th Edition
Fairway Technology | Creativo 27 Design House

Headline & Gallery

'D layout awGuawmh gallery awG? portfolio awG? product
awGudk jywJhae&mrSm toHk;jyKavh&Sdygw,f/ vlwdkif;[m "gwfyHk
awGMunhf&wm ESpfoufMuygw,f/ 'D layout [mt&rf;udk
&dk;&Sif; vG,fulNyD; toHk;jyKawGtvG,fwul toHk;jyKEkdifwJh
layout yHkpHjzpfygw,f/

'D layout &JU tm;omcsufu pmvHk;awGudk rdrdESpfoufovdk

zefwD; Edkifjcif;ygyJ/ pmvHk;tBuD;tao;? pmvHk;yHkpH 'DZdkif;awGu
tp vGwfvyfpGm zefwD;Edkifygw,f/

tck Oyrmjyxm;wJh 'DZdkif;rSmawmh logo design a&;qGJwJh ukyÆPD

wpfck&JU website yg/

Power Grid
Power grid awG[m cufcJ&IyfaxG;wJh layout awGxJrSmyg0if
ovkd wu,fhudk xda&mufNyD; tvGefrsm;jym;wJh information
awGudkjyozdkY zefwD;&mrSmtvGefudk toHk;0ifygw,f/ rsm;aom
tm;jzifh 'Dvdk grid awGudk owif; website awG? azsmfajza&;
website awG eJY magazine website pwJh owif;tcsuf
tvufawGtrsm;BuD;ay;wJh website awG? portal vdkrsdK;
website awGrSmtoHk;jyKavh&Sdygw,f/

a&;qGJ&cufcJwJh layout yHkpHrsdK;jzpfygw,f/ Home page

rSmwif information tukefvHk;eD;yg;udk azmfjyxm;wufNyD;?
categories aygif;rsm;pGmtoHk;jyKEdkifatmif zefwD;xm;wJh
layout wpfckyg/

4th Edition 16
Professional Web Design & Front-End Design Course

17 4th Edition