Dec 16, 2021
Fake It Before You Make It — How To Prototype Like A Boss
Prototypes help UI/UX designers and app developers in a variety of ways, read this article to find out how.
Introduction
Design terminology and developer lingo can be confusing, especially when you’re first starting, but don’t let that discourage you! I hope that, in writing this article, I’m able to share useful tips to help any individual who, like myself, is on a journey to becoming a world-class iOS app developer. In this article, I will share the differences between wireframes and prototypes, why each is important, how to effectively manage the design process, and finally, how to use different tools to create and present your mockups and prototypes. So whether you’re looking to build prototypes for your ideas, or you’re looking to build prototypes for clients, this article is being written for you.
Wireframes vs. Prototypes
Let’s begin by defining a couple of key terms. First, wireframes are low-fidelity, basic layout and structural guidelines for your app. It’s a simple and easy way to take ideas and put them down on paper. Prototypes are the next evolution of your wireframes. Prototypes take your ideas a step further by adding more visual details and interactions to better represent how you want your app to look and function. For me, it’s helpful to think of wireframes as the skeleton of the project I’m working on whereas the prototype is what I end up with when I start adding meat onto the bones.
Why it’s important to invest the time
You might think wireframes are less important than prototypes. You might think you can save yourself a lot of time and effort by jumping straight into developing your prototype. You might think wireframes are an inherent part of prototypes so you could just focus on developing a solid prototype and in doing so, you’ll tackle your wireframes in one fail swoop. I know these are some of the ways I thought about it in the early days of doing this work. And while in some ways these thoughts might be technically right, in reality, they’re simply wrong. You don’t save any time, effort, money, or energy by trying to skip steps in the process. It’s been my experience that when you try to skip the process of developing really good wireframes that you’re proud of and happy with to jump straight into developing prototypes, you’re almost guaranteed to end up investing much more time than you would have otherwise. That’s because when you’re developing your wireframe your intention or your focus is different from when you’re developing your prototype.
When you’re developing a wireframe your sole focus is on the core layout and functionality of your app. This is true for both designers and developers. From the designer’s perspective, wireframes are used to understand the core UI/UX of the app. Wireframes display all the screens within an app’s system and should help to show the navigation flow between screens. Keeping in mind, they’re a skeletal representation of your app’s design, a foundation, and should not include any of the finer details of the UI/UX. It’s important to get feedback from prospective users at this stage in development. For developers, wireframes are used to better understand the core functionality of the app they’re building. It’s helpful to know all of the desired functionality before writing a single line of code because it gives developers a bird’s eye view of the project which can help to write cleaner and more efficient code. Simply put, wireframes give both designers and developers a better perspective which usually leads to an overall better product.
The ideal process to building a prototype (at least for me)
Step 1: Imagine the end product
Personally, I like to start new projects by visualizing my end goal. For an app, it’s starting with ideas of how I want it to look and function and how the app will help people. I like to do this for two main reasons: 1) it’s inspiring and it makes me excited to get to work, and 2) because the process of making an app isn’t always straightforward so it’s good for me to have a pretty clear idea of where I want to end up before getting started. It’s not to say the end product has to look exactly like how I envisioned it. It’s just good to have something to aim for while embracing the fluidity of the process.
Step 2: Prepare all the tools and resources needed
I like to make sure I have everything I need to finish a project before I start. I would hate to get stuck in the middle of a project just because I don’t have something I need to be able to continue. It’s like a contractor building a house, you bring the tools you need to get the job done. There’s no time to waste and there’s usually at least a couple of points where you can expect to get stuck when working on anything ‘big’ so it’s better to not add to that by being underprepared.
Step 3: Sketch out a few mockups and create a wireframe
With all of your tools and resources in place, you’re ready to start creating! It’s helpful to start by sketching out a few of the main screens of the app, then making a simple flowchart to map out the rest. The flowchart helps to provide that bird’s eye view of the entire app, then you can more easily see how to sketch out each screen.
Step 4: Collect feedback from prospective users, experienced developers, and designers
Laying out a bunch of sketches in front of key people whose opinions matter to you is great at this stage. Hand-drawn sketches are super easy to make and to edit plus they make it a lot easier for people to give you their truest and most honest feedback which can lead to some really valuable insights and new ideas. If you put super high-quality mockups in front of people, a lot of times they’ll hold back or sugarcoat their criticisms. Especially if they’re people with whom you have preexisting relationships. This isn’t usually helpful if you’re on a mission to create an app that people love to use. Prospective users, developers, and designers can all offer great feedback based on their experiences and backgrounds.
Step 5: Develop a prototype
With your vision or your end goal in mind, all of your sketches, and all of your notes from all of your rounds of feedback, you are now fully ready to develop a high fidelity prototype! Using a tool like Sketch, Photoshop, or something of the like, you can start building a prototype with confidence. You can be incredibly creative and precise in your designs while using these sorts of tools but I would recommend doing your best to try not to get lost in the weeds. Try to keep in mind that static images and placeholder text will look a lot different when a developer builds the working app
Step 6: Test the prototype and collect feedback
Returning to the same group of prospective users, designers, and developers to get another round of feedback is ideal. It’s also good to get new and fresh perspectives from people with whom you haven’t interacted before. Returning to the group that gave you feedback on your wireframes can surface new ideas and the same is true for an entirely new group of people. The point of all of it is to learn as much as possible before starting the process of coding the actual app.
Step 7: Begin development
With your prototype and all of your feedback you are now in a great position to start coding which is an entirely new and different beast. However, if you take your time and work through the first six steps with a lot of intention and care, the coding process will be a lot smoother and less stressful.
Prototyping with Sketch
Sketch is a tool designed to help people create wireframes and prototypes. It’s quickly becoming a popular alternative to Photoshop because it is incredibly easy to use and navigate. As a newcomer to Sketch, I can speak to one of its greatest benefits, its simplicity. After just a few short weeks of using this tool, I can already tell why so many designers enjoy using it. The only downside is that it’s only available for Mac users and there are reports of bugs and glitches, though I haven’t experienced any bugs or unexpected crashes personally.
Presenting your prototype with Keynote
Once you have created a working (high fidelity) prototype, you’ll be in a great position to start sharing your app idea with a variety of people. Stakeholders, potential angel investors or VCs, potential cofounders, etc. Using a program like Keynote is a great way to share your idea with your target audience. You can use Keynote to create visual aids as you describe different features or components of your app idea, then use your prototype to offer a live demonstration. In my experience, it’s usually a good idea to use the Keynote slides to help tell a story. It can be a story about how your prospective users will benefit from your app idea, your process of designing and developing your prototype, or a combination of the two. Either way, you want the story to lead up to the reveal at the end which is your prototype/demonstration.
Conclusion
Prototyping is a great process that allows prospective users to “play” with your app ideas and concepts and provide you with valuable feedback before you begin development. This can save you a lot of time, money, and energy. Not only is it a great idea to invest time and effort into prototyping, but there’s also a long list of web tools, mobile apps, books, and other resources that make the process easier.
