Transcripts
1. Trailer: Lots of designers want to transition into UI/UX, but it can be really hard to know where to start and that's exactly why I created this class. I'm Maddy Beard and I am a strategic designer based in Denver, Colorado. I first got my start in graphic design at Penn State's Design Program, where I learned mostly branding, print, and packaging design. After graduating, I worked at a tech company as a Digital Designer, designing e-commerce websites for some of the world's top retailers. Then I decided I wanted to work for myself so that I could take more ownership over the projects that I worked on and also just have more flexibility in my life and career. Since going off on my own. I've done branding, web design, and UI/UX design for small and mid-size companies, including Commune, a digital platform for personal and societal well-being, Yoga with Adrian, an online yoga platform with over nine million subscribers on YouTube, WeFinance, a fintech company local to Denver and so many more. Currently, I'm working as a creative resident for Adobe, mainly focusing on UI/UX design in the wellness space. I also teach UI/UX concepts on YouTube and Instagram, which is where I've heard from so many designers out there who are interested in getting into UI/UX, but don't quite know where to start. Students think they need to sink thousands of dollars and months of time into extensive boot camps and UX courses and that's just not the case. That's why I'm really excited to be sharing this class with you. I truly believe that you don't need to study UI/UX in order to become successful, you need to practice it. That's exactly what I'm going to help you do in these next lessons. We'll be going over the basics, what UI/UX is, and what skills go into it. Then we'll get into the entire UX process from start to finish. I can't wait for you to gain more confidence in your skills as we move through these lessons. Let's get started.
2. Project Overview: The project for this class is designing a unique mobile app feature using Adobe XD. Don't be fooled into thinking that you need to totally redesign a completely new experience from scratch, in order to showcase your skills in your portfolio. In fact, I think as a beginner, it's more effective to really hone in and focus intentionally on one feature or flow. This project will allow you to complete the whole UX process from start to finish. First, you'll be defining the problem. Then you'll move into exercises, such as affinity mapping and sketching, you'll set up your Adobe XD file, turn those sketches into digital wireframes, and then design and prototype your solutions. Last, we'll take those final prototypes and turn them into a visually pleasing video that you can use in your portfolios. If this sounds super overwhelming, don't worry. I'm going to be taking you each step of the way and sharing my own personal project with you, as well as tips that I've learned along the way throughout the years. My number one tip for success is to take this process step-by-step, and share your work below so that we can support and encourage each other throughout this journey. With all of that out of the way, let's jump into the 1st lesson.
3. What exactly is UX?: Before we dive into this whole process, I want to take some time to define exactly what UI/UX design is and some other relevant terms. Let's start with the overarching topic of user experience design. When someone says that they are a UX designer, they might tackle things such as user interface design, usability, accessibility, information architecture, and human-computer interaction. A UX designer puts all of these pieces together to design a system that helps facilitate a helpful experience for a user. A user interface or UI designer is a little bit more of a specific term; that's someone who designs the actual interface and how it looks to the user. To get even more granular, let's define what an interface actually is because a lot of people think that an interface is just a screen. It can go much further beyond that. An interface is the means by which we, as humans, communicate or interact with the machine. Examples of interfaces are a computer and keyboard, a touchscreen, an ATM, as well as voice-based user interfaces such as virtual assistants. Another term you might have heard of is product design. Product design falls under the same category of user experience design, but it's specific to a product, either digital or physical. Usability and visual design are both really important, whether you're designing something digital or physical. Product designers often have to balance the goals and objectives from a business perspective as well as a user's perspective, and they're usually working closely with both a product manager and an engineer. Another common term you might have heard of is interaction design. This is even more specific. It's important for UX designers, UI designers, and product designers alike. It's honestly exactly what it sounds like. It's all about designing the interaction between the product and the person using the product. Interaction designers need to think about the words they're using, the visual representations they're using, the physical objects that are part of an interaction such as a mouse or a trackpad. They have to consider time, which comes into play with animation, video and sounds, and they have to think about behavioral psychology, meaning how the human can actually learn and understand how to interact with the interface. Customer experience is another really important thing to consider, and it's something that some UX designers do focus on and others do not. It starts whenever the customer has a need, and it ends whenever the customer's need is actually met. Airbnb is a great example. Someone decides that they want to go on vacation. The whole experience from start to finish is really important. Picking up the keys, interacting with the host, what they have to do in order to clean and check out of the place at the end of the vacation. All of these things are around the customer experience, and they're really important to consider and actually design whenever you're coming up with a product that exists on screen and in the real-world, which most products do. Last important term that I thought I would mention is design thinking. Design thinking is basically just a circular process that all designers should be thinking about and doing on an ongoing basis. It starts with empathizing, then you go into defining, next, you'll ideate, then prototype and test, and you'll usually go back between prototyping, testing, prototyping and testing, and you might even jump back and forth to some of the earlier steps as well. It's a great framework to think about and it's definitely irrelevant in the process that we're about to tackle in this class. There is no action step for this lesson, but if you're just learning about UX as a career opportunity, then feel free to spend some time looking at job postings. I find that if you want to eventually get a job in UX, it's important to know what employers are looking for in terms of skills and experiences. Just search UX designer or product designer on a job posting site and check out what employers are looking for for jobs that you might be interested in in the future. Don't let this intimidate you. You're likely just at the beginning of your journey, so just try to take this one step at a time. The first step is creating your very first project. Let's get started on that in the next lesson.
4. Define a Problem: The first and arguably most important step in any good design project is defining the problem. Whenever you're given an assignment at work or by a client, normally, you'll go about defining the problem using extensive foundational research, meaning you'll talk to stakeholders and users, and find out what the goals and objectives are, and prioritize those. But when it comes to creating practice projects like we're doing in this class, the process for defining the problem is simple. You notice a problem in your everyday life or through talking to your peers and then you investigate it further in order to write a succinct problem statement. To help me get into the habit of noticing potential problems and opportunities around me, I've really liked to keep a notebook where I just jot these things down whenever they come to me. Sometimes it's when I'm using a program. Sometimes it's when I'm trying to get something done for work. Sometimes it's when I'm just living my daily life and other times, it's when I'm having conversations with my friends and family. These problems don't have to be big or life altering. They can really be anything at all. If you don't have a backlog of problems in a notebook like I do, then to come up with the problem, what you can do is think about specific categories or areas or industries that really interest you. You could think about specific problems that might have to do with being a creative or being a student or being involved in sports. Maybe there are problems related to wellness, food, transportation, or productivity. One tip for this class is to try to stay away from shopping experiences or problems within that space. E-commerce site redesigns are extremely common and in my opinion, they're really boring because they don't exercise your problem-solving muscle. In most cases, the goal is the same, just to sell more products. For your problem, try to think of something outside of that world and bonus points, if you want to validate your problem or prove that it's worth solving through a little bit of background research. To do this, you basically want to just gather evidence that this is a problem that enough people are experiencing, that it would be worth trying to solve. You could do this through looking at Reddit forums, Facebook groups, anecdotal evidence, talking to friends and family. You can also do market research to figure out if someone has already tried to solve this problem. If so, that doesn't necessarily mean you shouldn't tackle it. That actually does validate your problem because it's something that someone else has deemed important enough to work on. What you can do is explore their solution and see what you can learn from it. Now let's get into how to actually write your problem statement. There are a few things that every good problem statement has. The first is a little bit of context, setting the scene for why the problem is important now. Next is the who, who is having this problem and therefore who would benefit from a solution. Next is the desire or need that that person has. What do they want or need that they don't currently have? Lastly, what's keeping that person from attaining that desire or goal? Let's look at the problem statement that I'm going to be tackling for this class. People are eating at home more often now than ever. Working millennials want to cook and eat healthy meals, but they're busy and meal planning can be tedious. They need a way to streamline the process and take away some of the time and effort required. Notice that this problem statement has nothing to do with the solution. It doesn't hypothesize as to what form the solution might take. It simply states the problem and it answers those four key areas that we talked about before. By saying that people are eating at home more often now than ever, that sets the context and explains why this problem is important to tackle now. It mentions working millennials and then it also describes later that these people are busy, which is a way of stating the who in the statement. It talks about what they want. It says they want to cook and eat more healthy meals at home. It talks about what is currently standing in their way. Meal planning is too tedious for people who don't have tons of free time. Now, I'll invite you to think about what problem you are going to be solving for the remainder of this class. My tips for this step are, keep the problem statement really specific, but only be specific about the problem. Don't introduce the solution yet. Don't talk anything about a mobile app. Just focus on the need or opportunity. For practice, I'd actually recommend writing down five or 10 problem statements and then choosing one that's most interesting to you to move forward with. Once you have your problem statement, copy and paste it and share it with the class so that we can provide feedback for you. If you're having trouble coming up with a problem of your own, that's totally okay. Now, I'm going to share a few more for my notebook that you can steal or change a little bit and use for this project. The first problem statement is, these days, it's incredible how easy it is to meet people you never would have met without the Internet. Two college students are meeting up for coffee, but they don't speak the same language. They want to get to know each other, but they're nervous that they won't be able to connect because of the language barrier. Another one states, when you move to a new city, it's easy to get around because of maps apps, but this makes it harder to actually learn about a new environment. How could young professionals moving to a new city learn their way around while getting where they want to go. The last problem statement is, these days, people are learning how important it is to shop second-hand and stop contributing to fast fashion and harmful labor practices, but it can be hard to do that in practice. How could a 20-something woman decorate her new New York City apartment with second-hand furniture and decor without having to do hours of research in thrift store hunting. Like I said, feel free to steal one of those or just use it as inspiration to write your own. Next, we're going to learn all about affinity mapping and to do one of my favorite exercises, but you actually don't need a team to complete.
5. Empathy Mapping: Normally, affinity mapping is done with groups of people collaborating on one project. Normally, they've all gathered notes and findings and they're coming together and using this affinity map exercise to organize everything that they've found. But that being said, as a freelancer and as someone who is normally the only designer or a product person on a team, I usually do these diagramming exercises by myself and still find immense value in them. I'm going to show you my favorite method for doing this solo so that you can do it for your product as well. It's called empathy mapping. It's a great way to put yourself in your user's shoes and gather more insights about the problem space and the user. First, you have to determine who your user is. If you wrote your problem statement and followed the guidelines in the previous lesson, then this should be really easy. For me, it's working millennials. Feel free to give this person a name, age, occupation, maybe a one-line description in order to bring the persona to life. I'm going to name my persona Phoebe. Let's say she's 29 years old and works at home as a product manager for a tech company. Bonus points if you're actually able to interview a few different people who fall into your target user group. This way you'll be able to learn a little bit more about them, what they do on a daily basis, and especially how they currently deal with this problem. If not, that's totally okay, this is just a practice project. But you may have to do a little bit of reaching when it comes to this next exercise, especially if you yourself don't fall into the target user group. Next, it's time to set up the different categories of our empathy map. Go ahead and take out eight sticky notes or eight pieces of paper if you don't have sticky notes handy and write the following headings; goals, and constraints, say, think and feel, see, hear, tasks and actions, distractions, motivations, and frustrations. Now it's time to brainstorm. I usually find it easiest to start out with goals and constraints. But then after that, I like to move around and just write down what comes to me and then categorize that as I go. I'll try to put myself in the user's shoes and actually pretend that I'm trying to accomplish this goal. I just see what comes up and I jot it down and put it in whatever category it makes most sense. Then after a little while, I'll have each of these categories filled up with at least five post-its or bullet points if you're using a piece of paper. Okay, let's take a look at my empathy map so that you can see how this comes together. First, we'll look at goals and constraints. I wrote down that the goals might be to eat more home-cooked meals, to live a healthier lifestyle in order to feel good, to actually make the meals that she saves on Pinterest or Instagram, to order less Uber Eats. Then the constraints are that she's busy working from home and she only has time to shop once a week, usually on the weekends. Now let's move on to say, think, and feel. These could be things that she's saying aloud to the people around her, things that she's thinking to herself, or ways that she's feeling about this problem. Maybe she says or thinks to herself, "What am I going to make for dinners this week? Where did I see that chili recipe again? I think I forgot to screenshot it. What do I need to buy to make all of these meals?" I wrote down that she might be feeling hungry and overwhelmed. Now let's move on to see. What might your user be seeing around them? I wrote down lots of produce in the grocery store, ingredients out on the counter, an empty fridge, and recipes on Instagram, Pinterest, and other blogs. This really helps to just set the scene and it might inspire a really creative solution later. Just try to put yourself in your user's shoes and think about what they might be seeing each step of the way. Let's move on to hear. I said that Phoebe might be hearing sizzling in the pan that she's cooking with. She might be hearing a podcast that she's listening to while she cooks. She might hear the kitchen timer going off. Her partner asking her what's for dinner. Maybe friends hanging out in the living room. Next is tasks and actions. These are things that she might need to take action on throughout the whole process of cooking. I wrote down find recipes, save recipes, choose recipes for the week ahead, make a grocery list based on these recipes, shop for food, and then cook the food. These are pretty self-explanatory, but they are really going to come in handy whenever you go to create your user flow. Next, let's talk about distractions. This is when it's really important to think about your specific user. For me, Phoebe might be distracted by easy food options such as frozen meals or Uber Eats. She might be distracted by her partner working from home. She might be distracted by her own work and emails and by the TV, YouTube, or social media. Next, we're going to think about what her motivations are. Why is this something that's so important to her? I wrote down that nutrition is important to her, feeling and looking healthy, having energy, cultivating cooking skills and routines, using the act of cooking as a way to wind down from her workday, and maybe influencers online are motivating to her. Lastly, we have frustrations. This is also one of the most important categories because it's going to tell you what types of things to avoid and what types of things to give your user the skills to work around. I wrote down that Phoebe is really frustrated when all of her recipes are in totally different places. She's frustrated when she has to shop too often. She doesn't like eating the same meals over and over. She gets frustrated when she feels like giving up because cooking and eating healthy at home takes too much effort. She gets frustrated whenever food spoils, and she hates those annoying pop-up ads that always come up on food blogs when she's looking for recipes. All right, now it's your turn. Go ahead and fill in your empathy map with as many things as you possibly can. Try not to filter yourself or judge yourself, because some of the things that you don't think are important may actually spark something later on in the process. When you're finished, snap a photo and share it below. In the next lesson, we're going to be getting into one of my favorite phases which is sketching. Spoiler alert, you do not have to be good at drawing in order to do this.
6. User Journey & Sketching: Sketching is my favorite part of almost any project because it's when our ideas can be the most free-flowing and iterative. The goal is not to find the perfect solution or create the most unique interface, or to draw the most perfect shapes, it's really just to be experimental. But you might be thinking, how am I supposed to know what to sketch? Well, before we start sketching, we're going to go back and examine our empathy map to try to come up with the one feature or user flow that's going to most effectively solve our problem. In other words, if your app could only do one thing, what would it be. For the problem I'm working on, I think that feature would be to generate a list of a week's worth of groceries for someone who has gathered recipes from all over the web. I came to this conclusion by going through my empathy map and seeing that a lot of the notes that I took and put in various categories, all came back and had to do with this topic of generating a shopping list based on recipes found all over. This is my hypothesis. If working millennials had a way to generate a grocery list based on a week's worth of recipes from various sources. They would cook and eat healthy meals at home more often. If we remember back to the first lesson whenever we talked about design thinking, we can think of this project going forward as a way to test this hypothesis. We can prototype this feature and get it in front of users to see if it actually does help them cook and eat more healthy meals at home. Or we can just use it as a practice project. Now that I know what feature I'm focusing on, I can go ahead and map out my user journey. Where does it start, where does it end? What are the important middle points that really helped to bridge the gap? Let's start with the beginning and the end. I think the process for me would start whenever a user finds a recipe online that they might want to make in the next week, and they would want it to end with a generated grocery list. The middle steps might be first saving a recipe. Maybe the user would want to categorize it as dinner or lunch or desert, and then actually planning out their meals, browsing through all of the saved recipes and choosing the ones that they want to make this coming week. I also noted at the end step where the list is generated that you might want to categorize the list in different ways based on how you might be shopping, and also you might want to be able to check things off that you already have at home. Now, this map that you create will be your guide for your sketches. Since I have four main steps in my journey, I'll probably have about four main screens, maybe more depending on the details. Now let's get into the sketching process. Whenever I start sketching, I like to start with whatever screen just feels the most important. Sometimes that's the first screen because you want to know where your user is starting off. Sometimes that's the last screen because usually that is the goal that you're trying to accomplish for your user at the end, I do it this way because the relationship between the screens is a lot more important than the individual screens themselves. That's why we're talking about this as a journey. If it's not intuitive for the user to move through, then it's not going to successfully help them accomplish their goal. While I sketch, I'm going to go through and explain some of my top tips for sketching, and then I'll walk you through my sketches so you can see how a real example comes to life. Tip number 1 is to use an iPhone printable template if you're looking to save some time. As you can see, that's what I'm doing here and I'll link that resource if you want to use it for your product. Tip number 2 is focus more on the content than the design at this stage. What needs to be on the screen? Generally, where should it be and how will the user move from point A to point B? Tip number 3, don't be afraid to be messy and make notes in the margins. These sketches don't need to be pretty. They're really just a tool for you to use whenever you get into Adobe XD. Tip number 4, sketch each screen multiple times. Stay iterative and don't get stuck on your very first attempt. It takes practice, and I don't just mean practice as a designer, but specifically, practice working on this exact design problem. Tip number 5, split up your sketching sessions so that you have at least one break in between. You can come back with a clear head and a fresh perspective to evaluate and keep iterating, and tip number 6, if you ever feel lost, just come back to your problem statement. You can see these sketches are all over the place and they don't look nice at all. I have numbered these so that basically whenever I try a screen again, I'll number it as number 2. If I then give up and try again I'll number it as number 3, and that way when I'm going back, I know which one I did first and which one I did last because usually the last one that I sketch is the most successful. These will make a lot more sense whenever I get them into XD to wireframe. But for now, I'll just point out all of the different types of screens that I have. I have the starting screen which is saved recipes. The recipes are categorized by dinner, lunch, deserts. You could categorize them by anything. I have some notes on the side that say copy link from Instagram, Pinterest, blog, etc. Then that inspired me to make a screen where you're actually pasting in the link, and that's what this is right here. Once you did out a recipe, it would generate a preview of what that recipe will look like. You can choose from images from the recipe webpage itself. For whatever thumbnail you wanted to use, it would call out the ingredients and you could edit the recipe title, you could edit the ingredients, and it would then show the instructions. This is saving the recipe for you so that when you go to cook, you can also open this backup and use it. Once all of that looks good, then you can hit "Save". Then once you do hit ''Save'', you will be prompted to choose a category that that meal will go into. Dinners, lunches, deserts, and of course, you can create whatever category you want by tapping on ''New'', which would then bring up the keyboard for you to create a new one. This, I was inspired by Pinterest because whenever you're saving a pin, you save it to whatever board you want to, and you can always create a new one. That is a really similar interaction there. You can see the actions that you can take on this saved recipes screen are to add a new recipe, which will then bring up that modal, which will allow you to paste a URL from a recipe that you copied from the web. Down here you can also generate a list. If you clicked on that, then you would be taken to this next screen where you can select recipes from your saved list and generate a list based on those. Essentially the app would go looking into what the recipe had as the ingredients list, and it would be smart enough to be able to generate a shopping list based on that data. Once you hit "Generate", then it will generate this list for you. As I mentioned before, I figured that users might want to sort either by whatever recipe they're shopping for or by the category. Maybe they're going shopping and they want to tackle the produce first and then the canned foods, etc. Here I have a note that recipe thumbnails might be down here in the corner so that when you tap on that, you can select and deselect what recipes you want to be included in your list. Maybe you generate this list, but then you change your mind and you want to deselect one of the recipes. It will open up like this and that's what you'll be able to do in that scenario. Now it's your turn. The step will really set the foundation for the rest of your project. Go ahead and get mapping and sketching and make sure to share snapshots of your work down below in the class community section. After this, we're going to finally get into Adobe XD. I'm going to be showing you how to set up your file, and then in the following lesson, we'll be going through the wireframing process. That lesson will be much less overwhelming if you have something to work off of. Go ahead and get sketching and I'll see you in the next lesson.
7. Setup Adobe Xd: Before we dive into wireframing, I want to give you a quick tour of Adobe XD and show you how to set up your file just in case you're brand new to the program. Once we open XD, we'll be prompted with a few different artboard sizes to try out. I think I am going to go with the iPhone 12 for my project. As you can see, that sets us up real nicely. We just have this one artboard here that we're going to start out with. To show you around a little bit, we have the toolbar over here. This is our cursor where we can select objects and move them around. We have our shape tools over here so you can create a shape and you can give it a fill and a border. You can also get rid of the border. You can give it a shadow and you can manipulate that shadow using these controls here. We can also create lines and give those lines different widths. We can also give the lines different types of caps. A rounded cap and a protruding cap, things like that. We can use the pen tool, which to be honest, I very rarely used the pen tool in XD. I like to just work with shapes and text, and usually I can get most of what I need done using those tools. Of course, we have the text tool so we can start typing here and we can of course, manipulate that text using all of these controls here. We can choose different fonts and we can choose different variations of those fonts, sizes. We can track out the text a little bit. We can use these controls for our texts as well. I'm guessing many of you, if you are already designers, know about these controls already. Within XD, they're really intuitive and you'll pick up on them fast. This is the artboard tool where you can create a new artboard. But what I actually like to do is the shortcut, which is just pressing A on your keyboard and then you can create an artboard from there. Another shortcut I really like is the R, which is rectangle, and the T, which is text. That makes my life a lot easier, and I use those all the time. Next, let's go through the Document Assets section. This is really nice because we can set colors, character styles, and components, which we'll get into in a later lesson. We can set them up in our document assets so we can always use them. We don't have to copy and paste from artboard to artboard. We can simply have these at our fingertips, which makes designing a lot quicker. For example, let's say we wanted to get some color inspiration from this photo, which I just downloaded from Unsplash. We can start to create a color palette from this photo or really anything at all. Then to save these colors, we simply select all of those shapes and we click the plus icon next to colors. Then we have these available to us to use throughout our app and the same goes for character styles. This is not a very nice character style, but we can add it to our character styles list and come back and use it later. Let's talk about these controls over here. We have our alignment controls. As you can see, I have this rectangle selected and if we align it to the center, this is the center vertical, and so it will align it vertically to the center. Let's align it horizontally to the center as well. We can align it to the left, to the right. We can create multiple rectangles and distribute them evenly using this tool, and finally, we have our Shape Builder tools. You can use these to merge shapes and exclude in all of these things that you might be familiar with if you've used Adobe Illustrator. Like I said, I don't use these things a lot, but it will come in handy if you continue to use XD for your projects and get a little fancier with what you create. Lastly, let's go over all of the modes in XD. Currently, we're in design mode. We're able to add in elements and design out our page. You can also hop into prototype mode, which is what we'll use to animate transitions and create a prototype that a user can actually move through. If you were working on a real project that you wanted to share with someone you are collaborating with, you would go to the Share tab and create a different sharing experience if you want to do a design review versus sharing with your developer, maybe you want to create a presentation, maybe you're sharing specifically for user testing, or you can create custom settings. So those are all of the modes in XD that you will often be toggling between mostly design and prototype, and we'll be getting into those in more detail in the coming lessons. The action step for this lesson is simple. Just open up a file in Adobe XD and create an artboard that is a mobile size. You'll see that there are lots of options. I chose iPhone 12, but you can choose whatever you would like to use for your project. Now that you're a bit more familiar with XD, we'll jump right into wireframing. I'll see you in the next lesson.
8. Wireframing: The purpose of wireframing is to work out the placement of content and solve navigation and functional issues in a format that's really easily adjustable. At this stage, we're still not worried about the visual style of the screens. Because functionality is the main goal here, I personally like to take the important interactions in my wireframes and prototypes those. This gives me a chance to actually test out the product myself and figure out what the issues are and what the sticking points are. This lesson has two parts. First, we're going to turn our sketches into digital wireframes. Then we're going to prototype them in order to get a feel for the experience at the skeletal level and then tweak as needed. The first step is actually really simple. I just get my sketches out in front of me and transfer them into Adobe XD using mostly text and rectangles. This doesn't have to be pretty. Spacing and alignment do not have to be perfect. It's just to get an idea of where elements will go and how a user will move through the screens. Much like sketching, this is a very iterative process, but at least for me the best way to iterate is to actually interact with my screens. Let's start talking more about prototype mode in XD. We touched on prototype mode in the previous lesson, but now I want to show you how I would actually prototype these wireframes that I created. We're not going to get into any fancy transitions quite yet, but I do want to show you how I would have a user, which at this point will just be myself, move from screen to screen. Looking at my user journey, the first thing I want to do is have a user save a new recipe. As you can see, I have this plus icon up here, and since we are in prototype mode, whenever I tap on this plus icon, it's going to give me this little arrow. You can see when I click and drag on this arrow, it allows me to send this interaction to any of the other art boards that I've got. I have these pretty much in order, so I'm going to send it to this next artboard, which is the add recipe pop-up modal, if you will. It's clearly not designed, but there is a little bit that goes into it here enough to prototype this interaction. Then, we can come over here and see what kind of interactions we have. We have a tap trigger, which is what we want, because we want the user to tap on that icon. We have transition selected, which is what we want and instead of dissolve, I actually want this artboard to slide up, so I'm going to select that and ease out 0.30 seconds. That's fine. Again, we're not going to focus too much on the actual animation of these yet. Then once we get to this add recipe slide, we really just want them to paste their URL. After they do that, this screen will populate with all of this different information based on the webpage that they have pasted in. In a real design, we might want to animate something like a loading screen because this isn't going to load immediately, but for this wireframe, we're just going to keep it really simple, so I'm going to do the same thing. Paste URL, and we want it to go into this next detail screen. Instead of slide up, I'm going to do dissolve, and we'll make that last, maybe one second. If it's a full second, that will probably help it seem like it's loading. We'll see what that looks like in a bit. Let's do a couple more. Once we are done editing all of this information, we'll want the user to hit "Save" and once they hit "Save," then they should be able to choose which of the categories they want that new recipe to go into. Again, let's have this slide up. I think that makes the most sense, at least for now. Then, what they want to do is actually check off one of these boxes. Let's say they check off this box, then we want it to almost immediately go to this screen because there shouldn't be any delay or transition between having the box checked and not checked. It should check right away when you tap it. We'll go Tap, Transition, and instead of having an animation, we'll actually just do none and that will make the transition immediate. Then, once they hit "Confirm," we wanted to just go back to the saved recipes screen. That's back over here. What we're going to do is drag this wire over here, and for this, I think I want this transition to be slide down because we want that modal to, it slid up as it was coming in and we want it to slide back down so that it feels consistent. Okay, let's take a look at what this actually looks like. What I want to do is select on this first screen and I'm going to set it as the home screen, which will indicate that this is the first artboard in this flow. Then even if I don't have this artboard selected, when I go to play the prototype that will begin on that first artboard. Okay, let's take a look. We have the prototype here. We first want to out a recipe, we'll paste the URL, and then this information will load. Once we choose what thumbnail image we want, and we can also edit the title as well as some of the ingredients. Then we'll hit "Save." Then it'll ask us where we want to save it to. Let's save it to dinners. Great. Then this will come up, which will ask us if we want to confirm. We confirm and it goes right back to our saved recipes. Hopefully, you have a better understanding of how prototype mode works. I'm going to keep going with this just in case you're curious how I wireframe out the rest of this prototype. The other interaction that we have starting on this home screen or saved recipe screen is to generate a list. When we generate a list, what we want to happen is we want to be able to select from these meals which ones we want to generate the list from. Let's go back over here. This is where I created the screen that shows the selected recipes. I'm going to bring this over here so it's easier to see. As it is right now, all I have is these two screens. I have a screen where no recipes are selected and I have a screen where four recipes are selected. In order to make this prototype feel real and actually be able to test how this would feel as a user, I'm going to have to fix that. What we want is whenever someone taps "Make List," we want them to be able to select their recipes. We will go to the screen, but we need to fix the screen a little bit, so let's go back to design mode. Right now, we have these four rectangles in the selected state. What that means is that they've got a thicker border around them. That's how I've handled it in the wireframes. Once I get to my real designs, the selected versus unselected state might be completely different, but for the wireframing phase, this will certainly do the trick. Let's put these all back to a one pixel border because that's what it's going to look like when you first come over to the select recipes screen. Right now, there's zero recipes selected, so we want to do that too. This "Generate" button probably shouldn't be active yet. Let's give it a light opacity of maybe 40 percent to show that you haven't selected anything so you can't yet generate a list. Okay, again, let's move up so we have a bit more space. Then let's take this artboard and duplicate it right next to it. This, we're going to call one selected. What we're going to do is turn one of these into a selected state, so we'll give it a five pixel border and we'll go into prototype mode, and whenever this is tapped, we want it to immediately transition into this next one, so we'll do no animation because we want it to be immediate. Back in design mode, we want to make this one because one recipe is now selected and we want to make this "Generate" button completely visible because it should be tappable at this point since there is one recipe selected. But let's say that we want to select two recipes before we generate this list. Let's go in and just do this process again. Two selected. Now we'll have the number two here to indicate that there are two selected. Let's say that they are selecting this one in the lunch category. Perfect. Then we'll go back into prototype mode. On this screen, we'll want them to click on this, and it should immediately transition into that screen. Then I'm just going to do that two more times so that we have four recipes selected. Okay, Now that four are selected, we want the user to generate a list. If we tap on the "Generate" button, then we want their grocery list to slide up into frame. Let's do slide up, and once one second is fine for now. Then that will take us to their grocery list. When we get into the real design phase, we'll also tackle these smaller interactions like switching the sort by to meal versus category, and opening up this little button that will show you how to select and deselect what recipes you want included in the list. But for now, I think that is pretty much the prototype. Let's play it again so that we can test out this next little phase of interactions. I want to make a list, so now it's going to allow me to select recipes. Just one thing that I noticed, which is exactly why I test my own prototype, is that that interaction was weird. It slid up or down when really I just wanted it to fade into that screen, so that's a mental note that I'm going to make to change up the types of transitions. But anyway, we want to select this. That's great. It moved up the number from zero to one, and it also made this "Generate" button actually available. Then I have to remember exactly which ones I set up, since this is just a forced prototype and this isn't something where each and every option is actually prototyped out. But anyway, I remember that I selected this one next. It's moving up to two, which is perfect. Then desserts, and then one more dinner, and it's moving up from 1, 2, 3, and 4 which is great. Then we're going to generate that list. This is perfect. This came up with the list sorted by category, so we have produce, all of these things, canned foods, all of these things. Like I said, we're going to get into some of the smaller interactions later when we're really designing, so get your sketches into XD and get them into a place where you can easily interact with them in prototype mode. It may not look pretty yet, but it should be a seamless experience. Once you've got that, take a screenshot of your wireframes or even better, record a video of your prototype and share it with us below. In the next couple of lessons, we'll get to the really fun part, turning these wireframes into high-fidelity designs using textiles, color palettes, and components. One of Adobe XD's most powerful building blocks.
9. UI Design: We made it to another one of my absolute favorite steps in the process, the design phase. In these next few lessons, you're really going to see your app feature come to life visually, so don't give up now. In order to decide what I want this app to look like visually, I usually like to actually make an artboard off to the side in my design file, and start to gather some inspiration images, colors, and type phases. I like to think about the space that the product exists in, meaning who's going to be using it, what industry it exists in, and do a little research on what kind of colors and styles might lend themselves to that type of space. I have a feeling that many of you are already visual designers in some way. I'm not going to spend tons of time on this step. But basically after I've got some ideas of what I might want my color palette to be like and what font or tool I might like to use throughout the app, I'll go ahead and test it out on just one screen. I usually have to do a bit of tweaking, especially because I want to make sure that the color contrast is large enough so that the text on whatever colors that I'm using as background colors or buttons is going to be readable. To do this, I always use the Stark plug-in, which you can see here. As you can see, I played around with this a few times before I really got it to a place where I liked it. First, I had this variation where we've got the plus icon with a little bit of a shadow here. I just wasn't in love with that, so in the next versions, I just kept it really simple. Then I also played around with the button style. First, I was using this bright blue background with a thick stroke. I knew I wanted to stick with this general retro style with the bright colors and the really thick straight lines, but there are also a few ways to do that. This was my first variation, and then I decided I wanted to make these recipe cards look a little bit better. See over here, they really are just flat, and it's a little bit hard for them to stand out because the small text here blends in with the background too much. Over here, I grouped the image and the photo together with this background shape, which is white, and then added a shadow in the background to really help it stand out. The button here looks similar, but I decided to go with that yellow. I definitely liked that better, but then I actually wanted to try out something different with the button that I don't normally do, and I gave it this harsh shadow, which I think is really unique. I decided to go with that. This last attempt was definitely my favorite. I ended up tweaking my styles page to reflect that. Then once you're happy with that, that's a great time to select your colors and fonts and add them to your document assets. I'm just selecting these and clicking the Plus button, and now we have all of these colors at our fingertips. I'm going to do the same with these text styles. I'm using Roc Grotesk, and I'm just keeping it really simple. I'm using that all the way through. I'm giving myself two different options for headings by using one that's super bold, and we have title case used in this one. Then this one, which is still bold but a bit smaller, tracked out a bit more with some larger letter spacing, and also we've got it in all caps. Then this is what I'm using for all of the body text. As you'll see when we get into some of the designs, I usually use it at 16 point, but sometimes I get a little bit bigger or smaller depending on what the needs are of the page. Let's add those to the document assets section also. I'm just going to go in and give this a label so that it's really easy for me. Call that body subheading and heading there. Now, as I go through and design the rest of my app, I can pull from here at anytime, and it just makes it a lot faster. As you're building out this test page, there might be things that need a little bit of tweaking that aren't necessarily to do with your main styles of really just text colors and buttons styles. Some other things might come into the picture. For example, for mine, this component here it came in, which is definitely going to be something I use within the rest of the app. When it comes to designing these types of things, if you don't have tons of visual design background, you might go and look for inspiration elsewhere. You can look on Behance, or Pinterest, or Instagram, or especially think about the apps that you use every day and get some inspiration from those as to how to style different elements like this. You might also have to add icons into your screens. If you don't want to design all of those yourself, or if you just want to save a little bit of time, then I would highly recommend downloading the plugin called Icons 4 Design. This is what I use all the time, and it has tons of common icons. I used the plus icon here, and of course, I could have made this myself. It would probably not take that long, but having these options to show you what types of icons styles you could use is a really great resource to have. Again, styling an app comes with practice. Don't beat yourself up if it doesn't look perfectly how you want it to in the beginning. You can keep improving it as you go. Once you're happy with what this test screen looks like, go ahead and take a screenshot or export it as a PNG and share it with us in the Class Community section. Next, we're going to learn about the power of components and auto-animate in Adobe XD. Go ahead and go through this design styles process for your own project, and I'll see you in the next lesson.
10. Components & More: In this lesson, I want to introduce you to components because this is a tool that is really going to save you some time when you're designing the rest of the screens in your app. Creating components in Adobe XD is a great way to group elements together and create different states or variations of an element. You can also set up transitions between multiple states of a single component. Without using tons of art boards, you can create things like micro animations. If that sounds confusing, I think that seeing it will really help. Let me show you some examples. In the last lesson, you saw that I laid out the screen by just copy and pasting and switching around some text and images within these elements, but there's actually an easier way to do this, which I am about to show you now using components. We want to create a component out of this because then we can reuse this. Later on in the app, we're going to want multiple states of this recipe card component. We're going to want a selected in a deselected state. This is obviously the default state which is deselected, but later on, whenever we want users to be able to select what recipes they want to use to generate a shopping list we're going to need that selected state. This is a perfect contender to create a component out of. I'm going to do it from scratch just so you can see what I mean. All right, Let's set up our screen with everything but the recipe cards, and we'll recreate this using components instead. I'm going to create this from scratch so that you can see exactly how I did it. First, let's start with this background rectangle. What we have is a white rectangle. I'm just going to click the R key as the shortcut for a rectangle. We will draw this out. That looks good. Of course, that you can get really specific with the size depending on how much space you want between elements and that kind of thing. We don't want a border on this, so I'm going to turn off the border. Then we do want some space for both a photo and text. What I'm going to do is actually make a mask that we can draw up our photo into. We can create a mask using a rectangle. I'm going to hit R again and create a rectangle here. Again, I'm going to turn off the border, and let's make this rectangle gray so we can actually see it. All right, so this is where our image is going to go. Then again we want some copies. I'm going to write out shrimp pasta. Let's go back to our asset panel because we want to use the body copy for this. Perfect. Awesome. Now what I want to do is make sure this is left aligned. That's great. I'm going to always want it to start, let's say eight pixels from the side. Instead of it being this type of text where it's basically unlimited width, if I kept typing, it's going to go completely outside of this. That's not what we want. Instead, we want this to be fixed width. I'm going to fix the width to about this size. We want it to be eight pixels from the right end as well, perfect. Then it seems like the line height and here is too big, so I'm going to make this 18 instead. Awesome. Now we can extend this down to make sure that it perfectly aligns there. Now we are going to create some padding so that no matter how long the title of the recipe is, this component will be flexible to that. In order to give us padding, we have to group these elements together. I'm going to do command G to group, and we'll send it to the back so we can still see our mask on top. Then let's select this group and see what our options are. We're going to check off padding here. As you can see, we have 91 pixels of padding on the top, which is great because it gives us room for our image. We have eight pixels on the left and right and six on the bottom. I think that's visually centered, so that's perfect. Now we can actually make this into a component. Let's select both this group and the mask on top and hit command K for component. Now that this is a component, we can go down to the component section and we can actually drag it out to create another instance of that component. We can also just copy and paste or click and drag and hold Option Shift in order to create more of these. Now the awesome things since we added that padding and this is a component, even if we go to just another instance of the component, we can actually change the title. Maybe it's just Shrimp Pasta and now as you can see, the entire component actually is flexible to that. Maybe this one has a really long title. Vegan and gluten free, chili with black beans. There we go. You can pretty much make it as long as you want. That is the awesome thing about components. I just had to do that once and now it's going to be flexible to all of the different instances that we need to create. What's awesome is now we can just throw in the images that we want. You'll see that when I throw in an image to this first component, since that's the main component, it is going to carry over that style to the rest of them, but that's okay because we can easily override that. Let's take this one and just drop it right in there. As you can see I'm just dropping it into the highlighted portion whenever I come in here and that's the mask. There we go. That is so much easier than what we did over here where we had to copy and paste and constantly be resizing this background shape. Now, we created components that are flexible. Now that I'm noticing, we still didn't add the shadow. This is great. We can go back to the main component. If you forget which one the main component is, if you notice this diamond is not filled in green, this diamond is filled in green. That's how you know, this is the main component. What you can also do, like, let's say you have this main component on a screen that's like way on the other side of your window and you don't really remember where it is, what you can do is tap on any of the instances, control-click and Edit Main Component. That will bring you right over to the main component. What we want to do is give this a shadow. We're going to select on this background shape. We're going to go down and give it a shadow. For my shadows, I like to keep them really subtle. We're going to do eight percent opacity with a black shadow. We're going to do 20 blur. That usually looks nice. Perfect. Now as you can see, that it's really subtle, but that did apply it to the rest of the instances. We have this component, but as you can see, they're going off of the screen. If we want this to be horizontally scrollable, we have to actually tell XD to do that. What I will do is make a few more of these. We'll group them together. Then once they're grouped together, you can see we have these options over here, and this is the Scroll Groups option. This icon is a horizontal scroll group icon. We're going to hit that and as you can see, it's automatically set the parameter as the full width of the screen, which is perfect. If we go into Preview mode, and all I'm doing is scrolling horizontally, and now we have a horizontal scroll group. Last thing we need to do with this component is create some different states. Like I said, we want a selected state and a de-selected state. This default state is the de-selected state and if you really tap into this main component, because we've grouped it a couple of times, so you have to probably keep clicking in. Then you can see that there's just one state and it's the default state. But let's add another one and we'll call this Selected. Now, what I want the selected state to look like is I really just want this background shape to have a border. Now we can see if we zoom in, since this shape is in the background of the image, the border is getting cut off. So in order to fix that, instead of having a border that's an inner stroke, let's give it an outer stroke. In that way, it will continue to go outside the bounds of this rectangle. In order to make it actually visible, let's make it three pixels, and we'll give it a color that is in one of our palettes. Great. So here is the selected state. It was as simple as that. As long as we are selected into whatever state we want to edit, we can edit that, and then always just go back to the default state. On the default state, let's set up an interaction where whenever this component is tapped, it should transition into the selected state. If we do that on this main component, it will be applied to the rest of the components as well. Again, saving there so much time. We're on this current component and we're going to go into Prototype mode. If we just tap on this wire instead of dragging it, we just tap on it, then we can have the option to choose a destination that is just another state. We're going to choose the selected state and what we want it to do, we don't really need it to animate. We just want it to transition with no animation because we want it to be immediate. Let's move on to the selected state and just do the same thing so that a user could easily deselect it if they made a mistake. Again, we're just going to tap on that. We're going to choose "Default State", and it's going to remember all of the settings that we wanted. Now, we can preview this. We go back to Design mode, hit the preview. If we just tap on this, as you can see, each time I'm tapping, it is being selected and de-selected. That's one reason that you would make a component if you want it to have multiple states and you want to be able to transition between them. But another reason to create a component would just be so that you have a source of truth for a certain element. Let's take a button, for example. I have this button and let's say I don't make it a component and I just copy and paste it onto a lot of different artboards, and then later on I decide that I want to make a change. Maybe I want this color to be this pink instead, then I would have to go through select all the buttons and make that change. But if I make this a component by simply making sure it's grouped and then hitting command K, then if I have this component appear multiple times, then all I have to do is change the one. I'm just going to hop in here and make this color, then they all change. But that doesn't mean you don't have to only have one style of button. If you change it on just one instance, then as you can see, it only applies to that instance. It's a really flexible tool to use as you're designing your whole interface. For my button, in particular, I do actually want it to have a couple of different states. I wanted to have this default state, but I also wanted to have an inactive state. I want it to be there, but I wanted to have a much lower opacity so that it's clear that the user needs to take a further action before that button becomes active. All I'm going to do is select this main component. I know it's the main one because this green diamond is filled in in the corner, and I'm going to hit "New State", and we'll do Inactive. I'm actually going to click into this component so that I am selected on the whole group. I'm going to make the opacity 50 percent. Now you can see that's the inactive state, we have the default state, and we can move between those. If you come over here as well, you can see that that will work in any instance of the component. Next, let's talk about auto-animate. You can use auto-animate to transition between two different screens or two different states of a single component. Let me show you one example of this just in case you want to experiment with it in your app design. You've seen this screen before and this is the saved recipe screen that we really were just talking about. Now what I'm doing is creating a modal that I want to float up into frame whenever you hit the plus button in order to add a new recipe. I've created this modal and I've grouped it all together as you can see. This artboard is just a copy of the previous artboard with this modal on top. What I want to do to animate between these two screens is actually have this element on both of these screens. You can see I actually do have that. Down here is this element, but look, it's all the way down at the bottom and the opacity is at zero. Because it is named the same, Group 64, Group 64, and it's on both of these artboards, auto-animate in XD is actually going to be able to animate the difference between the two placements and sort of how they appear. On this artboard, it's completely at zero percent opacity and it's at the bottom. On this artboard, it's at 100 percent opacity and it's covering almost the whole screen. If I wire this up, I can double-click until I get into this plus icon. I can drag this wire over and if we select "Auto-Animate", and we'll do, maybe do ease in and out and we'll make it pretty quick, 0.3 seconds, then see if you can see how this happens. Click the plus icon and it floats up into frame. That is exactly what we wanted it to look like. It really just makes animation so much easier, because all you have to do is have an element appear on two different screens and have it named the same in the layers panel, and it will automatically animate the difference. Now that you understand these two critical features in XD, you can go ahead and finish your own prototype. Quick reminders before I wrap up this lesson. Create a component anytime you have an element that will appear in one form or another in multiple places to save yourself time and confusion. As you design, keep hopping into Prototype mode to prototype your designs and play them to test them out and see where you need to make tweaks. If you want to get some practice of a real UX project, you could even have others test out your prototypes. It works best if you actually have someone at home who you can get the prototype in front of, that way you can actually watch them and see where they stumble. If you want to see even more demos and behind the scenes of how I designed out my app feature, then you can check out the next video, which is actually a bonus video. I'll walk you through even more of these design elements and interactions that I've created, and also show you a time-lapse of my three-hour process designing this. If you're already really confident in Adobe XD, then you can feel free to skip that entirely or just watch as much or as little of it as you'd like.
11. BONUS! More Designing & Timelapse: Like I mentioned in this bonus video, I'm going to be showing you my entire app feature from start to finish, some more little interactions, and design elements that I've created. Then at the end, you'll be able to see a time-lapse of the whole process which took about three hours total. Let's jump right in and don't forget, if you're already familiar with XD or you're just anxious to get to the next step of creating your final video. Feel free to skip ahead to the next lesson. To create this, I have 19 screens, but really only four different screen designs. We have this "Saved Recipes" screen, which you've seen several times already. We have this, add recipe, screen, where we have different variations of it; where it's not filled out, and where it is completely filled out. We have this "Save To" like which category screen, and then, same exact thing, we have this "Saved Recipes" screen, but it's just a little bit different whenever we're having the user select recipes to generate a shopping list, and then, lastly, we have the actual shopping list page. You can see that we were able to create this whole animation by just copy and pasting, and tweaking some things around and animating in between them. Let me show you exactly how I did that. We saw this interaction already. We have the "+" button tapped and then this new recipe card, it comes up. What I wanted to happen next was, and we wanted to have the user have the ability to paste a URL from their clipboard. So maybe they're looking at Instagram or Pinterest, or on one of their favorite food blogs, and they want to import a recipe from there. They just hold down to copy the link, come back into this app, then it will prompt them to paste whatever URL they have in their clipboard. After they do that, I wanted it to be clear that the recipe was loading. You never want to have a user just be left hanging. You want to show them that, what you did has worked, the action you took is successful, but we're just loading the data. That's what I wanted here. So once we have that user tap on this element, paste from clipboard, what I wanted was to actually have the next screen be this loading screen. I wanted it to transition right into that screen with a dissolve, and then what I've done is added a time trigger. So instead of having to tap anything at all on this screen, all that happens is this bar, over time, will move all the way up to fill up the loading bar. I've set that duration to happen throughout two full seconds. Let's look at what that looks like. We have this "Add Recipe" screen. We tap on this to paste from the URL, and then it loads it up. Then as soon as that two seconds is over, we have another time trigger that takes us to this screen, where we have all of this information actually loading in. If I click into here, this group, group 87 is where I have the button and all of these ingredients, and all of this stuff. That is going to fade in from the bottom. If you remember, from one of the previous videos, you can see how I did that here. If we click over here, it's the same group, group 87 and the opacity is all the way down, but if we turned it up, we would see that it's all of that same information. That allows auto animate to do its thing because, once we've turned, that on, then it will just animate the difference, the difference between zero percent opacity to 100, the difference between this placement at the bottom and the placement at the very top. That is how I created that transition. Then what I wanted was for the user to be able to save that. So if we click into this "Save" button, we can see that that will just collapse this new recipe card down because we want it to seem like the same process, but the last step in the process, so we're keeping it the exact same, it's the same model but just a little bit smaller so that you can see that it's the last step. To do that, we just had to make sure that this element, this rectangle with the rounded corners on top, is named the same on both artboards. It's named rectangle 789, and over here, if we command click to tap, all the way into the bottom layer, it is named the same thing. If you are more organized than me, you could name all of your layers something that actually makes sense. But for me, when I'm designing, it tends to be quick, and I'll only go back and do that if I've got a really confusing interaction going on. Then what we want is for this information to fade out of the screen, and this information to fade in. We can see that that happens pretty easily whenever we have this animation happen. Then what we want is to deal with this checkbox situation. As you can see, I've actually made this checkbox a component. So if I just keep double-tapping in until we get here, we have this component. We have a default state, which is unchecked, and we have a checked state. Basically, what you could do if you wanted to, was set up an interaction in the main component to be able to tap, to turn off and on that checked state. However, I also wanted this "Confirm" button to change states as well. I ended up using two different artboards for this interaction for that reason. What happens here is, as soon as this checkbox is tapped, it will simply transition over to this next artboard where we have this checked off, and we also have the "Confirm" button at 100 percent opacity. Let's check about that, we tap on dinners and it's as simple as that. Then from here, we want the user to click "Confirm", and then this will simply go out of frame, and we want to be able to see the new recipe come into frame. We don't just want it to automatically appear because we want to give the feedback and call attention to the fact that, "Yes. This recipe was added to the beginning of the dinners category." First, let me show you what I mean. We hit "Confirm". Did you see that? That is exactly what I wanted to happen and I'll show you how I did it. It's really simple to get this modal to disappear. It's the exact same process we've been doing. On this artboard, we have the modal fully in-frame. It's named group 92 on this artboard. If we hover down to the bottom here, we have the same artboard named the same thing, group 92, but the opacity is all the way down and it's also at the very bottom. Same thing over and over with this modal coming in and out. But, the really fun part here is this interaction. If we tap in here to the state that we want to end up on, then we can see we have these four recipes, I'm just going to take this whole scroll group, copy and paste it over here. Then all I'm going to do is take these elements, select each one of them, and drag them so that we have the shrimp pasta as the very first one. Then, as you can see like we had it before, I've got this new one that is just so slightly in frame, we'll turn the opacity all the way down there, and since we've copied and pasted the scroll groups are going to have the same name in both of these, which is perfect. If we hop into prototype mode, now we can see that I've set up a time trigger, after just 0.3 seconds, it will auto-animate over to this next artboard and I've actually used easing in this, and I've used snap, which makes it really quick. I really like how that interaction looks. Let's preview it. We'll preview it from over here because it's pretty quick, we hit confirm, and there you go. That is how you do that type of interaction. Next, we're getting to the good stuff. Now, we have this saved recipes screen, but the next thing we want people to be able to do is to actually make their grocery list. We have that button down there, when that's pressed, what we want people to be able to do, is select the recipes they want included in their grocery list. In order to give feedback that the selections are working into keep track of how many recipes they've selected, I also want to have a counter up on the top right corner. As you can see, we have 0,1,2,3, and 4, with each artboard, one new recipe is selected. For that reason, we actually didn't end up taking advantage of components quite so much in this scenario. Because what we could've done is simply had that interaction where anytime any of these are tapped, it switches to the selected state and that would have worked great. But then, we still need a new artboard in order to have this counter stepping up. That was the easiest way for me to do it. All I really did was started with zero recipes selected, and as you can see, for that, I had this generate list button in the inactive state. I just simply move the opacity down to 50 because if the user hasn't selected any recipes, they shouldn't be able to generate the list yet. The list would have nothing on it. That just gives them more feedback that they have to select a recipe in order to be able to go about this process. For the sake of this mock-up, we're going to pretend that this person is going to tap on creamy tomato soup as their very first one. We will set up the interaction so that when that is tapped, it will automatically take us straight to the next artboard, and on that next artboard will have the counter move up to one and the generate list button all the way up in opacity. That's all we're doing here four different times. We're moving the state from unselected to select it, we're moving the counter up 1,2,3, and 4. Finally, when they've got all four of these selected, they're going to decide to generate the list. If we see in prototype mode what that's going to do, is it's basically going to auto animate in this list and since this looks probably familiar to you, this is a modal and so I used the same exact process. We have all of this grouped together, group 113 and if you look down here in the previous artboard, it's called 113, the opacity is all the way down, which is going to allow us to generate the list and it's going to swipe up like that. Let's go through that one more time so that you can see how this works. Someone decides that they want to make a grocery list, this switches to select recipes to tell the user what to do. They're able to select them one by one. We're also demonstrating the scroll group here, which looks pretty cool. Curry soup, we're going to do loaded salad and chocolate chip cookies and you can see that the counter went all the way up to four. We're going to generate the list and now you can see that the generated list can either be sorted by category or recipe. This is something that I didn't prototype out because it wasn't super important to my final feature. But I did want to show these collapsible categories. Since it is sorted by category, I wanted you to be able to, at least for one of the sections I chose, produce, open and close this. We have that interaction, which now I'm going to show you how to do that. It's easiest to design out the results than the first artboard if that makes sense. This is the end result. This is what I designed first, I made this whole list, I grouped it together to make things easier. It's called group 109, and if you come over here, you can also see that group 109 is right here group 109. If we turn that all the way up, what you'll see is that I simply took each of these elements and stacked them on top of each other to collapse them because that's exactly what this is. They're collapsing this list to either expand or collapse it. What we can do now is go into prototype mode and if we have this produce tapped, then what we want it to do is animate over to this one and if it's tapped again, then you want it to collapse again, it will just go back to this screen. That's pretty easy. That is what we've done here, produce. You can just bring it up and down. As you can see, I also had to take this baking section and move it to the very bottom in this artboard so that it would be scooched out of the way so you can see that whole list. I wanted users to be able to open and close this recipe list. It's just a list of all the recipes that are included, so that way if you want to deselect any of them, you can. I've just created this component where one of the states is collapsed and the default state is with all of these out like this. I did the same exact process with the collapsed state. You can probably see if we go in here, we have all of these groups which are currently at zero percent opacity, but if I turn them up, you can see that all of these are just hidden behind there and they are stacked on top of each other. That's really how I did that. What I wanted was, even if you're on this page where all of these are out, if you tap on this, I also wanted these to collapse, because I wanted there to be room for you to see these recipes. So check that out. There you go. In order to do that, I created this third artboard where we actually have all of these out and expanded. It's pretty much a copy of this, but with all of these expanded, so that way, if you're on this artboard and you tap on this, it will take you to this artboard. But if you're on this artboard and you tap on this, it will still take you to this artboard. So no matter what, if you tap on this to expand it, not only will it expand in itself, but it will also collapse all of these lists. The very last interaction that I wanted to show you was saving your list. Let's say that a user has their list, but they're not going shopping right way or they just want to save it for later, they are able to save the list and actually be able to access it from their home screen. If we go over to the new home screen, once a list has been saved, you can see we have this added element. I just designed a quick little list icon and gave it a little badge with the number 1 so you know how many lists you have saved. In order to have that animate in, I'll show you exactly what I did. Let's say we're starting here, you tap on "Save List". You can see it's the same interaction that we had over here when we had the tomato soup come into the dinners category. I'll show you that again, but is pretty much the same. What we do is, we have this prototype so that if you click on Save List, then you'll come over here, and first you'll land on just this normal home screen without the list. As you can see, if I hover over, I actually have this list icon all the way off to the left with the opacity all the way down. It's just like ever so slightly on the artboard. Then I've set up a time trigger where it'll land on that screen but then after half of a second, it will auto-animate to this screen where this is actually in place and the easing will be a snap, and it will just take 0.2 seconds, so it'll be really quick just like the previous interaction. That's just another way to call attention to something coming into the screen. You could easily just animate it so that you tap "Save" and you're brought to this screen. But adding that interaction of it coming into the screen really just drives the point home to the user that, yes, they saved it and the app is showing them, yeah, it has successfully been saved and now it lives right here. I think that that is a super important interaction. Let's check out the whole thing and then I will show you the entire time-lapse of me creating this if you are curious about what that looked like.
12. Create Your Video: Everyone, you've made it to the very last step. Here we're going to put a bow on your unique app feature so that you can share it on your portfolio, Behance, or social media. I've tried to make this last lesson really simple for you. I put together a little resource folder that I will walk you through now. Within this folder, we have two things. We have some background images, and I have just downloaded these from Unsplash, so it's completely free and royalty free. You can download some of your own from there if you want, or you can create your own. Then the next thing that I have is these iPhone frames. I've just created one in black and it's like a clay 3D type of overlay. We also have a more flat one in black and a more flat one in white. Again, you can download these from various places for free, so feel free to find your own. But I just thought it would be helpful to include these in there. What we're going to do is overlay this iPhone frame over top of your prototype video so that it adds some context and looks really realistic. Now it's time to record your prototype in XD. This is really easy. All you're going to do is select on the very first art board of your prototype and tap on the ''Play'' icon and then you'll see up here, you can start to record. Go ahead, hit ''Record''. I always like to make sure I see it start to count for a couple seconds to give myself some wiggle room and then I'll start interacting with it. I'm just going to go through that process here. I like to go slow enough so that you can see exactly what I'm doing, but not so slow that it gets boring. Take your time. Don't rush through it. Make sure you're able to see everything that you're doing. Make sure to interact with everything that you wanted to show off. Awesome. Once you're done, go ahead and stop recording. Then you're just going to give that a unique name and save it to your desktop. I'll call it app prototype. Great. Now what we can do is double-click to open that in QuickTime and trim it. Like I said, I like to leave a little bit of a wiggle room in the beginning and the end so then it's time to trim it, make sure it's nice and tight. In order to do that, make sure you're in QuickTime and just use the controls Command T. Let's see where this actually starts. That's where my cursor comes in. I'm going to stop it just a little bit before that. Then I will bring it to the beginning and play through this whole thing and stop it whenever I think it's a good time. Perfect, right there, trim. Also a tip when it comes to actually recording your prototype, you may have to do it a couple of times to get really smooth at it and practice all of the interactions, that's totally fine. Make sure that you get a good one before you move forward. I'm going to save that, and I'm just going to save it over that version. Awesome. Now we have this app prototype, and I'm going to throw that right into my video assets folder, along with the backgrounds and the iPhone frames that we have. First I'm going to show you how to do this in Premiere Pro. Once we've created a new project, we'll have this project bin down here. I'm just going to import everything that I'm going to need and then we'll layer it in the timeline. First, of course I'm going to drag in my prototype video that we just trimmed. Then I'm going to find a background that I like. I'll do this one. Then I'm going to find an iPhone frame. I'm going to do this more 3D looking one. Awesome. Now like I said, we can just layer them in the timeline. First, I am going to drag this main prototype video in and as you can see, the project has taken on the same dimensions as this first video that we dropped in. What we're going to do is go up to sequence settings. We're actually going to change this to 1920 by 1080. Then we're just going to need to make this video tracks smaller. We can go to scale under the effect controls and just bring it down. We may need to adjust that later on depending on the size of the frame that we bring in. But that's good for now and like I said, we're just going to layer these. Of course we want the texture on the bottom, then we want the prototype, and then on top of that, we want the iPhone frame. It's looking pretty good, but we need to decrease the size of the video a bit more so it fits perfectly in this frame. Then I'm actually going to move the position around just a bit so that it is perfectly centered in there. That looks good. But I want to move the background a little bit. I want this crease to be off to the side. I think that looks good. Once you're happy with it, then you can go to export it. All you're going to do is go up to file, export, media. The shortcut is Command M and then wherever it says output name, you can choose what you want to name it and where you want to save it. Just do that. You can see here all of the settings look good, 1920 by 1080. You can uncheck audio if you want, just since there's no audio. Then you can click ''Export''. Now I'm going to show you how to do this in iMovie, and it's really similar. But unfortunately in iMovie, you can't layer more than two video tracks. We're just going to layer two, export it and then bring it back in and layer the third one on top. I'm just going to show you exactly what that's like, just in case you don't have access to Premiere Pro. First I'm going to drop in our background since that's what we want on the bottom and then I'm going to drop in our prototype. We'll throw the prototype on top like this. Then we'll just stretch this out till it reaches the very end of our video. There's this weird Ken Burns effect on the background layer that is just a default in iMovie whenever you import a photo. We're just going to turn that off. We'll do crop to fill and then that looks good. Double-click on the video. Then if you see up here, there's an option that says cut away and you can switch that to picture and picture, which is what we want because that will allow us to actually manipulate the size here. Let's do that, just make it about this size. Then again, I want to change the placement of the background. Let's go here and just mess around the size. Perfect. Then the crease will appear on the right a little bit more. I think this looks really good. Then we're going to export this and we're actually going to bring it back in so that we can do the same thing, but just layering the frame on top. I'll do a file, share, file. Perfect. Now we can actually just going to use the same file, so we'll get rid of those. We're going to look for our movie on the desktop and we'll drop it right in. Can see if we scrub through, it's looking good and now we just have to layer the iPhone frame on top, so let's crap that and we will drag it in. Again, we'll increase the length and go to picture and picture instead. We're going to need to first, go into crop and fit so that you can see the whole thing. That looks good and double-click again picture and picture, and I'll just make that so that it fits perfectly. Now let's play it and see what it looks like. That looks great. As you can see, it looks just like the one we created in Premiere it just took one extra step. Here's what my final video looks like. I can't wait to see yours, please share it below. Also, if you decide to share it on social media, feel free to tag me at MaddieBeard.UX on Instagram, and underscore MaddieBeard on Twitter. Nothing would make me happier than seeing your projects and having you share them with the world.
13. Final Tips: Before we wrap up this class, I wanted to take a few minutes just to talk about some common misconceptions, questions, and things like that, that might help you if you're just at the beginning of your UX career. My first tip here is always have a why behind your decisions. As a UX designer, you're not necessarily an artist, you are a communicator and you're helping someone use a product and get the most out of it. There should always be a reason behind why you make certain design decisions. These types of reasons are really important to be able to articulate and show and tell, not only to your bosses, clients, and things like that but also for yourself to actually understand why you're doing the things you're doing and have some peace of mind that there is research, data, and testing that goes into your decisions because that is what makes a successful product. My second tip is to always show your process work in your UX case studies and portfolio pieces. Employers want to know what your process is like, and they want to know what goes into your work. They don't want to just see that you can produce some pretty UI, they want to see what goes into it. Whether that'd be research or 10 iterations or whatever it is. You should show everything that goes into your project in a way that is extremely digestible for your viewers. Don't just throw everything that you did on the page, but try to tell a story as to how you got from problem to solution. My third tip is a little bit technical, but I think it's important and it's all about consistency. As a UX designer, you need to practice being detail-oriented. When it comes to text sizes, consistency of colors, and consistency of spacing, these things are crucial. When a potential employer or client is going through your projects, they really shouldn't see any mistakes in these regards. They shouldn't see that you decided to use one typeface on the screen, but you randomly switched to another typeface on another screen. They shouldn't see that you're using 10 pixels of padding on this scenario and 25 in this scenario for no good reason. You should always double-check your work in terms of consistency and being detail-oriented because that's something that employers are going to look for. My last tip is to test early and often. This is something that people in the UX field can agree on across the board. It's really important to get your solutions into the hands of real users as early and often as possible. That's because as the designer, you have tons of bias and you don't necessarily know what people are going to actually do. You may think you know what they're going to do, they might tell you what they're going to do, but that doesn't always match up with what they actually do and how they actually behave with a product in front of them. Even with practice projects or projects that are just case studies for your portfolio, I'd highly recommend trying to get someone to test them. It's just going to help your designs get better and better every single time you test.
14. Conclusion: You made it to the end of this class. Showing up and taking action is seriously the best thing you can do in order to improve your skills and eventually transition into a career in UX. It's not always easy to show up and try something new and really put your all into it, but it's always worth it. I really hope you enjoyed the creative and strategic processes that go into a project like this. Don't forget to upload your project below, and feel free to come back to this class anytime you want to get more practice, and experience, and projects under your belt. Whether you want to create more app features for the same idea or do a few completely different solutions, I'd highly encourage you to just keep going with it. I've loved sharing this class with you, and I can't wait to see how you've used it to create something that you've never designed before. Thanks so much for watching. Best of luck in your creative career.
