PO-46-031025-Etapy-sozdaniya-maketa-ot-idei-do-prototipa (1)

1.

-B4?O A>744=8O <4>5B4: >B
8458 4> ?@>B>B8?4
D4>F<K9E>4S D45BF4 < >?RK96O9 L47< D4;D45BF><
CB?P;B64F9?PE>4K9EF69AAB7B @4>9F4 4 QFB >B@C?9>EAO= CDBJ9EE, FD95GRM<=
E<EF9@AB7B CB8IB84 < 7?G5B>B7B CBA<@4A<S CBFD95ABEF9= CB?P;B64F9?9=.
EB6D9@9AAB@ @<D9 J<HDB6B7B 8<;4=A4 >4:8O= QF4C D4;D45BF>< <@99F
D9L4RM99 ;A4K9A<9 8?S GEC9I4 >BA9KAB7B CDB8G>F4.

2.

'4EFL 1: B87BFB6>4 <
<EE?98B64A<9
$GA84@9AF GEC9LAB7B @4>9F4
R5B= GEC9LAO= 8<;4=A-CDB9>F A4K<A49FES ;48B?7B 8B EB;84A<S C9D6B7B
QE><;4. -F4C CB87BFB6>< < <EE?98B64A<S ;4>?48O649F CDBKAGR BEAB6G 8?S
6E9= 5G8GM9= D45BFO, BCD989?S9F A4CD46?9A<9 D4;6<F<S CDB8G>F4 <
CB@B749F <;59:4FP >D<F<K9E> A4 CB;8A<.
4K9EF69AA4S CB87BFB6>4 6>?RK49F 6 E95S A9 FB?P>B F9IA<K9E>GR EFBDBAG
6BCDBE4, AB < 7?G5B>B9 CBA<@4A<9 5<;A9E->BAF9>EF4, CB?P;B64F9?PE>F4 < EFD4F97<S 97B D94?<;4J<<.
"%BDBLB EC?4A<DB64AAO= CDB9>F A4CB?B6<AG 6OCB?A9A. D9@S,
CBFD4K9AAB9 A4 <EE?98B64A<9 < C?4A<DB64A<9, B>GC49FES @AB7B>D4FAB A4
QF4C9 D94?<;4J<<."

3.

AA?54>64=<5 < ??4=<@>64=<5
=4;87 F5;56>9 4G48F>@88
7GG5=85 :>=:G@5=F>6
?G5B>B9 <;GK9A<9 CBFD95ABEF9=,
B@C?9>EAO= 4A4?<; DOA>4 <
CB6989AK9E>BA>GD9AFAOI D9L9A<= 8?S
5B?96OI FBK9> CB?P;B64F9?9=.
6OS6?9A<S ?GKLF<> <
%B;84A<9 89F4?<;<DB64AAOI
6B;@B:ABEF9= 8?S
C9DEBA < >4DF CB?P;B64F9?PE>B7B
8<HH9D9AJ<4J<<.
CGF< (customer journey map).
G8<F <AF9DH9=EB6
DB6989A<9 <AF9D6PR <
>BA>GD9AFB6
BCDBEB6
A4?<; UX-D9L9A<=
A4?<; CB6989AK9E>9
84AAOI
%B;84A<9 CB?P;B64F9?PE>J<BA4?PABEF<
4DFO Q@C4F<< < user journey
?@545;5=85 F5;59 ?@>5:F4
'9F>4S HBD@G?<DB6>4 5<;A9E-J9?9= < KPI, >BFBDO9 5G8GF BCD989?SFP
GEC9I CDB9>F4 < A4CD46?SFP 8<;4=A9DE><9 D9L9A<S.
BEF4AB6>4 SMART-J9?9=
CD989?9A<9 @9FD<> GEC9I4
D<BD<F<;4J<S FD95B64A<=
?4A<DB64A<9 A/B F9EFB6

4.

%>784=89 B9E=8G9A:>7> 7484=8O (& )
&9IA<K9E>B9 ;484A<9 4 QFB 89F4?PAO= 8B>G@9AF, >BFBDO= E?G:<F @BEFB@
@9:8G <899= < 9U D94?<;4J<9=. 4K9EF69AAB EBEF46?9AAB9 & @<A<@<;<DG9F
D<E>< A98BCBA<@4A<S @9:8G 6E9@< GK4EFA<>4@< CDBJ9EE4 < B59EC9K<649F
98<AB9 6<89A<9 >BA9KAB7B D9;G?PF4F4.
;NG96O9 :><?>=9=BO & :
>8@>5=>9 >?8A4=89 DC=:F8>=4;4: 9F4?<;4J<S >4:8B= HGA>J<< E
G>4;4A<9@ ?B7<>< D45BFO < CB?P;B64F9?PE>64=8O: %C9J<H<>4J<< CB 5D9A8<A7G, J69FB6B= C4?<FD9,
F<CB7D4H<>9 < B5M9@G EF<?R
&9E=8G9A:89 >7@4=8G9=8O: &D95B64A<S > CDB<;6B8<F9?PABEF<,
EB6@9EF<@BEF< < 484CF<6ABEF<
@9<9==O9 @4<:8: '9F><9 898?4=AO 8?S >4:8B7B QF4C4 D45BFO
@4:B8G9A:89 ?@8<9@:
D< EB;84A<< >4?P>G?SFBD4 EFB<@BEF< GE?G7 6 & A9B5IB8<@B BC<E4FP A9
FB?P>B 6A9LA<= 6<8 HBD@O, AB < ?B7<>G D4EK9FB6, 64?<84J<R 84AAOI,
<AF9D4>F<6AO9 Q?9@9AFO < ECBEB5O BFB5D4:9A<S D9;G?PF4FB6.
%>65F: :;RG49F5 6 & ?@8<5@O
8=F5@4:F86=OE Q;5<5=F>6 8 edge cases 4
QF> ?><>65F 875564FP =54>?>=8<4=89 =4
QF4?5 @47@45>F:8.

5.

?4=8@>64=85
4 74?>7 GA?5E4
@9<O, ?>B@4G9==>9 =4 BI4B9;L=>9 ?;4=8@>64=89, 6A9784
>:C?49BAO :4G9AB6>< 8 A:>@>ABLN @94;874F88 ?@>9:B4.
%>@>H> ?@>8C<4==4O AB@4B978O 4 MB> DC=84<9=B, =4
:>B>@>< AB@>8BAO 69AL CA?9E 88749=-?@>9:B4.

6.

'4EFL 2: %>744=85
:4D:4E4 (Wireframe)
%FDG:FGD4 557 >F6;5G5=89
Wireframe 4 QFB E>9?9F 5G8GM97B <AF9DH9=E4, 789 >4:8O= Q?9@9AF ;4A<@49F
E6B9 @9EFB CB HGA>J<BA4?PAB= A9B5IB8<@BEF<, 4 A9 CB QEF9F<K9E><@
EBB5D4:9A<S@. -FBF QF4C >D<F<K9E>< 64:9A 8?S EB;84A<S ?B7<KAB= <
<AFG<F<6AB= EFDG>FGDO, >BFBD4S 5G89F E?G:<FP BEAB6B= 8?S 6E9I
CBE?98GRM4D>4E4 CB;6B?S9F EBED98BFBK<FPES A4 CB?P;B64F9?PE>B@ BCOF9,
<AHBD@4J<BAAB= 4DI<F9>FGD9 < HGA>J<BA4?PAOI E6S;SI @9:8G Q?9@9AF4@<
<AF9DH9=E4, A9 BF6?9>4SEP A4 6<;G4?PAB9 BHBD@?9A<9.

7.

'F> F4>>5 >4D>4E?
%I5@4F8K5E>B5 87B5D465A85
57 687G4?PAB7B BHBD@?5A8O
OEFDO5 8F5D4J88
Wireframe CD98EF46?S9F EB5B=
4D>4E A4@9D9AAB ?<L9A J69FB6,
DBEFBF4 wireframe'B6 CB;6B?S9F
GCDBM9AAGR EI9@G D4ECB?B:9A<S
<;B5D4:9A<=, F<CB7D4H<>< <
5OEFDB 6ABE<FP <;@9A9A<S,
Q?9@9AFB6 <AF9DH9=E4, 789 >4:8O=
8DG7 <@99F K9F>B BCD989?9AAGR
CB;6B?S9F EBED98BFBK<FPES
>B@CBAB6>< <
HGA>J<R < @9EFB 6 B5M9=
<E>?RK<F9?PAB A4 EFDG>FGD9 <
Q>EC9D<@9AF<DB64FP E
EFDG>FGD9 EFD4A<JO.
HGA>J<BA4?PABEF<.
D4ECB?B:9A<9@ Q?9@9AFB6.
EAB6AO9 Q?9@9AFO 6>?RK4RF:
ECB?P;GRFES CDBEFO9
-FBF CB8IB8 ;A4K<F9?PAB Q>BAB@<F
A46<74J<BAAO9 5?B><, >BAF9AFAO9
79B@9FD<K9E><9 HBD@O, ?<A<< <
6D9@S < D9EGDEO, F4> >4>
B5?4EF<, HBD@O 6;4<@B89=EF6<S,
placeholder'O 8?S B5B;A4K9A<S
<;@9A9A<S 6 EFDG>FGD9 A4 D4AA9@
CD<;O6O > 89=EF6<R (CTA) <
D4;?<KAOI F<CB6 >BAF9AF4 <
QF4C9 7BD4;8B 89L96?9, K9@
E?G:95AGR <AHBD@4J<R.
<AF9D4>F<6AOI Q?9@9AFB6.
C9D989?>4 7BFB6B7B 8<;4=A4.

8.

D5<<GM5EF64 >4D>4E4
'?GGH5AA4O >B@@GA8>4F8O
Wireframe E?G:<F GA<69DE4?PAO@ S;O>B@ @9:8G 8<;4=A9D4@<,
D4;D45BFK<>4@<, @9A98:9D4@< < ;4>4;K<>4@<. DBEF4S
6<;G4?<;4J<S EFDG>FGDO CB@B749F 6E9@ GK4EFA<>4@ CDB9>F4
7B6BD<FP A4 B8AB@ S;O>9 < <;5974FP A98BCBA<@4A<S.
8<AB9 CBA<@4A<9 EFDG>FGDO CDB9>F4
!A<:9A<9 >B?<K9EF64 <F9D4J<=
B?99 QHH9>F<6AO9 EB69M4A<S
&5EF8DB64A85 ?B78>8
4D>4EO CB;6B?SRF CDBF9EF<DB64FP ?B7<>G A46<74J<<,
<AHBD@4J<BAAGR 4DI<F9>FGDG < CB?P;B64F9?PE><9 EJ9A4D<<
9M9 8B EB;84A<S 6<;G4?PAB7B 8<;4=A4, KFB Q>BAB@<F 6D9@S <
D9EGDEO.
4AA99 6OS6?9A<9 CDB5?9@ UX
CF<@<;4J<S CB?P;B64F9?PE>BAJ9CJ<< CDB8G>F4
AEFDG@5AFO D47D45BF>8
!B6D9@9AAO9 <AEFDG@9AFO 8?S EB;84A<S wireframe'B6
CD98?474RF 5B74FO= HGA>J<BA4? 8?S 5OEFDB7B
CDBFBF<C<DB64A<S < EB6@9EFAB= D45BFO >B@4A8O.
Balsamiq: DBEFBF4 < E>BDBEFP EB;84A<S
Sketch: DBH9EE<BA4?PAO9 6B;@B:ABEF<
Figma: !B6@9EFA4S D45BF4 6 D94?PAB@ 6D9@9A<

9.

D8<5D wireframe 655-E49F4
4AAO= wireframe 89@BAEFD<DG9F >?4EE<K9E>GN EFDG>FGDG >BDCBD4F<6AB7B E4=F4 E K9F>B 6OD4:9AAB= <9D4DI<9= <AHBD@4J<< <
?B7<KAO@ D4ECB?B:9A<9@ HGA>J<BA4?PAOI 5?B>B6.
;RG56O5 Q;5<5=FO:
$G=:F8>=4;P=O5 7>=O:
9DIAOO A46<74J<O E ?B7BF<CB@
BA4 CD<6?9K9A<O 6A<@4A<O
Hero-E9>J<O E BEAB6AO@ CD<;O6B@
AHBD@4J<BAA4O ;BA4
?B>< >BAF9AF4 E ;47B?B6>4@<
BA4 6;4<@B89=EF6<O
B>B64O C4A9?P E 8BCB?A<F9?PAB= <AHBD@4J<9=
%?G:95A4O ;BA4
$GF9D E >BAF4>F4@< < EEO?>4@<

10.

'4EFL 3: %B784A89
@4>9F4 (Mockup)
87G4?874F8O 5G8GM97B CDB8G>F4
Mockup CD98EF46?S9F EB5B= E?98GRI<= GDB69AP 89F4?<;4F<< CBE?9
wireframe 4 QFB EF4F<GAB9, AB CB?ABEFPR BHBD@?9AAB9 <;B5D4:9A<9
5G8GI97B <AF9DH9=E4 EB 6E9@< 6<;G4?PAO@< Q?9@9AF4@<, F69F4@<,
F<CB7D4H<>B= < >BAF9AFB@.
4 QFB@ QF4C9 >BAF9CF<S CD96D4I49FES 6 >BA>D9FAB9 6<;G4?PAB9 D9H9A<9,
>BFBDB9 @B:AB CB>4;4FP ;4>4;G<>G, <ECB?P;B64FP 8?S EB7?4EB64A<S 8<;4=A4
< C9D984FP 6 D4;D45BF>G >4> reference 8?S H<A4?PAB7B CDB8G>F4.

11.

4>5F 4 MF>...
B?AB5 687G4?LAB5
BHBD@?5A85
D575AF4F8O >BAF5CF88
AEFDG@5AF EB7?4EB64A8O
Mockup E?G:<F BEAB6AO@
Mockup S6?S9FES >?RK96O@
%F4F<KAB9 <;B5D4:9A<9 <AF9DH9=E4,
<AEFDG@9AFB@ 8?S CD9;9AF4J<<
8B>G@9AFB@ 8?S EB7?4EB64A<S
6>?RK4RM99 H<A4?PAO9 J69FB6O9
8<;4=A9DE>4;K<>G <
8<;4=A4 E ;4>4;K<>B@. A GEFD4AS9F
D9L9A<S, F<CB7D4H<>G, <>BA><,
>B@4A89 D4;D45BF><. A CB;6B?S9F
EG5N9>F<6ABEFP 6BECD<SF<S < 849F
<;B5D4:9A<S < 6E9 BEF4?PAO9
CB?GK<FP B5D4FAGR E6S;P < 6A9EF<
K9F>B9 CBA<@4A<9 FB7B, KFB 5G89F
6<;G4?PAO9 Q?9@9AFO, >BFBDO9 5G8GF
>BDD9>F<DB6>< 8B A4K4?4
D94?<;B64AB.
CD<EGFEF6B64FP 6 7BFB6B@ CDB8G>F9.
CDB7D4@@<DB64A<S.
BF?<K<9 BF wireframe, mockup 849F
4K9EF69AAO= mockup CB@B749F 6E9@
@9:8G 8<;4=A9D4@< <
CB?AB9 CD98EF46?9A<9 B FB@, >4> 5G89F
GK4EFA<>4@ CDB9>F4 6<;G4?<;<DB64FP
D4;D45BFK<>4@<, E?G:4 89F4?PAO@
6O7?S89FP >BA9KAO= D9;G?PF4F.
>BA9KAO= D9;G?PF4F < CD<A<@4FP
F9IA<K9E><@ ;484A<9@ 8?S 69DEF><.
B5BEAB64AAO9 D9L9A<S.
B@B749F <;59:4FP A98BCBA<@4A<S

12.

@4>B8G5A>85 A>65BO ?> A>744=8N <4>5B>6
01
02
03
A?>;P7C9B5 :4G5AB65==O5
74?>;=8B5;8
%>7449B5 687C4;P=CN 85@4@E8N
ECB?P;G=F9 D4;@9DO, J69F4, >BAFD4EFO <
O55@8B5 ?>4E>4OM85
8=AB@C<5=BO
D<@9AS=F9 BE@OE?9AAO= placeholder-
CDBEFD4AEF6B 8?S EB;84A<S K9F>B=
!B6D9@9AAO9 <AEFDG@9AFO 8<;4=A4
>BAF9AF 6@9EFB EF4A84DFAB7B Lorem Ipsum.
6<;G4?PAB= <9D4DI<<, >BFBD4S 5G89F
CD98?474RF @BMAO= HGA>J<BA4? 8?S
ECB?P;G=F9 D94?<EF<KAO9 <;B5D4:9A<S
A4CD46?SFP 6A<@4A<9 CB?P;B64F9?S >
EB;84A<S CDBH9EE<BA4?PAOI mockup'B6 E
< 84AAO9, >BFBDO9 EBBF69FEF6GRF
A4<5B?99 64:AO@ Q?9@9AF4@.
6B;@B:ABEFS@< EB6@9EFAB= D45BFO <
>BAF9>EFG CDB9>F4.
BAFD4EF 8?S 6O89?9A<S >?RK96OI
E<EF9@4F<;4J<< >B@CBA9AFB6.
9?964AFAO9 <;B5D4:9A<S 8?S BFD4E?<
Q?9@9AFB6
Figma: !B6@9EFA4S D45BF4 <
94?<EF<KAO9 <@9A4 < 84AAO9
"<CB7D4H<K9E>4S <9D4DI<S ;47B?B6>B6
>B@CBA9AFO
BDD9>FA4S 8?<A4 F9>EFB6OI 5?B>B6
DGCC<DB6>4 E6S;4AAOI Q?9@9AFB6
Adobe XD: AF97D4J<S E Creative Suite
Sketch: B74F4S Q>BE<EF9@4 C?47<AB6

13.

'4ABP 4:
@>B>B<?<@>64=<5
B AB4B<G=>7> <4>5B4 >
<=B5@4>B<6=><C >?OBC
DBFBF<C<DB64A<9 4 QFB H<A4?PAO= QF4C C9D98 C9D984K9= CDB9>F4 6
D4;D45BF>G, 789 EF4F<KAO9 @4>9FO B:<64RF 5?47B84DS <AF9D4>F<6AO@
Q?9@9AF4@, 4A<@4J<S@ < C9D9IB84@ @9:8G Q>D4A4@<.
-FBF QF4C CB;6B?S9F EB;84FP @4>E<@4?PAB CD<5?<:9AAO= > D94?PABEF<
CB?P;B64F9?PE><= BCOF, CDBF9EF<DB64FP 6E9 EJ9A4D<< 6;4<@B89=EF6<S <
6OS6<FP CBF9AJ<4?PAO9 CDB5?9@O 8B A4K4?4 8BDB7BEFBSM9= D4;D45BF><.

14.

'B> B4>>5 ?@>B>B<??
DBFBF<C 4 QFB <AF9D4>F<6A4S @B89?P CDB8G>F4, >BFBD4S
<@<F<DG9F CB6989A<9 D94?PAB7B CD<?B:9A<S <?< 695-E4=F4. A
CB;6B?S9F CB?P;B64F9?S@ >?<>4FP CB >ABC>4@, ;4CB?ASFP
HBD@O, C9D9@9M4FPES @9:8G EFD4A<J4@< < 6OCB?ASFP 8DG7<9
89=EF6<S, >4> 6 7BFB6B@ CDB8G>F9.
?NG56O5 E4@4>B5@<AB<>< ?@>B>B<?4:
AF5D4>F<6ABEFL: -?9@9AFO D947<DGRF A4 89=EF6<S
CB?P;B64F9?S
46<74F<O: B;@B:ABEFP C9D9@9M9A<S @9:8G Q>D4A4@<
A<@4F<<: ?46AO9 C9D9IB8O < @<>DB4A<@4J<<
$54?<EF<GABEFL: 4>E<@4?PAB9 CD<5?<:9A<9 >
H<A4?PAB@G CDB8G>FG
&5==>ABP ?@>B>B<?4:
DBFBF<C Q>BAB@<F 6D9@S < 89AP7<, CB;6B?SS 6OS6<FP BL<5><
6 CB?P;B64F9?PE>B@ BCOF9 A4 D4AA9@ QF4C9, >B784 B89.
46=>: DBFBF<C A9 ;4@9AO9F F9EA<G9E>GN D4;D45BF>G,
AB E?G:<F 89F4?PAO@ DG>B6B8EF6B@ 8?O
CDB7D4@@<EFB6 < QA-F9EF<DB6M<>B6.

15.

<4O ?@>F>F<?>6
87:>9 F>G=>EF8 (Low-fidelity)
DBEFO9, 5OEFDB EB;84649@O9 CDBFBF<CO, >BFBDO9 HB>GE<DGRFES A4
BEAB6AB= ?B7<>9 6;4<@B89=EF6<S < CB?P;B64F9?PE>< < EF<>9DO
DBEFO9 >?<>459?PAO9 wireframe'O
!I9@4F<KAO9 J<HDB6O9 CDBFBF<CO
OEFDB9 F9EF<DB64A<9 >BAJ9CJ<=
D5<<GM5EF64: OEFDBF4 EB;84A<S, A<;>4S EFB<@BEFP, 6B;@B:ABEFP
@AB:9EF69AAOI <F9D4J<=.
OE>:>9 F>G=>EF8 (High-fidelity)
9F4?PAO9 <AF9D4>F<6AO9 CDBFBF<CO E H<A4?PAO@ 8<;4=AB@,
4A<@4J<S@< < @4>E<@4?PAB D94?<EF<KAO@ CB6989A<9@.
B?ABJ69FAO9 <AF9DH9=EO
!?B:AO9 4A<@4J<< < C9D9IB8O
AF9D4>F<6AO9 Q?9@9AFO GCD46?9A<S
94?<EF<KA4S <@<F4J<S HGA>J<BA4?PABEF<
=EFDG<5=FO: Adobe XD, Figma, Principle, Framer 4 CD98?474RF
CDB86<AGFO9 6B;@B:ABEF< 8?S EB;84A<S E?B:AOI <AF9D4>F<6AOI
CDBFBF<CB6.

16.

@4>B8G5A>4O @45>B4: A>744=85 ?@>B>B8?4
-B4? 1: ?4=<@>64=<5 AF5=4@<56
1
CD989?<F9 >?RK96O9 CB?P;B64F9?PE><9 EJ9A4D<< <
Q>D4AO, >BFBDO9 A9B5IB8<@B 6>?RK<FP 6 CDBFBF<C.
%BED98BFBKPF9EP A4 >D<F<K9E>4> CB?P;B64F9?<
2
-B4? 2: >546?5=<5 <=B5@4>B<6=>AB<
%B;84=F9 E6S;< @9:8G Q>D4A4@<, 8B546PF9 4A<@4J<<
5G8GF 6;4<@B89=EF6B64FP E CDB8G>FB@ 8?S 8BEF<:9A<S
C9D9IB8B6 < A4EFDB=F9 CB6989A<9 <AF9D4>F<6AOI
E6BE<@4?PAB <@<F<DB64?
?46A4S EFD4A<J4 < A46<74J<S: DB8G@4=F9, >4>
D94?PAO= CDB8G>F. '89?<F9 BEB5B9 6A<@4A<9
CB?P;B64F9?< 5G8GF BD<9AF<DB64FPES 6 CD<?B:9A<<
@<>DB4A<@4J<S@ < feedback'G 8?S CB?P;B64F9?S, KFB5O
<?< A4 E4=F9.
E89?4FP 6;4<@B89=EF6<9 <AFG<F<6AB CBASFAO@ <
DBJ9EE D97<EFD4J<</46FBD<;4J<<: CF<@<;<DG=F9
CD<SFAO@.
L47< 8?S 5OEFDB7B < 59;BC4EAB7B 8BEFGC4.
4EFDB=>4 C9D9IB8B6 @9:8G EFD4A<J4@<:
EAB6AO9 HGA>J<BA4?PAO9 Q>D4AO: O89?<F9
CD989?<F9 ?B7<>G C9D9IB84 BF B8AB7B Q>D4A4 >
7?46AO9 HGA>J<< < 89=EF6<S, >BFBDO9 8B?:9A
8DG7B@G.
6OCB?ASFP CDBFBF<C.
A<@4J<< >ABCB> < HBD@: B546PF9 6<;G4?PAO9
$BD@O < CDBJ9EEO CB>GC></5DBA<DB64A<S:
QHH9>FO 8?S 89=EF6<= CB?P;B64F9?S (A4:4F<9,
'598<F9EP, KFB CB?P;B64F9?PE><= CGFP @4>E<@4?PAB
A46989A<9).
7?48><= < CBASFAO=.
Hover-QHH9>FO < EBEFBSA<S Q?9@9AFB6: B>4:<F9
D4>F<K9E><= EB69F: ECB?P;G=F9 @9FB8 User Flow
CB?P;B64F9?R, >4><9 Q?9@9AFO 4>F<6AO < A4 KFB BA
(CB?P;B64F9?PE>B6) < Storyboarding
@B:9F A4:4FP.
(D4E>48DB6><) 8?S 6<;G4?<;4J<< >4:8B7B L474
4?<84J<S HBD@ < EBB5M9A<S B5 BL<5>4I:
6;4<@B89=EF6<S. B8G@4=F9 B 6B;@B:AOI BL<5>4I <
D98BEF46PF9 K9F><9 < E6B96D9@9AAO9 CB8E>4;>< 6
4?PF9DA4F<6AOI CGFSI CB?P;B64F9?S.
E?GK49 A9>BDD9>FAB7B 66B84 84AAOI.
AEFDG@9AFO: <47D4@@O User Flow @B:AB EB;8464FP 6
<>DB4A<@4J<<: ECB?P;G=F9 < >BAF9AF4 <?<
CDBEFB 8?S CD<84A<S :<6BEF< <AF9DH9=EG.
-B4? 3: &5AB<@>64=<5 < <B5@4F<<
DB698<F9 CB?P;B64F9?PE>B9 F9EF<DB64A<9 CDBFBF<C4,
EB59D<F9 B5D4FAGR E6S;P < 6A9E<F9 A9B5IB8<@O9
G?GKL9A<S. ECB?P;G=F9 >4> @B89D<DG9@O9, F4> <
A9@B89D<DG9@O9 F9EFO 8?S CB?GK9A<S >B@C?9>EAB=
>4DF<AO. &9?P 4 6OS6<FP CDB5?9@O R;45<?<F< <
CB8F69D8<FP, KFB 8<;4=A EBBF69FEF6G9F CBFD95ABEFS@
CB?P;B64F9?9=.
A/B F9EF<DB64A<9 >?RK96OI Q?9@9AFB6: DB69DS=F9
D4;?<KAO9 64D<4AFO 8<;4=A4, KFB5O BCD989?<FP
A4<5B?99 QHH9>F<6AO=.
A4?<; CB?P;B64F9?PE>B7B CB6989A<S: 45?R84=F9
;4 F9@, >4> CB?P;B64F9?< 6;4<@B89=EF6GRF E
CDBFBF<CB@, >G84 BA< >?<>4RF, 789 <ECOFO64RF
;4FDG8A9A<S.
%5BD >4K9EF69AAB= < >B?<K9EF69AAB= B5D4FAB=
E6S;<: ECB?P;G=F9 BCDBEO, <AF9D6PR < @9FD<><
(A4CD<@9D, 6D9@S 6OCB?A9A<S ;484K<, >BQHH<J<9AF
GEC9LABEF<).
F9D4F<6AO9 G?GKL9A<S A4 BEAB69 84AAOI:
ECB?P;G=F9 CB?GK9AAO9 84AAO9 8?S 8BD45BF><
CDBFBF<C4 < CB6FBDAB7B F9EF<DB64A<S. &<>?
"%B;84A<9-&9EF<DB64A<9- F9D4J<S" 8B?:9A
CB6FBDSFPES 8B F9I CBD, CB>4 BEAB6AO9 CDB5?9@O A9
5G8GF D9L9AO.
D4>F<K9E><= EB69F: 4C<L<F9 E9EE<< F9EF<DB64A<S (E
EB7?4E<S CB?P;B64F9?S) 8?S CBE?98GRM97B 4A4?<;4. 9
5B=F9EP 6ABE<FP ;A4K<F9?PAO9 <;@9A9A<S 6 CDBFBF<C A4
BEAB69 B5D4FAB= E6S;< 4 QFB 89L96?9, K9@ <ECD46?SFP
BL<5>< 6 7BFB6B@ CDB8G>F9.
AEFDG@9AFO: Lookback, UserTesting, Maze 8?S
A9@B89D<DG9@OI F9EFB6. Google Meet <?< Zoom 8?S
@B89D<DG9@OI G84?9AAOI E9EE<=.
3
D4>F<K9E><= EB69F: 4KA<F9 E 54;B6B=
<AF9D4>F<6ABEF< < CBEF9C9AAB 8B546?S=F9 5B?99
E?B:AO9 4A<@4J<<. B@A<F9 B J9?<: E89?4FP CDBFBF<C
@4>E<@4?PAB D94?<EF<KAO@ 8?S F9EF<DB64A<S, AB A9
FD4F<FP E?<L>B@ @AB7B 6D9@9A< A4 89F4?<, >BFBDO9
@B7GF 5OFP <;@9A9AO.
AEFDG@9AFO: Figma (D9:<@ Prototype), Adobe XD,
Principle, ProtoPie, Axure RP.

17.

4>?NG9A<9: BF <89< > 7BFB6B@G CDBFBF<CG
AA?54>64=<5
4@>4A
?G5B>B9 <;GK9A<9 CB?P;B64F9?9=, DOA>4 < 5<;A9E-J9?9=
!FDG>FGD4 < ?B7<>4 59; 6<;G4?PAOI BF6?9K9A<=
4>5B
@>B>B<?
B?AB9 6<;G4?PAB9 BHBD@?9A<9 <AF9DH9=E4
AF9D4>F<6A4S @B89?P 7BFB6B7B CDB8G>F4
?NG96O9 CD<AF<CO GEC9E4:
D4>F<G9E><9 D9>B@9A84F<<:
F5D4F86ABEFL: 4:8O= QF4C 8BCGE>49F 6B;6D4F >
B>G@9AF<DG=F9 D9L9A<S < B5BEAB64A<S
CD98O8GM9@G 8?S 6A9E9A<S G?GKL9A<=
!B;8464=F9 5<5?<BF9>< >B@CBA9AFB6
B?L7B64F5?5F5AFD8GABEFL: E9 D9L9A<S BEAB64AO A4
ECB?P;G=F9 8<;4=A-E<EF9@O
CBFD95ABEFSI >BA9KAOI CB?P;B64F9?9=
%B6@5EFA4O D45BF4: B6?9K9A<9 6E9I EF9=>IB?89DB6 6
DB6B8<F9 D97G?SDAO9 D9FDBEC9>F<6O
CDBJ9EE EB;84A<S < 64?<84J<<
&5EF8DB64A85: 97G?SDA4S CDB69D>4 7<CBF9; E D94?PAO@<
CB?P;B64F9?S@<
" 4EF9DEF6B 6 EB;84A<< @4>9FB6 < CDBFBF<CB6 CD<IB8<F FB?P>B E CD4>F<>B=. 4:8O= CDB9>F 4 QFB 6B;@B:ABEFP BFFBK<FP A46O><
< EB;84FP ?GKL<= CB?P;B64F9?PE><= BCOF."
B@A<F9: >4K9EF69AAO= 8<;4=A-CDBJ9EE 4 QFB <A69EF<J<S 6 GEC9I CDB8G>F4. D9@S < GE<?<S, ;4FD4K9AAO9 A4 >4:8B@ QF4C9,
@AB7B>D4FAB B>GC4RFES EA<:9A<9@ D<E>B6, G?GKL9A<9@ CB?P;B64F9?PE>B7B BCOF4 < 8BEF<:9A<9@ 5<;A9E-J9?9=.

English Русский Правила