Transcripts
1. Introduction : Hello everyone and welcome
to our session today. Today, we are going
to delve into the fascinating world
of wire framing. What exactly is a wire frame? It is a visual guide
that represents the skeletal framework of our
application or a website. Why the wireframes
are very important? Yes, it is very
important because it helps to understand
the clarity and the functionality
of the screens or pages which are
going to be developed. Now, who will we benefited with this course? Let me tell you. First is aspiring designers, those who wants to start
a career in UI design. Second is entrepreneurs. People who are
planning to launch their own start ups and they want to design their
own user interface. Next is graphic artist. If you love art, then this
course will add a new skill to your tool works and
will allow you to explore the new app design. Last is design enthusiast. If you just love design, then this is the fun way
to learn something new. It's basically a super
versatile course, which can benefit, like anyone who's interested
in designing. There are two types
of wireframes, low fidelity and high
fidelity wireframes. And in this course we
are going to learn both the wireframes and also everything will be
hands on project.
2. Project Video: If further project work, you will create a total
four wire frames. It will allow you to practice
both high fidelity and low fertility
wireframing techniques for the low frit wireframe. Step one, choose an app concept which you would like to design. Step two, start with the
low fidelity wire frames. These are the initial
blueprints of your app design. Step three, sketch
the basic layout. Just remember, focus on the functionality
and not the details. Step four, design at least
two low fidelity wire frame. Now second is high
Fili wire frames. For that step one, you have to choose one of
your low finity wire frame, which is going to be converted into high fidelity wireframe. Step two, begin by adding
the colors or textures. This will make your designs
come to step three. Create at least two
high finity wireframes. Lastly, after taking
a screenshot of both the low fidelity and
high fidelity wire frames, just share in your
project gallery.
3. Learn How to Design Low Fidelity Wireframe With Hands-on Activity.: Hello everyone. So
without wasting our time, let's start with the
wireframe first. For that, let's select
the mobile board. Now, here we can find the phone. We can use it, iphone 12, Pro Max. Now we have got this. Okay. I want to show you this
wire frame signing page. We are going to make
it exactly over here. For that, first we
make the rectangles, I press R. This will be
the first rectangle. We can duplicate this by
pressing the command D. Yes, this is also done also. We'll need a third
rectangle again. Again, press command D. Here we get. Can you see that? If I'm moving up, it is not showing me
the proper alignment. As soon as I shifted, see I can see the color
marked over here, which means that it's properly centered out as
that color already. Now we can add the borders. We can make the border size from inside or we can do
it center also or outside. But I think outside looks cool. Okay. We'll go to the next one. Again outside one to 34, again, the third one
which is a logging name, again, outside and 134. Okay. So I think this boxes
are pretty big. Let's make it a little
smaller, this 35065. Okay. 31565. A 65. Now we can write over here the remember knee and
let them pick box. So let us do that. Okay, so this font
is pretty okay. We can do one thing. I have just copy and paste it on here, okay? Okay, and the square
box over here, that is for me, the size 25, 25. We can fill this blue color. This is pretty dark color. We get a little light. No models. Okay, I think 30 is enough. Okay, this one is done. And now we'll cover up the remaining thing
in the next lecture.
4. Learn How to Insert Text and Input Fields in Low Fidelity Wireframe Design With Hands-on Activity.: Hello everyone. Now let
us put the input fields. We'll need input fields
for email, password, and login as we have
created these rectangles. Now let us insert the text. See you can do like text as I'm putting e
mail first of phone. Make it a little gras and the fund, okay. This fund goes well, and of course the size. So this goes pretty well. We can copy it again. We can copy this, okay. So this goes well.
Now we can copy this and paste it over here. Okay. Now make a password and shift to the side, okay? As you can see, we have already
got the alignment lines. Okay, It's proper. Next we'll be login again. You can just duplicate this command being
put in the center, and this will be your login. I feel like it should
be less colored. Okay, so I would suggest
you to make it more light. Okay, this feels good, and this login again will
make it a little light. Okay. I think that
should be dark. Yes, this looks pretty cool. E mail is done, password
login, remember me? And now comes the tick. To make the tick,
we have to take the two rectangles
which we are in here. One is going to be like this. I gained another one. Okay. That's F 25. Okay. Let's rotate it. Remove the waters and also we can again rotate. This looks cool, right? Okay, If you want
we can extend this. 27 will look. Kay, Look cool. Let's select this
and command G group, make it no white. Got it. Is this done? Of course, we have
to make it smaller. No, I think this stick
doesn't look so Siler, so this looks cool. Er, so this will be the color white T. So now email password
login, remember is done. Let us go with the login again. So I have done command
D. This will be login, the size I'm making for. I think it should be more big. This is done. Okay. Let us make the three lines side 75 times 12. Let's duplicate
the two times 1.2, Remove the waders. Put the colors, let's go
for more light, the shade. I think this is quite bigger. Let's make it 60 by 50. See, in the next
lecture, we'll complete the remaining things. Thank you.
5. Learn How to Add More Details in High-fidelity Wireframe With Hands-on Activity: So as we all know that we
have made it over here. In the same way we can just
copy paste everything. Okay, I forgot to
group them first. Okay? You can see on the
left hand side rectangle, copy four, copy three, and rectangle we can just group command G and then we can
name it as side bar. Okay? As we have done this, it will be very easy to just
copy and paste it over here. And we can just give it nice color which
suits the background. Of course, let us
select the color. Same goes with the second one, same goes with the third one to Similarly, we can go
with a search icon. Just copy it over here. And paste. Okay, so it has paste over here, so we can just move it, we can make it more white, of course, it looks more nice. And also increase
the borders again. Go with this more white. And the borders, here we go. Oops, I didn't
realize that we have got one side bar in over here. They simply deleted it. Happens when we copy something. Like we don't realize we can get into any part of
this sketch canvas. So that's fine. You just need to be very
careful after that. So here we go. I think this is
done now, so I can, and let me check whether
it done properly aligned. Okay, so I think
this should be more bigger and I feel that the size should be more or less like and make the size six. Okay. This looks cool. I think remove this, it will be more
understandable as we can do. Okay, And also search. Okay, this is done. Now let's write the
login to the text. We can do one thing, we can increase the
size like or something. Yes, this goes well. Even 45 goes well, right? Yes. Also we can
change the font. Okay, this looks more nice. So let's go with the fills. And we can also put
the nice color. We can increase the size. I think this looks pretty good. We can do one thing. We can
group this rectangle as well as this e mail input command. We can name it as an email also. We can group this, group it and we can name
it as password. This was e mail button, right? This password email. And this is sign in again, we can group this two name sign in button. All right, so this
three are done. Now we can go for the next thing which is remember me,
forgot your password. Don't have an account sign up. So for this, let's go
for the next lecture. Cover the remaining thing
in the next lecture.
6. Time to Finish Our First High-fidelity Wireframe Design: Okay. Like we can see,
this page is ready. Login page I would say
is completely done. Okay, One thing is
still remaining border. Let's do the border, let's make the gradient color. This will look more beautiful. I would prefer right
green on one side. What do you think?
Shall we go with the same then? Password. Okay. I think we should go
with this different color. On this side will be green and the other
side will be red. Okay, Green and red. Try some other, yeah, I think we should try some
other color instead of I will try for something
bright yellow. Okay. I think this is
yellow and it's becoming, and we cannot see the border. Let's go for the other color. Okay, I think this
looks sky blue. All right, here we go. Of Sang button. Now I
think we're almost done. Everything just
have a cross check, okay, logging mail, password,
everything is done. As you can see, there
is some differences between which I have made
this earlier and this. And that is absolutely fine. If you want me to do
again the same thing, I will just copy this text and I will
make it over backdrop. Now we are over time, we have seen that this
background is wide, this text becomes black. But since we have
black background, I have kept this white and
bright colors as a text. So which looks nice. Yes, this was all about
the high fidelity. And let us go for
the next lecture in which I'll be teaching
you registration page. Okay, see you in
the next lecture.
7. Learn How to Make One More High Fidelity Wireframe Design With Hands-on Activity: Hello and welcome to my lecture. In this lecture, we are going to start with the next page. Let me show you one thing now. We are going to start with the second page, which
is registration. Now you must have
understood that this is also a very easy
task, which you can do. All right, let's start making
the same registration page. Go to the Artboard again. Select iphone 12, Pro Max. Here we go. Just make the background black
color right now. First we'll start with
the rectangles, okay? Just duplicate them. The 123, so make it 300 and make this 16. Okay? We can duplicate this price 1.3 So here we go. Okay, So we are not
required to check all this spacing when
we do like this, when we come closer, we come to know about
the proper spacing. Likewise, I'll show you 1
minute is the second one, like this, then it will
come and stop it over 58. Okay, now we are getting the 58. The size of the
rectangles are 300 by 16. Now let's insert the text. Okay, let's complete
this part also. Let's come on D,
Let's make it 2060. Now this comes in the center. We can color this
the bright color. Again, I would like
to choose dark red, and the rest would be white. Okay, also if you want, you can do the borders. Likewise, first you need
to increase the word. Then I have selected
which is linear gradient, which I prefer the most. The color I'm selecting
is, again, bluish color. Should be bright because the background is
black in color. Colors for the rectangles or the gradients
which we are using, it should be a bright one. Let's go to the orange side. Yes, this will give
the brightest, brightest sides for
the next green again. Yeah, this makes it properly. Yeah, I loved it. Now, enter the text,
which is again, a very simple part for T, and then you can write just tre. All right. Place
it at the center. Make the size 50. Okay, keep it 40 I think. Yeah, this looks good. You can even change the fonts. I would prefer a black. Yeah, this gives the
dark and thick version. Now let us go for
inputs like name, e mail password, and
confirm password, as well as sign up again, I would say copy this
and paste it over here. Okay. No, I have not. All right. Okay. So I would say you need to duplicate and you
need to duplicate this and we can put on this
and just write it down. Sign up. Okay. I think this looks
very thick and dark, cool. This looks nice. Now, again, we can enter the text
of her right name. But again, I will
go for this one and also the size should be Okay. 30 or I guess 25. Yeah, I think that's fine. Because his name,
this will be e mail. This will be password. This shift is to
properly aligned. Okay. And then again, command, sorry, command the duplicate
confirm password. Now this is done. I think everything has
been set properly, like registration name, e mail password
confirmed password, all of them are properly used. Now the next thing is arrow. Okay? So let us
go for the arrow. For that, we need to me
one rectangle again. The other can just
duplicate this. Okay, here we go. First of all, remove this
color, make it white. I think this is pink, right? Okay, this looks cool. And again, the borders.
Remove the borders. Okay. Now just select
this too. Sorry. Now select this and just rotate. Look more nice. Just make the round corners and also this fun. Okay, now I think it's pretty
good. Select all three. Just make command G group
and just right arrow. Okay, Now this
arrow is also done. If you want, you can
make this bigger. Also you can just extend
the lines or something to 21 degree, so
then it looks equal. You can noted again 20 degree. And also you can
make more corner, round corners and
just set it properly. All right, I'll make
this also a bit rounder. Yeah, now it goes
Well, here we go. Okay, so now we are done with this arrow is
done, it's aligned properly. I think this color is good. You can put the color
of your choice, but I don't think it's needed. It looks pretty cool. Yes, this page is done.
8. Conclusion: Congratulations and complement
this wire frame course. Now you have got the
very cool skills in both low fidelity and
high fidelity wireframes. Plus, you have had
an hands on practice on both the low filly and
high filly wireframe. Most importantly,
you have gained the confidence in tackling
the new design challenges. But wait, it's not over yet. Just start exploring and
practicing your UI designs. This course might be over, but your design journey
is just getting started.
Saba Faisal
