How to choose a website prototyping service: 9 tools
Even masters make sketches and draw the details of large paintings on separate easels. If you need to create a high-quality website or a landing page, you have to choose a proper service to create a prototype. In this article, we present 9 of the most popular software applications that can help you create a website layout. We’ll also help you choose the proper tool.
In our previous post, we figured out what a landing page prototype is and why it’s needed. Today we’re going to consider some tools and software that can make further work on the project more user-friendly. We will also demonstrate the latest capabilities, the newest interfaces and compare prices.
Ok, let’s go!
1. POP
The easiest way to make a landing page prototype is by free-hand drawing. The layout is drawn on paper, then photographed and converted using a POP program. But it’s easier and more accurate to draw a layout directly in the program. POP enables image insertion, drawing of rectangular or circular shapes, choosing where to place text (or directly writing in the place suggested by copywriter).
Prototyping in POP
This program is the simplest one we reviewed, but not one you can use to make a cool prototype. It offers a minimum of tools for minimal tasks. But POP supports any device: iPhone, iPad, Apple Watch, Apple TV, and Android. There is also a Network Working function that allows you to call colleagues and clients to discuss the whole process. And, of course, POP can be integrated with Dropbox.
Price: from $14 per month. There is also a free version.
2. Balsamiq
This is another simple program with functionality similar to that offered in POP. However, Balsamiq offers more possibilities and has a larger set of UI elements. You can select icons, draw buttons in different shapes, add tables and work with fonts. The operating space itself seems more convenient to work with because of the page markup. Website layouts and maps can also be created with Balsamiq.
It’s suitable for those who lack Photoshop skills.
Balsamiq can be used directly in a browser or downloaded as an Adobe AIR application. It can also be launched from Mac or Windows and integrated with Google Docs.
Price: from $12 per month. Offers a 30-day free trial.
3. InVision
This is an application you can use to convert static mockups into prototypes and mockups with interactive elements. It’s the tool for the “revival” of your layout. InVision simulates the full operation of the future website. It’s possible to link the layouts of individual pages into one prototype. Moreover, InVision is a great tool for working in the studio. The software includes simple drag-and-drop tools that make the UX design process easier.
Prototyping in InVision
The project can be tested in a browser, on mobile and in real time. The application allows you to connect colleagues and customers to your discussion. The designer, developer, and the customer can communicate via chat and personal private comments.
InVision is browser-based and supports all browsers. In addition, the app works with iOS and Android. InVision also integrates with Dropbox, Google Drive, Box, GitHub, Slack, and other programs.
$15 per month. There is a free version.
Price: $15 per month. There is a free version.
4. PowerMockup
PowerMockup is a simple toolkit suitable for those who like to work in PowerPoint. It’s sort of an addition to PowerPoint that is embedded into the Microsoft Office package. It offers additional features and sketches for prototyping, many different UI elements of the UI, and about of 650 icons. The forms library can be enhanced with your own elements.
Using PowerMockup, colleagues can work on a project together. The files can be easily exported to PNG, JPEG, BMP, vector graphic formats such as WMF or EPS, as well as videos and PDF documents. Thanks to the facilities of Microsoft Office, you can work in Word and Excel, too. For example, you can make the specification in PowerPoint, then open it in Word.
Prototyping in PowerMockup
PowerMockup is available only for Windows.
Price: from $60 (one-time payment). Offers 30 days of testing.
5. Axure
This is a professional UX-tool that helps developers create complicated interactive prototypes. It creates web applications on both Mac and Windows platforms. It makes it convenient to drag and drop items, format and resize widgets, create pages and folders. It’s also very easy to test future landing pages for different devices, and you can quickly visually edit and download widget libraries. The program supports frames for iOS, as well as libraries for iPhone, iPad and Android.
Axure is convenient for drawing diagrams, annotations, and specifications.
You can build whole sites using the program. While you work on a project, HTML, Javascript, CSS files are generated.
There are opportunities to work free for one month. Our designers use Axure.
Price: $300 (one-time payment).
6. Principle
A fast, intuitive desktop program that does not require an Internet connection. You can make interactive prototypes with animations using this program. There are tools for devices with touchscreens that allow you to define different types of interactions: tap, scroll, drag-and-drop, long press, etc. Other functions are available, too: art boards, masks, presets. The driver panel allows you to do interesting things with the prototype – for example, to rotate some element while swiping.
Prototyping in Principle
It works with Mac and is convenient for users of Mac OSX due to similar interface elements. Its drawback is that you need to properly organize Sketch files before synchronization.
Price: $ 129 (one-time payment)
14 days of free testing.
7. Fluid
This program works with mobile applications. You can make a prototype for Android, iOS, and Windows. In fact, this application is created for browser using HTML5. It is also easy to use. This program has fast functionality; it allows you immediately evaluate the result on your mobile phone. It has a library of more than 1500 elements. Using Fluid, it is easy to edit by drag-and-drop and to create animations. The program supports gestures, actions for touching, drag-and-drop, repetition of the template on pages and the transitions between them, iPhone and Android libraries, and working with images and screenshots. The finished layout can be translated into various formats, including PDF and HTML. it enanbles the possibility of creating a joint workflow with colleagues.
Working space for prototype creation in Fluid
The service makes tasks easier for programmers because it is easier to understand the structure and functionality of the project to present everything in the final version. Thus, the entire development process and communication with the database are optimized. In Fluid, it’s easier to collect all the screens into one project.
Price: from $15 per month. There is a free version.
8. Framer
This is a tool for the advanced users. The prototype is developed in code, using the language CoffeeScript. However, no need to be scared – the creation of code in Framer is an exciting process. The program is equipped with instructions; even an unprepared user can master it. In Framer, you can make interactive animations. Users like how the program makes them think through the logic and structure of the design properly.
Framer: Prototyping in code
It works on Mac. In addition, it integrates with Sketch and Photoshop. In Framer, everything is possible within JavaScript – for example, using live data or an accelerometer.
Price: from $129 per year.
9. Flinto
Another well-known tool. With it, you can also make interactive prototypes. Here you will find all the necessary tools for creating animations, as well as a special system that allows you to work with multiple application screens. You can choose two versions: Flinto Lite, and Flinto for Mac. The latter is a powerful and convenient program that has wide functionality for creating animations. It’s the fastest to learn for those who have worked on Mac OSX. There is also a plugin for Sketch, and it simplifies the reconstruction of designs. Flinto for Mac works with templates for mobile phones, and users can share a prototype only with those who also have installed Flinto for Mac.
The process of creating a prototype in Flinto for Mac
Price: from $20 per month.
Which service to choose
Your choice will depend on the task and budget. A simple layout that helps you put together thoughts can be created in a program such as POP or PowerMockup. For larger projects, use multifunctional programs like Axure, Fluid, and Principle.
The main thing you should understand is that even the landing on the template needs to be prototyped. Attention to details at this stage will alert you to real or potential bugs and mistakes in landing page design.
cool