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
What is Wireframing?
So what is wire framing? Um, I don't know what you guys first think of when you hear wire frame, but to me I picture an actual structure made of wire. Maybe you're thinking of a sculpture that they start that way. So you're building this foundation on the inside, the skeleton of your content. Wire framing is also a tool to understand functionality. So I've touched on this already. What we're really focused on is when you come to website, there's lots of different things that are on every website that you're going to recognize. There's the logo, the navigation, there's maybe drop downs and different content blocks. Um, And when you're doing wire Fring, what you're thinking about is what content do you have? What are you trying to solve for? And just blocking out those different things so that you can understand the best way to build your site? Um, And so with that, wire framing is basic shapes and text. We're not using a lot of color. It's pretty much all black and white and gray. Um, w...
e're not worried about typefaces or really the sizing of things we're gonna when we get into sketch, we're going to see that there's some of that. Uh, you want to use your wire frame shapes to indicate different things, so maybe you're using rounded corners on your buttons, and that's going to indicate what a button is every time you see it, and you using square edges for your input fields or your drop downs. But we're really, really not going to be worried about what the visual design looks like right now. So why are framing is not visual design? Are framing is also not coded. We're not gonna dio anything fancy here other than, um, basically pen on paper. You could technically do your wire frames on pen and paper when I started designing, So I have a B F A graphic design. Not once in my college education did we learn Meyer framing It is all stuff that I learned on the job and I didn't know where framing Waas. I didn't know what fidelity it should be at. I didn't really know what the word fidelity event, but really what it is. So fidelity is the sort of level of execution low fidelity is gonna be a pencil sketch on paper. High fidelity is gonna be a super polished readyto launch visual mock, Um, and so where framing is definitely towards the lower end, a little bit higher pencil on paper, you want to make sure that it's easy for someone to understand. Clear. You know, not all of our hen rating as a eligible Uh, so that's why we bring it into sketch. But it's really just a simple, simple tool. It's not the final product. So with all of that, with being sort of lower fidelity, it's not gonna be the final thing that gets coated. And that's an important thing to discuss with your clients. Sometimes it's hard for non designers or not necessarily creative thinkers to be able to see something in black and white and envision how it's gonna look when it's totally finished. So over communicating that to the people that you're working with so that we're on the same page about what it is that we're looking at is gonna be really important. So this is a really simple example of one one, uh, screen of a mobile app. We're gonna actually look at this when we talk about prototyping, but it just wanted to show you guys. So this is a wire frame and how it can change when it goes into visual design. So we have our basic elements here. The header bar at your of the app with the hamburger menu, some content bear and a button. And when we actually style this, it could look like this. You can see our totals, guy and bigger. That looks a little different. Our buttons move down to the bottom, but it's still following that convention that we learned in the wire frame about the content we need and generally hounds going to work. Um, and the nickel looked like this, uh, or completely differently, and still follow the same wire frame. So it's just a great way to really understand what your product is before you're getting into the visual design.
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.