Creating Wireframes 7

7 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
€92.78
List Price:  €129.90
You save:  €37.11
£79.40
List Price:  £111.16
You save:  £31.76
CA$136.11
List Price:  CA$190.56
You save:  CA$54.44
A$154.13
List Price:  A$215.78
You save:  A$61.65
S$135.08
List Price:  S$189.12
You save:  S$54.03
HK$782.28
List Price:  HK$1,095.23
You save:  HK$312.94
CHF 90.61
List Price:  CHF 126.85
You save:  CHF 36.24
NOK kr1,085.23
List Price:  NOK kr1,519.37
You save:  NOK kr434.13
DKK kr692.01
List Price:  DKK kr968.84
You save:  DKK kr276.83
NZ$167.80
List Price:  NZ$234.94
You save:  NZ$67.13
د.إ367.19
List Price:  د.إ514.08
You save:  د.إ146.89
৳10,976.08
List Price:  ৳15,366.96
You save:  ৳4,390.87
₹8,339.52
List Price:  ₹11,675.66
You save:  ₹3,336.14
RM473.25
List Price:  RM662.57
You save:  RM189.32
₦141,842.81
List Price:  ₦198,585.61
You save:  ₦56,742.80
₨27,810.04
List Price:  ₨38,935.18
You save:  ₨11,125.13
฿3,647.70
List Price:  ฿5,106.92
You save:  ฿1,459.22
₺3,232.12
List Price:  ₺4,525.11
You save:  ₺1,292.98
B$499.21
List Price:  B$698.91
You save:  B$199.70
R1,908.54
List Price:  R2,672.04
You save:  R763.49
Лв180.65
List Price:  Лв252.92
You save:  Лв72.26
₩135,197.71
List Price:  ₩189,282.20
You save:  ₩54,084.49
₪368.63
List Price:  ₪516.10
You save:  ₪147.47
₱5,633.91
List Price:  ₱7,887.71
You save:  ₱2,253.79
¥15,144.47
List Price:  ¥21,202.86
You save:  ¥6,058.39
MX$1,659.40
List Price:  MX$2,323.22
You save:  MX$663.82
QR364.31
List Price:  QR510.04
You save:  QR145.73
P1,370.91
List Price:  P1,919.33
You save:  P548.42
KSh13,148.68
List Price:  KSh18,408.68
You save:  KSh5,260
E£4,729.52
List Price:  E£6,621.52
You save:  E£1,892
ብር5,680.63
List Price:  ብር7,953.11
You save:  ብር2,272.48
Kz83,612.74
List Price:  Kz117,061.18
You save:  Kz33,448.44
CLP$97,978.20
List Price:  CLP$137,173.40
You save:  CLP$39,195.20
CN¥722.95
List Price:  CN¥1,012.16
You save:  CN¥289.21
RD$5,921.50
List Price:  RD$8,290.34
You save:  RD$2,368.83
DA13,490.83
List Price:  DA18,887.70
You save:  DA5,396.87
FJ$226.12
List Price:  FJ$316.58
You save:  FJ$90.46
Q779.86
List Price:  Q1,091.83
You save:  Q311.97
GY$20,923.51
List Price:  GY$29,293.76
You save:  GY$8,370.24
ISK kr13,946.60
List Price:  ISK kr19,525.80
You save:  ISK kr5,579.20
DH1,013.19
List Price:  DH1,418.51
You save:  DH405.32
L1,763.34
List Price:  L2,468.75
You save:  L705.40
ден5,702.11
List Price:  ден7,983.18
You save:  ден2,281.07
MOP$805.89
List Price:  MOP$1,128.28
You save:  MOP$322.39
N$1,893.44
List Price:  N$2,650.90
You save:  N$757.45
C$3,681.15
List Price:  C$5,153.75
You save:  C$1,472.60
रु13,335.63
List Price:  रु18,670.42
You save:  रु5,334.78
S/370.84
List Price:  S/519.19
You save:  S/148.35
K382.72
List Price:  K535.82
You save:  K153.10
SAR375
List Price:  SAR525.01
You save:  SAR150.01
ZK2,522.76
List Price:  ZK3,531.96
You save:  ZK1,009.20
L461.43
List Price:  L646.02
You save:  L184.59
Kč2,350.75
List Price:  Kč3,291.15
You save:  Kč940.39
Ft36,729.02
List Price:  Ft51,422.10
You save:  Ft14,693.08
SEK kr1,071.30
List Price:  SEK kr1,499.86
You save:  SEK kr428.56
ARS$85,766.82
List Price:  ARS$120,076.98
You save:  ARS$34,310.16
Bs691.04
List Price:  Bs967.48
You save:  Bs276.44
COP$387,583.68
List Price:  COP$542,632.66
You save:  COP$155,048.97
₡50,832.34
List Price:  ₡71,167.31
You save:  ₡20,334.97
L2,468.78
List Price:  L3,456.40
You save:  L987.61
₲737,805.73
List Price:  ₲1,032,957.54
You save:  ₲295,151.80
$U3,781.90
List Price:  $U5,294.82
You save:  $U1,512.91
zł400.73
List Price:  zł561.05
You save:  zł160.31
Already have an account? Log In

Transcript

So next up, let's create a payment screen. So I'm going to right click on this one guides copy guide. So same as all of the other ones, you can hit paste guides. And what we need at the top is just a back arrow. So we can select this one from right here. You can zoom in a bit closer, if you can I hit it Ctrl C Ctrl V right here, which is going to be the only option to go back to this screen and you can abort by going to menu from this screen and going to home or whichever other screen it's offered.

I'm going to copy these two. So Ctrl C Ctrl V right here. Right here, I'm going to right in payments. And on this one, I'm simply going to write in credit card. And I'm going to move it down below. So it's going to be in this same line and it's going to be 40 pixels down.

So 1234 and on the right line, we are going to write in Edit So Ctrl D, and it and because our credit card will just go below this, right here, if they click Edit, they'll have the option to change the credit card and to move around some information and if the credit card has expired, they can add a new one, or they can change the CVC code and something like that. So that's going to be our option. And now we're going to design the credit card just below that, and PayPal option below that. So let's create a rectangle. And it's going to be 335. Same like all of the other ones, but with 180.

And we're going to change the color to some this darker color. Use corner radius of five, same like we did for all the other ones. Let's jump into our Layers panel. And I'm going to name this card BG like so. Like that, and I'm going to move it let's see 20 pixels down. So one, two, and we're going to select this to Ctrl C Ctrl V, and place them right here, jump back and use white because all of our text is going to be white inside.

So I'm going to position it like so. And as well, we're going to jump in select our visa logo Ctrl C, and jump right in and hit Ctrl V on the card, jump in, and maybe we can leave it as it is. So shift One, two, down one, two, to the right. And what we want to do is reposition some of these. So for this one, we're going to use some stars. So what this is going to do is create a simulation, that there are our numbers behind these stars, same thing like you do on all of the other cards when you're buying stuff online.

So I'm going to create four cards for stores and then simply hit space, for example, four times, so 1234, maybe five. And then I can do the selection right here. Ctrl C, right arrow, Control V, Control V. And finally, for this last one, let's use, for example 1234. Let's see. So this is going to simulate the number of our cart. Next up Ctrl D, duplicate the same text, double click and type in cardholder name.

Like so. And let's just imagine name is john doe, let's say it's really easy and simple to remember. We're going to select all of these and make them Align Left. And one more time, so shift, one, two, and don't worry about the positions. Maybe we can change them right now. So 10 pixels.

20 Pixels from the bottom, so on to. And you can position this, for example right here so you can see something around here is going to be in the middle. You can be precise if you want. But let's not bog down with details. So select these two Ctrl D, and I'm going to place them right here. So this is going to writing expiry date.

And below that we are going to write in date. So let's say second month of 2025. Let's say something like that, make some spacing, make it nice and clear 20 pixels from the right and that's it we have created our resell credit card. If you want, of course, you can change the color of this card you can add a drop shadow to make it a bit more appealing. But for this stage of our process, let's just leave it as it is. I really happy how this turned out.

And now let's quickly organize some of these details. So these will go just below The name so called all the name of the call up expiry date like so card BG and Ctrl G, this is going to be our credit card like so. Next up, we have to create the same thing but for the PayPal. So let's choose these two Ctrl D and position them just right here. So one 220 pixels Ctrl D on the card duplicated. Make sure you're 20 pixels, so exactly the same right here.

We don't need an expiry date because PayPal doesn't have it. So we're going to delete these two and instead of the Visa card, we are going to replace it with the PayPal logo. So okay, to paypal logo right here selected Ctrl C, jump right here. Click on the visa, delete Ctrl V, and make sure you position it in exactly the same location as you did with visa logo, so shift to the right 20 to the bottom 20. And that's it. Basically you have completed your PayPal look, let's quickly change the color to differentiate them a bit.

And let's use maybe this for the PayPal logo. And I like how that looks like. So we're going to write in PayPal right here like so. And next up, we're going to duplicate this button Ctrl C Ctrl V right here, and type in make a payment. So we're going to leave this in, make a payment. And that's basically it.

We have created our screen. Let's just quickly move some of these layers around. So status bar at the top, we have back arrow just below we have payment. Here it is. We have credit card and edit which will go just below payment credit card above. So we have a credit card.

And then we have this text which should write in PayPal. Like so. and edit just below we have PayPal. And finally we have the button. In the next video we're going to design store location screen where we are going to include a map and some basic functions below. 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.