How to Make a Prototype
Before you launch a website, you need to decide what it will look like: you need a prototype. Often, the initial stage of development is far from digitalization. You take a piece of paper and start schematically illustrating your future project. However, prototyping is a more complex thing than a couple of blocks outlined on a page, even if it doesn’t require specific designing, coding, or software knowledge.
So how to create a prototype and what nuances to keep in mind? Find all the answers below.
What is a prototype?
A prototype is a quick draft model of a future system or product.
A website prototype is a model of a future web platform that shows an order of navigation blocks, application forms, and other functional or information blocks.
There are two kinds of prototypes, distinguished according to the way of interactions:
- A static prototype consists of individual pages and functional blocks that don’t fully interact with forms, navigation, etc.
- A dynamic prototype provides an opportunity to interact with navigation, forms, and other website elements. It is a full-fledged site model with an advanced simulation of user behavior.
What is the purpose of the prototype?
A prototype demonstrates a customer how a website will look and work. It helps to identify the problems that can interfere with the performance in the future and eliminate them at the early stage.
Before learning how to make a product prototype, you might want to know why prototyping is essential. Our shortlist of arguments “for” quotes the following points:
- t is an opportunity to decide on the smart location for blocks, design elements, and develop clear website navigation.
- It saves a lot of time: testing starts on the early stages, changes that take seconds on the prototyping stage may require hours, days, and weeks during coding, the amount of paperwork is reduced.
- It simplifies the designing process. When you’ve got schemes of all pages, the arrangement of all elements and drawing layouts is easier.
- It takes the work with content to a completely different level. Each page is created as an interface with structured information, accents, illustrations, and interactive elements.
- Functional prototypes allow checking difficult stages of user interaction with a website. It is also suitable for testing by focus groups.
- It helps customers to formulate the requirements. When a project takes shape, they understand what requires changes and corrections that are easy to implement immediately.
- It is the best way to find out whether a project is too expensive or too difficult to develop and launch.
The ultimate goal of website prototyping is to conduct testing, understand the flaws both in the design and in the technological basis, correct errors, and provide information in a convenient form. The website prototyping process can take from 10 minutes to weeks – everything depends on a service/program you use.
How much does it cost to get a prototype made?
Totally free, using Draftium prototyping tool.
How do you design an idea?
You can prototype everything – a product idea, a text, a landing page, an entire website, and so on. And absolutely everything can be prototyped on a piece of paper. That’s actually how it was done earlier, long before digitalization. Google “product prototype example” and you’ll even find cardboard laptops and smartphones.
Nevertheless, there is a vast variety of websites that can help you to deal with this task more effectively. There are many rather complex programs created for professional designers, but online tools are becoming more popular thanks to familiar interfaces and simplicity. We’ve recently discovered one of such services named Draftium. This is a multifunctional free tool we are going to use in today’s guidelines.
How to make a prototype: Step-by-step guide
We are going to cover both theoretical and practical aspects that will help to create a prototype of a website, project, or idea.
Step 1. Define the purpose of your project
When you start working on a website or project idea, it is important to understand its purpose, a target audience you are appealing to, and the expected results. Think about what you want to achieve – brand awareness, increase sales, cut costs on the call center, or something else.
Step 2. Study your competitors
Finding an answer to “how to make a prototype” is easier if you know something about similar practices. Check out the websites and projects of your competitors and take advantage of this information. Borrow the best ideas and improve them a bit. Find some weak points and correct those mistakes during prototyping.
Step 3. Analyze the content
Actual prototyping begins with content analysis. Content is key to outlining the structure of the future website/project. Detailing the interface and other little things are not so important, as the main goal at this stage is to build a competent structure for interacting with a user.
Step 4. Create a concept sketch
Some paperwork will be still useful. While you study the competitors and decide what information you are going to show, take notes and schematically visualize ideas to make sure you won’t forget anything when it comes to prototyping.
Step 5. Log into Drafrtium
With the concept in mind, you can open Draftium and sign up. It takes just a few seconds. You can sign up with Google account, Facebook, or enter the information manually. The website has an intuitive interface so you’ll quickly learn how to build a prototype.
Step 6. Choose a template
Click on “Create New.”
draftium
Choose a free prototype. There is no need to buy any expensive materials aka “premium layouts” for higher efficiency. All the templates are divided into categories so it is easy to find exactly what you need. You can also create a black prototype if there is no suitable category.
Step 7. Edit header and footer
Customize header and footer first. These are two basic elements that will be featured on all the pages. You come up with the standard for the entire website.
Step 8. Customize the homepage
You don’t need to follow a chosen template blindly – design your product creatively. Delete the elements you don’t need, add the blocks you would like to see on the future website.
Step 9. Add the rest of the pages
Create and edit the rest of the pages. Using the template created earlier, you need to arrange all the elements of the future interface. Customize each according to your content and goals – choose blocks with text only, photos, callback forms, etc.
Step 10. Apply your content
It would be useful to have a couple of draft texts and photos ready. Upload your unique content to check how it all will look together. Maybe it will be necessary to shorten the texts or change an approach to visual material.
Step 11. Setup the links
How to get a prototype functioning? Prepare to test different user scenarios. If you set up everything during the previous stage, you may need just to check whether everything is clickable or move to the next step.
Step 12. Preview on different devices
Did we mention that every template on Draftium is already customized for different screens? A user can check how their project looks on a desktop, a tablet, and a smartphone. No need to worry about responsive design and additional working prototypes for every device.
Step 13. Leave comments and make edits
Make it look perfect. If you are not certain whether to make changes, leave a comment to that particular section and come back later. You can also share the draft with the others to hear their opinions.
Step 14. Request a block
If you suddenly discover that some important block is missing, interfering with your plans to build a prototype that is perfect, click on “Request a block.” The team will contact you for more details.
Step 15. Publish your prototype
By this time, you’ll have a working model of the future website with a high level of detail. You can present the project to your team, agency, client – whoever needs to see it. You can also request a quote on the website and let the Draftium team do the development.
Prototype example
#1. Teacher’s Website: https://vyg26.draftium.site/
A few words about Draftium :)
There are a couple of reasons why we chose Draftium to explain how to create a prototype. Draftium is different from the rest of the prototyping tools – it is more functional and much easier to use for unprofessional audiences. A free version is enough functional for an average user, while agencies can consider the Pro version. Also, the service is completely secure. You can share access only with people who signed a non-disclosure agreement and no one else.
Draftium has a 5.0 rating on producthunt.com based on 111 reviews. It was #1 Product of the day and became the Design Tool of the Year. Try to create your prototype on Draftium – it takes a few minutes.
Bottom Line
How to get a prototype made? You can do it quickly and easily if you choose the right tools. You don’t need the assistance of prototype designers, only a clear understanding of your business goals and a concept of a website or product in your mind. And don’t even consider missing a prototyping stage. Correcting mistakes is much more expensive than preventing them.