Beginners Guide to Website Wire Framing | Siddharth Srinivasan | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Beginners Guide to Website Wire Framing

teacher avatar Siddharth Srinivasan, Digital Entrepreneur

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

11 Lessons (49m)
    • 1. Downloading Balsamiq Mockups

      1:04
    • 2. Getting Started With WireFrames

      5:40
    • 3. Why Learn Design First

      0:52
    • 4. Design Basics

      2:52
    • 5. Types of Websites

      5:17
    • 6. A Brief Overview Of Developer Lingo

      1:07
    • 7. WireFraming Google Chrome Website 1

      8:28
    • 8. WireFraming Google Chrome Part 2

      14:19
    • 9. WireFraming Google Chrome Challenge

      0:50
    • 10. WireFraming Challenge Answer

      5:47
    • 11. Final Touches

      2:45
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

79

Students

--

Projects

About This Class

The first step to building great websites & apps is to learn how to design them. Learn the fundamentals of web & web design. In this course you will learn how to design the website or mobile of your wishes from scratch using industry leading tool, Balsamiq Mockups. 

Learn how to build wireframes and bring those wireframes to life by creating interactive clickable wireframes without writing a single line of code. 

Wireframe the google chrome website and make it completely interactive.

If you want to get started on learning design quickly to make your ideas come to life. This course is for you.

Meet Your Teacher

Teacher Profile Image

Siddharth Srinivasan

Digital Entrepreneur

Teacher

Hi There,

I am a digital Entrepreneur who acquired the skill set required to start up my own firm & build my own products. I learnt most of my skills online, just like you and mastered them over the course of running my business. 

Mistakes made me wiser and taught me things I wished I had not learnt the hard way. I feel first time entrepreneurs or those, who come from a non technical background, will be better poised to address challenges if they go through my course. 

I love to teach and share knowledge. Always remember, the more you give, the more you get.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Downloading Balsamiq Mockups: Hey, I'm excited to get you started, but the first thing is, before we get to designing anything, we need a set of tools. So the 1st 2 were gonna be getting is balsamic. So let's head over to Google and go to www dot balsamic b A l s a m i q dot com Balsamic is an amazing wife framing to it helps you build low fidelity markups or wire frames, which can serve as a foundation to building Amazing website and APS. This is available for Windows as well as Mac. I am using a Mac, so I'm gonna be downloading the Mac Ocean. If you're using Windows, download the Windows version so head over to download button over here and click on download markups for Mac OS. I like to point out that balsamic is available to try it for 30 days, but after that you need to buy a license for it, which costs about $89. But I assure you this will be the best investment you're going to be making because this is an amazing too 2. Getting Started With WireFrames: Hey, you have got all the tools to get started on your wife reaming. But what are Y frames? Wire frames are basically black and white sketches off how your future website is going to look. For example, let's head over to Google and analyze some buyer frames. This is a basic wire free you could make out. It's a made off rectangles. It's made up off black and white images. Seems like the 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 tools such as balsamic to start generating wife rooms. Here. You can see that the designer has used his notebook and a pen to start sketching out on wire frames. Why airframes 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 the moment he lands on your webpage. How is he going to navigate pages off your webpage? And what is he going to see when he visits the different pages? off your webpage, and you would be ableto analyze potential roadblocks in the user interface where before you actually start developing it. So head over to balsamic in your applications folder and opened balsamic markups. Yes, hit Okay for your opening it for the first time. Yeah, address balsamic. We open it and let's just wait for you to Papa. Fantastic, so you can make out bottom. It has a pretty simple interface. You have all the various assets over here, for example, rectangle radio buttons. Containers are the basic frames, but there's a browser container, an iPad container on iPhone container. If you're building a mobile app and a smartphone generate smartphone container forms, Button's pretty much a lot off 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 pre 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. Your justly plus sign and we get radios 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 contain knows we're gonna drag Broza window. We're gonna name this my awesome. Why a frame, right? I make another video site. So it's www my awesome Ryan frame, and I'm gonna go up to the corner. So clicking on the asset is going toe have ah shaded grey. It's gonna get highlighted, and you can just drag it around since we'll be designing for a white screen. 16 Mr. Nine Ratio 16. Mr. Nine is basically 16 by nine. That is. Ah, height off nine and breath of 16. Right. So white screen monitors follows exchanges 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, them assure you let me draw a button, right? And let me say click me and we unlocked his 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. Red notice. So I hit this and I locked the browser on 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're gonna be adding some fixed. We're gonna be adding K hello, world on. We're gonna make it big double clicking. So if you're handling a text a set, you will be able to click over here, and you will be able to align it. So let's make it into center and we'll increase the size Teoh 18. You know that. Do small. Okay, this sounds good. How worlds I let I had a subtitle. Uh, still y o framing going on. It's pretty easy to use interface. You'll be able to click on add any kind of elements. So let's see, let's add some more bottoms, that body you're And if you're running a Mac, Lichter said, hold option key and drag it so you're basically duplicating it. It's possible on windows, too. On the typing name we have created our first wire frame. 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 framing going? I hope it's a yea. 3. Why Learn Design First : So why should you learn design first? Well, there's no one who knows your idea much better than you. You would be able to mould every aspect of your reason. Interaction with the website or your product. Basically, you are in control. You would be able to foresee design bottlenecks, SOS limitations and various other challenges. Things which are just a developer would not be able to see and also most developers charged by the hour. Making changes to the design after the development process is going to be 30 very expensive . And with the design finalized with their wife frame completely intact, the developer would be able to complete the process much, much faster. You'd be able to build your products better, faster and were cheaper. 4. Design Basics: I like to introduce you to a few design basics elements. Address typography, color palette, graphic design user personas use a flow and page or app layout. Organ composed the wider gamut off web or APP design. This is followed by the development process where your designs are converted into actual workable court. A point remember, is that the terms web or app, design or web or APP development are often used interchangeably, but they are very, very different. Design is designing how the website looks, how the APP feels, how the users interact with your product. Whereas development is actually building the product with a lot off cord, A lot of scripting languages, etcetera. We are focusing on designed currently. Also, it is crucial that you work with the developer at all stages off your design process. For example, as designers, we can go overboard with animations or fades. But it's the developer who knows whether those animations are fades are actually possible in court, building a beautiful app and then finding out that most off the design is not makes you go back to the drawing board, not only wasting a lot of time, but also a lot of money. I'd like you to use you to another term called user interface or you I I bet you would have heard it often. So you I is a series of screens, pages and visual elements. They're generally consist off buttons or icons, richer user clicks or touches and basically interacts with it. Don't get confused with other term, which I'm going to use you to right now, and that is called you X u X is user experience. User experience is an experience that a user has as they interact with every aspect or every touch point of a company's product or services across devices. For example, if you take Gugu Google, Sinan has been standardised across all platforms, beat a desktop, a tablet or even mobile. It is an end result for law off cognitive sciences, which are applied to it. For example, did you know that the game candy crush uses a lot off cognitive science is to make sure that you're addicted to it? Google it up and you will be amazed at the findings. It is an integrative process. As a result, off research and analysis, you just kind build an amazing UX straight out of the box. It's an interactive process. You tweak it, you make some changes. You see what works. You see what did not work your documented and you try. OK, it's an iterative process with a lot of trial and error, and this course does not focus on user experience. 5. Types of Websites: you might have heard the Term Responsive Website and static websites. So what are they gonna of the days where a website is just access from a chunky desktop sitting at home? The world has gone more about it on the rise of smartphones and boom off Internet connectivity has enable people to access website access, Internet and host of Internet services anywhere from any device. So you need the website to be capable off being displayed correctly on all devices with the mirrored off different screen sizes. Basically, the website should be able to adapt to the screen, says it is being viewed on, and this is called Responsive Website. You don't need a smartphone or a tablet to check whether a website is responsive or not. You can do it right here on your computer. So let me show you an amazing website which I personally believe is a design inspiration. The website is off Connecticut be SNL circles. Why do I say it's a design inspiration? If someone could take this website and make it amazing and Morgan, I will hands down worship that person. This website is a classic example off a website that is stuck in the early nineties. You can make out the blingy stars which are showing out the important notifications. You can see the Jif just continuously changing, and I'm not even able to comprehend what it's saying. You can see that it's running flash, which is pretty much going to be phased out in the next three years, and you can see the toolbar is completely out of place. This is a bad website. Now we can simulate the screen size off a mobile phone by changing are the size off our browser window. You can see that this pretty much resembles a screen off a mobile phone. A rectangle now a nun Responsive website. Basically, you would have to cite scroll to see the entire website over here, and it does not adapt to the screen size. This is an unresponsive website. So now let us see an example off a responsive website. So let me head over to Crume again and, uh, go to the national website off BSN A. That is nothing would be s an elder groups again be snl dot co dot in and you can see this is a fantastic website. Glorious. Use a white space. Clear text, beautiful iconography covering sections for the customer to take the relevant actions. They have a beautiful call to action to download their mobile phone APS slider with animations for lot off images over here on also a press release, which basically gives out latest news and everything and a beautiful footer. This website is a good Web site, and it, being one of the largest telecom companies in India, would be experiencing a lot of traffic. And I bet the website back end or the silver's are really optimized. So let's see whether this rep site is responsible or not again. I'm gonna do what I did with the Karnataka Bs and our website, and I am going to change the window. Excellent. You can see that the website completely adapted to the screen size. It's being weird on in this. We're trying to simulate the screen size or from smartphone, and you can see that whatever was horizontal automatically stacked up vertically, and the entire menu has been condensed into something. What we call the hamburger Manu because it resembles a hamburger, and on clicking it, you can see that it creates a drop down. It's a beautiful, responsive website. Let's try to simulate the size of a tablet and see how it behaves fantastic. You can see that the head does are automatically aligning to the screen size they have, and once it is being viewed on a sizable device automatically, the hamburger menu is gone on a full fledged header is brought back up. This is an example off a responsive website. So why should we build responsive websites? While the first reason is smartphone penetration is growing at an exponential rate, it is easier to get online than it was a few years ago. Certain design philosophies have also cropped up. For example, there are a lot of websites which follow a mobile first approach they designed, particularly for a mobile phone. The desktop version takes a sideline. Mobile is growing. More people are gonna be accessing the Internet doing stuff. Ordering products on their smartphone, not on their laptops Mobile Responsive website are the future. Also, with integration off various payment processes such as Samson P. A poopy, the mobile phone is going to out grow the desktop inconvenience, portability, ease of use and user experience 6. A Brief Overview Of Developer Lingo: Hey, I know you're itching to get started building amazing wife frames and beautiful mobile app designs, but I need to give you a brief overview off the type of technologies that are currently present and also the type of developers out there. The developers, other people who will be converting your beautiful designs to actual workable court. So there is something called the back end off a website. It concerns off a database silver and a web application, and there's something called the front end off a website. This is what you see when you visit a website. It consists off images, text, a lot of layout with buttons for interactivity and a lot of host of stuff which basically increase the visual appeal off the website Devil oppose, who developed for the silver sight or the backend are called back and developers developers who developed for the front end our cold front end developers and you guessed it Della Pozo developed for both back in and front and are called full stack developers. As a designer, you will be working with the developer in the future, so it is vital that you get a few off the ling goes correct 7. WireFraming Google Chrome Website 1: So what are we going to be right for me? We will be via free me, the Google Chrome Web site. Exciting ended. So let's get started. So let's head over to chrome dot google dot com. So this is a wife rain we will be doing in the beginning. This is a beautiful website. I love it. It's clean. It's got great typography. Andi is just really appealing. It's got clear called actions. It has got clear differentiators. What exactly sets Crume apart from the host of the browsers out there? Onda, since I'm running a market, automatically identifies the operating system I am on and ultimately gives me a download link. This is a good Web site, so let's get started. So let's head over to bald stomach. Wait for it to load. Uh, this was our previous project. Let's just go here. Let's create a new project again. Let me just put up Rosa Window over here. Containers browser. Let me drag and drop over here. Chrome dot google dot com. Right, We're gonna set it up. We're gonna drag it, make sure it's a nice, bright screen for us. That's a little bit too much. It's Okay, Let us just soon out a bit. We got it. So that may position dis in the center and lock it. Let's have Google chrome on the browser. Brenda. So we got the local. We're here. We got four drop down menus over here. So what we're gonna do is we're not green. Go here. Right. That this be chrome that it is. Drag it up right? Exactly right. Then we got the four Manu bars. So what am I gonna do? I'm gonna take some text, some text I tied download, Position it right here. I'm gonna click old or option on this. I wanna drag so that I get a duplicate off it. I'm gonna drag one more again option so that I get four. And now let's go back. Set up girl books and girl guest. So this is going to be set up. Chromebooks Girl books. Andi, let me just pull this up right here on the scurvy Crume cast. Right, so this is pretty cool. Now we do notice that we haven't Aramark over here, so let's try to search for Iro, Herro, herro And we got an angle down, does it? What we want. Exactly. So we can notice that there's a little bit bigger than me born. So if a particular object is really big, especially it works with icons. You have ah, slide over here, which you can control the size off it. So I'm gonna please sit a small. And also, if you have your difficulty positioning it in tight spaces, you can just click on the object and use your arrow keys to move it and using shift removed significantly. So I'm gonna produce position it right next to downloads Fantastic. And were to hold all it again. And this time I'm gonna drag another copy. I'm gonna drag another copy, and I'm going to drag another one. So there we go. We have it all properly set up. I just want I'm just 11 pissed off the spacing here, So let me just try to move it around a little bit. I think it nice and even you can notice that a few lines up here really are trying to move a particular asset. They're called guidelines that dynamic guidelines which are trying to align the asset to a reference frame. It automatically adapts to it. So we can make out that that guideline is clearly aligned to the menu bar by frame. So we have got the top menu bar ready? Let's go back to Chrome and C. We've got some texture. There's the head, a text, someone a put. Let's see. Ah, big title. Yep. We need a big title. So was this saddle Get a fast free. But, brother, I'm just gonna copy this and I want a beast. It dare Rico. And then we've got some subtitles over here. So I'm just gonna copy this again in a comeback. Teoh Balsamic! I'm gonna track the subtitle in the text. A call text bar, and I'm gonna baste it again. Super. This is a little bit too big. So we're gonna come here. Ready? Used to size to you. 14? No, Too small. That's ready. Is it too trendy and increase the size of the title to 60. Excellent. That's just raise it up to 28. Really nice. And we got a button saying download chrome. So we go here, we type button. I mean, I drag this element or taking it will just make it appear on the art abode or that ask Reno here and we bring it down here. Take download Crume. Let me just drag it using shift If you use shift a dragon A set. It kind of skills it evenly and stuff. You know, if you don't use shift, you kind of lose the spread. So we're gonna come here just saying download Crow. The guideline is automatically telling me it is in the center. Now, I think we need another line of text. So we're gonna take this state. Let's go search in the text bar. Yep. Some text. Bring it down here. God be based it. And again, go back to Chrome. We have another line of text, which is actually a link for Let's just copy this, and we're gonna This time you're gonna drag some text again. We're tight and to and this is a link will get to that later. And then we have an image. So that steak an image so we'll get a monotype. Give it Derek. Oh, we got it was a huge, nice big screen. I mean, track this ice that's a little bit too big for us, right? So let's just go back to the browser, unlocked the browser increase the size so that we get some more real estate, screen, real estate, lock the browser again. And now we bring the image on Make it brick. They could make out. Since I increased the weapon's everything seems a little bit a line to the left. Just gonna command eight or control a and move everything back to the center. Yes, we got the green light again telling me that hate you are pretty much at the center. Made me click outside. Let me try to move this back and we have just completed the first screen off the Google website. 8. WireFraming Google Chrome Part 2: So now we need to create a new screen. So let me just try to duplicate it. So I'm gonna cure come here and click duplicate. I'm gonna get for it off most of thes. Let's have a look before we delete anything. No Does Pretty much what we have right now. So that's just we're here. The browser is locked, so we're not gonna unlock it now. What do we have? We have another title. So you're gonna come here? We're gonna take title, click it a big title. He put the big title over here on pieced it, Browse Foster, and we got an image. So again, we're gonna go here it image, Bring it here again. I haven't going to expand it and place it at the center. The hand We got a small title so I may go with the subtitle Over here. Let me just drag it on. I'm gonna be such instantly. Let me just zoom out a bit because I'm feeling a little bit constraint ID with the screen real estate. So let me just take thes to a little bit up again. I hold shift and take it up. I take up the small subtitle and I'm gonna hit option. And I'm gonna create a duplicate off it. And I come back to chrome and see type less over here. I'm gonna copy. I have pieced it. So now you can see that there's a paragraph type of text over here. How do we get that? So here we go. There we have it. Bottom. It has everything for us. We're gonna tow copy the sea and based it here. That would be I'm just not happy with the decks Ice. So I'm just gonna come in here. I increase it to 16 at that time. Look, no. Still feels a little bit. Something is missing. Let me just try to reduce the size. I could be seen thing. We're gonna bring it up. Okay? You got me the same thing over here on. Let's copy this. Start using auto fill, and we have completed screen too. Now we're gonna do to get the same and we're gonna come here, pick up where you left off. Pretty much the same thing. We're gonna copy this. Come here, place it again in the center, use a guy lanes for a reference. Oh, I have a street Aramark, which we don't need. Do we have it here? Yes. We do not delete this. Okay, again. We have a new image over here, but there's a difference below the image. We have a paragraph of text and no subtitles. So we're gonna delete these. Bring them is down. Drag it up a bit. Andi, copy this on that. Paste it on again. We have the same type, so we're gonna create a duplicate. Make room yours. We have made chrome yours, pieced it, dragging up to the center. Copy this, position it a bit better. And finally, the lost duplicate. We're gonna delete this. So how do we have it? So we have an image, So I delete this. We're gonna delete this. We're gonna take this resize. It's about it. Pretty much alliance toward we see on the screen. And we have it. Title sewing a drag title. Get grown for back, but based its grown for back one. Browse. It is a subtitle. Decisive. Live with two big. So let's reduce it to you. 16. Too small. 18. We have a button again. The call to action. You don't need to industry as the new one. Let's go. Here. Copy this. Bring it back down. Paste it. Download chrome again. We have the same line of text for Mac OS night and boy nine or later. Copy it. Bring it down. Based it. I'm using command C and command we for it. And you can use control, See or control be if you're on Windows and we have got the same thing over here The same. Same same. But I see. On a minute I paste it here. So we forgot. One important element on that element is the foot or region over here, which has got him and bought in text. And also we're is important links. So we're gonna do the same to So let's go here. That's had a line, and we're gonna have something called the horizontal separator. Yes, there we go. It's gonna bring this year. We're gonna position here and drag it all the way over here. Let's go back to Chrome and see that to be have small subtitles over here, but important links. So let's come over here again. Let's take a text and let's explore. So there is something called a link bar, which you can ad over here, but I do not recommend it right now, so let's just go to the some text. What? Type? The products. Oops. Fraud ducts. I want to hold all our option and bring it here. It's I think it's businesses. So just over. And let me just drag it back over here. Education. Double click it. Okay. Should very, very important. Death and partners. Latest news. Just see how well that's based out. So the space start pretty evenly. Let me just go Here, let me start. But using shift, I move it to the corner. I move this to the corner. I'm a education. Oops. I click on businesses Dilip re evenly spaced art. And now we are going to add a list. Copy this head enter. We did not want the border so remote that border. So we got a list. All of these air links. I'm not happy with size, so I am going to increase it. Teoh 15. That make it 16. Yep. Looks good. And I'm gonna drag this up over here to the businesses using again option. I'm going to duplicate it. Bring these lists when I double click paste it here. Then I really use these three again. Drag basted. I'm gonna baste it again. Andi Laters needs. Oops. I did not want to go to the Google plus page off Chrome to people even use Google. Plus, I don't know. Okay, let's go to Chrome Log Now we'll check it out later. That skull here hit option. Pieced it again. Yeah, we got the footer, But we can make out There's another line over here, so to be having a screen Real estate. Let's see. So again, I'm gonna click on the horizontal rule. I'm when I hit option, and I'm gonna track a new one right below. Let me just give some specie over there and we have a bunch of text a Nikon and Alison Jeep Lis on a drop down list. So we're gonna use the same stuff. So we're gonna take some text, and I may just gonna copy this entire line of text basted. We have a Nikon. So let's just go here and hit Google. Plus, Yep, We have a GPS icon. You're gonna drag it up here. We know does. It is way big for us. So we're gonna come here go to the Slater and really use it to I think excess. Nope. That's too small. Let's have it'd. Let's have it s drag it down here. Let's see, it's we have another text with another icon. Just copy this at us on again. You know, until it's some text. Where is my best buddy? Some text. I will protect it. Pieced it. And again, we need a Google Plus Yep, we have. Here we have it. It's ah filled up. My gone. So we have Google plus official. Drag it up over here again. Drive the slider up. Two X s on What are we missing? Yep. We have to drop down So hard to be inside the drop down. It's pretty easy become over here we go to dropped out. So in bottom it it's called a combo box. So I'm just gonna track the combo box. Click on it. We get the combo box over here. It's a bit long. Andi, what are we gonna Di Matteo s Let's just stop English United States Ex Lent. I am loving it. So we have completed the markup. Just a quick trivia. If you notice there's something called chromium over here and chrome os but chromium. So if you ever wondered what the difference between Chromium and Crume is that chromium is an open source platform off the chrome Web browser. Chrome Web browser has a lot of Google specific applications, whereas chromium is open source. If you're a dellape or you'll be able to take chromium and mold it and do whatever you want with it, that's a bit of trivia for you. So yep, we are finished with this beautiful by frame off the Google Chrome Web site. 9. WireFraming Google Chrome Challenge: Let's recap what you have learned. You know, the basic stuff design. You know, a lot of what, right? Freeman. You also know how to use Balsamic comfortably. Now I've got a challenge for you. So if you come back to the website off Google Chrome desktop browser download website, you can see that there's a link here saying down the group room for another platform. So this is useful when you're on the Mac and wanna download for a window system. Hold on your on the window system on a dollar for a Mac on clicking this, you get a pop up. My challenge to you is recreate this papo using balsamic, and we'll see how we can make it pop when we click it in our white frame. 10. WireFraming Challenge Answer: Congratulations if you've got hope to solve the challenge But let's see how I would do it. Let me go back to the main screen. So mount soon out again. So I'm gonna quickly duplicate this over here and let's go back to Google Chrome and we have a rectangular box. So that's tangle. Frag it. See how much screen it's covering. Okay, Just trying. But on what we have, we have a title. So let's come back here. Big title. Big text. Yep, We have it here. Let's just try. Get here and hit. Download Crume, Download from Mac again. Let me just go back. Download this. Copy this button based it. Here. Download for back. We have the same text. I'm gonna take it here. Copy this as had gone. Piece it back over here. Ha ha. You didn't notice that the rectangle moved, which I did not want it to because we forgot to lock it so that it commands e again lock rectangle. So a rectangle is locked in position. Position it over here again. We've got a bunch of text, so we're just gonna copy some text on it is done over phone or tablet I'm not happy, but the size. So I'm just gonna increase it to 16 again. Some text. I guess this is handwrite that I'm gonna hit Option I o s and download for mother. Sister based it. Copy this again. We'll take some text, right? If I have some text? Yep. This damages were pieced. It hit. Enter. Oops, it's not working. So let's go The normal way that is some text could command option again on Lennox Command option. Sorry. Option again. Hold option again. I hit based and we have it here. Country. Well, that's just so you can do a multiple click holding shift shift. Sure, we have it way Haven't Mitch. How big is damage? It's pretty OK. And we across Let's see how this process it's OK. We can just drag it up over here on. We're going to make it small and we're gonna say displayed border. It's got a nice, neat border, and yet we've got the pop. Now I'm gonna introduce you to a very important concept called Linking. So let's head over here to our first screen and he could make out I click this button. Or rather, I click this link, and you can make out that currently, this is not linked to anything. So I come over here, I will link it to my new market. One copy. Five the popular charges created. I'm gonna come to the pop up y for him, which I just created. Oops. I think my ex is missing. So let me just quickly had that over here. Andi, as usual, Let me just reduce the size had a border. And this ex im gonna link it back to my first screen. No, go to the view menu and go to full screen presentation that I could make out that on clicking it. We got this popular. And on clicking the X, we got back to the main screen. 11. Final Touches: Let's give a little bit of final touches to our wife free. So let's begin by naming the screens. I'm just gonna double click on the screen, and I'm gonna name it as screen one. I would not like it here as screen one. Underscore Papa screen, too. This is very, very important when you are trying to imported into programs such as In Vision and when you're building more complex by a frames screen. Four on screen. Five. That's just to eat this. Plus we don't need it. Let's add one more small Barton so that we get a narrow. So let's put this is it over here so that on clicking it, we can move to the next screen. Let me just copy this. We don't need it on the proper. That much is Sue mouth. Yup, but it here exactly. Silver out, hit control or command. We zoom out, based it up error. So let's go back to the screen number one. So we're positioned at here and let's begin our linkage process. So let's see here. December Link Teoh Screen number two. This willing to screen to with Link discreet number three, screen three ruling to screen number four on screen four were linked. His green number five and Screen five is gonna link to screen number one. So we have got our links in place so that we'll be able to get a beautiful, coherent experience. So again, let's hit command F and go into full screen mode. And again we're at the bottom. So let me just stripe this. Excellent. Here we are. There we go so you can get amazing flow off how your website is going to look, even without writing a single line off code or going into some complicated CSS and HTML five. You know what the user is going to see, and that's the magic off wire frames.