Prototyping 2

9 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
One-time Fee
$99.99
List Price:  $139.99
You save:  $40
€94.93
List Price:  €132.91
You save:  €37.97
£79.03
List Price:  £110.65
You save:  £31.61
CA$140.06
List Price:  CA$196.09
You save:  CA$56.03
A$153.89
List Price:  A$215.46
You save:  A$61.56
S$134.42
List Price:  S$188.19
You save:  S$53.77
HK$778.15
List Price:  HK$1,089.44
You save:  HK$311.29
CHF 88.46
List Price:  CHF 123.85
You save:  CHF 35.38
NOK kr1,106.89
List Price:  NOK kr1,549.69
You save:  NOK kr442.80
DKK kr708.13
List Price:  DKK kr991.41
You save:  DKK kr283.28
NZ$169.76
List Price:  NZ$237.67
You save:  NZ$67.91
د.إ367.26
List Price:  د.إ514.19
You save:  د.إ146.92
৳11,913.94
List Price:  ৳16,679.99
You save:  ৳4,766.05
₹8,449.26
List Price:  ₹11,829.30
You save:  ₹3,380.04
RM444.65
List Price:  RM622.53
You save:  RM177.88
₦168,698.12
List Price:  ₦236,184.12
You save:  ₦67,486
₨27,703.14
List Price:  ₨38,785.50
You save:  ₨11,082.36
฿3,443.25
List Price:  ฿4,820.69
You save:  ฿1,377.44
₺3,462.60
List Price:  ₺4,847.78
You save:  ₺1,385.18
B$598.25
List Price:  B$837.57
You save:  B$239.32
R1,818.71
List Price:  R2,546.27
You save:  R727.55
Лв185.54
List Price:  Лв259.76
You save:  Лв74.22
₩139,623.30
List Price:  ₩195,478.21
You save:  ₩55,854.90
₪365.09
List Price:  ₪511.14
You save:  ₪146.05
₱5,872.56
List Price:  ₱8,221.82
You save:  ₱2,349.26
¥15,186.98
List Price:  ¥21,262.38
You save:  ¥6,075.40
MX$2,025.91
List Price:  MX$2,836.36
You save:  MX$810.44
QR363.39
List Price:  QR508.76
You save:  QR145.37
P1,362.02
List Price:  P1,906.89
You save:  P544.86
KSh12,948.70
List Price:  KSh18,128.70
You save:  KSh5,180
E£4,970.06
List Price:  E£6,958.29
You save:  E£1,988.22
ብር12,601.88
List Price:  ብር17,643.14
You save:  ብር5,041.25
Kz91,089.09
List Price:  Kz127,528.37
You save:  Kz36,439.28
CLP$97,725.22
List Price:  CLP$136,819.22
You save:  CLP$39,094
CN¥725.08
List Price:  CN¥1,015.15
You save:  CN¥290.06
RD$6,009.89
List Price:  RD$8,414.09
You save:  RD$2,404.19
DA13,359.34
List Price:  DA18,703.61
You save:  DA5,344.27
FJ$226.94
List Price:  FJ$317.73
You save:  FJ$90.78
Q769.20
List Price:  Q1,076.91
You save:  Q307.71
GY$20,858.96
List Price:  GY$29,203.38
You save:  GY$8,344.42
ISK kr13,737.62
List Price:  ISK kr19,233.22
You save:  ISK kr5,495.60
DH998.96
List Price:  DH1,398.59
You save:  DH399.62
L1,830.82
List Price:  L2,563.22
You save:  L732.40
ден5,834.63
List Price:  ден8,168.72
You save:  ден2,334.08
MOP$798.95
List Price:  MOP$1,118.57
You save:  MOP$319.61
N$1,808.86
List Price:  N$2,532.48
You save:  N$723.61
C$3,668.81
List Price:  C$5,136.49
You save:  C$1,467.67
रु13,468.97
List Price:  रु18,857.10
You save:  रु5,388.12
S/375.25
List Price:  S/525.36
You save:  S/150.11
K402.01
List Price:  K562.83
You save:  K160.82
SAR375.60
List Price:  SAR525.86
You save:  SAR150.25
ZK2,719.29
List Price:  ZK3,807.12
You save:  ZK1,087.82
L472.45
List Price:  L661.45
You save:  L189
Kč2,399.23
List Price:  Kč3,359.02
You save:  Kč959.78
Ft39,362.83
List Price:  Ft55,109.54
You save:  Ft15,746.71
SEK kr1,093.94
List Price:  SEK kr1,531.56
You save:  SEK kr437.61
ARS$100,789.45
List Price:  ARS$141,109.26
You save:  ARS$40,319.81
Bs688.98
List Price:  Bs964.60
You save:  Bs275.62
COP$439,886.78
List Price:  COP$615,859.09
You save:  COP$175,972.31
₡50,922.11
List Price:  ₡71,293
You save:  ₡20,370.88
L2,521.57
List Price:  L3,530.31
You save:  L1,008.73
₲779,303.12
List Price:  ₲1,091,055.54
You save:  ₲311,752.42
$U4,282.79
List Price:  $U5,996.09
You save:  $U1,713.29
zł409.03
List Price:  zł572.67
You save:  zł163.63
Already have an account? Log In

Transcript

Let's now go ahead and animate these other screens. So for the category screen, if we jump right here, it will take us to the search screen. And maybe we can go right here, for example, because that's what we want. And instead of the slide right, you can choose to dissolve when I click inside and select this icon, so for the or others, I can go to order details use dissolve maybe and you can always jump back and click on some of these icons and see what you did. So you can jump see where it is right here. And you can see it slide right so you can use exactly the same animation for it.

So you can click on it, zoom in a bit closer see if it is selected it is and as you can see, it's right to here instead of the dissolve slide right so that you can use exactly the same animation In every single screen. Now, finally, let's use the menu. So click right here, jump into the menu. So tap, instead of the transition, you can choose overlay. And you can go to the slide down. Same thing, look at it for the home screen.

And you can always check it out and see if it did just that. So instead of the dissolve as it is right here, maybe we can choose to slide down just to have that consistency in our screen. So if I click right here, click on the menu, it will be slide down and if I click somewhere around, it will take us here, but instead of the x, or right here because it always takes us to the home screen, we want to remove it. So when we click on any of these other screens, it wants to take us back to home but stay on this particular screen. So you will find this from time to time. So when you're animating, click right here, then somewhere around here, it will just close it and not come back to the previous screen that you were animating.

Finally, for this screen, let's click on the sort by, and it will take you to this screen. And instead of the overlay, let's choose transition. And what we want, for example is, let's choose slide right, and see how that looks like. Click right here. So sort by slide right, I think it looks good. And same thing like we did before.

So we want to remove this X icon and try again. So click right here. So slide right and as you can see, now we want to add some additional screens right here so that we can apply the selection and that way it will bring us back to this particular screen. So now that we animated all of this, maybe we want to click on the logo, which will take us to the home screen, so tap. Maybe you can use auto animate, but let's choose transition. And maybe you can choose diesel.

So wherever you have the logo, it will take you to the home screen. So now let's choose this search filters and let's animate it but before we do hit Ctrl, or Command S so that we can save our project and our changes. So what we want for this screen is simply jump back to the design part, hold the Alt or Option key, jump down below. And what we want is to have them closed and to have them opened and finally to have them applied. So it will be in this one. Now this button should be grayed out for this first part.

So choose this color or maybe even this color. I'd see Yeah, and for the text, select the darker color. So something like this, choose the same settings for this one because it's going to be grayed out and then when you apply when you make your selections, it will show you apply selection button which will take you back to this screen. So, what we want for the first one is to change some of this and edit some of it. So, what you want for the price, Down Arrow, you can flip it up. So because it will be closed and all of this is going to be hidden.

So instead of the price and the range, all of it will be hidden materials, same thing. So locate the down arrow and flip it up. So all materials will go right here so that we can have the same spacing. And you will hide everything that's located inside of this materials section. And finally washable and method mechanism, you can move those two sections up and have the same spacing as it was for all of these other ones, like so. So as you can see all of them are closed.

And now when you click on some of them, so we need to click on the price and on materials to open those sections up. So pricing materials are opened, but let's remove this frame and just leave the text so when people click on this frame, it will show them and be opened. And you can make a few more changes. So for example, maybe we can have it be closed on this screen and then make one more screen. So like this. Something like here.

Yeah. And now This will going to be our final screen. And for this one, let's use the same settings as we did before. So like this, and I'm going to show you what I mean. So on this first one, all of them are closed. On this second one, just this first one is opened.

So let's jump in and close the materials. So once again, Down Arrow should be up. And this ladder and clot is going to be hidden. And you can move all of these up a bit and make them 20 pixels from them. So apart 20 pixels on all of them. So this is going to be our first one.

On our second one, it's going to be open but just the frame will be hidden. And finally right here, when you select it, it's going to appear and it's going to show you this frame. So now let's go ahead and animate all of this. So What you can do is when you click sort by, it will take you to this screen. So let's jump back to prototypes. So sort by this screen, and let's test it out quickly.

See if it works, it does. And now what we can do is click on the price on the arrow, and it will show you this screen. So tap transition will be auto animate because we want that nice animation. And once again, when you click on these materials, for example, and you can zoom in a bit closer if you cannot select the icon directly, and use the same auto animate is out search filters right here. And finally, when you click on the lighter, same animations right here, it will take you here and finally when you click Apply selection, it will take you back to this screen and for it, we will choose transition and for the transition you can choose dissolve So let's test everything out, hit play. So when I click sort by, it will take us to this screen, click price, it will open up this price element, click on the materials, it will open up this click on the leather, it will show you it as a selection and finally apply selection and it will take you back to this screen.

So that's basically it for this video. As you can see, sometimes you have to make some additional screens and some additional changes. But it's quite fun because you can make these animations. And finally, if you want to close all of them back up, you can just go the other way around and click on these arrows and go back and reverse engineering to go back to this screen. But I found it a lot easier just to click Apply selections, because that's what users will do. In the next screen, we're going to jump in and do some animations on the room combination.

And I'm going to show you how you can make some nice animation to the background image as well. So I'll see you there

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.