Prototype development levels and tools

A prototype is a preliminary version of a product from which all the later forms are developed. There are different types of prototypes you can develop depending on your product: is it a mobile app, website, gadget, service, game or something else. Testing and improving are the main reasons to prototype.

The goal of a prototype is to evaluate an idea: will it work or how will it look?

In the intro to prototyping phase, you practised sketching mindmaps and paper prototyping. However, there are a lot of programmes and software for prototyping.

The tools can be grouped in the following prototyping levels:

  1. Design mockups for beginners
  2. Build a basic product
  3. Develop a functioning product

1. Design mockups for beginners

Typically, a mockup shows the product’s appearance and the basics of its functionality. Mockups are usually static. By looking at a mockup, you should get a good idea of how the final product will look and a rough idea of how it might function (even if the functions aren’t yet working). A mockup can be considered a high-profile visual design draft.

Paper, wood, etc. The Palm Pilot pretotype is a great example of how you can test a concept and usage with a simple mockup (a Pinocchio pretotype.)

The founder of Palm Computing, Jeff Hawkins, mocked up a Palm Pilot with wood and paper; then carried it with him for weeks pretending it was a working device.  His objective was to learn if he would actually use such a device before going to the next, very expensive and time-consuming step of building an actual working prototype.

Even though Hawkins did not use the term pretotyping (it hadn’t made up yet) that’s exactly what he was doing. He was simulating the core experience of having and using a Palm Pilot with the smallest possible investment of time and money.

Pretotyping differs from prototyping in one important aspect. The main objective of prototyping is to answer questions related to building the product:

  • Can we build it? Will it work as expected? How cheaply can we build it? How fast can we make it?

The main objective of pretotyping is to answer questions about the product’s appeal and usage:

  • Would people be interested in it? Will they use it as expected? Will they continue to use it? …

Below are the Palm pretotype and prototype and product side-by-side. Notice the difference between preto- and prototypes!

PowerPoint is a good prototyping tool disguised as a presentation software. It comes with lots of basic vector shapes, solid/gradient fills and strong layout engine. You can create hyperlinks between slides, making it a great tool for laying out user interface (UI) screens quickly, and then linking them together so that you can interact with them same way you would do with a real app.

Each slide in PowerPoint represents a screen in your app, and each link between an element on a slide and another slide represents a transition from one screen to another in your app.

You can use PowerPoint to make your prototype visual design.

Moqups is an app for creating wireframes, mockups or UI concepts and prototypes. This tool allows you to have a more realistic idea of what your project will look like before you start it. It is easy to use, so anyone can learn fast and rely on all the options provided by the tool.

ProsCons
“Drag and drop” interface.There are many templates you can use for your design. The upload photo featured is great and very useful.The canva space you can customize at your preference.You can share your designs with team members.Only monthly package.You are not able to export files if you use the demo version.It doesn’t have the strongest features for actual prototyping and the styling components aren’t as customizable as some other prototyping apps. 

See the tutorial: Get started with Moqups (.pdf)

Lucidchart. Lucidchart’s wireframe and mockup tools make it easy to design, share, and test your ideas or make a mindmap.

  • The tool can be used for an Android or iOS app or for designing a website. It offers a variety of shapes and templates. You can browse through UI containers, menus, widgets, or import your own elements directly.
  • Lucidchart’s website mockup software makes the transition from wireframe to mockup easy. Simply pick up where you left off, adding detail and specificity. Mockup builder even keeps a complete revision history, so you can experiment freely.
  • Start making wireframes and mockups right away with a free trial—no credit card required. Later, you can stay on a free account or upgrade for even more features, including Visio compatibility, Google integrations, and access to premium shape libraries.
  • Finding the right design is a team effort. With Lucidchart, your team can collaborate in real-time or leave comments for others to see later.
  • Since Lucidchart runs in the cloud, you can access your wireframes on any platform or device.

Lucidchart’s interactive presentation mode makes it easy to present your concept to customers or investors.

Balsamiq Wireframes is a minimalistic prototyping tool that has the same look and feel of drawing on a whiteboard. It is a great tool for rapid prototyping.

The tool really forces you to focus on structure and content, and to avoid long discussions about colours and details that should come later in the process.

Wireframes is FAST: you will generate more ideas, so you can throw out the bad ones and discover the best solutions.

2. Build a basic product

When your mockup idea is ready you can start with the product prototyping or creation.

There are many website building tools, for example Wix, WordPress, Weebly, LaunchRock, ProductHunt launch, Carrd, Flauntly, QuickMVP, Unbounce, and GumRoad are a fast and easy way to create great-looking landing pages, websites, etc.

You may have heard that WordPress is the most popular website builder platform, but maybe you aren’t sure if WordPress is the right choice for you. Unlike Wix, Weebly, or Squarespace, WordPress is actually 100% free. Over 52% of all websites on the internet are powered by WordPress.

ProsCons
WordPress can be used to build any kind of website. For example, an online store, community forum, social network, a membership website, and so on.There are thousands of pre-made WordPress themes that you can use for your website’s design. It also has amazing drag and drop page builders.You’ll also get access to more than 50,000 free WordPress plugins. These are like apps for WordPress that add additional features and functionality to your website.You will have to manage your own website, which means you will need to familiarize yourself with a new system. It is easy once you have learned it, but it does feel a bit difficult in the beginning.You will also have to keep up with WordPress updates, plugin updates, and create backups.

You can create a free website with Wix. Their visually impressive layouts are designed for small businesses, restaurants, online stores and artists such as musicians and photographers.

ProsCons
The most remarkable thing about Wix is its templates. Wix is available for free for as long as you want, but if you require professional features like your own domain name or priority support, you must choose from one of their plans. Wix is one of the site builders that let you animate text and other elements. But make sure not to overdo it!There are hundreds of website apps that you can add to your website. There is a newsletter tool, live chat software, online booking widgets, etc. All of those can be easily integrated into your Wix website.Wix automatically creates backup points of your website that can be restored at any time. This way you will never lose any important information.Once you have chosen your initial template, you can’t switch to a completely new one. You can certainly change the design within the template, but it is not possible to pick an entirely new one.

3. Develop a functioning app

When you have tested your mobile app with simpler pretotypes and you are ready for a Minimum Viable Product (MVP) Corona SDK is on option for mobile app prototyping.

There you will see app developing tools for those who don’t have any knowledge in app developing, but if you are planning to become a mobile app developer, you should also study Android and iOS style guides and join Stack Overflow to find answers and recommendations from the experts. Also, you can use a mobile app development framework of your choice, depending on the requirements of the project.

Marvel

If you do not have much technical knowledge or are a newbie designer, Marvel would work well for you. The user interface is really simple and is easy to use and comes with a mobile app which makes prototyping process simpler.

Marvel can be one of the easiest application to learn by letting any user immediately drop into the interface and then link screens through defining hotspots. It’s pretty simple to upload image files into the software, and supports GIF, JPG and PSD image file types.

A big minus of Marvel is that this tool doesn’t include a user interface component or any drawing tools. The designs need to be done within another tool, such as Photoshop or Sketch. Its biggest plus simplicity but it might limit the functionality.

Bubble is an online initiative where you can create visually programmed webpage and application. Bubble lets you build and host web applications without having to write code or hire a team of engineers.

Pros: You can’t learn Bubble immediately, but doing the Interactive Lessons and reading the manual will teach you how to efficiently navigate the interface. You can also have peer support through the community forum.

Cons: There could be more interactive lessons to show common processes that a user might want to create in their app.