- Home
- Blog
- Web Design Why Prototyping is Essential to Your Design Process
Why Prototyping is Essential to Your Design Process
- 9 min. read
-
Trevin ShireyVP of Marketing
- Trevin serves as the VP of Marketing at WebFX. He has worked on over 450 marketing campaigns and has been building websites for over 25 years. His work has been featured by Search Engine Land, USA Today, Fast Company and Inc.
This post was brought to you with help by Proto.io
Proto.io is a silly-fast way to create fully interactive mobile app prototypes. Its users can create high-fidelity mobile prototypes that look and work as a real app should, within minutes. Sign up and use Proto.io for free!
Find Design Issues Early
Things we conceptualize in our heads that seem awesome regularly turn out to be terrible ideas when we put them in a more concrete, visual medium such as a piece of paper or a computer screen.
Imagine this situation: You’re designing a web form.
You’ve been given the input fields that need to be included. You visualize the design in your head. And then, you decide to sketch it out in your notebook.
Within minutes, you’ll be able to spot issues with your initial design concept.
Maybe you can do away with some parts of the design. Perhaps you realize that you should adjust the layout of some input fields to create a better user flow. Maybe having error validation messages at the top of input fields can make them easier to see.
A simple prototype can instantly reveal flaws in our design concepts.
This, then, allow us to resolve these issues before we make more significant production commitments (such as creating a high-fidelity mockup or coding the design).
Iterate More Quickly on a Design Concept
Creating prototypes allows you to improve a design concept quickly. You can iteratively revise and refine your idea in a matter of minutes.
Let’s look back at my previous example. I found some design issues with my concept.
I can now visually validate if my solutions to those issues are better (or worse) than my preliminary ideas simply by moving things around and tweaking some things. And, if not, then I can continue to sketch out another version.
Compare Design Variations Quickly
User interface (UI) design is fundamentally about creating the most optimal way for a user to achieve their tasks. In most cases, to determine the best solution, you’ll have to come up with various ideas.
Comparing several designs with each other is made easier through prototyping.
What’s a better solution: a tabbed navigation menu or a list of links arranged vertically?
The only definite answer to that question is: It depends.
It depends on the information architecture of your content. It depends on what goals and primary tasks your users will have when interfacing with your UI.
It depends on the quantity of the links. It depends on the wording of your links.
One way to compare several ideas easily is by prototyping them.
Here’s an example of how you can quickly compare and contrast a web page’s layout with each other (I made these using Gliffy):
Gather Design Feedback Better
By simply describing your user interface ideas, it may be hard for others to grasp what you’re trying to achieve. This can result in poor feedback due to misinterpretation.
However, with a prototype, people can quickly and conveniently see your idea, giving you a much better probability that they’ll respond more effectively.
If you work with developers and engineers, they can tell you if they spot any issues with the prototype from their standpoint, and they might even be able to offer alternative solutions based on their experience.
Prototypes can be a Presentational Tool
More often than not, building web-based products is a collaborative, multi-person effort.
Except for cases like personal projects that you create purely for self-fulfillment, you’ll most likely find yourself working with clients, employees, colleagues, users, stakeholders, etc.
Prototyping your design concepts can be an effective way to illustrate your ideas and get approval/sign-off from your higher-ups.
There are, however, designers who would argue that showing clients a wireframe or a low-fidelity prototype could lead to confusion.
For example, Aida Zilic, an interface designer at digital design agency Imulus, wrote about how her company has decided not to show wireframes to their clients because it caused confusion and other things that “can end up hurting the project and its goals.”
It’s best to exercise caution when presenting your prototypes. There are high-fidelity, interactive prototyping tools that may be better for presentations to clients. Check out this example:
Be Able to Perform User Testing Early On
In user-centered design, the most valuable source of feedback is users.
A prototype can put user testing at the start of a project, instead of at the end.
One thing to keep in mind, though, is that a low-fidelity prototype won’t be able to capture the nuances that a finished, polished design will have.
For example, if there are issues with users finding a web button that they need to click on, it could be because the visual weight of the button isn’t properly represented in the low-fidelity prototype yet.
However, I think it’s safe to say that conducting user tests on prototypes can be effective in getting the kinks out of broad usability issues such as user flow, the categorization of content, and so forth.
Prototypes Encourage Collaboration
As I’ve said, building web-based products will more than likely involve several individuals. Prototypes can get everyone involved early in the process.
Your clients and employers can have a rough preview of what you’re going to build for them, and they can provide you with feedback and decisions before you make big commitments that would take a lot of time to revise later on. Your teammates can offer feedback and share their concerns before the design is finished.
Designs Are Increasingly Becoming More Complex
User interface designers face the challenge of creating designs that will be viewed in a vast number of ways.
We need to account for most (if not all) types of viewing scenarios: Desktop monitors, laptop screens, smartphones, tablets, and the list goes on.
Responsive web design is one of the ways to achieve optimal layouts under different viewing mediums.
But it also adds a layer of complexity in coding and laying out our web pages. We need to know how the different components of a web page will change in dimensions and where they’ll move if we were to view the web page in, say, an iPhone versus a widescreen monitor. We can figure all of this out via prototypes.
(Prototypes created using wireframe.cc.)
Prototypes Give You More Opportunities to Work Concurrently
By creating prototypes, members of your team can begin working on some components of the UI even if the design hasn’t been polished yet.
For example, if your app needs to report information to its users, your server-side programmers can begin creating your database as well as the database queries that will pull out the data you need — even before finalizing your UI.
Prototypes Give You a Visual Guide to the Finished Product
It’s much easier to produce things when you have a solid idea of how the end result is going to (roughly) look.
When the goals are clear and defined, when everyone involved agrees on the intended results, when design concepts have been validated early on — you’ll find that the path to the finish line will be more straightforward.
Prototypes can even be significant jump-off points of the final product. Some tools allow you to create prototypes that you can convert into HTML/CSS code. Though I don’t recommend that you use the auto-generated code of any software without (at the very least) a professional and experienced front-end web developer reviewing it, they could potentially be used as starting points.
Prototyping is Cheap, Fast, and Easy
Perhaps the most apparent reason why you should prototype your designs is that there’s very little reason not to.
It integrates seamlessly into most design processes.
It’s safe to say that all UI designers begin with some form of prototype — even if it’s only a paper sketch done in 30 seconds.
There are tons of tools out there that are easily integrated with your existing design process — from the timeless pencil-and-paper combo that’s been used for centuries, to web tools that run in the browser.
Other Articles about Prototyping
- The Art of UI Prototyping (scottberkun.com)
- Design Better And Faster with Rapid Prototyping (www.smashingmagazine.com)
- Paper Prototyping (www.alistapart.com)
- Sketching in Code: the Magic of Prototyping (www.alistapart.com)
- Ultimate Guide to Website Wireframing (sixrevisions.com)
What are Other Benefits of Prototyping a Design?
- What benefits did I miss?
- Do you have a story to tell about how a prototype helped you with a particular project?
- Why do you prototype your designs?
Please share your views in the comments!
-
Trevin serves as the VP of Marketing at WebFX. He has worked on over 450 marketing campaigns and has been building websites for over 25 years. His work has been featured by Search Engine Land, USA Today, Fast Company and Inc.
-
WebFX is a full-service marketing agency with 1,100+ client reviews and a 4.9-star rating on Clutch! Find out how our expert team and revenue-accelerating tech can drive results for you! Learn more
Make estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost CalculatorTable of Contents
- This Post Was Brought to You with Help by Proto.io
- Find Design Issues Early
- Iterate More Quickly on a Design Concept
- Compare Design Variations Quickly
- Gather Design Feedback Better
- Prototypes Can Be a Presentational Tool
- Be Able to Perform User Testing Early on
- Prototypes Encourage Collaboration
- Designs Are Increasingly Becoming More Complex
- Prototypes Give You More Opportunities to Work Concurrently
- Prototypes Give You a Visual Guide to the Finished Product
- Prototyping is Cheap, Fast, and Easy
- Other Articles About Prototyping
- What Are Other Benefits of Prototyping a Design?
Web Design Calculator
Use our free tool to get a free, instant quote in under 60 seconds.
View Web Design CalculatorMake estimating web design costs easy
Website design costs can be tricky to nail down. Get an instant estimate for a custom web design with our free website design cost calculator!
Try Our Free Web Design Cost Calculator