How Wireframes Are Used4:22 with Hope Armstrong
In this video, we will go over the process of creating a wireframe. The process will differ depending on your team's resources and the project timeline, but here's a best case scenario.
Now you may be wondering, what's the process? 0:00 How does all this come together? 0:04 We'll be getting into the details of how to draw a wireframe later on 0:06 in the course, as you join me in creating wireframes for a mobile ride-sharing app. 0:09 For now, I'll go over the general process. 0:14 The process will differ depending on your team resources and the project timeline. 0:17 But here's a best-case scenario. 0:22 Number 1, review the user research and business goals. 0:25 First, consult any research that may be available to you. 0:29 In a previous course, you may have learned that designing a successful user 0:33 experience requires understanding your users and the business goals. 0:36 So as you set off to wireframe, refer to any available research as you sketch. 0:42 Two, iterate on low-fidelity wireframes. 0:48 Keep iterating until you can't come up with any more ideas. 0:52 Three, get internal feedback. 0:56 Share the wireframes with your team and stakeholders to get their feedback. 0:58 Four, Iterate on low-fidelity wireframes again. 1:02 Often the feedback will inspire you to come up with even more ideas, so 1:07 you'll want to do another round of iterations. 1:11 Keep repeating until you feel like you've solved any foreseen pain 1:14 points in the user experience, and you've gotten stakeholder approval. 1:17 Five, polish the selected low-fidelity wireframe into a high-fidelity wireframe. 1:22 Use actual copy, real images and begin to add visual polish, 1:28 such as rounded corners, gradients, fonts, etc. 1:33 It's okay if you still have placeholders for illustrations or 1:38 other assets that haven't been created yet. 1:41 Six, get internal feedback again. 1:43 Do another round of review at this stage, 1:48 as there will likely be changes needed now that actual content is in place. 1:50 For instance, perhaps the text is too long in a paragraph, so 1:54 the copywriter wants to shorten it so it doesn't feel overwhelming. 1:57 Seven, get user feedback. 2:01 Once you have approval on the last batch of wireframes, 2:05 you may decide you'd like to get feedback from your product's customers or 2:08 prospective customers who fit your target audience. 2:12 User testing is an entire topic that we get into in other courses, 2:16 so I just want to touch on it here. 2:21 It's important to know you can test your design on actual users early, 2:23 instead of waiting for the design to be implemented in code. 2:28 It's preferable to meet with the user in-person, but 2:31 you can conduct the user test remotely via video call as well. 2:35 Framing is important here. 2:39 Tell the person you'll be showing them an early exploration of an experience. 2:41 So they should disregard the visual design. 2:45 Ask for feedback on their expectations of what they can do with the website or app. 2:49 And have them talk through how they interpret the content and 2:54 how they might navigate the screens. 2:57 This is valuable information to get early on 3:00 to work out any pain points you may have missed in the exploration phase. 3:03 Often, the outside perspective from the user will be just what 3:07 you need to improve the usability of the design. 3:11 Eight, continue along in the design process. 3:15 The next step is up to you. 3:18 If your wireframes were validated in the user testing and 3:21 your team wants to move forward with implementation, 3:24 create a mockup and start implementing it with code. 3:27 You may decide you need to go a whole different direction and 3:31 need to start over on a new set of wireframes. 3:34 That's totally okay! 3:37 And it's so awesome that you figure that out now 3:38 versus having to pivot after investing a lot of time on an ill-fated idea. 3:42 Now that you know the process, you understand what wireframes are. 3:48 And you know why they are an important part of the design process. 3:52 Let's start creating. 3:55 In the next phase, we'll get into the practical application of these concepts. 3:57 And you'll watch as I create wireframes using a few different tools. 4:01 Then you'll have the opportunity to explore those tools yourself. 4:06 I'll explain the process as I go, and I'll also show you some handy tips and 4:10 tools I use to make the process easier. 4:14 Rest assured, 4:17 you don't have to be a skilled technical drawer to create wireframes. 4:18
You need to sign up for Treehouse in order to download course files.Sign up