Your first Wireframe

Lesson Details:

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.