The Purpose of Mockups3:06 with Hope Armstrong
In this video, you'll learn about the benefits of creating mockups and understand how they're used in the design process.
The purpose of mockups is to visualize your idea for an app or a website. 0:00 Benefits of creating mockups include exploring, experimenting, and 0:05 ideating on the visual design. 0:10 Representing a vision to stakeholders and 0:12 teammates to clarify requirements and gain approval for a chosen direction. 0:15 Communicating with developers. 0:20 Performing user testing. 0:22 First, mockups enable designers to explore and 0:25 iterate upon different visual design treatments. 0:28 It allows you to apply the visual design and branding so 0:31 you can approximate how the experience will look and feel. 0:35 Create a mockup of each screen in a flow to fully depict the vision. 0:39 Be sure to mockup your iterations to share with your team for feedback. 0:44 Second, mockups are a key component to getting stakeholder approval. 0:49 They visualize the experience in a way that everyone can see the vision. 0:54 This sparks a conversation about the requirements and scope. 0:58 Once they agree on the direction of the wireframing stage, 1:03 the mockup further solidifies the design and stakeholders can more fully envision 1:06 the final product along with reviewing the visual design direction. 1:11 I've found that mockups elicit a stronger response than wireframes. 1:16 They're visually more compelling, and 1:20 help everyone get on the same page about how an experience will look. 1:23 Third, mockups help communicate the product vision with developers. 1:27 Designers use mockups to create a dialogue with developers in terms of 1:32 what needs to be coded. 1:37 Likewise, developers may have additional solutions or 1:38 constraints you hadn't considered. 1:42 Think through the different permutations of a UI with dynamic data and 1:44 differences based on user rules and conditions. 1:49 For any interactive elements, use mockups as a conversation aid and 1:52 create a prototype later to clarify animations and interactions. 1:57 Talking about the design complexity upfront helps align everyone 2:03 with the scoping and timing of work. 2:07 It also gives developers a head start on any back 2:10 end work they can do while you're polishing up the final design details. 2:13 They can work on building out the known knowns that are definitely a part of 2:18 the approved design. 2:23 Fourth, mockups are also useful in user testing. 2:24 Just like wireframes, mockups enable designers to visualize an idea and 2:28 get it in front of prospective or current users for feedback. 2:33 Compared to wireframes, testing with mockups has the additional benefit 2:37 of getting feedback on the visual design and branding. 2:42 While wireframe testing validates the layout, flow and 2:46 general idea, mockups enable more feedback on the visual treatment. 2:50 Testing a mockup validates or invalidates an idea before developing it with code. 2:55 In the next video, I'll show you how to prepare to make mockups. 3:02
You need to sign up for Treehouse in order to download course files.Sign up