This course is brought to you by Appy Pie as part of our Academy series.
Hey you have got all the tools to get started on your
wire framing but what are wire frames wire frames are basically black and white
sketches of how your future website is going to look for example let's head
over to Google and analyze some wireframes this is a basic wireframe you can
make out it's a made of rectangles it's made up of black and white images seems
like a diagram basically it's showing where important content elements such as images
headers buttons all will be lined up on your future website it also gives you a
sense of spatial awareness you don't need a fancy tool such as balsamic to
start generating wireframes here you can see that the designer has used this
notebook and a pen to start sketching out some wireframes wireframes help you
build a good website you know how basically you'll be able to understand the
user flow on your website what the user is going to see at the moment he lands
on your web page how is he going to navigate pages of your web page and what is
he going to see when he visits the different pages of your web page and you
would be able to analyze potential roadblocks in the user interface way before
you actually start developing it so head over to balsamic in your Applications
folder and open balsamiq mockups yes hit OK for your opening it for the first
time here I'd response a Mac we open it and let's just wait for it to pop up
fantastic so you can make out balsamic has a pretty simple interface so you
have all the various assets over here for example rectangle radio buttons
containers are the basic frames but is a browser container an iPad container an
iPhone container if you are building a mobile app and a smartphone generic
smartphone container forms buttons pretty much a lot of tools what you would
require to build an amazing website are already here it's got some social media
icons it's got some notification icons it's pretty pretty robust and you can
make out it's got the iOS style sketches also so if you need something you can actually
give it a search here just like plus sign and we get various type of pluses
which we can use all across our designs so let me just show you how to just get
started with it so we're gonna go to containers we're gonna drag a browser
window you're gonna name this my awesome wireframe right I'm gonna let it aside
so its www my awesome wireframe and I'm gonna go up to the corner so clicking
on the asset is going to have a shaded gray it's gonna get highlighted and you
can just drag it around since we'll be designing for a white screen 16 is to
nine ratio 16 is to nine is basically sixteen by nine that is a height of 9 and
breadth of 16 right so widescreen monitors follow 16 is tonight I'm just gonna
lock this so basically what happened is like by right-clicking I got another
pop-up menu where I'm able to lock a particular container why did I do this
because if this is able to move then you know if we do some selections the
browser window is going to move along for example let me show you let me draw
up a button right and let me say click me and we unlock this browser and I do a
selection I'm basically moving the wrong thing I don't want this to happen I
want the browser to be fixed where it is so I hit this and I lock the browser and
pretty much if you want you can even lock the button we don't need the button right
now so let me just show you a quick demo off the same so let me just go up to
text and we are gonna be adding some text I'm gonna be adding hey hello bolt
and we're gonna make it big double clicking so if you are handling a text asset
you'll be able to click over here and you'll be able to align it so let's make
an inter center and we'll increase the size to about 18 no that's a little bit
too small okay this sounds good hello world let's add a subtitle how wireframing
going on it's pretty easy to use interface you'll be able to click and add any
kind of elements so let's see let's add some more buttons let's add a button
saying like yay and if you're running a Mac click to set hold the option key
and drag it so you're basically duplicating it it's possible on Windows - I
meant having name we have created our first wireframe so let me just go right
here let me bring it up to the center to bring in some nice spatial awareness
idea so how's your wire framing going I hope it's a yay.
Write a public review