Lessons
Introduction to Wireframing
06:41 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. What we're gonna talk about today is wireframing and prototyping. If you don't know what either of those words means that is completely fine, by the end of this class you will, and you'll be well on your way to making those things in your design work. 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. You're unsure how to convert your ideas into your site or app, you might know you need a website to sell your product or get people informed on what type of work that you do, but you don't know how to actually take those ideas into the process of making a website. You might be too focused on what the visual piece is without thinking enough about how your site functions. So the most important thing about an app or website is making sure that your goals are achieved and that your users are able to do what they want to do quickly and easily. A lot of peop...
le say design is invisible and it's not, you can definitely see things that are well designed, but the real 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 buy-in from your stakeholders. You have a great idea, you love your design, but you don't know how to sell it, how to 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 seeing. You're napkin sketch is very obvious to you, but not very obvious to them. And then also, you might be unsure if your concept's gonna work in real life. That's where prototyping really kicks in. We're gonna see how practicing with sort of a fake, light-weight 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 worked on. So by the end of this class there's a couple of things that you are gonna be able to do that are gonna be so helpful for you as a designer. You're gonna know the steps to get that idea out of your head and into the real world. You're gonna know how to solve 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 style, or I want it to look like Twitter, I want it to look like this other app, and not focusing enough on how it actually works. You're gonna be able to confidently discuss your thought making process and sell your concepts to any stakeholder in your project, your developer, your client, your co-founders and other workers. All of it's gonna be really easy to take your design thinking with these tools, your wireframe and your prototype, and sell that idea. And then again, with the prototype you're gonna be testing that concept and prove that it's gonna work before you waste any time or money on paying a developer to actually make it. You think your idea's great, you spend all this money and time on development, you have your launch day, and then you realize, "Oh no, we totally missed 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 those holes and bugs, and you're gonna be able to fill them before you actually do the development. And 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 ... It's not easy because it's not real, or it's light-weight, or 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. And so that's why I'm gonna try and help you guys get through today. We're gonna teach you the design thinking and the important core underneath all that visual stuff that makes design 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 what the design piece is, or if you're an artist or other type of designer and you're moving into UX or web design, this is gonna hopefully help you figure out some good tools that will set you up right. So I am a product designer, I went to school for design, and I'm gonna show you some of my work here. I have done some branding work and 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 at a company here in San Francisco, a startup called LendingHome. Previously, I worked at a couple other startups. I've worked at an agency here in San Francisco as well, and I previously worked for eBay and PayPal. So I have done lots of different types of design and learned a lot of things along the way. 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. You're looking for shortcuts. You want to get to good design faster. And wireframing and prototyping 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 upfront. And then I'm empathetic, and that's a really important thing that I encourage all of you to be. To always be thinking about your user, always think about how they're gonna be using this, what capabilities they have, what devices they're on, all that stuff. That's what's gonna 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 do. We're gonna talk about specifically what is wireframing. We're gonna set expectations for our stakeholders and for ourselves. We're going to define the problem that we're solving. Then we're gonna sketch those ideas, and refine them. And we're gonna review critically, so we're gonna look at everything that we've done, and we're gonna look at it through the eyes of that problem we defined, and making sure that we have solved it, and we've solved it in the best way.
Ratings and Reviews
China Rose
Alexandra shares useful specific ideas to build confidence in website planning and shares her clever techniques for wire framing.
Lisa Brink
Great information. Would have been nice if she had a large pad or dry erase boards for the sketching so both online and people in the room could see better - as opposed to the 8.5 x 11 laying on the desk.
Student Work
Related Classes
Web Design