Prototyping 4

4 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 us now animate this selected item screens. But before we do, because this is quite a long one, we don't want to make a copy right here below, but rather on the right. So what you can do is move some of these screens, just jump into the design part of it more than right here, and then simply do Ctrl D for this one, and then simply drag them back into position like so. So why we did this is we want to make this one so this is our first one without any selections on it. Then we want to make the second one for the color, and then the third one for the size. So leave this one like it is this one, just leave the color and we're going to height for the size.

We're going to hide the frame like so. And instead of apply selection, if you remember we changed it to buy now. So we're going to do that for both of these. buttons. So we're going to type in by now Ctrl C, they'll click right here, Control V, just to save a bit more time, you can close all of them up. And now we can do our animation.

So click on selected item jump into the prototyping mode. And what we can do is for this arrow, if I select it and drag it back, we can go back to the room combination screen, and it's going to be tap transition instead of the dissolve. Let's like left and see how that looks like. So hit play. And when I click right here, it will slide left. Or maybe we can change it to slide right because it will make a bit more sense.

So click right here, click play, and hit slide right as you can see, it does. So now what we can do is when you click on this color, right here, it will take you to this screen and instead of transition We want to choose auto animate is out three seconds, it looks good. So now if we click right here, hit play and select the color. As you can see, it moves just a bit. And it introduced this Buy Now button. So now what we want is hit right here, so that we can make a selection for the size.

Leave all of it as it is because we want exactly the same animation. So hit on the first one. And when I hit here, you can see the animation is just slightly moving this color up, click right here. As you can see, now we have this selection. And finally what we need is a Buy Now button. So when you click right there, maybe we want to include one more screen right here, so that we can animate this, but let's move it from here to order details.

So click right here. And then right here, tap. We don't want autonomy to own transition. We want Dissolve is out three seconds. So click right here, hit play. And when you click by now, it will take you to this screen.

But we want to do the same from here, like so, because maybe people don't want to make a selection for the size. Maybe they want to go for the default size of whichever size it is. So maybe they can click Buy Now from here instead of from here, but majority of people will jump in right here. Now if it was 59 centimeters, in this case, this price right here will update and then it will update here as well. But because we kept it simple, with 124 for the price, as you can see it's same right here, total is this one right here. So we want to keep it as simple as possible for this process.

So I think it looks nice. So once again, click right here, hit play, just so that we can see how it looks like and you can see you can also scroll down and read more about this product. It looks nice. So when I click right here, slight animation occurs, you can hit sighs so right here, and you can click Buy Now it will take you to this screen. Now finally, we want to animate these three icons. So click on them separately, like so it will take you to this screen.

So dissolve looks well, right here. And finally right here. So when I click on any of them, and then click on the icon, it will take me to this screen. So I think it looks nice. It looks simple, because that's what the client wanted in the first place. And I think we did a good job for these screens.

Now in the next video, we're going to jump into order details and create some nice animation for the swiping and removing of some of these items from the cart. 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.