FREELessons: 19Length: 2.2 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

1.4 Mock-Up Options

There are several ways to mock up a prototype, ranging from creating simple wireframes through to high-fidelity images in Adobe Photoshop, and HTML pages that lack interactive features. Discover the pros and cons to each of these approaches in this lesson, and learn about the approach we're going to take for the rest of the course.

1.4 Mock-Up Options

Hi, everyone. Welcome back. In this lesson, before we get going in our actual mockup in Photoshop, I want to explain to you the three key mockup options that you have and which one we're gonna go with moving forward in this course. Now when you're looking at mockup options, there's really no one that's better than the other. It just really depends on what's working for your situation, what your client might be expecting, what's gonna help you really facilitate the best user input possible to save you time in the grand scheme of things. So that when you're working on your prototype and you're moving into production and development, you don't have to go back and forth. Let's look at what these are. The first item for your mockup option is just the sketch. This is literally what it says it is, it is a sketch that you are drawing out, probably on a piece paper. You can also sketch this up digitally, nowadays with technology but really we're just talking about a basic sketch where you have drawn out what your mockup looks like. You have maybe written some notes and content things that you want to keep aware of but it's really just a simple sketch. Now this is really handy when you're just starting out with your prototype and nobody may see this, this may just be for you but it really helps you solidify your ideas. Get them down on paper before you even go to your computer and really get a clear idea right away what's going on with this prototype. You can mockup the actual prototype where you wanna put your elements and you can also leave notes to yourself. You may also get as far as sort of mocking up what your interaction's gonna be. If you click this button, what happens? So this is all just the preliminary stages for your mockup that you can do. Now, in some cases, you don't go beyond the sketch but a lot of cases, you will go beyond the sketch to the next mockup option and this is the wireframe. This is a little classier version of your sketch, meaning that more than likely you're using some sort of software that's going to allow you to wireframe out the core features of your site. Wireframes are rarely image heavy. They're what they sound like, they're just the wireframe mockup of your site. Just the box containers, the header containers, maybe a little bit of text to illustrate where things are gonna go but that's about it. You're not talking about a lot of color here, you're not talking about a lot of images and graphics here. Strictly a nicer version of your sketch that's a little bit more client friendly than something you might sketch on a piece of paper. Finally, you have the high fidelity mockup. This is where you literally are mocking up what could be a real functioning site. The only difference is is that you don't have any of the actual functionality plugged in, so it's just image-wise, it's just an image but it looks a lot like how your site would look if it was functioning. So there's a lot more attention to color, a lot more attention to images and graphics. Again, it's almost like a screen capture of the finished site but it's an image. Maybe a layered image that you create in Photoshop but it's still an image and it lacks any sort of coding in HTML and PHP that makes that website function. So that is a high-fidelity mockup and that is actually what we are creating in this course. We are going so far as to create the high-fidelity mockup. Now one thing that you're gonna notice is that we don't start with a sketch in a wireframe, we dive right in. Several reasons we do this. We have a pretty clear idea from our project brief what it is that we need to do, so we can avoid the first steps of sketching and wireframing. If you prefer to sketch it out, by all means sketch out your projects first. This is just personal preference really but we're gonna dive right in to the high-fidelity mockup because we already have our components in place and so we're just gonna get right on into Photoshop and start up. Now, is there one that's better than the other? Not really. Again, it really depends on your situation. If you need to mockup your user interface so that you're actually interacting with this and you have a client who is not as savvy with wireframes and sketches, you might need to go the full on high fidelity mockup. That's going to be a lot more user friendly on their part because it's going to look and feel very much like a webpage would and they're gonna be a lot more comfortable with that. If you're just working amongst your team and your developers, you might be able to just stay in a wireframe stage, and go back and forth that way. You can still use any of these throughout this course, and throughout InVision to make sure you're getting what you want out of it. You can mock up wireframes in InVision, and mimic interactivity that way. You can even scan in a sketch and do something with just plain sketches. The high fidelity is going to give you the most options because it's gonna look and feel the most like a website. You can just pick what works for you knowing we are gonna go ahead with a high fidelity mockup, so you can see exactly what happens when you're taking something very close to a website and using InVision to create user interactions within your prototype. So now it's time to open up Photoshop and get started with our first lesson in our mockup, which is to create the background element of our prototype.

Back to the top