Introduction to Wireframing
Lesson 1 from: Wireframing & Prototyping Your Digital DesignsAlexandra Moran
Introduction to Wireframing
Lesson 1 from: Wireframing & Prototyping Your Digital DesignsAlexandra Moran
Lessons
Introduction to Wireframing
06:42 2What is Wireframing?
04:21 3Setting Wireframing Expectations
04:48 4Defining The Problem To Solve
05:08 5Sketching and Refining the Idea
33:14 6Overview of Sketch Software
09:13 7Create a Wireframe in Sketch
17:31 8Effectively Presenting Your Work
02:12Lesson Info
Introduction to Wireframing
Thank you. Welcome, guys. I am very excited to get started. We're going to talk about today is wire framing and prototyping. If you don't know what either of those words mean, that is completely fine. By the end of this class, you will, and you will be well on your way to making those things in your design. Like, um, so a couple problems you might be feeling right now as a designer, or maybe a small business owner trying to make your own website. So you're under how to convert your ideas into your cider at you might know you need a website, Teoh, Elsie, sell your product or get people informed on what type of work that you dio. But you don't know how to actually take those ideas into the process of making a website. He may be too focused on what the visual pieces without thinking enough about how your site functions. So the most important thing about an app or a website is making sure that your goals are achieved and that your users are able to do what they want to dio quickly and easi...
ly. A lot of people say design is invisible and it's not. You could definitely see things that are well designed, but the rial part of the design is at the core. It's how things function and how they work. And that's the part that we want to be invisible. We want your user to see Oh, I want to buy a cookie and it's so easy for them to buy a cookie. So you might also be unsure how to get buying from your stakeholders. You have a great idea. You love your design, but you don't know how to sell. It had talk about the design so that maybe your co founders or the client that you have can see your vision. Sometimes it's very difficult for designers to talk through design work with non designers so that they can see what you're saying. Your napkin sketches very obvious studio, but not very obvious to them. Um, and then also, you might be unsure of your concepts. Gonna work in real life. That's where prototyping really kicks in. We're going to see how practicing was sort of a fake, lightweight version of your idea is gonna prove to you that it's a good idea or it's gonna show you where it needs to be improved and work done. So by the end of this glass, there's a couple of things that you are going to be able to dio that are gonna be so helpful for you as a designer, you're gonna know the steps to get that idea out of your heading into the real world. You're gonna know how to sell for your needs and your users needs without getting bogged down by the style. So that's a really easy pitfall. To get lost in is Well, I like blue or I like this visual, Styler. I want it to look like Twitter. I wanted to look like this other app, Um, and not focusing enough on how it actually works. You're gonna be able to confidently discuss your thought making process and sell your concept. Teoh. Any stakeholder in your project your developer, your client, your co founders and other workers. Um, all of it's gonna be really easy to take your design thinking with these tools, your wire frame in your prototype and sell that idea. And then again, with the prototype, you're going to be testing that concept and prove that it's gonna work before you waste any time or money on paying and developer to actually make it. You think your idea is great? You spend all this money and time on development. You have your launch day and then you realize, Oh, no, we totally messed this piece. We have the shopping cart set up, but we don't have a way to do payments. With your prototype, you're gonna see all of those holes and bugs, and you're gonna be able to fill them before you actually do the development on then. Another thing I want to tell you guys is that anyone can be a designer. And designers really cringe when you say that. And I used to be that type of designer as well. And it's because I think designers feel like when they hear that it invalidates the work that we're doing and you feel like it's, uh it's not easy because it's not really or its light waiter. It's creative, and you make things pretty. It's easy because if you follow the processes and you use these tools, anyone can learn to be a designer on. So that's what I'm gonna try and help you guys get through today, we're gonna teach you the design thinking and the, uh, important core underneath all that visual stuff that makes design, uh, good and easy. So again, who is this class for? If you are a beginning designer, if you're a small business owner and you need a website, maybe you're an engineer and you want to understand the other side of building these products and And what? The design pieces. Or if you're an artist or other type of designer and you're moving into a U X or Web design, this is gonna hopefully help you, uh, figure out some good tools that will set you up, right? So I am proud of designer. I went to school for design on going to show you some of my work here. I've done some Brendan work in some Web and mobile design. I learned a lot when I was in school, but I learned even more on the job. I'm currently a product designer and a company here in San Francisco, a startup called Lending Home. Previously, I worked at a couple other start ups. I've worked at an agency here in services goes well, and I previously worked for eBay and PayPal. So I have done a lots of different types of design and learned a lot of things along the way. Uh, some things I've learned about myself is that one. I am very lazy, and that is an excellent asset to have as a designer. Uh, you're looking for shortcuts. You want to get too good design faster. And wire, Family and part of typing are great ways to do that. They make your job at the end. The fun part of doing the visual piece a lot easier because you've done a lot of the thinking up front. Um and then I'm empathetic. And that's a really important thing that I encourage all of you to be. Toe always be thinking about your user. Always think about how they're gonna be using this, uh, look, capabilities they have What devices? There on all that stuff. That's what's going to make it really, really good for them later on is if you're always thinking in their shoes. So here's kind of the layout of the first chunk of stuff that we're gonna dio we're gonna talk about specifically what is why you're framing? We're gonna set expectations for our stakeholders and for ourselves. We're going to define the problem that we're solving, that we're gonna sketch those ideas and refined them, and we're going to review critically. So we're gonna look at everything that we've done. We're gonna look at it through the eyes of that problem we defined in making sure that we have solved it, and we sold it in the best way.
Class Materials
Bonus Materials with Purchase
Ratings and Reviews
Ilana Ziff
This is a great class for true beginners. It covers the basics of wireframing and prototyping in an effective and succinct way. The instructor also shares some cool Sketch shortcuts! If you already know the fundamentals of wireframing and prototyping then this class may not be for you, although it does serve as a great reinforcement of prior knowledge.
Qiqi Xu
Alex is very clear and personable as an instructor. I really like the examples she provided in the class, as I personally learn well when content is explained with example (also true according to research on the science of learning). I thought the exercise could use more context. Overall, good start for UX beginners!
Yana Kornienko
The class was a great overview on wire framing and prototyping for beginners. Alexandra explained every step of the process really well. It is definitely a fun process.