Introduction to Mockups4:04 with Hope Armstrong
In this workshop, you'll be introduced to mockups. After looking at examples of mockups, you'll see where they fit into the design process.
[MUSIC] 0:00 Hi, I'm Hope. 0:04 I'm a Product Designer at Treehouse. 0:06 Do you have an idea for an app, 0:09 but you're unsure how to create a design that looks functional? 0:11 As designers, we imagine all kinds of experiences we want to see in the world. 0:14 But how do you take an idea in your head and turn it into a reality? 0:19 Perhaps you have a wireframe that hints at the vision. 0:24 But how can you design it to resemble the finished product without writing any code? 0:27 You can do that with mockups. 0:33 Designers create mockups to visually represent an experience in a website 0:35 or app. 0:40 Mockups include color, typography, icons, imagery and actual copy. 0:41 The goal is to get it to look as closely as possible to how it will look 0:48 once it's a fully functional product. 0:53 Let's look at some examples. 0:56 Here's a mockup of a marketing landing page. 0:58 Here's a mockup of a web app. 1:07 Here's a mockup of an email. 1:15 To further define a mockup, let's explore what it isn't. 1:20 Consider how a mockup compares to a wireframe. 1:24 A mockup is higher fidelity than a wireframe. 1:27 A wireframe is a drawing that's fast to execute, and 1:30 aids in figuring out the layout, content and flow of an experience. 1:33 Then it becomes a mockup as the visual design and content get flushed out. 1:39 Now, let's compare a mockup to a prototype. 1:45 Prototypes are interactive, while mockups are static. 1:49 Although static, a mockup hints at interactivity as it presents how 1:53 the screen will look and how it will function. 1:57 And seeing multiple mockups together visualizes a flow, 2:00 almost as if you're looking at frames in an animation. 2:04 As a final note in this workshop, we'll be talking about creating mockups for 2:08 screen designs. 2:12 We won't be covering another type of mockup you may have heard of. 2:14 We just want the screen design as presented on the device. 2:18 Now you may be wondering, where do mockups fit into the design process? 2:22 As previously mentioned, mockups are created after wireframes. 2:28 And after mockups are created, prototyping normally follows. 2:32 It's worth noting that designers have different workflows. 2:37 One workflow is to create wireframes and go straight into prototyping for 2:41 quickly validating an idea for user testing. 2:45 That works if you want feedback on the general idea, flow, or content. 2:48 But if you want feedback on the overall experience or the visual style, 2:53 you want to create mockups. 2:58 So a common workflow in this scenario is to prototype a wireframe. 3:01 And once the solution is well received, create mockups and 3:05 put it through another round of user testing. 3:09 Another workflow is used by designers who code. 3:12 They may skip creating mockups and instead implement it in code. 3:15 This is fine if that's what you're comfortable doing. 3:20 However, be careful that your technical skills do not limit your creativity. 3:23 An advantage of designing in a design program is that you aren't bogged down by 3:29 the challenge of implementation. 3:33 You can simply dream up your best ideas and face implementation later. 3:35 The workflow you choose really depends on a number of factors, 3:41 including the timeline, the problem you're trying to solve, and your skillset. 3:45 You'll find that mockups have wondrous benefits. 3:50 So, the point is to understand the value of them as a tool in your 3:53 design process and utilize it accordingly. 3:58 Up next, we'll explore how mockups are used. 4:01
You need to sign up for Treehouse in order to download course files.Sign up