Wireframe a Website Navigation Bar for Free | Ryan J Haught | Skillshare

Wireframe a Website Navigation Bar for Free

Ryan J Haught, Designer, Developer, and Marketer for Web

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
5 Lessons (20m)
    • 1. Wireframing - A Timesaving Process

    • 2. A New Design Tool

    • 3. Creating a Menu Wireframe

    • 4. Send Wireframe

    • 5. Your Turn


About This Class

As a web designer, I've discovered that wireframing is a helpful exercise not only for being better able to visualize a project but also for enabling you to share your ideas with your clients to help them get an idea of what you're creating and why. A well-designed and strategized navigation bar is an essential part of any website project. Wireframing will help you get your thoughts together and test out various ideas until you find the perfect navigation structure.

A well-designed and strategized navigation menu is an essential part of any website project. Wireframing will help you get your thoughts together and test out various ideas until you find the perfect navigation structure. And the best part is that you can design a high-quality wireframe quickly and for free.

Once you've installed the software introduced in this course, you can go ahead and download the following template that will help you get started quickly the next time you want to create a basic menu wireframe: Download Wireframe Template

This is the first class I've ever taught, so I appreciate your patience with any awkwardness or mistakes. :) I encourage you to give me your feedback on your learning experience and how I might improve. If you have any questions about anything in this course or anything I didn't explain well enough, please let me know!



1. Wireframing - A Timesaving Process: Hello. Welcome to my class On wire framing. My name is Ryan J. I doesn't websites for churches and Christian ministries. One of the practices I used frequently in my design work is wire framing for this video will just say that wire friendly is basically creating a rough visual representation when an aspect of a project will look like when it's finished. I went ahead and pulled up some examples of wire frames on dribble dot com. That's trouble with three bees. If you look through here, you can sit a lot of these examples or just basic sketches, some a little bit more complicated, like this one here, which is an animated wire frame. But basically, whether it's a webpage, an app, ah, website, or what page optimized for a mobile device? Or a diagram showing how websites different Web pages connect together, It's basically just a visual sketch of what something in a project is going to look like before it's finished. Using wire framing enables me to share my ideas with clients before the work takes off on the project goes too far. This eliminates confusion, gets my clients a realistic expectation of the project and eliminates extra time spent making corrections and edits frequent use of wire for me. And my work is when I create wire frames that show clients with their websites, navigation bar in structure will look like. And this course I'm going to show you my process for doing this. Using free software now say up front that the software is currently only available for Apple computers, but very, very, very soon. It's predicted that there will be a version for Windows, so even if you don't have on that computer, I encourage you to still watch so you can learn this technique. And when the software just come out, you can try it for your Windows machine. By the time this courses is completed, you should have your own navigation wire frame and a new tool for better communicating with your clients and planning or Web projects. I hope you'll join me, and I look forward to seeing what you create 2. A New Design Tool: Well, I'm glad you decided to join me from my class on a wire framing website navigation menus. Our first step is to download the software will be using. I'm going to introduce you to a new tool by Adobe called Experience Design or X'd. You can currently down with this software for free. Go ahead and open up a Web browser, then go to google dot com and type Adobe Experience Design and click on the link to Adobes website Adobe. Experienced design allows you to design wire frames and prototypes and share those designs with others. I'm going to go ahead and download 60 for the Mac. Now, if you're using Windows, you'll notice that in the top right corner of the screen, there's a button that says Notify for Windows. A version of X Day for Windows will be available very soon, But as you wait for that release, I'll go ahead and show you how X'd works, so you can determine whether or not you want to download it when it's released. If you'd like, you can go ahead and click that button they had notified for. When it does come out for Mac users, go ahead and click download for Mac. Okay, in the first time you get to a stream will be asked to fill out Samantha. Whether it's a question or a series of questions, they're just basic questions. But after a while, you should get to this spring and on chrome esto launch the application. So yes, And if you're not signed into Adobe, you we asked to design in order to create an account which shouldn't be too difficult of a process. So x d is down little known that shouldn't take too long. If you have any trouble getting to this point in the process, just shoot me a message in the comments section and heard a private message, and I'll be sure toe to walk you through a solution for that. So what's this Down this? I will show you what X ray looks like in the next video 3. Creating a Menu Wireframe: Okay, Well, if you downloaded experiences, I am a no difficulties. You will come to this screen once you open it up. You see, there are four different canvas sizes to choose from. There is also an option. Teoh. Watch a tutorial If you're new at this, which probably would not be a bad idea and the rest of recent files that you couldn't open here once you've been using it for a little while to create many wire frames, I just use the custom size canvas. That's what we're going to click. And here is your canvas Rex D. So the first thing I would direct your attention to would be the tools on the left hand side. Here you have a standard select tool, which were currently using right now for the mouse. And we have a rectangle tool, which is what I use for creating sections in a project. You have the Ellipse tool, which could be helpful for creating buttons, the line tool, which I used to describe things in a wire frame. So I'll point to them and then, at a description next to the line a pencil, which I don't personally use, but you have probably used from urban artistic design project the text tool, which you're going to use frequently in this project and creating a menu wire friend. They are portal, which actually don't use myself, but which could be used to create a multiple. Our ports of the next within a canvas zoom tool, which would enable you to look at an element of, ah, larger wire frame, are closely, and there's also a prototype option here. But I'm not going to get into that in this video. That would just be if you want a link between various start boards, that's something to keep in mind. And the other thing I will point you to is the section on the right, this pain over here, which will enable you to edit certain options for some of the tools will be using. So, for instance, if you use the textile, which is the one we would mostly be editing the most, you can edit the font font size. You could give it a different color, so just standard Internet. It then and custom physicians. So there are other things are going to want look into if we're gonna use extra a lot, but for the sake of our presentation that in our project, that's that's all I'm gonna focus on for now. So without further ado, I'm going to get started on our project. So the first thing I would do in creating a many wire friend is using the rectum is used the rectangle tool. Something clicked that I'm gonna create a section dragging, clicking and dragging like this. And that looks about right. So we'll stop there and then you can resize it once you've created it. Like looking at dragging. So we're gonna label this using a line with 1 to 1 before we're gonna click and drag about there. Then I'm gonna click on the text tool and now description. Okay, so I'm gonna call this primary. Perhaps this will be our primary navigation bar, and I'm gonna resize it, using the opportunity over here resize it to I mean, it's about right. Okay, Now, one of the things I love about X t is it lets you know how things are positions in proportion to other objects on the canvas. You can see and had this line position to the halfway point between the top of this rectangle on the bottom of the rectangle. And it can also let you know this, uh, how even the spacing is between two objects, like right here. So that helps in getting things along very quickly and very efficiently. Which is one of my favorite things about using X'd. Okay, so there's our primary navigation bar. One thing we can do is change the color. I'm gonna leave the color of the way it is for this one. I'm gonna go ahead and create another navigation bar created on top here. Rectangle tool. Just like before. That looks about right. And I'm gonna color. This one isn't a fill option here to your blue. Let's go with a likely that looks about right. And you can continue to resize it as you work on the project. So it looks perfect. Okay, I'm gonna do the same thing. I'm going to label this. And rather than create a line tool and a text airline a line here in a text box, like before, I'm just gonna go ahead and copy and paste. So only not command. See? And for men V, I'm going to copy and paste this and looking up here for the for a Windows computer, you're gonna hold control seeing control V to do that or if you just right click could copy and paste. I'm gonna copy. Primary now a place that and double click. Like in secondary nap That made a little bit faster. Okay, so now we have both of our navigation areas. Anyone at a border to this bottom primary? Enough to do that I'm gonna do is I'm gonna choose border here, and I'll just give it a border blue that you can see what it looks like to create a border . Okay, so the next thing I would do now that we have the structure is create a logo. You know what? You could do it if you don't have a looker yet, is you could just literally just type in look like that and your client will know that's where the look was going. You could also type in the name of the website. But if you did have a lover just so you know how to import graphics into X day, I'm going to go ahead and import the local for my small business. So we're gonna file in the top left and we'll cures import. We'll take me to my files already at the locals selected here. Member imported. Here we go. I'm just gonna resize it. There you go. Very quick and easy. Way to import graphics. You know, we have our logo. We're going to you ads our menu items for the primary now. So to do that, I'm seeing it creates in Texas, and I'm gonna call this first item home. We'll keep this menu item simple with about 4 to 5 items, Miss Resize. That too. Let's go with 14. No, it's good. You're a little too small. Exercise this. I feel a little bit bigger, so you can see it. Better go to 16. It's good. Okay, It's home. Most again. We're gonna keep this nice and simple copy and paste that we just do about and about. Okay. There you go. Copy and paste again. And here you, um and, yes, Services page. And then I have to resize it to make it all fit a little bit. Okay? And let's just still with four pages, will do a contact us page here with this copy and paste the Mikan user. There you go. It's like I said, ready to resize it to make everything strike 15. Just play around with it. So you got everything the way you want it to look and turn it on 15 And there we go. Everything. Sure it's the lines for Okay, so they're your basic have menu items. You can also pacify them to the secondary naff here, Not generally. What I'll do is put the social media icons in this secondary menu. You could put them in the top right where you could put them towards the left. Um, in this case, I'm gonna put him in the right hands area of the nap menu and what you could dio is actually create some graphics or download some social media. I comes from the Internet, so let your clients know what is actually going to look like I would do that if you knew for certain what social media icons were going to be on the project for the sake of time. I'm just going Teoh Brosa, text your copy and paste, and I'm just going to type in local media. I can't let them know that that's where we'll have the social media icons located. That's helpful. If you don't know yet what social media comes will be on, uh, wire frame or on the Net menu. I'm gonna change that color to White. Using the fill option. I'm gonna make that said 13 a little bit smaller and then something. That's a good idea. Have in the second during of is the phone number and email address copy and paste type fictional phone number in here. You could do if you wanted to get creative, is get a graphic with for a phone and put that to the left of the number once again for the sake of time. I'm gonna be simple at the same thing with the adjusters. Your fictional address here looks good. And then you have it. There is a very basic menu wire friends. You could play around with it and try different designs. Different structures. You could also make it a little bit more complex a little deeper. You could create some drop down than using some major menus. Um, I would do you that using the rectangle tool it was a menu menu could create something like this. You could go like this for a drop down menu a little bit more simple, then I would create a line. But you know where this is coming from. Um, the only problem with this is if you have multiple drop down menus, everything is going to get in. You're gonna have it all the menus getting in each other's way. So what I would do there is I would create a separate choir frame for each drop down menu. Um, and then you were just add your text like that into each section. The only other thing I would recommend doing for some project because creating a call to action button in the menu where you highlight one. But within the navigation menu more than the rest. You could do that using the Ellipse tool. I would do it using the rectangle tool I'm just created. A simple rectangle like this lands color it in, say, with red. It makes sense to get attention. We'll just do that for this argument. For this example, copy and paste this on. Thank you. Just fill it in with white. It would be easy to add a call to action button and put it in the the navigation area. Um, those are the basic things that I use this for, Um, but I encourage you to get creative and trying a bunch of different things out. Try maybe, ah, sidebar a navigation menu. Try maybe a hamburger menu navigation and playing around with some ideas, too, to give your client an idea of what the the menu would look like when it's finished. I'm try creating a more complex menu, but it will help you. Creating a wire frame for a menu will help you plan out. The structure of the navigation in your minds will hope you play around with where you want things to be, and it will also give your clients a good idea of whatever it is gonna look like. And you can get their approval for the structure before the project even takes off. So there's no surprises when the project's finished, and it's also a confirmation to them that you're hard at work in the project. Overall, it's something that will give you more confidence moving forward, and we'll give you something to show your plants what you're or you're hard at work on their website. So there you have it that is a simple website menu wire frame, and the next a video. I'm going to show you how to share it and share it with your clients, so I will see you there. 4. Send Wireframe: All right. So now you have your own website menu wire for him to share with their clients. Now, what I did this year, my wire firms, their clients is just take snapshots of them and then I'll just attach them, uh, to an email and send them the source best because your clients will probably not have X t installed to their computers. So there's really no point in sending the original file to them, So go ahead and find your screenshot tool of choice. I'll just use Max building screenshot tool, so access that by holding shift commands and for and I don't give me this icon I know for windows you should already have snippet to one sold by default. You can go ahead and search for that in the start menu, and it really doesn't matter what screenshot. So you use Just go ahead and and pull it up and take your spring shot and there we go. My screenshots already automatically set up to be safe to Dropbox. So I have to do is go to Gmail and grab the attachment. Perhaps that way area. And there it is. Now what you may want to do is rename it. I'll just say and you fire framed area And then I attach it and that is all the rules. Do it. You are good to go. 5. Your Turn: Well, congratulations on finishing the course. I hope you have a powerful new tool added to your designer tool belt once again when those users should be able to access this tool very soon. So keep your eyes peeled. I encourage you to create your own many wire frame, take a snapshot of it and uploaded to the community section. I will look over each project and give you my feedback as a thank you for watching my course. I've attached the template of a basic menu wire frame that you can use an extra as a starting point for your next project. It's actually the template you're looking at. You find this template in the about section. I want to thank you for joining me on this journey. Your work is a designer is important, so keep growing. Keep experimenting, keep delighting and remember to have fun. Thank you again and please let me know if you have any questions.