Introduction to Axure RP for UX/UI Designers | Sarah Khan | Skillshare

Introduction to Axure RP for UX/UI Designers

Sarah Khan, UX Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
13 Lessons (1h 3m)
    • 1. Introduction: Who I am

      2:16
    • 2. Trailer

      0:28
    • 3. What is Axure?

      11:09
    • 4. Installation and the Workstation

      14:53
    • 5. Basic Controls

      3:54
    • 6. Add your First Elements

      4:28
    • 7. Text Properties, More Elements

      5:39
    • 8. Create Footer, Use Icons

      5:21
    • 9. Refinement, Layers, Properties Tabs

      4:38
    • 10. Add your Font, Almost done!

      2:10
    • 11. Save as .RP files and Images

      3:38
    • 12. Publish and Collab with Axshare

      3:34
    • 13. Class Assignment: Make your own!

      0:37

About This Class

This class is for students who have never used the wireframing software, Axure, and would like to get started. I will cover what Axure is and who uses it, what other resources you need to get started, and how to use the software to create pixel perfect wireframes that can also be clickable and interactive.

At the end of the class, students will have created their very own wireframe that they can share with colleagues and team members.

This class is geared toward anyone who has never used Axure before and wants to get started. Those with a design background or general concept of web design/app design will benefit the most, but really anyone from any background will be able to understand the concepts in this class!

Transcripts

1. Introduction: Who I am: Hi there. I'm Sara Khan. I've been a freelance user experience designer for the past three years, and now I'm on skill sharing, sharing my knowledge and expertise with you. Now, I know you don't really know me that well, so I thought I would make a short video just talking about who I am and how I got to the fulfilling career and user experience that I have now. My path to UX design was not straightforward. I didn't go to art school, and I never really worked in graphic design as a job in college. I actually studied physics, Yes, physics. And I started my career as a science journalist and a writer. Of course, everything was going digital, and I wanted to hop on that trend by editing and designing the blocks and magazines that I wrote for. Eventually I realized that my skills and writing content, strategy and Web design meant I could do something even more with my talents. Well, I was working other jobs. I saw many problems with the way websites and applications were being designed, and it really frustrated me. I wanted to make products that were easy to use, and I knew that as a result, I could help people and make it impact in their daily lives. I remember when a friend first told me about having a career in user experience design and the light bulb went off in my head. You x was perfect for me. I am both a creative and logical analytical person, and I love using the both parts of my brain when it comes to my job. I enrolled in a UX design boot camp toe, understand what UX designers really do and how they do it, and it also helped me build my portfolio. I knew I wanted to work for myself and be my own boss. So eventually I quit my full time job. And since then I've been freelancing for large companies, nonprofits, government agencies and entrepreneurs and small startups. I love making my own schedule, and I love my career, which is why I'm on skill share now, sharing my knowledge with you. I hope you like my glasses. Don't hesitate as questions in the comments and happy learning 2. Trailer: Hi, everyone, and welcome to class. Today you'll be learning about the interactive prototyping software actioner, which is used by UX designers and companies all over the world. At the end of the class, your own project will be to create your very own interactive prototype and share and collaborate with your U ex colleagues and team members. Don't hesitate to ask any questions in the comments or get in touch with me if you need more help throughout this class. Thanks and let's get started. 3. What is Axure?: Okay, guys. So this is an introduction to actually er and for this first class, I'm just going to spend a few minutes talking about, you know, before we get really started just talking about what actually is who uses it. Ah, the capabilities it has and what you'll need to get started with the program. Actioner is a design software that's used to make, typically used to make prototypes of websites or applications or really any digital product . Because it's so versatile, you can actually make a lot with actual. So other things you could make include, um, like I said, wire frames or what I like to call blueprints of websites and applications, you know, they're not fully designed and they don't, um they're not developed or put on the Web. But it's something that you would share to show, you know, how you would go about designing that particular website or app or sort of like a rough draft of that website or application. Um, other ux deliverables include things like user personas, which is super useful if you're doing a lot of user research and you want Teoh sort of personify your user base. Um, you know you can also do user flows and task flows, which are super useful for UX designers. When you're deciding about certain processes within the website or app, maybe there are certain things that you know you want your user to dio. But you need to kind of map that out in a more visual way to share with you or your team members. So they kind of understand your thought process of how user would go about doing a certain task. Um, you can also make things like style guides. You could make site maps. You know, if you have an idea of how the entire website or APP is going to be laid out, you can even just do the whole thing. An actor, it has a lot of capabilities to create interactive, fully functional prototypes of your website or application. So when I say that, I mean, you know, you can click, create things that will, um, you know, have clickable spots. Um, you can create um, interactions that depend on certain logic or input from the user. You can create animations. You can create a lot of things and actually er that actually make your prototype start to look and work like the real thing, which is also, you know, super useful for design teams. Um, really, If if it's anything visual and it's anything you want to present to your team or to other people on your team actually can probably do it. Which makes it a really powerful software. It's something I really like to use with. That said, I just want to kind of give you some examples of things that you know you can do in actual . For instance, this right here is more of a We call this a low fidelity wire frame, and it's like I said earlier there very much like blueprints of your website. So if we just look at this here, we've got you know, the designer who made this, um, was kind of just laying out the way the website would Look, if you were looking at this website on a desktop, you would see these pieces of content on the front page. Um, you would see things like this. Right? Sidebar. You know, this is what the designer wanted for the right side bar. Um, you know, who knows? There could be some logos here but instead of instead of putting the actual images here, they just kind of have a placeholder. So this is kind of where actually comes in, where you can kind of create these lo fidelity Wire frames were not. Everything is fully beautifully designed yet, but it's a really good tool to show your thought process and to show the layout of the site as you kind of want it to be. But, you know, I mean, you can go even more high fidelity. Ah, with something like this. So I picked this up of the Internet to, and this was designing actioner. This is a blueprint of a, you know, a landing page, and what I like about this is instead of having placeholders for images and banners and stuff, the designer actually was able to put in the images in the design software itself. So the resulting product is something that, you know, you can see. It not only has things like logos and the fine and the color, um, and it's very well styled with icons and things like this. Um, but it really looks like a website, you know, This is something that is it's pixel perfect. We've got the styles and colors added. Like I said over here, um and it's really something that you can show to your visual designers. I mean, that's even something that a visual designer could just take it and run with it because now we've got the styles and the fonts and everything already put in. So this is almost like one step closer to just, you know, make After this, you kind of will just have to build the website. Another thing you can make with actual like I said before, is this Ah, user flow or a task flow. So this is sort of like a really quick example. This isn't very styled, you know, it's not styled a whole lot, but this is sort of like an example of ah user flow that I did for a client. This is for an application for mortgages. So this would be the process that ah user of this application would take. Teoh, you know, do things like Adam mortgage at an applicant, request documents, you know, and you can see the path This this is sort of like a visual representation of what I thought in my head the user would be doing an actual has these capabilities to do that, you're able to make thes shapes rectangles. They have, ah, whole suite of shapes that you can use to make any kind of user for you want. And of course, you can design and style it any way you want, so it doesn't have to look like this, but you can actually make things that air styled really well, you know, if you need to make things that are branded for your company or for your client, you can definitely do that. Who uses actual, um, again? Like I said before you x and you why designers will use actual a lot Acela's design teams. So that could be a team of U, X and Y designers. Um, maybe also, you know, that might include graphic designers of visual designers as well. Oftentimes I see actually being used in larger companies. Um, and the reason for that is that, you know, teams actually can collaborate within, actually er, um, and among themselves or with other teams, when they have designs done an actioner, they can actually take those designs and share them with other people in the team and edit them in real time, you know, make comments and and annotations and things like that. So it becomes a really useful tool when you've got a bunch of different teams, you know, working on the same product. And so that's why a lot of large companies use actor. So the tool that's used Teoh collaborate is called acts share on and with acts share. You can upload your designs, um, comment and edit in real time. And like I said, you know, like I just said, you could work on them as a team, which is super useful. So many, Like I said, large companies air using actual er. So this is sort of I got this off the actual website, but this is just a small sample of the companies that use action for UX design. You know, we've got your big names here, Um, and and of course, with that you get a lot of smaller companies and agencies as well that he was actually. So it's really a useful tool to have in your toolbox, you know? I mean, if you are thinking of ever working at any of these companies or, um, you know you want toe collaborate more in a design team. Or maybe you're just getting into user experience design, and you want to make sure that your resume stands out. Um, actually, er is a great tool to have on your resume. It's a great tool to have in your toolbox. And like I said, yes, way more companies. Now that being said, there are many, many other design tools out there, you know, actions, not the only tool that you could use. But even down here, I mean, you can even use things like Power Point. You can put a prototype in a word, dark. You know, you could use Emma's paint if you wanted Teoh. And of course, a lot of prototypes are just made with good old pen and paper, especially when it's a low fidelity design. A lot of times, it's just easier. Teoh, you know, show someone a quick sketch. You know, maybe you're person that you're showing is like next door in your office, and you just got to go over there and draw a quick sketch for them. Pen and paper works to, and I mean, there are so many more that I haven't touched on here. Um And I think really the lesson of that is you know why you have to expand your toolbox and it's good to know a couple of tools here and there. I think for most UX designers, it's just, you know, the best thing really is to just use what you're good at. So whatever you're good at, um is what's gonna get you really great results. There's no point in learning every single tool out there. And I'm really hoping you'll be good at actually by the end of this class. Okay, so the next thing we'll do is just I will show you what you need to get started. You're gonna need a Mac or a PC, usually with the latest Os, um, for PC. It's Windows 10. Um, you will need a registration key for this software itself. So you're gonna need Teoh purchase this or I believe actual also has a free trial. So you are able to get a free trial of actually if you just want to use that for this class for now, but eventually you will have to purchase the software. Um, and the last thing you'll need just to kind of make your designs really stand out. And I'll show you how to do this in the next videos. But you will need some custom fonts and some custom libraries that you can install on actual itself on and that will really make your wire frames and your prototypes look and feel really original and unique. So I have included links here where you can get Actually, it's just actually dot com slash download, um, and the libraries and icons and things like that. You can download them now, or you can wait until I, uh, in the next few videos, I'll show you how to do that. But I included the link here, too, which is actually dot com slash support slash download widget libraries. That's just one link where you could get stuff, and that's what I'm gonna be using. Okay, Next up, I will show you how to install this software and the extras. This will be the next Siri's. This will be the next video in this class, and pretty soon we will get up and running, and we will be able to make our first wire frames and prototypes 4. Installation and the Workstation: Hi, everyone. This lesson will be about installing actual or P eight as well as installing fonts, libraries and a quick work through of the actual work station. Let's get started. So to download. Actually, we're going to go to this u r l It's www dot actor dot com slash download. You're going to need your registration key if you purchased it, or you will need to use the 30 day free trial. So I'm gonna go ahead and show you that. Okay, We're on the actual download page right here. You can see that there are both buttons for Mac and PC, so you'll just grab whichever one, uh, is relevant to you. I am a PC user. So I take this one. You can see it's downloading here, So we're gonna give that a minute to download. Okay, Now, we have actually down here, uh, downloaded. So we're gonna go ahead and open it up. Uh, we're gonna go into or downloads. Actually, I should be here. I've already got one, so I'll go ahead and click this one Click. Yes. And it's just gonna go and install everything for us clicking through the Wizard here. Super easy. We I actually would like Teoh put this in a different location. So choose your file location, okay? And that was it. So it's installed. And down here, there's actually one here to run, actually, So we're gonna go ahead and do that so it'll run upon installing, and this is it. Guys, this is the actual program. Um, this is everything you need to start creating your wire frames. I'm gonna go ahead and give a really quick run down of this workstation first before we download the extras. So really quickly. This main area is your sort of like your canvas. This is where you're gonna be doing all of your wire framing work. This is where you're gonna be putting in all of your designs. Um, this is basically the, you know, the area where you go and actually do the work. Um, and down here on the left, we've got some pains here for a workstation. One is called the Masters Pain. Uh, this is kind of a special pain, for if you've got designs that need to be duplicated across pages, you would put them here. The pain above that is called libraries. So these. These are where you will find all of your shapes. All of your available shapes, icons, flow chart icons, um, different things that come with AC shirt. The all these things come out of the box with action. Um, this one doesn't, though, so I'll show you how to get this later. But the default comes out of the box, and these air just sort of your default shapes that you can use with an actual. You know, we've got true used tables, text fields up here. You've got text headings, buttons, images, boxes, all that stuff. Uh, over here on the upper left is your outline of all the pages you have. So this is sort of like your map, your site map or or your map of your application up here at the top. We've got very, you know, typical tools that you would use. Um, sort of similar to Microsoft Word. You've got things, you know, the selector, buttons, connectors, the type of pen you want their arm or down here that you can choose. Um, you know, all of these will kind of be available to you once you have your shapes in here. So they're just another effects and their alignment effects and things that you can dio Teoh, make your wire frames to your specifications. And, of course, the font editing the find colors Over here. Position over here, X y with height. Um, over here we have the buttons for sharing and publishing. When, when we get to it, I will show you how to use these buttons to publish your work onto acts share, and you will be able Teoh do that. So again, those air over here preview share with others. Publish down here. This is an area that does a few things here You will find ability to take notes on pages. Um, this also serves as a place where when you start to do your interactions So when you start to make your wire frames interactive, you will have space here, too. Code Those interactions an AK sure automatically kind of adds that in once you start actually designing something in the workspace. So yeah, it's pretty simple is pretty straightforward, actually, doesn't. It might look complicated at first, but once you get the hang of it, it's it's not really that difficult. Most wire framing Softwares have a similar type of layout. So if you know one, you can kind of apply that knowledge to actual and you'll get the hang of it pretty quickly . So the next thing we want to do is before we get started on anything, I actually want to download a few other things. The reason being we don't have enough libraries here. Um, I would like to add a couple of icons and neat little things here. Um, that will really make our wire frame stand out later on in the class. So in order to do that, we have to go to a different website, actually dot com slash support slash download widget libraries, which is over here. So this is the page where you can download extras such as libraries, icons and extra templates for working with an actor. And this is sort of a community driven page. So you will see some, you know, some things cost money. So this is Ah, this was created by one author, and whoever did this wanted to charge a little bit of money for it. So some of these do costs money. You'll see the signs next to it, though, so there is no, you know, sticker shock. When you get to the pain, you wanna download something, But we don't really need anything that costs money. We're going to just get a few free libraries. So let's see what we got here. I know that this wire frame I'm gonna be making is a mobile wire frame. So I think I want a few things. One thing I probably want is a kit for How about this one? A kit for Iowa's eat. So this is Let's see what this looks like. This is gonna be So this is nice. This is gonna be actually templates for IOS eight. So when we put these into action will actually have wire frames that have the similar style and guidelines. Sorry, it was eight. Well, that's pretty cool. Maybe I want to download this. We don't go to download. You want this one? Okay, we clicked it. So the button here is for, I guess, IOS. And I guess the he also the android here. So we're just gonna take IOS. You can see it has downloaded here. The extension is dot r p l I B. So the next thing we have to do is and you can see it in our downloads. Over here. This is it. So the next thing we want to do is add the library. Teoh fracture itself. So in order to do that, we're gonna go to libraries. The pain on the left. We click on the burger iPhone here, and we're gonna click the icon load library. So when we load a library, we just go to the one we just downloaded, which is gonna be this one. You Excuse me, I I say everyone, open it up, and that was very quick. And now it's here. So if you want to see this whole library, we can hear, Let's see, expand this a little bit so you can take a better look it with the library offers. So we see. Actually, we see a lot of really good templates here, so we actually have a template for iPhone five. We've got some tables and navigations spinners, panels, all the things in IOS that are, you know, specific toe IOS. That would be hard for us to design on her own. It's a physical example. So we put this up here and this actually turns into an iPhone template. So this is something where weekends just start designing our mobile pages right in this temple. It and for presentation purposes, it would look really nice. So that was one thing I wanted to download. Another thing I would like to have is the font. Awesome icons. So we'll show you what those look like. So that is also another library that we will be downloading, So that will be so We're going back to this page. Download widget libraries font Awesome is here, right here in the left. Here. And we're gonna do the same thing. Could go to download and the 60 to a page. And the download link on this page is going to be right here before seven dot r p library. Go ahead and click that it's going to do the same thing Really mattered. File downloaded here. We're going to actually, and we're just gonna do the same thing. So we're gonna click the burger load library, and you see, I've already got an instance of awesome and you see that this library is already loaded and will be refreshed. Okay, Cool. So now we've got that too. So That's perfect. So now we've got a set of icons that we can put in our design as well, which is really nice. It's gonna make our design will stand out and look really original and unique. Now, one more thing I would like to download because we don't have it here. I need to download a special fund. So we have the font Awesome icons. But I also like to download the font that is called font Awesome. Um, so we're gonna go ahead and do that as well, and I'll show you how to map a font to, actually. Er okay, we just want front. Awesome. So fluent and downloaded that. So this is a zip file because now we're downloading an actual font. So this is what our type is gonna look like Our text is gonna look like when we start to type things. And actually, when we start to put text in our wire frames, we want the wire frames to have this font as our text. Typically, you go into downloads. Here we have it. We want Teoh extract this zip file. Uh, extract all. Go ahead and extract it. I am here. It is now in order to put this an actual Here's our actual because I put actioner on my D drive. We're gonna go in action, the file fonts, and you just paste that font Awesome dash for 70 Phile into this directory, which is actually that actual r p eight dash wants. So wherever you have your actual software installed on your computer, you're going to go in and I'll do it again for you. You're gonna go into action, you're gonna go into R p eight, the directory fonts, and you're gonna paste font awesome right in here. And what that does is that basically just installs the front for you. And so what you would do here is you would actually close out of action. Er you would close out of action. No, I don't want to say and then you open it back up again. So let's open up actual once more, because this sort of resets it. All right, we're in now, Font. Awesome. Should be here up here. We should have it here. So if we put a shape here that takes text and we want the text to be far awesome, we should be able to go down here and find it, and there it is. So now if we type in this barks, the fun is not gonna be aerial anymore. It's gonna be our front, which is awesome. And there you go. And now our next class will be about starting your very first wire frame, so I'll be able to cover all the basics of actor and we'll actually be able to get in and start creating. 5. Basic Controls: Okay, now that we have installed actual and all of its extensions, we will start working on our very first wire frames. So this class will cover just the basic features of actor, and I will show you how to use shapes, colors, fonts and layout features with an actual ER to create your very first wife dreams. So let's get started. So first I think I want to just expand this pain a little bit since we won't be using the pain on the right so much. But I would like to just expand out the center pain so we have a little bit more room to see what's going on. So I'm going to show you how to create a mobile wire frame. So let's go. The first thing we want to do is create a framework for a wire frame, so we know how big it's going to be, and we know the size as well. So I'm gonna go into this area here, the library's area, and I'm gonna choose. So look at a different library. I want to look at this library, and if you recall in the previous lesson, we had downloaded this library Ah, because this library has shapes for IOS, and the wire frame I want to create is gonna be an IOS, and we want the right size for our wire frame. So let's go down here and let's find Here we go under you. I base, we see iPhone six device. So I think I want to start creating my wire frame with the size of an iPhone six. So I'm gonna go ahead and drag this object here. And so here we go. We just see that I dragged this object into the canvas, and here it is. And this is the exact size and the exact look and feel of an iPhone six device. So this is sort of our background. This is like our frame for what we're going to be using when we start actually putting in elements and objects in here. And we could see the actual width and the height up here in the upper right hand corner of this frame. So we know exactly how big and how wide and how long this wire frame is gonna be, which is really helpful. So this is great. We've got our background. So let's maybe start looking at what we can put in here to make our first screen. So I have decided that I want to make a log in screen. It's gonna be super simple. I'm just gonna make a log in screen for my sample application to show you guys a couple of features, a couple of shapes that you can use with an actual Um so the first thing I want to do is I want to zoom out of this a little bit so I can get the whole shape on my dust on my view port. So the way use him out is you can use this zoom button here, and you can select a percentage if you want. So if we select 50% wheezing out to 50% and you will see that the grid has now become larger So actually you know, out here we have up to 1200 then it goes all the way to 2200 pixels and the height goes down all the way to 1000 pixel pixels. And another thing you can do, you know, the short key for that would be like control plus, So if you do control plus and control minus. You can zoom in and out. The next thing I want to do is start putting stuff in this blank space. So our next video will just be adding more elements to this wire frame to really make it come alive. And to really make it look like what we wanted to look like. So see you in class. 6. Add your First Elements: Hi, everyone. Now we're going to start building out our wire frame with some basic shapes and text. I'm gonna show you how to use the libraries with an actor. Teoh. Customize your shapes and your text to fit your new wire frame. So I would like to go into libraries here. I want to click the library that says default. And this is a default set of shapes that comes with action. So I'm gonna go ahead and expand this out a little bit so you can see it better. So we've got all kinds of shapes here. We've got boxes, um, circles, image place holders, headings, you know, paragraphs and fonts and things like that lines. You know, you go down here, you've got some more little complicate. More complicated things. Um, stickies radio buttons, tables, things like that. But we're gonna keep it pretty simple for this one. So I'm gonna go ahead and think, OK, I want to have a log in screen. So there are a couple of things we need for our long and screen. We probably need a header. So let's choose this heading one. Ah, maybe our app has a logo, but we don't have the image yet for the logo. So this option that says placeholder would work really well for that. So if I've got a logo for my app, I know I'm gonna have a logo, but I don't have the exact logo just yet. I can kind of put a placeholder up here. So, what else do we need for our log in screen? We might need. Well, we probably will need a space to do a user and password. So there are a couple of things we can use here. There's one called a text field. If you go down here, let's see what that looks like. Okay, so this opens up a nice text field for us, so we can actually kind of expand this and maybe make this look kind of nice. Um, I probably want a button that will prompt the user to log in, so I'm gonna go ahead and put a button here. Um, what else? What I want. I'm gonna put some extra text here. I'm gonna use heading three instead of heading one, and I would also like Well, let's see, Most log in screens. We've got the title. We've got the user and we'll have a password field down here. We will in a minute. Um, we've got the log in button. This is going to be for another, you know, sometimes they have log in or sign up. So I have had another heading here for sign up, which would normally take the user to a different page. Let's check out the FAQ Awesome Icons Library. We have got things that we can add to our wire frame like icons. So maybe I want to add this about the top and I'll keep that here for now. And maybe I would want to have one thing I just thought of when we go back to the default library, because one thing I just thought of was we might want to have a footer. So let's use this gray box. It's labeled Box Three and let's. And the nice thing is, if you're if you're looking at this, you can see how actual er has thes lines that come up these blue lines that allow you to sort of snap two different alignments on the page so you can see here. If I go out, it snaps to the center of the entire wire frame, which is nice. Then it starts snapping to other things, like the heading and the button and the form, and then you can actually go all the way out to the other end of the screen, which is super nice. So actual has that capability where you don't have to guess and test where your length is gonna be. It's sort of just automatically snaps to it. And that's also something you can, um, I believe you can change in the settings if you want that to happen or not. So so that was it for this lesson. In the next lesson, we're going to learn to customize our shapes and our text even further. I'll show you more about colors and alignment and size and font in the next few lessons. See you there. 7. Text Properties, More Elements: this lesson will be about adding more elements to our wire frame to really fill it out. And I will also show you how to edit text properties such as color and font and wait. Okay, so this is very basic. Um, we So let me put some text in here first, actually, and the text is going to read for now. We're just gonna keep it as footer. So that's so we know that this is gonna be a folder. Um, So here's the text, and I can't really see the text very well. But up here, we've got options to change the font and size and things like that. So I'm gonna change the size of this fine instead of 13. Let's try it as 20. So now we can see that a little bit better That this is gonna be the footer. Okay, so we got our basic shapes here. Um, already, you can see how this becomes sort of a blueprint of what would be a mobile app. Right? Because you can see how we've got all of our elements in here. Well, we haven't put any any text in this or any specific fonts or colors, but I will do that right now. So the next thing I want to Dio is heading one is not a very descriptive heading for my sign in page. So I'm probably to change this and maybe all changes to say something like or maybe log into my account, my account. Okay, this button, the text on this bun is not going to say button. Obviously, it's going to say log in, and this is going to say sign up. I want something that says or sign up, so maybe we will or sign up. Okay, so here is an interesting thing where we've got everything is left justified but actually want this center justified. So I'm gonna go up here, click this button. This is center. So if you don't know if you haven't picked up already, this bar will let you edit your text effects. So everything from you know, your typical, um, text Wait, the text color bullets. Um, we have your alignments here. You know, you can do a line middle as well, which will put it in the middle of the text box. Here. You can change the color of the text. We've got the position here like I said before, with and height. So actually, you can go in if you wanted to and change these manually. So if I didn't want it to be 71 I wanted to be maybe 100. I could change it like that and you can see down here. It just changed automatically, which was really nice. And this is something where, um these these controls are really good. If you really have very specific, um, very specific styles that you need to input. These are really good, because you can just change it directly from here rather than having to, you know, go in and out, in and out and guess what it is. Um, if you want it to be exactly 100 you can just go in here and change it. 100 and same with the position. You can change the position of this to be x 2 30 Well, maybe I want x 2 50 And then you see, it changes down here, so we we ought it changed the location of the object. Well, the next thing I probably want to dio is go ahead and, um, make the password field here. So now I've got two fields log in and password. One thing you can do with these fields is you can actually type text as well. So, you know, sometimes we have the text that prompts you for, uh, what toe? Enter here. So here we want user name and password. But maybe I want this text to be it metallic. And maybe I also want this text to be a little bit bigger. Maybe I wanted to be 16. Let's see how that looks. I think that looks pretty good and the same thing here. I want this to be 16 and I want this to be italic. Another thing I'm just thinking of is maybe this text may be the color of this text. Could be a little bit different. So maybe I want it to be gray as well as here. We will do the same thing. Just make it gray. So that looks pretty good. I think we're gonna make this button a little bigger. And we could make the fought in this also a little bit very girl, but twining. And with this, let's say if we didn't want blue, we could change the color here to be something different. You could change it to be red, purple, like whatever color you want for your log in. You know, maybe I like purple. Um, And you can also change it here with hex code. So if you have hex codes already, maybe you've got the specs from your designer. Ah, you can go ahead and put in those as well. The next lessons will focus on creating the footer for our wire frame. And I will also show you how to use iconography with an actor. 8. Create Footer, Use Icons: this lesson will focus on building out our footer and using the font awesome icons that we downloaded in the previous videos. So other things we can adhere would be images. Maybe we want an image placeholder down here and the footer. And we can kind of do this, you know, and me, I'll delete this text now that says foot or now that we don't need it because we're starting to fill in the text here. So maybe there's an image down here. I don't know what it is, but maybe the designer wants to have some sort of image, like a map or something in the footer. So we know what it is. Maybe in the footer. We also wanna have some extra text. You know, footers usually footers air, usually there because they help us identify um, what the website is. You know, they help us with contact info, um, links to other pages in the website or application links to more information. Maybe there's a map, So maybe this image could even be a map. So there a lot of things we can do in the footer, so I'm gonna put a couple more things here I want to maybe put some more text. I'm gonna use this library. This option that says label. We can make this some dummy text for contact information, so I'll just put ah, an address. Year of fake address. 1234 Uh, Smith street. Any town in the estate U s a. So And we can expand this box to include all of that information. So let's see what that looks like, so that that looks pretty good. Another thing maybe we can include here is maybe an email. Sometimes they have e mails, so we will put a fake email. Here. E mail dot Come. And this is where you kind of have to decide. Okay. Well, how are we gonna really display this information? Well, well, you know, maybe we can make this more big, so it kind of aligns with this, You know, maybe we can put these on the side here. I wonder if maybe our floater will have some icons. Maybe we've got some social media icons that we want to put in. So let's go to our fought awesome library, and let's scroll down and see if we can find some icons that would look really nice in here . So maybe I wanna have a Facebook icon. Another thing you could do with this is actually you can drag it out. So now we've got our big Then we can see all of them. Where's the facebook one? You? Well, here's one that I like. Maybe I want to put that in there. Maybe we have a twitter too, have you about the Twitter as well. And I want to get one. That kind of matches in the style of the Facebook one is kind of same so that we can kind of collapse this again, back in the pain. And we've got our two icons here and now I noticed that these are not Let's zoom in here actually first so we can get a better look because I notice I noticed that the background is not exactly what I want. And maybe I want to change that. Let's see if we can try to change that. So I want to have the same background as this box here. And the background of this box is if we go out here, fill color Phil colors d 70 77. I want to copy that. And I am going Teoh. Let's see if we could do the same thing for this parks. So this icon, because you notice if you can see there's some white space around it, but it doesn't look all that great toe have that. So I kind of want to just copy and paste that and let's see if that will work. De seven. Decent. There we go. So now it actually blends in Super nice with the rest, and you want to do the same thing here. We can actually just click this button here because the color is already filled there. So now the icons air kind of blending in, and they match well with this footer next up, I will show you how to further refine your wire frame with custom fonts. Um, I'll show you how to put in backgrounds and layers into your wire frame, and I'll also show you some additional pains with an actual ER to name your elements. And Teoh, you know, we'll look a little bit at interactions as well. See you then. 9. Refinement, Layers, Properties Tabs: this lesson will be about refining our wire frame and adding some more finer details. I will also go over layers with an actor, and I will take a look at the right hand pain where we can see labels for our elements and as well as interactions, notes and other technical things. Okay, so the next thing will just do is make this a little bit more refined and a little bit nicer looking. Um, I want to probably I think what I I also would like to do is have a background color for the section of the application. Um, so maybe I will go back to my library here, my default library. Let's take box to this time and let's put it here and let's expand it. So it goes all the way out here. Um, of course, this is not what we want. We want this to actually be in the background, right? Click it and there should be an option here It says order. And there couple options here, their son to back, which will take it all the way back. But we just want to send it backwards one by one. So we'll just do this option. And we can kind of just keep doing that until it goes until we get we see the text coming through. So a short key for that is just control. And the back bracket, the left bracket. We just keep doing it and you can see. See it. You see, the the icon here already popped through. But like, if I expand this pain here, this is the rectangle we had chosen. It's highlighted here, and you can see if I do control left bracket. It actually goes all the way down. See, that logo is coming through, and now the font came through. So this is now the new order of all of our elements. So this section is super useful if you want toe make you know, we've got all our elements right here. Rectangle, rectangle, rectangle. You know, image, text field, all of this stuff. And we just put we put this image or this rectangle all the way behind the font and the and the icon in the logo here. So it looks really good now. And here in this left pain you can actually do a lot of things here. Teoh. You could even rename elements if you wanted to. So this element we see is the Twitter icon. I believe yes is the Twitter icon. So maybe we want to rename this Twitter and thats useful because then we know that is not just some rectangle. This is actually the icon that we need and you can see once I named it, this new panel called Inspector has popped up and we'll talk about this later. Um, there are a couple of things you can do here. You can dio. This is this is a pain, actually for interactions which will come in a later class or a later lesson. And then But we'll also have notes so you can write notes about this and you can even go in and edit the style. These are all of the same options that we had up here. But here there are there specifically for this icons. You can go in and edit the style this way as well. So actually, super flexible. That way you can do a lot of different things. Okay, Okay. So that makes it a little easier to remember what our objects are when we're selecting them . So probably just a few more little details here. I noticed that this needs a new background as well. It needs to match in the background of this object. So that background is going to be F two f two F two. So again, we're just doing kind of the same thing we did with the Facebook icons. We will make this F two after ever do you press enter? And now we've got a icon that blends in perfectly with this background. I think I'm just going to edit this text a little bit. Um, usually if it's a sign up link, it is underlined. So we want that. I don't know if I want it bold though me. I just want normal. So our wire frame is coming together really well. The next lesson will be short, and it will just be installing a font Awesome on our wire frame. So we get a really unique look and feel to our prototype 10. Add your Font, Almost done!: I think the last thing I probably just want to do is change the font across this entire wire frame. So this looks really good right now. I mean, this this only took me a couple minutes to come up with, um and and it looks really nice. You know, this is basically your standards Sign up page for an application or a website. We've got everything we need. Um, and this is something you probably will see. You know, you've probably seen this and other applications already. I mean, it looks just like this. Um, let's just go ahead. And the last thing I want to do is change the font, because our font right now is Ariel. But if you recall in our last lesson, I actually wanted a funt called font. Awesome, because I think it looks really nice. So I'm gonna go ahead and change. The font is the next fund. There we go. You can see the style of the fun is a little bit different and actually like it really a lot, because it's super unique. Um, and I'll just do the same thing for these text boxes. Just call it fun. Awesome. That way. We are consistent. Awesome. I want the button also. So all of the text here, that should be fine. Awesome. So let's just zoom out really quick so we can see our final product. And so this is what it looks like. So we just made our very first wife room. This wire frame basically covered all of the basics of actual. I mean, every property I just showed you is available. You know, everything I just showed you. You can apply to any of these shapes in this library. So now that we have our final wire frame, the next few videos air going to be really short and sweet, I'm just going to talk about how to save and upload your wire frame. Teoh acts share, which is actually sharing and collaboration platform, and I'll also go over the class project 11. Save as .RP files and Images: Okay, guys, this lesson is going to be pretty short. We're just going to learn how to save our wire frame in different versions. We're gonna learn how to save it in the actual error file type, which is going to be dot r p. And we're also gonna learn how to export this as an image which you can just manipulate and use however you want. So we've got our wire frame here. This is what we had made in the previous lessons. So I had made no changes to this. Since then, we've got everything in here. Looks good to me. I want to go ahead and save this So I will go over to the file tab in Windows and we will click Save here, and you can also click Save as right here. And I've got it as actual demo. And this is what you come up in your computer as a dot r p file and the icons gonna look like this. Um, these are only able to be manipulated within actual itself. So this is good. If you want to come back to your file and work on it later, go ahead. Save it We've already got an instance of this, So we're just going to say yes, we want to replace it. So there we go now we've saved all of our work. The next thing we can do we save is we can also save as an image so we can go to file down here. There's an option export home to image. And there's also an option. Export all pages to image. So if you had more pages in your wire frame, you would choose this option. But since we only have one page that's labeled home, we're going to choose this option. And now that we're saving it, it's coming up. Is a J pain here? So we can name. So this is going to be an image that you can manipulate. However you want to put it in another program If you want, you can put this in a pdf or a word document or whatever is suitable for your team. If you want to share this among your team or your clients, so I'm going to call this actual er underscored demo, and it's going to go as a J peg. Now we're gonna say that and now we can go into our file path right here. Recent files, documents, skill sharing your video. Actually, devil, this is our image. And if we open it up, it comes up as a nice J peg image of our wire frame. So, like I said, this is something that you can, you know. I mean, you can do anything you want to do with the J peg image. You can put this. Um, like I said in a pdf, you can put this in a word document or really, whatever format is suitable to present to your team or your clients, obviously, you can also save a za PNG actual has that capability as well. So if we go back here and we want to save again export home to image, we see other options. Here we see PNG, jpeg GF and bit map. So we have all these different options here. Okay, so the next lesson will just be another really short and sweet video. It's gonna be talking about acts share, which is the sharing collaboration platform that actually has. We're just gonna learn how to preview and published things on acts share and how you can share it with your team members 12. Publish and Collab with Axshare: Hi, guys. So this video is also going to be really quick. I'm just going to show you how to publish your wire frames onto acts share, which is actually sharing and collaboration extension. It allows you to view your wire frames in a browser, and it allows you to collaborate in real time with other team members. So first, before we get started, you need to go into Google chrome, and you need to have the actual er r P extension for chrome. So the way you do that is he would go into the chrome Web store here and type in actual er r p extension and it comes up here, click it and you can click it here and install it. Mine has already added, and so I don't need to do that just yet. Um, the next thing we do is we go down to action and we have our wire frame here that we would like to publish and share with others. So those buttons air over here and we can preview we can share it and we could publish it and publishing. I mean, they're kind of all the same thing. If we click publish here published to Actor Share, and these were some configurations we're publishing under my account here. So you need to have an account, a log in to publish, click publish. And now we actually have a link here where we can click and go view our prototype online, and we'll do that in a minute. It's generating now, so we'll go ahead and click this. You can also copy the link to share with others. Click it and we are now in the browser online and our prototype is online now so we can see an AK shirt share. There are some pains here. There is the pages pain, and this will show you are other pages that for this project we never made any other pages . But if we had other pages, they would come up here. So that's your site outline. Basically, there's also a section for notes and the notes that you if you make notes within, actually, they will show up here. There's a section to discuss so you can actually add comments. Uh, you can add comments wherever you want. This works really well. If you are working as a team and you want to add comments as a team and reply to comments and result comments as a team. So and the comments air coming up here and they will also come up in the screen here to exit comments. You just click the X here and now Your comments are in a queue done here. And the last button here is the console. This is four interactions. So this is for if you have coded things into your wire frame that, uh, you know, buttons that you can click or things that you could drag and drop and other things that the user can do. The interactions will show up here. So acts share is really useful. I encourage everyone to use it if you guys are working in teams. If you guys need to collaborate in real time on projects, This, uh, extension is really, really useful for that. 13. Class Assignment: Make your own!: So that was it for this class. I hope you learned a lot about action, and now your assignment is to create your very own wire frame. It could be an app or a website that you thought of yourself. Or it could be a redesign of an existing product. If you're redesigning, make sure that you tell us in the comments what you've changed and why you changed it. Your wire friend doesn't have to be complicated. You can just make one page of this website or app uploaded to either acts share and include the link in the comments below, or upload your images into skill share so we can all see and comment Good luck and I look forward to seeing your work.