The web site of jiawp

UX Design Creating Wireframes

Wireframing Fundamentals Introduction In this course, we're going to start by covering some fundamental concepts related to wireframing, like its role in the UX design process, types of wireframes, and the tools you can use to create them, the concept of fidelity, adding annotations, and what to do when you need to sit down and create a wireframe. So let's get started in our next clip, Wireframing in the UX Design Process.

Wireframing in the UX Design Process In this clip, we're going to talk about Wireframing in the UX Design Process. So what is a wireframe? Essentially, wireframes are like a blueprint for a site or an application's layout. They show important functionality, they convey different types of content and groups of content, and they also give a general idea of the information hierarchy. So what do wireframes typically look like? If you do a search on a site like dribbble.com for wireframes, you can really see the wide range of what a wireframe can be. They can be anything from a sketch using pen and paper to a fully fleshed-out deliverable created in the software of your choice. It's also really important to understand what wireframes are not. Sometimes you'll see wireframes that include visual design like typography, iconography, and photography because unfortunately, sometimes when someone sees a wireframe, maybe you're presenting it to a creative director and they don't understand the role of wireframing and UX design, then you might get pushed to make it look prettier or make it look nicer. And nothing is sadder than taking a wireframe into a meeting and have people pick apart visual details rather than focusing on the core purpose of a wireframe. So it's really important to understand that wireframes are not design, and you really want to avoid any type of element that's going to make it appear like it's a design decision or some kind of proposal for the design. So when does wireframing actually happen? Typically, we'll have a discovery process and a research phase, and then wireframing will happen somewhere in the design process. Of course, everyone's process is a little bit different, but generally follow these different phases and will happen after information architecture decisions have been made. So overall, wireframes are to help you quickly generate ideas. They help aid discussion with stakeholders and designers and developers, they give a general idea of content hierarchy, and they help establish key functionality for a page or a screen. So now that we have a general idea of wireframing in the UX design process, in our next clip, we're going to talk about different types of wireframes and the tools we can use to create them.

Wireframe Types and Tools In this clip, we're going to talk about different types of wireframes and the tools we can use to create them. In our last lesson, we saw that there are many different types of wireframes, and that's because there's not just one way to create wireframes, but many different approaches with pros and cons to each. So some examples of different types of wireframes include static wireframes, wireframes that are code based, wireframes that are strictly for layout, wireframes that are strictly for information architecture and not to show layout, and hybrids like wireflows. So static wireframes can look like many different things. One of the most basic, simple types of wireframes are sketches on pen and paper. We also have static wireframes that are built-in on tools, like this one, which was created in Wireframe.cc. We have wireframes that can be created in Adobe XD like this one. And it's kind of zoomed out, so it's hard to see, but it actually includes real content. So we can have wireframes that include all of the real content and fleshed-out navigation, or we can have wireframes like this one where it was created in Adobe Illustrator, and we didn't have real content, so we just used gray lines to simulate lines of text. We also have wireframes that include annotations. And static wireframes have some pros and cons, which include that they're usually quick to create, you can use a variety of tools and software, and really, the only con to static wireframes is they're not responsive or interactive. So if we want to show any of that, then static wireframes are not going to be able to show that. We also have code-based wireframes. So one tool that can allow us to create code-based wireframes is one I like called Pattern Lab. If you're familiar with Brad Frost and Atomic Design, this is a tool he created to help support user interfaces that use Atomic Design principles, so I'm going to go ahead and pull up that demo. So Pattern Lab essentially shows systems of patterns for an application on our website or a project. And one really cool thing about this, which, as a side note, if you're interested in learning more about what Pattern Lab is, I recommend doing a search for Pattern Lab and reading more about that. But what I want to show you is just an example of a code-based wireframe. So if I come up here to TEMPLATES, we have some different templates available, and I'm just going to choose the first one, Blog Index. And if you see, this looks like a lot of wireframes that we've already seen. We have placeholder images, lorem ipsum content. We have some estimates for different character lengths, which, once again, this is a blog index page, or where we might have a feed of blog posts. And one cool thing about Pattern Lab is we have PATTERN INFO up here so you can actually read annotations or explanations about different content on the page. We also are able to see interactions in wireframe, those type of things. And then if we click on different resolutions here, we can actually see what the wireframe is going to look like at different sizes, which is really, really cool that we can actually see it in the browser. We can see what the navigation might be like within our wireframe without having to create different versions of a wireframe. But that's not to say that code-based wireframes are without pros and cons as well. So some pros and cons of code-based wireframes are that they are responsive, which is fantastic. They're interactive. So if we want to wireframe a menu or something like that, it's already going to be in our interface. And it's in the browser, so it can give a better idea of the feel for a website. Some cons are that they can take much longer to create than a static wireframe. So if you just need to get something out quickly or if you just want to brainstorm ideas, maybe this wouldn't be the best approach. And it also requires coding knowledge. And it might be difficult for stakeholders and clients to interpret. Sometimes they might think it should be closer to the real website rather than being just a wireframe since it is in the browser and it's interactive. We also have a hybrid wireframe called wireflows. And wireflows are essentially a mix between flowcharts and wireframes. And they're really good for giving you a really high-level overview of what the layout might be and how a person might move through the site, what the navigation might be like, and things of that nature. So some pros and cons of wireflows are that they show multiple screens at a time, so if you have complex flows. They're especially good for applications where you do have user flows and you want to show maybe the movement between each screen, but you don't need really highly detailed layout details for those actual screens. But some cons include that's they're difficult to include a lot of detail since they really are a high-level overview of multiple pages and screens and kind of the flow between each. There are also a lot of different tools for wireframing, actually an insane amount of different tools and software you can use. So some examples of static wireframing tools include just using plain old pen and paper, Balsamiq, OmniGraffle, InVision, Sketch, Adobe Illustrator, Photoshop, and Adobe XD. All of these are fantastic ways to create wireframes, and each, of course, comes with their own pros and cons as well. Some examples of code-based wireframing tools include just plain old HTML and CSS; you can use Axure, which generates code for you; you can use a tool like Pattern Lab. But the most important part is not what you use, but how you're actually using it. So it's important not to lose sight of the main purpose of a wireframe and not get bogged down by necessarily the type or the tools, but why you're creating it and that you're meeting your goal. So that's what we're going to talk about in our next is how we can start to determine what type or what level of detail we need in a wireframe, depending on our goals.

Understanding Fidelity In this clip, we're going to talk about what fidelity is in terms of wireframes. One concept you're going to hear about a lot when you're wireframing is this concept of fidelity. And essentially, that just means a level of detail that's used to create a wireframe. So you can have anything from a low fidelity wireframe or having a low amount of detail like our wireframe here on the left. These are just different iterations, or different fidelities, of the same wireframe. So in a low fidelity wireframe, we might just have gray lines to simulate content and just essentially gray boxes and squares to represent different parts of a screen. In the middle, we might have a slightly higher fidelity wireframe compared to our low fidelity wireframe. Maybe we have some example headings, but we still don't have a lot in terms of specific content. And then over on the right we'd have a higher fidelity wireframe where we actually have the logo in there, we have actual navigation structure, we have real content, we have an image for the map to show what that kind of functionality might look like. So here's an example of an actual low fidelity wireframe. This is one I created on just a piece of scrap paper. So you can see really a low fidelity wireframe can be anything from a rough sketch to a low fidelity wireframe that's even created in a software like this one, which was created with Adobe XD. Some pros and cons of low fidelity wireframes are that they really can be created quickly because there's a low level of detail. They're great for brainstorming. They can be anything from a sketch on paper to something created in a software. So they help you get out a lot of different ideas before committing to one direction because we generally don't want to go with our first idea. It's probably not going to be our best. And they can be as simple as just a sketch with pen and paper so you can create it from anywhere, as long as you have a pen and paper. Some cons are that they might not have enough detail for every situation. So if you have a complex idea or if you're presenting it to someone who's less technical, they might not be good for that. So this is an example of a higher fidelity wireframe. We actually have real content, we have real call to actions, we have a very high level of detail, and we're trying to get as close to possible as simulating kind of the final layout without committing to any design details. So some pros and cons of high fidelity wireframes are that they contain a lot more detail than low fidelity wireframes, generally. They're a closer representation of that final layout. But some cons might be that stakeholders might confuse them with design. Since they have a high level of detail, they might think that they look fairly unattractive, which it's a lot harder to confuse a lower fidelity wireframe with any design decisions because most people aren't going to think that colored squares are going to be representative of the final design. But they do also take longer to create due to the higher level of detail. So what level of fidelity should you choose when you create a wireframe? The answer is it really depends on your situation and on many factors, which I know is kind of a difficult answer to hear, but in a couple of videos, we're going to go over in a lot more detail different questions you can ask and different exercises that you can do that could help you decide what level of fidelity and what type of wireframe is actually going to help you accomplish your goals for whatever project you're working on.

Annotation and Documentation In this clip, we're going to talk about the role of annotation and documentation when creating wireframes. So why should you annotate a wireframe? Let's take a look at one of the examples we looked at a couple lessons back. We have this low fidelity wireframe, just a sketch on paper, and we have some basic notes about functionality. Well, let's say we didn't have those notes, and we just had the sketch to go off of. If we weren't having a conversation with whoever created the wireframe, how much level of understanding would we be able to gain from just looking at the sketch? Well, it'd be very, very difficult to understand what is going on here and what the purpose of each box is because low fidelity wireframes are essentially boxes and lines on a page. They're very hard to interpret without some kind of explanation, which is why it's so important to add annotation and documentation to your wireframes, especially if you're not there when it's being discussed or if you're not having in-depth conversations around your wireframe. So what should you annotate in a wireframe? One of the most important things is labeling important features and content on the page. So especially if it's a low fidelity wireframe, you can understand what content is going to go there. Also, explaining key functionality. So if you have a gallery, what type of features and functionality it's going to have, what kind of constraints, maybe what tools might be used. If you have a map function, maybe what tool you're going to use for that. For example, if you're going to use Google Maps, is it going to be static? Should you be able to get directions? What's going to happen when you tap on the map or if you click on the map? Is it going to open in Google Maps, or should it take you to a location page, or what's going to happen based on interaction? Which leads us to our next point. We need to document what happens in different states. So once you interact with something, what's going to happen next, where is it going to take you, or is it going to change the interface in some way based on that interaction? And anything else on the page that isn't self-explanatory. So if I couldn't look at it and understand what it is, if the content's not there, if you don't have headings or something else of that nature that's going to indicate what that's going to be, then you need to annotate that. And another great opportunity for annotation and documentation is describing and explaining the rationale and the reasons behind your decisions, why certain functionality is important. Especially if someone's going to be looking at these on their own without having a conversation with you, it really will hold up the integrity and explain what your wireframe is trying to accomplish, which is really easy to misinterpret things when you don't have a ton of detail. So annotation is one of the single best ways to create effective wireframes, especially for presenting and for communicating ideas. Which brings me to our next topic, which is how can you decide what type of wireframe you need to create, what level of fidelity you need, and also what to include when you're presenting and how to present wireframes, which we will talk about in our next clip.

Creating Wireframes In this clip, we'll talk about the process of creating wireframes. Ideally, the wireframing process happens early in the design process, after we've gone through the discovery and research phase. And hopefully you have at least some of the following, including discovery briefs, competitive analysis, user research reports, analytics, site maps, technical requirements, SEO recommendations, and user personas, not to mention all kinds of other deliverables that you might come up with during the discovery and research process. Unfortunately, you usually don't get all the information you need in order to start wireframing and designing. And I just want to make sure that you understand that you don't always have the ideal scenario, so you sometimes just need to do the best you can with all the information you have. When you actually sit down to start wireframing, there are a lot of different considerations you need to keep in mind. Some of those include what needs you have for content, the purpose that you're creating your wireframe for, the audience or whoever's going to be using your wireframes, the level of fidelity that might be necessary, the tools you have available to you, and your needs for annotation and documentation based on who's going to be using your wireframes. So what should actually go into your wireframe? A good way to determine this is to take some time and sit down and make a list. And by asking yourself a couple questions, you can put together a list that can help you determine the priorities or what you need to put in your wireframe. And some of these questions include defining the main purpose of the page or screen you're designing for. What's the number one goal of your page? So everything you put on your wireframe should go into supporting that goal. So what types of information are needed to support that main purpose? What type of functionality is also necessary to support that purpose? Then you can assign a priority to each item in your list and decide what's the most important things in your page or your screen that you're wireframing and what could be secondary or supporting content and functionality. So what type of wireframe should you actually create? The first thing you want to do is define the purpose of why you're creating the wireframe. You also need to determine your goal for your wireframe, ask yourself how it'll be used, and in addition to how it'll be used, who is it going to be used by, or who your audience is. So to determine your audience, you can ask yourself who's going to be viewing or using it, what their level of knowledge is, and what their needs are. You're going to potentially have a lot of different audiences, or people, who will be using your wireframe, and that might include stakeholders, designers, developers, and managers and directors. And each of these audience members has distinct needs and requirements for your wireframe. So depending on who's going to be viewing it, you might even have to create multiple versions depending on who needs to use your wireframe. So let's say we have a wireframe, and the purpose is to explore different approaches, or to brainstorm. And the audience, or the people who are going to be viewing it, are fellow team members. From this, we can put together a list of needs for our wireframe. So maybe it can be low fidelity since we're using it with fellow team members, they need to be quick to create since we're using it for brainstorming, and we also have an audience that understands the purpose of wireframes. So from this, maybe we can determine that a pen and paper sketch is going to be appropriate for this kind of situation. So let's take a look at a different scenario. Let's say we want to test an idea, and our audience is going to be users because we're going to be using our wireframes for usability testing. From this, we can put together our list of needs. So maybe we determine it needs to be high fidelity, we need to use real content since we're going to be using it with users, and maybe it needs to clickable because we want to link different wireframes together to simulate a flow in our user testing. So from this, we may determine that we need a really detailed, high fidelity wireframe that's really clean and created with whatever software we prefer. And it's also really important to remember that time and budget are often a really significant restraint on creating wireframes or in any design process. So one way you can combat this is to use templates for wireframing. So for low fidelity wireframes, you might use stencils, which can help you quickly create common interface patterns. And for high fidelity wireframes, you can even purchase UX kits, like these from uxkits.com that have all those common UI patterns available so you can focus on the practice of putting together your layout rather than creating elements from scratch. And you always want to remember that wireframes do not stand well on their own. Essentially, at their core, they're a series of boxes and scribbles. So you always want to consider your needs for annotation. If you're working with developers, you might need detailed information and technical requirements compared to if you're presenting it to a client or a stakeholder, you need things to be clearly labeled, but maybe you want to avoid overly technical descriptions. Above all, it always depends on time, budget, purpose, and audience. So being able to put all these together, and analyze your needs, and determine the fidelity, the type of wireframe you're putting together, it's going to be a skill that comes with time and experience.

Wireframing a Website Introduction In this module, we're going to talk about how to wireframe a website for a fictional brand. We'll start by talking about the information we need to start planning our wireframe and the importance of sketching and brainstorming before you jump into any software. Then we'll take a brief tour or Adobe XD so we can get start creating our mobile and desktop wireframes, and we'll finish up by talking about different ways to add annotation and how to export a wireframe out of Adobe XD.

Planning Your Wireframe In this clip, we'll begin going over the information we have to begin planning our wireframe. So before we start creating our wireframe, in an ideal situation, we're going to have at least some information as far as like discovery information from interviews, meeting with the client, maybe a brief competitive analysis, any user research reports from any user research that's been done, hopefully there is some kind of analytics on the current site, if there is one for us to go off of, site maps, things of that nature. So let's say we have a less-than-ideal client, so we have not all of this, but we have a couple things, and we're just going to do kind of the best we have, which is unfortunately kind of a common scenario when you start to wireframe for smaller clients who might not have very big budgets. So the brand we're going to be designing for is a fictional brand called Pizza Amore. It's a pizza restaurant near a college campus, and so their main demographic is going to be college students. And let's say they've also done a little bit of information architecture work, so they have a proposed site map for you. So we can see we have a home page, a menu page, an online ordering page, specials, contact, and about. So we at least have something to base our navigation off of. And let's say they also have some very basic personas, maybe not in-depth as we would hope for, but at least some insights to go off of so we can start to put together some priorities for tasks and goals and content. So let's say our main demographic is college students. We have Mark Buller who's 21. He likes saving money where possible, so maybe he'd be interested in specials or some of the cheaper items on the menu. He lives off of campus, so he likes to order delivery. And let's say our second most common type of persona, or demographic, is young professionals, so we have a PR specialist who's 26. She likes dining in, is interested in happy hour specials, and she also organizes private events for her company. So maybe if there's a room that you can rent out or catering or some type of those services, she might be interested in those from our company. And then finally, we have a mother of three who's a marketing director, so more family-oriented, wants to order as quickly as possible because she's very busy, and usually orders delivery. And from meeting with the client, we also have a couple of insights, and also through going through our analytics. So from their current site, we know that the menu is the most commonly viewed page, followed by specials. Delivery is the most common service, or type of order, but dining in is still very popular, and they're adding online ordering as a new feature, so they want to heavily promote online ordering. So for our wireframe, generally we want to define our main purpose, determine what types of information we need, what types of functionality we need, and then also assign a priority for our information and our functionality that's going to go in our wireframe. So we have a couple of different insights for our wireframe. The client has requested us to wireframe the home page first, so we're going to go ahead and do that as a starting place. And it's going to be for layout, so we want it to be pretty high fidelity since we're going to be using it for the client. And from all of our information and discovery, from whatever we've been able to gather that we have, we've determined that the order online now call to action is going to be important, also information on different specials, the menu, obviously, and then some about content about the restaurant itself. So from all this, we would want to now sit down and start brainstorming different directions, and sketching, and coming up with ideas for the type of direction or solution we want to go, so that's what we're going to start doing in our next clip.

Brainstorming and Sketching In this clip, we'll be brainstorming and sketching our wireframe. So in this video, we're going to be doing our sketching in Photoshop, but generally, I like to use pen and paper just so you don't have any tools or distractions that get in the way. And I like to use kind of the least ideal paper possible, like scrap paper or just any bits of paper I have lying around. I also have a roll of just brown butcher paper because I find it helps me, rather than when I use nice paper, I get distracted by trying to make my sketches too clean and organized, which kind of gets in the way of brainstorming and getting out all your ideas as quickly as possible and exploring multiple directions. So I'm going to go ahead and pull up Photoshop, and I'm going to be using drawing tablet in here to sketch. And what I've done, I just have a blank canvas here, and I've added some text because I mentioned before, one of my brainstorming exercises I like to do is to come up with an idea of what type of priority content I need on the page or the screen I'm designing. And it's also important to note that while this is ideas for important content, not all of this necessarily needs to be on the page because we want to be careful that we're not cluttering up our layouts with too much information and too much going on as well. So I'm going to come over here, and we're going to start by coming in here with kind of a mobile layout. And I'm not so great with a drawing tablet, so this is going to be kind of the epitome of a rough sketch for brainstorming. So this is just kind of like a mobile-ish, narrow size. And I just kind of start by sketching out that frame, and we could always erase and change this as needed if this isn't long enough and so on and so forth. So I just kind of want to start spitting out my ideas on the page, so I want to start up here at the top where it makes most sense to me to think about the header. So let's say we want to add the logo here in kind of a traditional place on the top left. So I might come in here and create a box for that. Maybe we're going to have a menu here over on the right. And then thinking in terms of our priority content, I have the menu here, so maybe we want to have like a nice hero image right here, and then we can have a call to action right here to view the menu. And then let's say in a discovery meeting with the client we discovered that they have a couple of the most popular menu items that are very, very commonly ordered, and also some seasonal pizzas, seasonal items, so maybe we want to feature those afterwards because that would be kind of cool. So maybe we want to add a couple sections here. Maybe I want to have a first one with some content. And then if they want to view the full menu, we could have a link there. And then maybe we have another pizza and then a link to view the menu. And then maybe we want to, let's say, add some information about the restaurant, and then a link to their about page, which these may or may not be buttons in the final design, but that kind of helps me think when I'm sketching. So maybe I want to add a note that this is the about page, and these are going to be featured menu items. And then maybe down here I want to add a map with hours and location, so I'm going to make a little map icon right here. And then we kind of ran out of room, so maybe I want to go ahead and add my footer down here. We'll have some links. And then I want to come over here and then start thinking about how this might translate to desktop after. So we have our logo and our menu, so maybe I'd have the logo right here, which I'm going to go ahead and make that an X because it's a more common symbol for an image. Then our main navigation. Then we have a nice big hero and some lines of text here with our button. And then we have these two little areas of featured menu items, so maybe we could either have two bands right here, but maybe we don't want our page to get too long, so maybe we'd make them two sides. But let's say when we're brainstorming, as soon as you find a direction isn't working, then it's completely fine just to nix it and move on quickly to the next one. So let's say I started to think about this, maybe I hadn't had my coffee, and then I look in the hero, and I realize I have a link to the menu here, and then I have a link to a menu here, and I have a link to a menu here. So maybe I want to explore a different direction. Then I would come in here and analyze what doesn't work about this layout and try to add that into my next sketch. So one thing I also forgot, if I look and compare this to kind of some of our priority content, is that there's no online order call to action anywhere in this. So I'm like, oops, I want to fix that with the next sketch. So come down here where we have some nice clean area on our canvas, and then I would start with a nice other mobile area. So maybe I want that to be the first thing at the top of the page, so I'm going to come in here, and we'll have a little area up here with that online ordering call to action. It'll just be a little band that's persistent, so online ordering so I can remember what these things are later if I sleep on it or something like that. And then let's add my logo and the menu, or main navigation menu, not food menu, and then I start to think about what I want to go here in the main navigation. And like maybe it's still a good idea to have that link out to the food menu, so I'm going to say menu. And then I remember that we have those specials up there in that priority content, and so I'm like maybe we can feature some specials here instead of those menu categories, so maybe have some featured specials. Oops, switched back to brush accidentally. Switch to my eraser. And then maybe down here we can have some about content and a link to about page, or maybe we could scribble some notes that maybe we want include the hours and location here. And then add our footer. (Working) Oops, and I accidently switched my brush, so I'm going to go ahead and switch back to what I had. So you can get kind of an idea of how you might start to brainstorm and sketch different directions. We always want to go back and kind of compare it what content is important on the page, and there's also some questions we can ask ourselves as well. So for example, is there going to be content for this, or will there be in the future? Because a lot of the times, it can be easy to forget that it can be difficult to sometimes, especially when you're working with clients, getting textual content and also imagery and things of that nature. So maybe you have a really nice gallery planned out or a really nice hero image, and then you realize that you actually don't have any or enough high-quality images to use in those areas. So you definitely want to think through those things, and also ask yourself how this could change. So let's say if they get rid of specials in the future, how is that going to change the layout? Is it going to break it, or is it something we could easily turn off? And are there any other constraints that you need to consider? So let's say we have a mapping feature we've planned on the home page. So we have this nice big map, and we've planned to have like a custom marker that's branded like the restaurant, or it's an idea we have for the future, and then we start to think about our budget and the time constraints we have, and maybe that's not something that's going to be doable, at least in kind of an initial phase of building the site. So we want to start thinking through all of these things and also referring back to our research and our analytics and any kind of data and information we have, meeting with the client, and making sure that we're consistently meeting our goals and our priorities for the site. So now that we've taken a look at the brainstorming process, in our next clip, we're going to take a look at our final sketch, and open XD, and start to take a look at XD so we can start building out our wireframe.

Adobe XD Overview In this clip, we'll be going over our sketches that we'll be turning into our wireframes, and we'll also take a quick look at the tools we'll be using in Adobe XD. All right, here's some very rough sketches that we're going to use to help guide our wireframes we'll be creating in Adobe XD. So starting at the top, we're going to have online ordering as one of our first things, and our layout on mobile and in the desktop layout, it'll appear over here on the top right. We will have a call to action to be the menu in our hero area and maybe some content. Then below that, we'll have some featured specials. We'll have two featured specials areas and then a little about section with hours, location, and some about content. So of course, we want to go back and reference kind of what we decided was our priority content and make sure we're hitting that in order of our content in our content hierarchy and also go back and make sure that we're not creating any kind of a detrimental user experience based on the tasks and scenarios we identified were important during research and discovery or any important findings, just to go through and double-check all of that. So I'm going to go ahead and switch over to XD, which is what we'll be using to create our wireframes. And if you don't have XD, it's a great tool for wireframing and also building prototypes. It's very simple and intuitive to use. You can also follow along in the software of your choice. A lot of these concepts are going to carry over, as long as you're comfortable with whatever software you're using, and you can use it to basically draw basic shapes and add content. So I'm going to start by creating an artboard. We have the splash screen where we can choose different artboards. We can open a previous project. So I'm going to come over here; we're going to start with our mobile wireframe. So I'm going to come down; we can choose any of the mobile sizes. It doesn't really matter since we're just creating a mobile size layout, not one for a specific device. So I'm just come down here, and let's say I'm going to choose Android. And then it's going to open a blank artboard for us. And if you aren't familiar with XD, you can see it has a very streamlined, nice interface. We can import assets. We can actually drag and drop onto this panel from other Adobe applications, even from Sketch, and it'll import colors, character styles, symbols, things of that nature. But what we're going to be focused on is since wireframes are essentially boxes and squares and placeholder content, we're going to be using these tools right down here. We have our different shape tools, we have a Pen tool, a Text tool, we can create new artboards, and then we also have a Zoom feature. So I'm going to come up here and create a rectangle just so we can see what this is like. I'm just going to go ahead and drag and drop that out, and we see we have our bounding box. And then over here on the right we have an Appearance panel, so anything we want to change about this, we can go ahead and do over here. So let's see. We have our Fill area. We have a checkbox next to that showing that we do have a fill, but it's filling with white, so if I want to change this to be any color, I can come around here, and you can see that previewing over there. But since we're creating wireframes, we want to stay over here on the left because we don't want to add color. We're going to stick with gray. So I might come down here and have kind of a medium-ish gray. And then maybe I don't want a border, and you can see we have a square, so pretty straightforward. If we wanted to, maybe say this was an image, then we could take our Line tool and maybe drag from one corner to the other. And you can see now we have kind of a placeholder for an image block. So we aren't going to get too much more complicated than that with XD. So in our next clip, we're going to start mocking up our wireframe for the home page for mobile.

Mobile Wireframe In this clip, we'll be creating our mobile wireframe. So I'm going to go ahead and open up Adobe XD, and we're going to start with our mobile wireframe. So we have this splash screen that opens up, and we want to create a blank artboard so we can add all of our elements. So we're going to start over here on the left where we have our mobile artboard options. And you can see by default it's iPhone 6/7. And it doesn't really matter what we choose at this point since we're just creating a wireframe, so I'm going to come down here and just select Android Mobile, but feel free to use any of those options. And now we have our blank artboard, and we're just going to start just like we have in our sketch and start from top to bottom and start to flesh some of this out. So in our sketch, if you refer back to that from our last lesson, we have online ordering is kind of that top area, so we're going to make this a full-width button that you can tap to order online on mobile. So I'm going to just drag and drop to get a good size height, so hopefully that's big enough for our finger to press, which, of course, we would test once we got to the design, or the prototype. So I'm going to come over here in our Appearance panel, and I'm going to change the Fill to be kind of a light gray here. And then I'm going to come down here and unselect Border so we don't have a border. And then we can come over here and select our Type tool, or press T, and then I'm going to add the text for our button. I'm going to say this is Order Online. And then I'm going to press Esc to commit that text. And then I want to come over here and use our Align tool to align it to the center of our artboard so we make sure that's nice and even. And then I'm going to press V, or come over here and select our Move tool and make sure that we have that perfectly centered vertically as well. So now that we have that nice button up there, we can come in and add our next two elements, which is going to be our logo and our menu. So I'm going to use our Rectangle tool, or you could press R, and then we're going to drag out a logo placeholder. And I'm going to make sure we have a border, and then I'm going to use our Align tool to kind of make sure this looks like a placeholder image, so I just pressed Esc to commit that shape. And then I'm going to zoom in with Cmd or Ctrl+plus a little bit because we're going to create kind of that common symbol for a placeholder image with the X's. And so I'm just going to start in this corner and drag to the far corner and then start in this corner and just do the same so we have that placeholder image, which, you can see, is just a little bit off. So if we wanted to clean this up, we can just zoom in and drag that into the corners. Then I'm going to press Cmd+minus. And just a side note, if you want to use a grid, you can either create a custom grid, or you can come up here to View and Show Artboard Grid if you want to see some gridlines. But when I get started, generally I don't use that because I find it kind of gets in the way because we're trying to create the layout here, but we're not necessarily trying to be super perfect yet, rather to get out our ideas. So I'm going to come over here. We have our logo, and then I'm going to create a placeholder menu icon, so I'm going to drag out this line. And then I want to change the border thickness so it's not so thin, and I'm going to say that maybe this is, take it about to a 6. And that looks good to me. So I'm going to come over here and select the Move tool, or I can press V. And then I'm going to hold Option, which when we hold Option, you'll get some coordinates, which is pretty cool so you can see how far away it is from each edge. And I'm going to press Option, select this, and drag, and then we're just going to create kind of a placeholder hamburger icon. And then I going to press T to use the Type tool, and then we're going to type in MENU text since it's always good to have helper text if we're using an icon like that. And then align it with the bottom of our logo. And then below here we're going to move onto our hero area. So we're going to have a couple lines of text, or about text, and then a link to our menu. So I'm just going to be using pizza ipsum. It's similar to lorem ipsum, but pizza themed so we can add some placeholder text into this hero area. Ideally, we would have content from the client, but that doesn't always happen, so we're just going to try to get as close as possible to maybe what we would have in our final site in terms of length of text to give us a general idea. So I'm going to use our Rectangle tool and give us a little bit of white space below that menu and logo. And we're just going to guess to start. We can change this if we need more room in a second. And come over in our Appearance panel, and I'm going to change our Fill to be just like a nice light gray. And then I'm going to get rid of that border once again. And I'm going to come over here offscreen and copy a line of pizza ipsum, and I'm going to select the Type tool, and then I'm just going to drag out a nice size textbox. I'm going to Ctrl or Cmd+V to paste that in here. And then I'm going to select all of our text by hitting Cmd or Ctrl+A, and I'm going to make this a little bit smaller, maybe bump it down to 18. And then I'm going to center align it. And then we don't quite have enough room for our button, so I'm going to drag this down just a little bit. And then use that Rectangle tool. So you can go ahead and select that over there in the panel, or you can press R. And then I'm going to drag out a nice size button, deselect the border so we don't have that border, and then I'm just going to fill it to a nice contrasting color, so maybe like a nice medium gray. And then with this selected, I'm going to come over here and center align it. And then we want to add some text in here, so we can say maybe VIEW MENU, which we could always change at a later date if that doesn't quite work. And then I'm going to come over here in the Appearance, and since it's a medium gray, we can't see it, so I'm going to change it be like a nice white color. And then I'm going to select the Move tool and select the button and that text, and then hit that align to middle button. That way our text is nicely centered inside of that button. So we're already starting to run out of room on our artboard, so I'm going to come here and select near the outline or the edge of our artboard, and you should see this blue line appear. And then we can just come down to this handle and then drag it down so we have some more room. So one thing that's kind of cool is you have these dotted lines so you can kind of see where the fold is, essentially where the edge of this screen. So we're going to come down here and add our specials area. So I'm going to grab the Rectangle tool, or you can press R once again. And then we're going to have two little blocks where we can add the specials, so I'm just going to make a decent amount of room, which we can change if we need more, and then we're going to make this a gray box. I'm going to go ahead and get rid of that border, and I'm going to go ahead and give this just a title since we don't know what the specials are yet, unfortunately. So we're going to just say SPECIAL 1 for now. I'm going to press Esc to commit that text and then V. So we have our text selected, I'm going to select that background, and then use the Align tool to make sure that that's aligned in the center. And then maybe bump it up a little bit so it's closer to the top. And then I'm going to grab some more pizza ipsum. So I'm just going to grab a couple lines because maybe we just have a couple-word description of what that special is. So I'm going to go ahead and paste that in and then center it. And I don't want these to be the same size because I kind of want to indicate some kind of information hierarchy, so I'm going to bump that down to, whoops, want to hit Ctrl+A to select that, I'm going to bump it down from 20 to about 16. And then below this, we're going to add our price, so I'm going to press T to use that Type tool, and then we're just going to add a placeholder price, so let's say that's $29.99. So I'm going to grab my Move tool since this isn't centered, just like that text, that background, and then just center align it. And actually I'm going to do the same for that as well because it looks like it's a little bit off. And we have a little bit extra space, so I might just shrink that down a little bit. And one cool thing about Adobe XD is if you have repeated elements like that, in our wireframe we have a first special right here and then we have a second special down below, we can actually come down here and select this and chose this button, Repeat Grid. And you might have noticed that the background went from blue to green, so if I unselect that, you can see it's blue, so we have a regular element. If we hit that Repeat Grid, now it's green. And if we select one of these handles, we have one on the right and one on the bottom, you can drag down, and it's going to automatically repeat as many of those elements as you need, which is really, really cool. You can very quickly create repeated elements in a layout like that. So we have a good start to our mobile wireframe, so I'm going to go ahead and finish the rest between our videos. And in our next clip, we're going to start on that desktop wireframe.

Desktop Wireframe In this clip, we're going to be creating our desktop wireframe. So I'm going to go ahead and open up XD. And between lessons I went ahead and finished out our mobile wireframe. I added an H1 in our hero because we didn't have one, and that's important to have, an about section with some information like hours and location, and a footer. So next, we're going to go ahead and create an artboard for our desktop wireframe, so I'm going to select the Artboard tool. And then over here on the right we have some presets, and I'm going to come down to Web and select a medium-sized artboard. And then I'm going to use this bottom handle and drag it down just so we have some more room vertically. And then we want to come over here and start to evaluate what we can reuse so we're being as efficient as possible and we're not duplicating any effort. So one good opportunity might be this button, so I'm going to select that. Want to hit Cmd or Ctrl+G to make sure this and this text are grouped together. And then I can come over here to where it says Symbols and click the plus button. And it's going to create a symbol, meaning we can reuse this anywhere we want. So if I click on this thumbnail and drag and drop it over here, we can reuse this anywhere we want to so we don't have to create it over and over again. And then if I modify it, you can see over here it's updating the one on our mobile wireframe as well, so I'm just going to hit Ctrl+Z to undo that. So that's pretty cool. So we're going to start up here in the header just like we did with our mobile layout. And we can reuse our logo, but I'm not going to keep it as the same size, so I don't want it to be a symbol because then we're going to mess it up on our mobile wireframe. So I'm going to zoom in so we can go ahead and select this. It's kind of hard to get these little thin lines, so I'm just hitting Cmd+plus. And I'm going to make sure I have these lines selected. And then just drag it around to make sure we do have it all selected. So I'm going to hit Cmd or Ctrl+G to group that together so we don't have to do that again. And then hit Cmd or Ctrl+minus to zoom out. And then I'm going to hold Option and just drag this over to our other artboard so we have another copy of that element. And then I'm going to select it all and hold Shift and just drag it out to what might be a good size for our logo. So I'm going to go ahead and put it over here on the left. And then we also want our Order Online call to action up here in the top right corner, so I'm going to go ahead and select that and the text and hit Cmd+G to group that. And then I'm just going to Option+drag that over here. And then now that we have that over here, I'm going to ungroup that just so --- I'm going to resize this, and I don't want to resize that text. So I'm going to shrink this just a little bit so it's not quite so large here, select the text again and the background, and I'm going to align that text there since we have a new size. Hit Ctrl+G to group that together again so it's all one element, and then just put it so it's sitting kind of nicely up there in the corner. And next, we want to add our main navigation. We didn't have our links showing since we had all of our navigation under a menu icon, so we can't reuse that. I went ahead and created a symbol for that since it's going to be a repeated element, and also, it might be kind of boring to watch me line up all the text perfectly because that takes a bit. So we have all of our main navigation items from our proposed information architecture. So we have MENU, SPECIALS, ABOUT, AND CONTACT. And so below that, we can start on our hero area, so I'm going to hit R to use that Rectangle tool. And then we're just going to create a nice-sized hero area. And I'm going to deselect the border and create just a nice light gray fill, and then hit Esc. And then I'm going to hit T, and then I'm going to select all this text. So I'm going to hit Ctrl+C or Cmd+C to copy that and then Esc to get out of that text box. And then I'm just going to create a decent size textbox to hold that and press Paste, and then Esc to commit that text there. And then align it to the center of the artboard. And then I'm going to come over here and grab our main heading, so I'm just going to hit Option this time and drag it. We can either copy and paste, or we can drag it out. So now we have our heading. And I'm going to make sure it's center aligned in our artboard. And since this is our desktop layout, I'm going to increase the size of this to maybe about 36 so we can get more of like the content hierarchy at a glance. And then I'm going to use our symbol for our menu button. Go ahead make sure that that is also aligned to our artboard in the center nicely. And then we can come over here and start to add our specials and the rest of the content. But I don't want to bore you to death, so hopefully you get a good idea of how we can start to quickly create elements for our wireframe and also create symbols so we're not duplicating any effort. One other thing we might want to do is our layers. We have layers in XD just like we do in Illustrator or Photoshop or other Adobe programs. We might want to come in and start to organize this and rename this if we were using this and passing it onto someone else. So now we have a basic idea of how we would start our desktop wireframe. In our next clip, we're going to start to talk about how we would add annotations and how to go through and evaluate what type of annotations we would want to add.

Adding Annotations In this video, we're going to talk about adding annotations to our wireframes. In our last module, we talked about different types of things we might want to annotate, or add documentation to, in a wireframe, and those include adding labels to important features, explaining key functionality, explaining what might happen in different states, and anything else that isn't self-explanatory by looking it. And even then, you want to be careful about what's self-explanatory because you're usually so close to the project, what might be obvious to you, might not be obvious to someone who's less technical. So I'm going to go ahead and open XD, and we're going to take a look at our mobile wireframe. So in terms of adding our annotations, we want to start from top to bottom and really think about how things are going to function and work and create some basic descriptions that explain to the person looking at the wireframes what you're thinking. So for example, we might explain that this part right here, this Order Online is going to be a button that links to the online ordering system. We might come and look at our menu and explain that when we tap it, so when we have a state change, whether the actual navigation slides in from off canvas or whether it slides down or drops down from the menu and pushes down the content on the page. We might come to our specials module and explain if there's a character limit or if these headings, for example, link to the specials page or if they don't, anything like that, especially our social media icons, what social media is going to actually be included, whether those social media accounts are active, thinking through those things because there's nothing worse than designing an area and assuming that maybe we have those, and you go and they haven't updated their Facebook page in several years, so we'd want to make sure to take that off our wireframe, for example. And then over here, I've come and added some examples of annotations we might add in XD. So one way we can do that is we can create a little number key system. So we can label each part with a number, and then come and just use the Type tool and create some basic styles for notes over here on the side. So we have 1, and then our notes about 1, and 2 with our notes about 2. We could also use the Line tool to connect those notes. The style is not as important as the fact that we are actually including them with our wireframes. And if you're more comfortable in some software that has a little bit more robust features, you could always export it to a different program. For example, I've come in and dropped our mobile wireframe into Illustrator and done basically the same thing, created this numbering annotation system. So we have our hero area right here, and we have some notes over here on the side about our hero area. And once again, presentation is not as important. Of course, we want it to look professional, especially if we're presenting these, but the most important thing is not how you're doing it, but the thought behind it and that you're planning and explaining your wireframes. So now that we've taken a look at annotating our wireframes and different methods we might take to adding those, in our next video, we're actually going to go through how we might export our wireframes from XD for presentation.

Clean up and Exporting for Presentation In this video, we're going to talk about cleaning up our wireframes and different ways we can export them for presentation. So the first thing we want to think about when we're exporting or starting to think about presenting our wireframes is who's actually going to be using them. So let's say we're sharing this file with other team members. It might be perfectly appropriate just to leave it in XD because we already have our annotations here over there in the interface. But one thing we do want to make sure we do is take a look at things like our layers, and if we are passing them off to other team members to work with, making sure everything is clean and named semantically or descriptively, that everything's organized into appropriate groups, and things of that nature. But if we're going to be exporting these to send to people, to share with clients or stakeholders, then we definitely want to export them outside of Adobe XD. So we can come and we want to make sure we're not selecting anything because if we do, it's just going to export whatever we have selected. So I'm going to go ahead and click out of our desktop wireframe, and I'm going to come up here to File, Export. And then we have a couple different options here. We can choose a format, so we can choose SVG or PNG, which I'm going to leave it as a PDF so we can save it as multiple pages. And then below here we have the option to create just one PDF file with a page for each artboard, or if we want each artboard to have its own PDF file, we could select this radio over here. But I want it to have just one PDF file. So I'm going to click Export, and it's going to warn me I already exported these PDFs, so I'm just going to click Replace. And then I'm going to come to my desktop where I saved those. And then I'm going to come up here and zoom out a little bit so we can see this better. And you can see we have our mobile wireframe on our first page, and then we have our desktop wireframe on the second page, which we might notice that our annotations aren't being included, which are very, very important. We want to make sure we have those included with our PDF. So if I come back to XD, you'll notice it's because they're off of our actual artboard. So we have a couple different options here. One is we could use our Artboard tool to just draw an artboard around our notes, and then if we export it, it's going to add another page with all of our notes, which is certainly an option. But maybe we want it to be side by side with our wireframes so you can quickly read through those instead of having to switch between multiple pages. Another option we have is to come and select our artboard, so I'm going to double-click and make sure we have the boundary of our artboard selected. And then I can just drag out our artboard to include our annotations area. But you'll notice since that artboard was defining the edge of our wireframe, we no longer have that edge. So one thing we might want to do is come and add a rectangle. So I'm going to go ahead first and deselect our artboard, select that Rectangle tool. We can come up here in that top-left corner and just drag to the boundary of our wireframe. And then we want to make sure that we don't have a fill selected and that we added a border. So I might bump this up to 2 so we make sure we can see it real well. And then if I click away, we can see we have the edge of our wireframe now and our notes on the artboard, which maybe we want to do the same thing and add a little bit of a border around our wireframe or think about however we want to present this so it looks nicely. So if I come up here Export now, and I'm just going to export all of artboards again and replace those. If we open this up, which I think it's caching our old version because we don't have our annotations here, so I'm going to close this out and then reopen it. And it's zoomed in again, so hopefully this is our new document. So I'm going to zoom out to about 25%. We have our mobile wireframe, which we'd want to add document to, or annotation, and then we see on our second page now we have our wireframe and then all of our notes here on the side. So it would be really easy to open this up and be able to read through all of our notes, so very, very cool. Now that we've taken a look at how we can wireframe a website, including planning it, sketching, mocking it up in Adobe XD, in our next module, we'll be going through wireframing a mobile app for the same brand.

Wireframing a Mobile App Introduction In this module, we're going to talk about wireframing a mobile app for our fictional company. We'll start by talking about our needs for planning and sketching and brainstorming. We'll then dive into Adobe XD and wireframe a screen or mobile app, and we'll finish out by talking about different methods for annotating and final notes about creating wireframes.

Planning Your Wireframe In this clip, we're going to be planning our wireframe for our mobile app. In our last module, we wireframed a home page for the Pizza Amore website, and in this module, we're going to be wireframing a screen for a mobile ordering app that they want to have created. So for this app, we know that they're going to be using it on Android platform, we know that they want a custom look and feel, so they don't necessarily want to go with material design, and the only functionality they want is ordering, so they don't want people to be able to order gift cards or do anything else, just be able to place orders for pickup and for delivery. So for a website, we have a site map to help us determine what pages and templates we need to wireframe for, but for an app, since it's a little bit different and we're actually performing very specific tasks and functions, we need to know what the user flow is, or what the user flows are, in order to know what screens we need to wireframe. So this is what an example user flow for our app is going to look like. They're going to start on the first screen by selecting the order type. Then it's going to take them directly to the menu. They can view menu and menu categories and add items to their cart. That cart is going to allow them to customize the pizza or whatever menu items they're ordering, and then it's going to take them back to the menu, and they'll either continue adding items and going through that process, or they'll go to the checkout process. So just like with our other wireframe, we're going to go ahead and start by sketching in Photoshop. So I've gone ahead and opened up a document in Photoshop, and just like with our wireframe, I started by adding what kind of information we need. So in this one, I've also gone ahead and added the overall flow. If we want to be able to sketch out multiple screens so we can start planning those wireframes, we could do that. We're going to start just with our second screen, which is going to be viewing the menu. And then I came down here and just sketched some content and information that can help me plan that wireframe, or generate ideas. So we're going to be on the view menu screen. We have multiple categories for the menu, so I know we have pizza, salad, sides, and then specials that we want to include for the menu. And then for individual menu items, we want to be able to include the name, a brief description, and the price. So we can use this to start sketching our screen. So I'm going to come down here and just create a box to represent our screen. And then I'm going to start with our repeated elements up here at the top and then maybe if we have any buttons down here where our fingers can press at the bottom. And I'm going to think about what type of functionality we need, or if we hopefully have some kind of a research phase and a requirements document, we can go through and see what type of functionality we need there. So let's say we're going to have a profile, or account button up here, so I'm going to draw a little person to represent that. Maybe I want this in the top-left corner. And then I'm going to say this is going to be kind of a manage account, and maybe I want to list out what we might have there. For example, maybe we want to be able to reorder past orders, or edit payment information, or our delivery address, or things of that nature, which we could flesh out more when we get to our higher fidelity wireframe. And then maybe here in the middle we want to have whatever screen we're on, so I might say menu here. And then over here, maybe I want an icon that'll take us to view our cart, so I'm going to just draw a little cart here. And then below here, we can get to the actual content of the page, so let's say thinking about a menu, maybe we can either go directly to our menu items, or maybe want shortcuts to be able to get to these different categories. So I'm just going to draw a line here because I think that's good in case someone wants to jump down to specials or whatever that may be. So maybe I'll say pizza, if I can fit this in here, pizza, salad, sides, and then specials. And then we would have our menu listed out here, so I'm going to start by thinking about the information hierarchy for this page, so I want to list the category first. So I'm going to say pizzas because we're going to have that first since that's they're most popular item. And so I'm going to put, maybe as a placeholder, let's say we have pepperoni, and then maybe we'd have a little brief description about this pizza, if we have multiple ingredients and things of that nature. I'm just going to have some placeholder lines just to kind of simulate that content. And then we have here that we want to include the price on the screen, which I'm going to also, these are going to be clickable when we add them to our cart, so I'm going to drew a little border around here so we can simulate this, which, oops, I'm going to erase that bottom line since we need some room here to put our prices. So going to make this box a little bit bigger. And then thinking about this, we want to make this flexible and think about what type of pricing we're actually going to have. So since we're dealing with pizzas, we're probably not going to have only one size. Of course, we'd want to know this ahead of time, so let's say for Pizza Amore we have three different sizes, for small, medium, and large. So maybe you want to put a note here, and we want to say maybe the small's going to be $10, the medium is going to start at $14, and then maybe be have a large for $18 or something like that. And of course, we'll be doing some usability testing when we get to the prototyping phase and things like that so we can make sure that this is going to be user-friendly. So these are just our initial brainstorms for that. And then in the rest of the page, we'd have additional pizzas, and then we'd be able to scroll down and go through all of our menu items. So now that we have a basic sketch for our wireframe, in our next clip, we're go ahead and jump into XD and start creating a higher fidelity wireframe for our screen.

Wireframing in Adobe XD In this clip, we're going to be wireframing part of our mobile app in Adobe XD. In our last video, I mentioned that they want us to wireframe a screen for, or create a series of wireframes for their mobile app, which is going to be built on Android. So to do that, I just went to File, New, and then selected Android Mobile for our artboard. So the first thing we want to do is we want to start at the top of our screen or wherever feels intuitive for you. For me, it feels like the top of the screen is always a good place to start, and we want to start creating our elements for wireframe there. And I'm just using that sketch I created and any kind of brainstorming exercises in order to help guide us. So I knew in the top left we wanted to have an icon where they can view their account and manage their account, maybe reorder things in the past. And so we want a little icon to represent that UI element, and we of course want to use common conventions for those. And since we're wireframing, they don't have to represent in any way the final design, so as long as we understand them and whoever we're presenting our wireframes understands them, and, of course, as we're adding annotations to explain what this is going to eventually be, then we should be in pretty good shape. So you don't have to watch me draw with a Pen tool, I've just created some basic wireframes as symbols so we can reuse these. Of course, especially when we're wireframing and we're using a lot of repetitive elements, it's good to create symbols so we can reuse those. So I'm going to go ahead and drag and drop this over into the top left of the screen. And then in the middle here in our wireframe, we're going to have kind of what screen they are in the app, so we're going to say MENU here. And then over in the top right, we were going to have an icon where they can view their cart and then check out, so I created a little cart icon here, so I'm going to go ahead and drag that out. And I thought through the functionality of that a little bit; want to have a little number here so they can see how many items are in their cart before they check out as they're adding things to that. And then below here, we decided in our sketch that we wanted little shortcuts to different menu categories, and we have four different menu categories, one for pizza, salad, sides, and specials. So I'm going to start with one square here, and then I'm going to hit V to switch to our Move tool. And then I'm going to quickly drag out four squares across. And we're a little bit off there, but I'm not too worried about that because I'm just going to go ahead and select all of these just by drag and selecting. And then I'm just going to scale these down a little bit so they fit on our screen, which it looks like we're a little bit off here, so I'm going to go ahead and move these over just a little bit so that we just have one border-width between our squares. And then I'm going to zoom out again, and then we're going to just readjust this a little bit. And looks pretty good to me; not too worried about it being perfect in this stage because we come up and clean this later. Of course, we're still more in the planning and kind of brainstorming phase of the process. So maybe I want to put some text here to show these are for our different menu categories, so I'm going to come in here and type PIZZA. It's going to be our first category. I'm going to go ahead and place that there. And then I'm going to press Option and drag this out so we have four different categories. And then quickly I'm going to type in one for, oops, (Typing) let's say SALAD. This one if going to be SIDES. And then this last one is going to be SPECIALS. And then so this fits, I'm going to go ahead and select all of these and just decrease the size of the text a little bit to about 16. Looks like we should be able to fit. And then I'm just going to select the background square that this is in, and then the text, and then I'm going to use that Align tool to make sure that these are all aligned nicely inside of their little background squares. Okay, and that looks pretty good to me. It looks like that one got moved a little bit, so just go ahead and tweak that there a little bit so we have that gap gone. And then I'm going to move on down the screen, and below that, we're going to have our first menu category, so I'm going to use that Type tool. I'm just going to make sure it aligns with those two items right there. Say PIZZA is going to be our first menu category, and I'm just going to just go ahead and make this bold, which is not a reflection of the actual design, but so we can kind of see information hierarchy here. And so then we're going to have our first pizza item, and so I'm going to create the Rectangle tool because we want these to be pressable areas so we can click on that and add it to our cart. So I'm just going to go ahead and drag this out to maybe about here. And of course, we can adjust that if that's not going to be the right size. And I'm going to go ahead and give us a little bit of white space between our category and our first item. And so first we're going to have our first pizza, so I'm just going to use PEPPERONI as a placeholder title. Of course, they would have branded or specialty pizzas and all kinds of sorts of things, but we're just using placeholder content for now. So I'm going to bump that down a little bit to about 16 and move that up about here. And then I'm going to use our Type tool by pressing T and drag this out. And we're going to have some room for some lorem ipsum content, so I'm going to go over here outside of the screen, and then I'm going to copy and paste some pizza ipsum in here. And then it's at about 20, so I'm going to drop that down to about 14. So we have a basic idea, once again, of the information hierarchy here. And then below that, we wanted to list some prices for different sizes, so I'm going to say small is going to be, let's say $10. And then probably want this to be the smallest in terms of where our eye goes, so we want the title first, then the description, then we have our little prices down here. So I'm just going to select this price and use Option+drag to drag this out. And then we can play with this alignment a little bit, but I'm going to change this Small to be Medium. And let's say the medium is about $14. And then we can see we have that nice spacing information showing up, so let's say our large is going to be $18, and then I'm going to change this to say Large. So very, very cool. Looking good so far. And since we're going to have repeated elements, I'm going to zoom out a little bit, and what I want to do here is I'm going to drag this bottom area down so we have some more space since we're going to continue filling this up. And then I'm going to select our little component for our menu item and hit Ctrl or Cmd+G to group those together so they're one element. And then I'm going to come over here to Repeat Grid, and you can see that outline turned to green. And since we're just using placeholder items here, I can drag and drop to simulate different menu items. So you can see very, very quickly we have a good idea of our general layout for our app. So we might come in here and add our additional categories and our additional menu items, and then if we wanted to get a good feel for what this might be like, we can come over here in the top right and hit this Play button. And then it's going to pull up a preview so we can get a good feel for this. So we can actually scroll through our app. So very, very cool. So now that we've taken an initial glance at what it's like to wireframe a mobile app in Adobe XD, in our next clip, we're going to talk about how we might add annotations to this and clean it up for exportation.

Annotating and Final Notes In this clip, we're going to talk about adding annotations to our mobile wireframes and some final notes about creating wireframes for mobile apps. So once we have a general direction for our layout established for our screen, then we want to come in and start maybe fleshing this out, maybe making it a little bit high fidelity. One cool thing we can do here is we could add additional artboards for other screens, and then maybe we could document the flow between these screens and then kind of turn this into that hybrid of flowcharts and wireframes called wireflows. We can come in and start to think about what we want to annotate, so let's say this icon up here. What happens when we tap it? What navigation items does it bring up? What page does it take us to when we tap on those navigation items? If we have nothing in our cart, what might happen here? If we were to add additional categories in the future, how might this kind of hotlinks quick navigation to our menu categories, how might that be flexible? What happens when we tap on a menu item? Does it pop up a modal window, or does it take us to a new screen where we might customize our pizza? And then just like we did in our website wireframes, if we want to, we can come in and add annotations right over here so we can be able to see all in one place those notes on our wireframe. And I'm not going to go over exporting those notes since we went over that in-depth in our last module when we talked about exporting the wireframes for our website. But one cool feature in XD I do want to bring up that's really, really cool, up here on the top right, you have an icon to share your wireframe online, so I've gone ahead and created a shareable link, so I'm going to go ahead and pull that up. So it'll generate this link for you, and you can just use any browser to go view this, which is really, really cool. You can see our wireframe right here in the browser. If we want to be able to kind of view this full screen without distractions, we can kind of scroll through that here. And we can press Esc to get out of that. But one really cool thing we can do here is we can actually add annotations in the browser and allow other teams members or other people to add comments to those annotations. So if we're logged into an Adobe account, you could also comment as a guest. Let's say I want to say Menu Categories, and then we'd add some detailed notes about that. We have this option to come and pin this to the artboard, so I can come and add this. We have that little number there, so I can go ahead and drag and drop that onto this area. And then over here, if we can see the matching note, and that way, if I came in and if another team member came in and didn't like that, they can comment or make a response, which hopefully they don't just say they don't like that. Hopefully, it's more constructive, and maybe they say something like have you thought about what would happen if we added another category, things of that nature. And you can have a very collaborative process and help improve those wireframes and get feedback before you move into actually testing these with real users and creating multiple iterations to arrive at the best product you can before you actually launch your wireframe. So very, very cool. So overall, when we're creating wireframes, whether it's for a website or an application or even just a small piece of an interface, the most important thing is that you're really thinking through and planning, that you're brainstorming multiple directions and not just going with your first idea and that you repetitively go back and make sure you're meeting your initial goals and all of your requirements and needs that you just established in the discovery and the research process. If you are able to do that and keep the user in mind every step of the way, then you're going to go a really long way towards creating effective wireframes for user experience design.

Summary and Conclusion In this course, we've learned a lot about wireframing. We've gone over wireframing fundamentals, we've talked about different tools and software we could use, different levels of fidelity and the difference and scenarios you can use each in, best practices for annotation and documentation, how to properly plan a wireframe, how to go about sketching and brainstorming, wireframing in Adobe XD, and also exporting our wireframes for presentation. So I hope you've enjoyed watching, and I appreciate you joining in, and I'll see you next time.