Dealing With Missing Elements

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
€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

In this video, we are going to deal with some missing screens and some missing elements. So as for the missing screen goes, I talked about it in the previous lessons. So for example, each and every one of these screens can have another additional screen or maybe few additional screens on top. So for example, we have one screen. And you might want to consider including this read more, which will go to About Us page, for example, around combinations, maybe you want to include another separate screen, which will then show them the wrong combination possibilities. What are the room combinations, maybe you want to tell the story behind the room combinations and explain to them how it came about how you deal with the photographer's how you deal with the interior designers to create these rooms in the first place.

And then how you might want to pitch these products to the consumers. Also here at the top might you might want to consider because recreated four dots for the origination of creating four different elements. So four different images which will go inside of this slider. So you might want to consider all of these screens or not, because this is just the first part in this project. And that's what we explained to client, they just want to see the bare bones of this project before we move forward. Because that's really important.

We want to nail down some most important bits at the front end at the start. And then once we figure out the colors by biography, images, overall direction, maybe don't don't like these background shadows, maybe we want to remove them include some frames inside and some of those changes. When we got all of that together, then we can move forward and include some of these additional screens. Also, it's a lot easier when you have all of these elements in place to create those additional screens. To start, instead of 10 screens like it is for this project to start with 200 screens, then it makes your changes a lot more complicated, a lot more time consuming, both for you and your clients. Because instead of providing feedback for 10 screens, they have to provide feedback for 200 screens, it will make their job a lot harder, a lot more time consuming.

And that means that they have to put their job onto the site, and then simply work with you full time on this project. And let me tell you, a lot of the clients don't have that luxury of just leaving their job and their life behind and simply focusing full time on you so that you can create this project for them. That's why we are starting with 10 screens. We know the client knows and you have to tell your client Look, these are not the all the screens that you're going to need. But these are just starting screens that you're going to need for us to start this project. So the We can move forward and create some additional screens include some new ones.

And we are going to do that in the further parts of this project. So without any further ado, let me quickly show you what are some missing elements. These elements, I left out on purpose just to show you what happens because a lot of the time when you're designing, you just cannot predict everything. No matter how long you are in this business. No matter how many projects you have behind you, a lot of the times you may overlook some things. So for example, you might miss an icon.

You might miss some buttons, you might miss some user experience features. So in our case, I left out an icon. So if I zoom in a bit closer, and for example, go to this category screen, you can see the cart icon right here. But if we jump into the product page, so selected item page, you cannot see Add To Cart icon So when people apply selection, or we are going to change this to add to cart, or for example buy now. And when they click Buy Now it will add to cart. But as you can see there is no Add To Cart icon.

So how we're going to deal with it? Well, it's simple. Let's zoom inside this order icon. Let's create a circle. So maybe something like this. It looks good.

Position it right here, maybe right here, somewhere like that. And let's click Create number one. And as you can see, it's 14. Let's lower it down to 10. See how that looks like. Maybe we can position it in the center of this circle.

I think that looks good, but you have to test it out. So for example, if they added 10 chairs, so you can type in 10. And as you can see, this is too big Because it cannot accommodate this circle, so we have to lower it down even more maybe to eight. And I think eight looks good. So what I want to do is simply create one for this case and make it go from the center. And now position it in the center of your circle.

So like this, but because text has the safe area around at the top and at the bottom, and if I zoom in a lot closer, you can see this area at the top is a lot bigger than this area at the bottom. So what I like to do is instead of here is the middle but as you can see there is a lot more empty space at the top. I like to simply I bullet to somewhere around here. So if we zoom out a bit, you can see it's right in the middle. Now what we want to do next is maybe we want to try and create a border which is the thickness of this icon, just to see how it looks like but I don't think it will look that good. So three as you can see See, it's roughly around there, but it doesn't look that good.

So let's simply create one. And we want to remove the border. And for the fill color, let's simply choose this color. And I think that looks good. Just use the white for the number. And I think it looks good, it's readable, and people can read.

Read it easily and see what's inside. So what we want to do now is jump back to the Layers panel, double click right here, type in circle, choose one choose circle, go to orders and select it as well Ctrl G, and maybe you want to name it to cart icon, something like that Ctrl C. And what we want to do is jump back right here where our icons are, and we might want to move this a bit so double click right here. move it somewhere around here. And you might want to select all of these. So up to here, move them out of the way. So once again, to here, zooming a lot closer Ctrl V, so that we can paste it, align it up with the bottom edge because it has a circle on top.

And you can move it to the right and see the spacing between so it's at 60. And now you can select all of them once again, like so zoom in a bit closer and make it 60 as well like so. And you can also double click can maybe do something like this. So now we have this icon, and this is exactly what I was talking about. So a lot of the times you might encounter these issues, but you just want to deal with them as they come along. So for example, now that we have a filled cart icon, we can include it in Some other places, so maybe they added an item to cart from here.

So they might click here, jumps to this page for this couch, added to cart, and then go back to home or simply clicked right here to proceed to payment. And maybe they change their mind. They say, Okay, I want to go to Homescreen. they clicked on the logo, maybe it will take them to home, or simply click right here on the menu, maybe chose store locations, profile my orders or go to anywhere else. But this cart icon will stay filled, and they can click on it and jump back right here at any point. So that's how important it is to deal with missing screens to deal with missing elements.

And it will happen in basically every single project you're working on. So just deal with it as it comes along and explain to your clients that sometimes These things might go unnoticed. Sometimes they will change your brief, they'll tell you to include some things a bit later in the project. So just know when those things occur, just deal with them as they come along. In the next video, we're going to start with our prototypes, and I'm going to show you how you can duplicate some of these screens to create some awesome animations. 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.