Wireframing for UX Design : Sketch Your Big Idea | Carlye Cunniff | Skillshare

Wireframing for UX Design : Sketch Your Big Idea

Carlye Cunniff, Experience Designer

Play Speed
  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x
7 Lessons (34m)
    • 1. Introduction : Wireframing for UX Design

      2:01
    • 2. What is Wireframing?

      7:15
    • 3. Why Do We Wireframe?

      5:51
    • 4. How Do We Wireframe?

      4:38
    • 5. How Do We Wireframe (2)

      4:24
    • 6. How Do We Wireframe? (3)

      4:08
    • 7. How Do We Wireframe? (4)

      6:03
11 students are watching this class

About This Class

ba6f2388

Wireframing is one of the most important concepts and stages in user experience design. UX designers use wireframes as a way to express a flow through a process or communicate individual screens in a product.

Wireframes can range in fidelity from sketches on bar napkins to beautiful, interactive photoshop mocks. This class will provide a basic overview of why we wireframe, where wireframing fits into the UX process, how to use it (from stakeholder presentations to usability testing). Finally, we'll spend a lot of tie creating our own lo-fi wireframes to share with the class.

Transcripts

1. Introduction : Wireframing for UX Design: why framing is one of the most important concepts and stages and user experience. Design UX designers use wire frames is a way to express a flow through a process or communicate individual screens in a product. My name is Carly canIs I'm aux design consultant living in the Seattle area. I work with companies to develop design strategy, applied design thinking and encourage human centered design processes. I love human centered design because it allows me to combine my curiosity with creative problem solving. I believe the best designers aren't those that constantly create beautiful things, but they're the people who trust the process and commit to using human centered design principles. Creating focused and intentional wire frames helps designers refined challenge and ultimately bring their big ideas. Toe life Wire frames can range infidelity, from sketches on bar napkins to beautiful, interactive Photoshopped mock ups. This class will provide a basic overview of why we wire frame where wire framing fits into the UX process. How to use wire frames from stakeholder interviews to usability tests. This is a great class for product managers, project managers, Web designers, developers or budding UX designers looking to learn more about the design process because wire frames are ultimately a communication tool. Anyone who interacts with interfaces will benefit from understanding how tow wire frame our class project will involve sketching and iterating on one of your own big ideas. We'll go through the process of sketching personas and scenarios, talk about happy paths and developed several sketch solutions for our user. After presenting several iterations of your wire frames, your final delivery herbal will be a medium fidelity wire frame that you can share with the world. 2. What is Wireframing?: Hi, everyone. Welcome to wire framing for user experience design. I'm so excited that you're interested in taking this course. My name is Carly Can If I'm a UX design consultant. I live and work in Seattle before getting into user experience design. I had a lot of jobs. I was a professional dancer, most notably ah, kayak guide. An outdoor educator, Um, and really considered myself to be a creative type, but wanted to do something that was a little more stable, but also maintained that creativity. I found your ex design because it is creative, and it's a lot of creative problem solving, but it also involves a lot of empathy and working with people. So I got to combine a lot of my skills on DNA. Now, help companies work on different products, different projects, and I help user experience Design teams really go through the process to create the best experiences for people. So I'm so excited that you're here, toe, Take this course with me. Um, So this is an introduction tow wire framing, and by the end of this course, you'll know why UX designers wire frame. You'll know how to create effective wire frames and how to prepare those wire frames for presentation. I think this is a great class for Web designers, Web developers, product managers, visual designers or even UX designers who are looking to brush up on some of those skills. So the plan for the way this classle work is we will have a little bit of lecture and discussion toe set us up for why we wire frame and whites important. Ah, ux design is a pretty technical field on, so we do want to set it up. Well, then we'll get right into the product the project introduction. We'll start our project by the third class. Um, UX design is all about iteration. So after we start that project, we're gonna jittery again again until we have a product that we're ready to share. And then we'll share it on the class page and hopefully you'll share it with friends and family as well. So before we jump into wire framing, going to quickly go over what user experience design is, there are a lot of different definitions of you is user experience design that can sometimes make it really tricky to define. Um, but one definition that I use is it's ah, it's a method of designing and design thinking that thinks about humans first and thinks about humans, the needs that people have, the different problems that a design could solve. Um, and the different ways that people were in a will interact with those designs to really make the best product. So I believe that if you're not working with users or if you're not working with data, then you're really not doing user experience design. So in an ideal world, uh, user experience designers would go through this process on. Of course, we don't live in an ideal world, but when we're learning about the process, it's great to think about what the best case scenario would be. So you would start with doing user research That means qualitative and quantitative research. It's getting a ton of data to try to really understand what the problem spaces, what competitors there might be for your product, what those competitors already have. Or maybe what they're lacking. Um, and it also means doing some contextual inquiry. It's going and talking to people and seeing what their pain points are and seeing why they have the pain points that they have our hearing from them, what they really need in their lives to make them better. So after gathering all of that data, remove into the analysis face. And so that's where we really consort to define where some opportunities might be and where a design could help. So that's a ton of brainstorming. It's, Ah, really looking at the data and figuring out with your team what you found and deciding on a direction to go. The third kind of phase of the design process is designed so you're starting to concept. You're starting to explore all the different ways you might be able to solve a problem. During the decide phase, you'll probably go through a ton of ideas and landing on the right. One might take some time, Um, but it's a really fun part of the process because you can start to see if you might actually be able to solve a problem for people from the design phase will move into the prototyping phase, so that means you'll start to see if your idea could actually stick. Can you build it? Do people want to use it? Do people understand whether even does. You'll start to gather a lot more data when you start prototyping from prototyping. As I said, you're moving to user testing, so you'll take those prototypes that you bill and you'll show them to people in context. So you'll go back, maybe to the same people that you researched with the solution and see if it works. See if people know how to use it. See if it makes sense. It probably won't. And that's a really big part of the design process. Is that the first thing you design is probably not the right thing? Um, a good designer listens to their users, and they listen to the data. If something's not working, then it has to change. So where does wire framing fit into this process? Ah, wire framing really comes in the design section. Um, so as you're exploring all these different ideas doing well, Fidelity wire frames is a great way to see if something will even fit on paper. Um, it kind of makes you narrow your ideas down to. If you're designing for a mobile device, will your idea even fit on a mobile device? It's a big part of the prototyping stage. Ah, wire frames air two dimensional sketches of the thing that might be riel. So those two dimensional sketches can look like the real product and have interactions like the real product if they're built into a software program. So your wire frames essentially become your prototype. And then, of course, in the user testing phase, you can begin your user testing as soon as you have wire frames and throughout the course, I'll encourage you to do some guerrilla style user testing with your wire frames, so showing people and explaining what what they dio and getting people's input and feedback to see if you missed anything. So that's where wire framing fits into the general user experience design process. Andi. That's kind of the user experience design process in less than a minute. So I know that's a lot to go over. And of course, there's so much more to it. But I wanted to give you some way, finding as we jump in tow, wire framing. If you're not familiar with user experience, design it all. Don't worry. This course is designed for people who maybe don't know what you exes yet but want to get more into it. It's a really great way to get your feet wet and user experience design. So in the next class will discuss wire frames in detail and talk about why user experience designers wire frame and why you want to my why you might want to start wire framing as well. 3. Why Do We Wireframe? : Hi, everybody. Welcome back Toe wire framing for user experience design. We're gonna talk about wire frames. What is a wire frame? It's a skeletal, two dimensional model in which only lines and vortices are represented. An image or set of images, which displays the functional elements of a website or page typically used for planning a site structure and functionality. So I know that's a lengthy description. I really think about. Wire frames is a tool for communication. Wire frames communicate your design ideas. They communicate, maybe a product managers ideas of what a design needs to do to a designer, um, or their hi fi mock ups of what a product will eventually look like. So this is a wire frame. It's lines and boxes, and it's used to communicate what a website might eventually look like. This is also a wire frame. It's a little more sought out. The lines are straight. You can see some modular design elements. This is also a wire frame. It's a high dimensional wire frame, and I'm assuming that it isn't functional yet. Um, but it is just another screen that shows what something will eventually look like. So a wire frame again is a tool to communicate what something will look like, what it will do and how user might interact with it. So why do we spend time wire framing? There's a lot of reasons, and I probably don't even cover them all here, so feel free to think more about it. One of the really important reasons that we spend time doing it is it's It's easy. It's a great tool for brainstorming because anyone on the team conduce it. It doesn't require artistic talent. It's not something that only designers need to do. Um, and even advanced wire framing techniques are easy to pick up, and we'll go through advanced, uh, paper prototyping or paper wire framing techniques later on in the course. But it's not something that is limited to people with, ah, years and years of artistic education. It's great for user testing, user experiences, user experience. Designers should live by user testing. We have to show her designs to our users and get data to see if what we made is gonna work . And you can start showing participants higher low fidelity wire frames to see if they understand your idea as soon as you make them so you can show user is your pen and paper sketches that you did on a napkin and see if they understand what you're talking about. With wire frames, participants can still behave the same way as they would with a real real product. So there are techniques you can use to let people interact with your paper prototypes, and they can give you data that's really valid. The return on investment of making wire frames and testing them can literally be in millions of dollars because we're talking about pen, paper wire frames, the cost is basically zero. So if you test your wire, frame your sketched wire frame product and learn that you're missing a button that tells people where to click, you're literally saving the company or yourself millions of dollars way. Spend time where framing to communicate it. Yes, it's a lot easier to show than to tell. So in many types of communication, people end up arguing when they're just verbally trying to communicate something. But if you can quickly frame it out or draw it out on the white board, Ah, you might find that you actually agree with whoever you're arguing with And, uh, doing the thing is the thing. It's not talking about doing this thing, so we have a lot of ideas in our head, and we like to think that we're doing something as we talk about them and we think about them. But until we put those ideas on paper, we really don't have anything. So let's communicate that idea that you have knocking around in your head, put it on paper, and then you have the beginnings of a product. We spend time wire framing to try new ideas. Wire framing, especially in paper, is cheap and easy. You can try all the wildest ideas that you've ever thought off. You can also try multiple ideas. Your first idea may not be the best idea. In fact, it's probably not the best idea. So spend time to make multiple wire frames and see what you come up with. In that same vein, we can use wire framing to narrow down our crazy ideas. So it's cheap and easy, so you can try the wildest things. You can try everything that you brainstorm up on the white board with your team. Ah, you can see when those wild ideas may not work, so maybe you have a fantastic idea, but you start to wire frame and realize it just isn't going to function in a mobile framework. Um, you can start to visualize and conception conceptualize interaction problems, and then you can start to make creative solutions. So why are framing is a really important tool to really start honing in on some of those wild ideas? You can get feedback very quickly and easily. So, going back to user testing, you can talk to your product managers. You can talk to your back and developers. You can talk to your friend and developers. You can talk to everyone on your team and see if what you're talking about is even, uh in scope. So that's why we use wire framing in a nutshell. That's why it's important. And that's kind of what it is. And in the next class, we're going to start in on our project in our project, and we'll talk a little bit more about the details of creating functional wire frames 4. How Do We Wireframe? : Hi, everybody. Welcome back. Toe wire framing for user experience design. Really excited to start to see some of your projects pop up on the wall. And I'm excited to dive deeper into the wire framing process with you. So this is project Parts three and I need to inform you that we have to take a step back. So we're gonna talk about personas, scenarios and happy paths in this lesson. So we're gonna look at how to dive into a wire framing project while considering a human centered design perspective and thinking about personas scenarios. And Happy Pass is gonna help us do that in order to create the best first pass at your design, you'll want to start with a user and a scenario in mind. That user is then gonna move through their scenario and you're going to think of a happy pass for them. So maybe how your design solves their problem in the best way possible. So if they have the best experience and everything goes right while they're moving through your wire frame, that's their happy past. We could do an entire course on the topic of personas, scenarios and happy paths. But this course is about wire framing, so we're not going. Teoh. If you've never heard of these things before, don't worry. You'll be totally fine. If you want to dive deeper, there's a ton of resource is on all three of the of persona scenarios and happy pads, and I'm happy to share those. Just let me know. So I want you to remember where wire frames fit into the user experience design process. In a perfect world, we would let a research tell us who are persona waas and what problem we're trying to solve for them. So during the analysis phase of our user experience design process would really suss out who it is we're designing for and what problem we're trying to solve for them. Our analysis phase would also tell us what they're happiest solution would be. So if we decide that their problem is they need a quick and easy way to purchase, tacos are perfect. Happy Path would be a three step application that got them to the tacos, sold them the tacos and they got to eat the tacos. That's a happy path. It doesn't include What if they didn't have the right kind of tacos for our user. It doesn't include What if the price was listed incorrectly doesn't include any of those edge cases or less than happy scenarios. At this point, we're just thinking about the best possible solution. Remember, we don't live in a perfect world. So although we would want research to really guide where persona and scenario is, we're not gonna be able to do that for this project. So for now, we're gonna make those things up. You have totally free rein. Think about who is going to use this thing that you're making. And what problem is it going to solve for them? Remember that creating something for a very small population is going to be more successful than creating something that solves something for everyone. After you come up with the person that you're going to design for, sketch them out. Clearly, we're not going for perfection. But for communication, I could tell you all about this person. She's my persona that I made for a project. I did. Her name is Abby on. Abby is a really active outdoors. Go er, She's very social. She has a lot of friends on. She's in her mid twenties, and she makes about $70,000 a year. I could also tell you about Abby's scenario. She wants to go outside with her friends, but she has a really hard time finding camping sites. So I really need to design something that allows Abby too quickly and easy, easily find camping sites that meet her needs and allows her to purchase them. So now I have a happy path. I have a persona, and I have a scenario. Here's an example of a scenario again, We're not going for perfection. We're going for communication. I could tell you a whole story about Abby and her camping experience is and what she needs just based on these pictures. And it would be a lot more interesting than me just reading a piece of paper to you. So I want you to poster, persona and scenario to the Project page. The scenario could be a sketch storyboard or a written story. Your choice. Think in your head about your happy past. You're gonna really want to come back to the happy past. Later, as you're starting to design your wire frame, it'll make that wire framing process of lot easier. I'm really excited to start seeing your personas and your scenarios come up on the project page and ah, looking forward to project Part four. 5. How Do We Wireframe (2): welcome back to wire framing for user experience design. I'm excited to really start to dig into our projects and talk more about the nitty gritty of wire framing. So let's talk a little bit about what different types of wire frames there are. There is a low fidelity wire frames, a que lo fi wire frames and this kind of wire frames air sketch on paper, bar napkins or anything you have on hand. So some of the best ideas come from people chatting over coffee or a cocktail and coming up with a great idea. So all it is is an idea until you put it down on paper. So put it down on paper. Whatever you have and you have yourself a wire frame, this is perfectly acceptable for a wire frame. A medium fidelity wire frames can be drawn on paper with rulers or grids, or even roughly made in software programs like balsamic or even photo shopper sketch. We're not gonna get into the prototyping software in this course, but there's tons of resource is out there. If you'd like to take your wire frames to the next level, these programs can even make your wire frames interactive and turn the minute prototypes. So a medium for the fidelity wire frame for our purposes can be drawn on paper. And we're thinking about rulers using graph paper, considering our spacing and and making things easy to see. Fidelity of a wire frame made very. But the basic elements of a wire frame remained the same. Boxes and lines. Here's an example of some elements that might be used in a hand drawn wire frame. They look a lot like the elements that you might see on your mobile device, but their hand run and this stuff is easy to draw. It looks like this person probably used a ruler or some kind of straight edge on Ben, some interesting shading tools to make something that looks pretty high. Fidelity. So now that we talked about low fidelity wire frames being perfectly acceptable, we're gonna do an exercise called Crazy Eights. So one of the hardest things about wire framing is coming up with the idea. You can spend hours staring at a blank piece of paper, trying to communicate the general idea of something that you have in your head and trying to get it onto paper. The other problem we have is that your first idea is probably not the best idea. Or maybe you don't have any ideas at all. You know the problem, and you just cannot think of a solution for your user. All of these things could be solved with some creative brainstorming. And a problem that people sometimes run into is that they're so focused on making their wire frame beautiful that they don't time box there wire fring building. They can also get so stuck on their one idea for an interface that they can't get up. They can't get off of it or try to get into any new ideas. So crazy eights is an exercise that's meant to help you generate a lot of ideas so you can start to dive into the strongest one. Don't worry about being tidy. That's really not the point. Right now. The point of this activity is to come up with a lot of ideas and challenge yourself to think of different ways to solve the problem. So here's how it works. With Crazy eights, you're gonna divide up a piece of paper into eight small sections. They don't have to be very big, and it does not have to be neat. You're gonna give yourself one minute for each section, so use a timer on your cell phone and make sure you stick to the time in that one minute sketch. Whatever comes to your head, so think of whatever idea it is and try to get as much detail as you can soon is. The timer goes off. You have to switch to the next box. You can either expand on a great idea you had on the previous box or start over again from scratch. Challenge yourself to stick to the time boxes, so only give yourself one minute after you're done. You could go back and really expand on an idea that you thought was great. But at this point, keep switching boxes. If you don't have a place to start, think about designing your online portfolio or maybe redesigning an app or a website that just isn't working for you right now. I'm excited to see you poster crazy. It's in the project section. Be sure to describe your favorite idea and why you like it the best. We want to know why you think your idea might stick and what you're excited about moving forward with and the next course we're going to start diving into that idea that you thought was the best and taking our wire frames a little more high fidelity. 6. How Do We Wireframe? (3): Hi, everybody. Welcome back to wire framing four user experience design we're into Project part for And we're going to start to refine our wire framing our wire frame. So is released. Time to start wire framing. We're gonna hone in on the project that we're gonna take to our medium fidelity wire frame . After this lesson, you'll be able to start working on version one of your final project. Yeah. Yeah. So before we get into the tips and tricks for pen and paper wire frames, I want you to think about the wire framing process. Remember, In lesson three, we talked about scenarios, personas and happy paths. We want to keep those three things in mind as we're doing version one of our wire frame. We just did a Crazy Eights project. So hopefully when you were doing those crazy eights who kind of thought about your scenario in your persona? Now, take that persona, put them in the scenario you thought of and design your wire frame for that happy pass. So think about it as a process. You want to design screens that allow your person to go from point A to point B in your happy past. So that's going to guide you as you create this version one of your wire frames, Remember we iterating iterating, iterating. So you just did aton of really low fidelity sketches on your crazy eights. You're gonna want to start that process over again as you're doing these wire frames. This is a low fidelity version. So these tips and tricks are really for low fidelity wire frames so they can happen really fast. You could go back and edit them, and you'll probably do 10 it orations of this version one. So that being said, here's some tips and tricks sick in your wire frame sauce. You can use a Finnmark for notes if you want to annotate your wire frames off to the side. But a thick line allows you to abandon details and go for the big picture. Like I said, we're talking about low fidelity. Wire frames were just trying to craft an interaction design. We're just trying to communicate an idea. Keep your lines thick and messy. It's supposed to look like a sketch. Keep it simple in the same vein. So a box sidelines, Uh, maybe a thicker box. Think minimal. That's all you need at this point when you're presenting these wire frames, you don't want people to get caught up on colors that you choose on content choices on spacing. Those are all things that can come later. Right now, you're just trying to get the basic idea for what this thing you're building even does and what problems it solves. Headings and tax and wire frames are just lines and boxes. If you have to show different kinds of texts like you want to differentiate between an H one and H three, maybe use a scribble for an H one and a box for in H two. This is not the time to start plugging content in. Challenge Yourself to leave it out until later. If you need to show a flow, get scrappy. Your flow does not have to be framed by beautiful iPhone cases. Take out the details and use boxes to illustrate how a user moves through the flow. You can even start there. If you're not ready to start wire framing, set out your boxes and understand what needs to happen on each screen for your users. For your Happy path toe work, you can annotate what's gonna happen on each screen if you're not ready to draw yet. After you figure out what needs to happen, you could start to think about what that might look like when you build your wire frame. So those air the tips. Ah, for quick tips for starting tow wire frame. The point now is to just dive in and start creating. So get out your pen paper, your ruler if you want it and start going through your wire frames. Remember to keep your user your scenario and you're happy path in mind and you'll be fine. Start posting these first iterations on the project board. It's great to start sharing now and start interacting with people. Give them feedback. Tell them what you like. Tell them what you think might not work on, and we'll start designing 7. How Do We Wireframe? (4): Hi, everyone. Welcome back to wire framing for user experience design In this lesson, we're going to start to talk about presenting our wire frames. We've done a lot of low fidelity wire frames. Hopefully, they're getting posted up on the wall. Maybe you've even started to get some feedback about the frames that you've drawn. So we talked about low Fi. But here we are going a little more. Hi, fi. This an example of a hi fi sketch wire frame in reality, Ah, hi fi wire frame would be something that's made in photo shop or sketch and then shown to product managers or developers, or possibly redlined toe actually be built for our intensive purposes. Ah, hi fi Wire frame is a pen and paper sketch wire frame that still presentable. So you can do this. You just need a few tools and some patients. I know these photos of wire frames look beautiful, and they look like artists drew them, but it's totally fine if they don't. If you're wire frames, don't look amazing. Like I said, you just need a few tools and some patients. So first of all, you've just spent a lot of time sketching and deciding on the wire frame that is gonna work the best for this part five. So this is something that you're ready to start presenting shopping around your ideas to stakeholders. So because I just said we're shopping her idea around to stakeholders you want your wire frame to show dedication and interaction design work. Remember that this is all about communication. So I don't know about your office, but I don't want to present something that I did on a napkin to my CEO or design director. I also don't want to show a high find mock up, yet we're not at that stage of the process. Like I said before, we really want to think about the way that weaken can communicate R D r. Idea. The best wire frames are used for communicating what the product will dio and how it will solve a problem for our user. I'm not ready to communicate what colors I'm going to use what flat faces. I'm going to choose what the content is going to say. I'm not ready for that, and I don't want my stakeholders to get distracted by those elements when they're not fully fleshed out. So I want to pull things back and focus on communicating what this product does. However, I don't want toe. I don't want to present something that looks like I didn't try or put time and effort in. So that's what we're talking about when we're talking about presenting our wire frames. I had an instructor once who told me that a great wire frame is like a little black dress that hadn't been dressed up yet. So we haven't added heels or the handbag or the makeup or the jewelry, but it still looks classic and clean and ready to go out. So straight lines, proportion and spacing go a long way. You don't again have to draw beautiful images, but space things out in reasonable ways. Think about straight straight lines. Think about gutters on your wire frame, so don't let things bleed to the end of the page. Space things out evenly. Graph Paper is all you need to do this or a ruler. A really simple tool or a handy dandy template. Thes iPhone templates are available online for free all over the place. Just Google free you, I template, and I'm sure you'll find something for the final touch on your paper wire frame shade, baby Shade These air where the co pick pens can come in really handy. If you don't have Kobrick pens, you can use a pencil. You can see that the shading on the top button makes it pop off the page a little bit, and the shading used on that Web browser makes it look a little bit more design. Ary. Now this is the exciting part. We're going to start to gather data just like any good user experience designer. After your wire frame is complete, you have to show it off. That's what designers do. Show it to your friends. Your neighbors are shared on our wall. The really important thing is that once you share it and gather some of that data, you have to take it into account. You can either market up on your wire frame and say What would need to change? Or you could go back and change your wire frame. If a lot of data pointed to the change being necessary, remember that wife rooms of four communicating whether to stakeholders or to users. We must get feedback on her designs in order to reiterate. As I said before, the best UX designers are not the people who come up with the most beautiful idea that the people who stick to the process listen to users and use that data to really influence their design decisions. Jittery and reiterate, you'll never be finished with the design, but that's the most fun and most frustrating part of being a designer. At some point, you're gonna have to shift. But until then, keep making changes based on data. Challenge yourself To make a set of wire frames, gather data from your users, know any important changes and then make them again. Start over with your user data and make your wire frames again. That means going back to the very beginning. Start sketching. Maybe you have to go back to crazy eights and see if you can solve even a different problem . Uh, that's what happens when we make good wire frames. Is we create a way to gather good data and ultimately designed a better product. If you end up doing that, please share it. Show your version one in your version two and share what data used to make those changes. Then share your final project. I can't wait to see what you come up with. Remember, the more iterations you share on the wall, the better. We all want to see the process so we can learn from each other. Share with each other, tell each other what you like. What you don't like. I'm so excited to see what you come up with. And that's the end. Thank you so much for taking my course. I really appreciate it. As I said before comments, questions I'd love to hear from you. Andi. I'd love to see how your wire framing goes.