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
Setting Wireframing Expectations
We're gonna talk about setting expectations. And this is a great tool for a designer, for a human. I'm sure it happens to you guys all the time where, "I thought you were gonna do the dishes." "No, you said you were gonna do the dishes." And there's miscommunication that's easily avoided. This happens all the time with design. It happens on a couple of different levels. One, just basic product management. And then two, different people's understandings of what design is and what it looks like. So with that, you want to know your design and your development capabilities almost before you start the project. Maybe right at the beginning, if not. So that's, what can you do? Maybe you're a new designer. Maybe you've never done mobile before. You're only comfortable in websites, that's fine. You don't wanna do apps, you just wanna do web, but you're fine doing responsive. You wanna challenge yourself. All of those things are great to think about because you wanna know when you're talking to ...
your client what you're capable of doing, so that when you're... When they come to you with a grand idea, you can say, "That is an awesome idea. That's not something that we can accomplish right now. Let's figure out how we can do it within our scope." And so then, that applies to development as well. If you're using a Squarespace site, or some other way to build your websites, it might be really easy, but those might have limitations on them. Or you might be working with a developer and you wanna know what their sort of repertoire is and what they're gonna be able to do. And then you wanna keep everyone in the loop, especially your developers, as this moves forward. So start the conversation here, obviously. I'm sure for anyone who's ever done any kind of project, you know it doesn't always end up exactly how you plan it in the beginning. So keeping that open line of communication is gonna be super important. That being said, you also wanna talk to all of your stakeholders. You also wanna know who all of your stakeholders are. So who's on the project? The client you're working with, maybe you have a point person, but maybe there's a CEO or someone else who's really involved whose opinion really matters. And trying to understand who all of those people are and what their objectives and goals are for this project. With all of those people, there's gonna be lots of different requirements. And some of them are going to be outright discussed, and some of them are going to be more implied. This is something that, it's a soft skill. It's a little bit more of a gray area. But as you're talking to your stakeholders and as you're figuring out what the project is, they might be very upfront about things that they need or want, but you also need to be listening as a designer to sort of what's in between the lines of if they're talking about, what's a good example? Something they need from their users or they want more signups on their website. And they say, "We need more signups. We have to have a roadblock ad. So we have to have something that, as soon as they go to the website, it stops them and makes them sign up to that form." Now as a designer, you're hearing that and you're saying, okay, so you need more signups. That's the explicit part. But you think you need this roadblock ad. But as a user, those are really annoying. Those are like, you're trying to do X as a user and this thing is stopping you from getting there. So what you wanna do with that is hear what your client wants and then also think about the right way to get to that. So a lot of times, you're gonna be given solutions. But as the designer, you need to make sure that you're still taking those as one option and then working through multiple to see if there's other ways to solve for that. And so then, with all of those things, the requirements, the stakeholders, and the capabilities, you should now understand the parameters of your project. Again, this is great to document. This is great to share out to all of those people. It's gonna depend on every project how vocal you're gonna be or how formal you need to be. But definitely for yourself, these are great things that are actually going to help you while you're wireframing and prototyping to come back to and understand.
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