DevelopmentWeb

What are the best tools for webapp UX/UI prototyping?

15
Options 
Considered
0
User 
Recs.
Last 
Updated

Figma vs Adobe XD vs Gravit Designer

 vs Sketch vs Mockplus vs Affinity Designer vs Invision vs Fluid UI vs Inkscape vs Pencil V3 vs Balsamiq vs Froont vs Pidoco vs Icons8 Lunacy vs Octopus.do — Visual Sitemap Builder vs ProtoPie vs Pixate

Specs

Platforms

-

License

-

Unoffical download location

-

Available as

-

Export image formats

-

Technology

-

Initial Release

-

Platforms

-

License

-

Unoffical download location

-

Available as

-

Export image formats

-

Technology

-

Initial Release

-

Platforms

Linux, Windows, macOS, Web

License

GPLv3+ or Commercial license

Unoffical download location

https://github.com/OliBridgman/gravit

Available as

Snap, AppImage, WebApp

Export image formats

-

Technology

-

Initial Release

-

Platforms

Mac

License

-

Unoffical download location

-

Available as

-

Export image formats

-

Technology

-

Initial Release

-

Platforms

Windows, Mac, iOS, Android, Web

License

-

Unoffical download location

-

Available as

-

Export image formats

-

Technology

-

Initial Release

-

Platforms

Windows, MacOS, IOS

License

-

Unoffical download location

-

Available as

-

Export image formats

PNG, JPEG, GIF, TIFF, PSD, PDF, SVG, EPS, EPS, EXR, HDR

Technology

-

Initial Release

-

Platforms

-

License

-

Unoffical download location

-

Available as

-

Export image formats

-

Technology

-

Initial Release

-

Platforms

-

License

-

Unoffical download location

-

Available as

-

Export image formats

-

Technology

-

Initial Release

-

Platforms

Windows, macOS, Linux, Unix

License

GPL-2.0-or-later

Unoffical download location

-

Available as

-

Export image formats

-

Technology

C++

Initial Release

2003

Platforms

-

License

-

Unoffical download location

-

Available as

-

Export image formats

-

Technology

-

Initial Release

-

Platforms

-

License

-

Unoffical download location

-

Available as

-

Export image formats

-

Technology

-

Initial Release

-

Platforms

-

License

-

Unoffical download location

-

Available as

-

Export image formats

-

Technology

-

Initial Release

-

Platforms

-

License

-

Unoffical download location

-

Available as

-

Export image formats

-

Technology

-

Initial Release

-

Platforms

Windows, Linux, Mac

License

-

Unoffical download location

-

Available as

-

Export image formats

-

Technology

-

Initial Release

-

Platforms

-

License

-

Unoffical download location

-

Available as

-

Export image formats

-

Technology

-

Initial Release

-

Platforms

macOS, Windows, iOS & Android

License

-

Unoffical download location

-

Available as

-

Export image formats

-

Technology

-

Initial Release

-

Platforms

-

License

-

Unoffical download location

-

Available as

-

Export image formats

-

Technology

-

Initial Release

-

Pros + Cons

Pro
 Works in the browser

Comment

Pro
 Provides a free version

Does not require a paid subscription for use. Can be used freely with a lot of features. The free use allows very limited collaboration.
Comment

Pro
 Allows for real time collaboration

Comment

Pro
 Allows the design of UI elements from scratch without the need for external Tools

Comment

Pro
 Really fast

It uses WEBGL and web assembly which makes it blazing fast even for a web based app.
Comment

Pro
 Provides complete end-to-end Features for UI/UX development

Covers sketching to design to flows and more.
Comment

Pro
 Import sketch files

Comment

Pro
 Has all the core functionality you'd expect from something like Sketch

Comment

Pro
 Live previews for mobile

Mirrors your designs to your phone in realtime.
Comment

Pro
 Integrates with Slack

Provides integration with Slack.
Comment

Pro
 Easy to use interface

It's easy to be productive immediately with XD but it also includes a demo so that you can learn about some of the more powerful features.
Comment

Pro
 Cross platform

It's available on both macOS and Windows.
Comment

Pro
 Repeat grid is a timesaver

Creating a list of items is simple with "repeat grid." Just create one and use repeat grid to duplicate that item vertically or horizontally. Then drag and drop text or images to create unique entries for each repeated item.
Comment

Pro
 UI Kits are available for iOS, Material Design, and more

Includes: iOS Google Material Design Windows UWP Wireframes
Comment

Pro
 Share online and gather feedback

Allows mockups to be pushed to the web where collaborators can try the mockup and leave feedback.
Comment

Pro
 Interactive mockups

XD allows you to wire any object to any destination page so that clicking a button asset will take you to a page that you specify. Mockups can also simulate a scrolling page or window.
Comment

Con
 No tools for animation

It is possible to create transitions, but this feature is very limited.
Comment

Con
 Only good for mockups

XD is not a multi-purpose tool like Sketch. It is not a good tool for logos, icons, or other design assets.
Comment

Con
 No password protection on shared mockups

You cannot restrict access to a URL but you can delete it when you're done but then you lose your feedback.
Comment

Con
 Trial period is only 7 days

There's no free option and the trial period is so short that you may not get the sense of the full power of the app.
Comment

Pro
 Completely Free

Costs absolutely no money to get started designing.
Comment

Con
 Performance Issues

Gravit Designer suffers from performance issues, unlike other vector designers, specifically when using effects like Blur or may be it loading a large design.
Comment

Pro
 Large cloud based libraries built-in

It has a huge range of vector symbols and illustrations to start from out of the gate.
Comment

Pro
 Multi platform

Works on Windows, Mac and Linux.
Comment

Pro
 Has almost all of the features of more expensive applications

Has comparable features with applications that normally cost a monthly fee.
Comment

Pro
 Able to open Sketch files

The ability to open Sketch files makes it easier for Linux/Windows users to collaborate with people who use Sketch, which is macOS specific.
Comment

Pro
 Clean and helpful UI

The panels in Gravit adjust to contain the information needed based on the type of element selected, preventing the clutter that Photoshop often experiences.
Comment

Pro
 Easy to design multiple pages

The ability to assign layers to specific pages, and view single or multiple pages at once makes it easy to design an entire website without getting lost in thousands of layers. Easy to view multiple pages at one time.
Comment

Pro
 Linux/Mac/Windows/Web Versions

A lot of design tools only work on one OS, while Gravit works on all major operating systems including the web.
Comment

Pro
 Reusable Elements / Symbols

Style a button or UX/UI element in one place and reuse it across the design. Make a tweak to it once and it syncs across all instances of the element.
Comment

Pro
 Free

Gravit is completely free to use. It was open source up until a recent release, however there are plans to open source it again in the future.
Comment

Pro
 Actively developed

Gravit Designer has undergone another face-lift during 2016, and the development of the application has made it even better since.
Comment

Con
 Changing rapidly

The fast rate of growth/change for Gravit can be a pro in that in means plenty of new features. However, it also makes the product fairly unpredictable. For example: In the past year, Gravit was open sourced, then closed sourced again.
Comment

Con
 Icon Fonts are not supported

Fonts like FontAwesome are not supported on this platform, the workaround however, is using the SVG kit of your respective fonts.
Comment

Con
 Bad SVG export

It is not possible to export a "real" SVG, its just embeds bitmap image in SVG.
Comment

Pro
 Available as a Snap

For the fans of the Linux distribution-agnostic application manager, Snappy, Gravit Designer is available in SnapCraft.io, simply install it using snap install gravit-designer --classic.
Comment

Con
 Snappy Package can't see system fonts

This would cause a major disadvantage to the platform since it uses the Strict confinement, which does not allow the app to see the fonts.
Comment

Pro
 Symbols and shared styles

Sketch lets you re-use the same design in multiple places, with changes synced throughout the various places it is used. You can also create text styles to sync typography changes.
Comment

Pro
 Vector based yet pixel aware

You can rescale assets without quality loss, easily export x2 assets for retina designs and design high quality icons & artwork. Being pixel aware lets you set a grid and snap objects to it as well as round to the nearest pixel edge to clean up your layers.
Comment

Pro
 "Artboards" are great for working on multiple views simultaneously

Artboards let you easily work on multiple views side by side. Great for having a separate artboard on each page for the various responsive sizes.
Comment

Pro
 Easily align layers with smart guides

Holding down alt will show the smart guides that show the distances between any layer you hover over to nearby layers or the edges of the artboard. Very useful for checking your spacing or aligning layers.
Comment

Pro
 Built in grid system

You can set the square grid to whatever dimensions you like as well as set thicker lines every x blocks. You can also configure the color of the lines to make them as obvious or subtle as you wish and toggle the grid with a keyboard shortcut (crtl+g)
Comment

Pro
 Clean UI

Reactive panels keep the UI for Sketch clean from the sort of clutter the panel system in Photoshop suffers from. The panels in Sketch change based on the object in question, saving you from having to have a multiple separate panels.
Comment

Pro
 "Mirror" makes it really easy to test designs on multiple devices

Mirror lets you connect your iPhone to sketch and see how your current artboard looks on mobile. It's really useful as you can live check changes which lets you rapidly iterate mobile design.
Comment

Con
 No Windows/Linux versions

Sketch is currently Mac only, which can make it hard to collaborate if you have teammates using another OS.
Comment

Con
 Slow compared to others

Adobe XD and Figma will create a mockup set and prototype faster with less clicking.
Comment

Con
 Limited compatibility with Photoshop and Illustrator

Although it is possible to export certain Adobe file types in Sketch, compatibility is mostly hit and miss. For example, some elements seem a little offset in Adobe products.
Comment

Con
 Buggy releases and lack of quality assurance

The fast rate of change means new releases often break files and cause havoc. Duplicate symbols are really bad in the latest releases so you have to keep updating.
Comment

Con
 License based payment model

Sketch has recently decided to cease development of major version (2.0, 3.0, 4.0) with free updates in between, and has switched to a license based subscription model. A yearly license costs $99 and includes the latest version of the Sketch software, plus a year of free updates. After this license expires, you can renew for another year of updates - or continue to use the current software without updates.
Comment

Con
 No Linux version

Sketch is currently only available on Mac, which can make it hard to collaborate if you have teammates using Linux.
Comment

Con
 No Windows support

Comment

Con
 No way to export higher than 72 dpi

Sketch was not made for print design, but this also means if you want to print your designs and put them on a wall, your pdfs or pngs will look blurry. There's no way to export at 300dpi or higher without involving other tools such as Adobe Illustrator.
Comment

Pro
 Active community with a lot of resources

Sketch is hugely popular among designers so there are a lot of well maintained community resources for everything from iPhone frames to iOS/Android UI elements & icons.
Comment

Pro
 Makes it easy to export assets

Sketch has a built in exporter that supports PDF, JPG and PNG.
Comment

Pro
 Designed specifically for web and mobile UI design & workflows

Sketch is essentially a version of Photoshop built from the ground up to suit the workflow of web designers.
Comment

Pro
 Flat rate

The price is a flat rate of $99 instead of paying $19.99 a month for a year or $29.99 a month for Photoshop or Illustrator. Plus there is a free trial to check Sketch out.
Comment

Con
 No Linux version

Mockplus is available for Windows, Mac, Android, and iOS, but not Linux.
Comment

Con
 Requires paid subscription to export design

If you want to export the HTML, you have to subscribe to a Pro account ($6.50/month).
Comment

Pro
 Large ready-made component library

There's a large library of 200 pre-designed components that help you with building mockups as fast and easy as possible.
Comment

Pro
 Easy to use

You can get started easily without learning or training. Beginners can master the tool in a short period of time.
Comment

Pro
 Rapid prototyping without a single line of code

Mockplus has a very intuitive interface that lets you quickly build your prototypes with no programming needed. You are able to create interactive components with the drag and drop feature.
Comment

Pro
 Newly added 3000+ SVG icons

There will be around 3000 icons for your free use, with around 2500+ vector icons integrated with the previous 400+ flat icons. Check for more here.
Comment

Pro
 Creating interactive wireframes/prototypes is fast

You can quickly build interactive prototypes using the drag and drop. A set of pre-designed components, including pop-up panel, stack panel, scroll box, sliding drawer and image carousel, helps you create the prototype faster.
Comment

Pro
 Free version is available

There is a free version available.
Comment

Pro
 8 Ways to Test and Share Prototype in Mockplus

In terms of testing, you have 8 ways to test your prototype in Mockplus. Comprehensive and pretty useful. Please check the details.
Comment

Pro
 Free plan 

Invision offers a free plan to anyone that is limited to one project. While the free plan is a bit limited it does allow the user to trial the software for as long as they like to decide on its merits and whether it is worth paying for the more robust options.
Comment

Con
 While Invision acts as an all-in-one environment for design, it may become a nuisance 

These times, teams are not using just a single app or tool for everything. It's not unheard of for teams to be using up to a dozen different tools for their work. Invision works as an all-in-one environment for product design and unfortunately it does not integrate with other tools. This may be a nuisance for teams that want to integrate different tools in their workflow.
Comment

Con
 Expensive for just a hosting platform

Invision is a tool for building click through prototypes and getting feedback on them, you need to design everything in another app and upload them, it isn't a design tool.
Comment

Pro
 Presents designs in a way that mimics an actual web browsing experience

Once uploaded on Invision, the screen will be presented in a way that will behave as an actual web page. This is especially easy for showing the work to clients, more so if compared to just showing them a .PDF, which may make it look like the page is "too crowded".
Comment

Pro
 Supports gestures, transitions & animations for web, iOS & Android 

Hotspot links can be created for every page, and once it's done, for each one of them gestures and transitions can be registered. Invision supports various gesture types: swiping, double tapping, sliding, etc...
Comment

Pro
 Real-time collaboration and VOIP chat 

Live Share allows you to collaborate in real-time using an in-browser screen share. Each collaborator gets their own mouse, so you can easily point and see what someone is talking about. You can also sketch, and chat right inside the Live Share interface. Invision's Live Share gives team members the ability to collaborate in real-time through a screen share inside their browser. Each collaborator has their cursor which they can use and edit or add notes in real-time. On top of that, Invision also has a VOIP chat which works inside the browser.
Comment

Pro
 Design files are automatically synced and their version history tracked 

Invision uses Invision Sync or Dropbox to automatically save design files on the cloud. Furthermore, it has version control built in. This is especially helpful if a team is going through different versions for a specific design and they want to return again and again to previous designs.
Comment

Pro
 Great built-in feedback features 

Invision allows clients, stakeholders or any team members to leave comments and feedback inside the design which will be displayed as a point on the page itself. These paints can be discussed or even be turned into tasks. This makes it easy for designers to go through what they need to work on, and once it's done, the task can be checked off.
Comment

Pro
 Quick and easy testing on device

Once your app is ready for testing you can get it working on your phone and test it with real users.
Comment

Pro
 Awesome version control

Every action you or your team takes automatically creates a revision you can easily revert to.
Comment

Pro
 Supports realistic gestures & transitions

You can simulate all the typical iOS gestures such as tap, double tap, swipe & long hold. These gestures then can trigger animated transitions such as sliding, fading, pop in, & flip. This enables you to create very realistic interactable demos of your app. Checkout the demo page for some examples.
Comment

Pro
 Makes it easy to plan out the app workflow

Fluid isn't just about wireframing static screens. You can plan out all the user flows and then define the transitions between them. This is really handy for planning out the entire user workflow.
Comment

Pro
 Tools for team collaboration

Live collaboration for teams on projects
Comment

Pro
 Video Chat

Being able to video chat while working remotely is a great feature for remote teams.
Comment

Con
 Each mock needs to be uploaded one by one

Fluid UI does not support uploading multiple images at once.
Comment

Pro
 It's really easy and fun

You can edit and create vector graphics with Inkscape.
Comment

Pro
 Integrates well into a X11-System

Its uses the X11 icon theme and desktop theme(GTK).
Comment

Pro
 Export to different file types

You can export and save your files for example as a "normal" svg, png, jpg, bmp etc. file.
Comment

Pro
 Cross-platform

Pre-built binaries are available for Windows, Mac and Linux. Inkscape can be built from source on additional platforms.
Comment

Pro
 Opens lots of file types

Inkscape supports many common formats for import (including SVG, Photoshop and Illustrator) and its plugin architecture allows more to be added.
Comment

Pro
 Free and open source

Inkscape is GPL-licensed and maintains public repositories.
Comment

Con
 Unstable

Sometimes it just crashes without any reason, so it's not really usable as professional application.
Comment

Con
 Very slow startup on some systems

Depending on factors like how many fonts you have installed, Inkscape can take upwards of 30 seconds to launch.
Comment

Pro
 Very slow startup on some systems

Depending on factors like how many fonts you have installed, Inkscape can take upwards of 30 seconds to launch.
Comment

Pro
 Sketch look

So commenters won't focus nor comment on colors or graphical details.
Comment

Pro
 Lots of built-in widgets

Comment

Pro
 Easy to use

Comment

Pro
 Free and open source

Comment

Con
 Desktop tool: not very adapted for large collaborations

Comment

Con
 Stifling innovation

Doing anything that is not directly supported by Balsamiq's conservative component library is next to impossible. User is forced to think within the corset of yesterday's standards.
Comment

Pro
 Keyboard shortcuts

You can use common keyboard shortcuts like Shift to select multiple elements or to resize while maintaining proportions, F2 for renaming labels etc.
Comment

Pro
 Usability testing features

You can link together pages to create shareable user demos.
Comment

Pro
 Awesome team collaboration features

myBalsamiq has been built with teams in mind and has a variety of featured to support collaborating on the mockups: • Notifications - Real-time notifications to enable you to keep track of team member actions • Revision Control - All mockups have a revision history to enable reverting to previous versions and keeping track of design decisions. • Skype Integration - Easy to use Skype integration to host design reviews. • Access Control - Access controls allow sharing projects with team members as well as allowing external reviewers to leave comments on the designs.
Comment

Pro
 Low-fidelity UI elements

All the Balsamiq UI elements are drawn by hand and have a really nice low-fidelity design.
Comment

Pro
 Large & extensible UI element library

Balsamiq has a built in library of over 75 built-in user interface components and 187 icons, as well as community generated plug-ins.
Comment

Pro
 Clean and easy to use interface

Balsamiq has a very easy to use drag and drop interface that lets you quickly build and adjust your mockups. The UI is centered around low-fidelity wireframes that help focus the reviews on the core layout and functionality instead of getting hung-up on visual design.
Comment

Pro
 Free for public websites

Froont is free for anyone with a public website. This means you agree to your project being shared on the Froont website, where other Froont users may use the design.
Comment

Pro
 Allows creating responsive pages

Froont allows you to set media queries for creating responsive websites. It provides other features for making responsive sites easily, such as an easily adjustable grid.
Comment

Con
 Buggy auto-save

Froont does not provide users with a way to save work, instead making you rely on the auto-save feature that saves every minute. However it's been known to be buggy and not save progress.
Comment

Pro
 Live preview 

Direct simulation of prototypes possible by switching from editing to preview mode.
Comment

Pro
 Easily share and collect reviews

So simple to invite reviewers and collaborators and to collect feedback!
Comment

Pro
 Easy to use

Pidoco has a simple, intuitive drag&drop interface. Context menus and context-sensitive toolbars make editing super quick.
Comment

Pro
 Includes custom templates that speed up prototyping

Can use a variety of options to save time and avoid duplicate work, e.g. layers, custom elements, scroll frame references. Global layers and reusable custom templates speed up prototyping.
Comment

Pro
 Lots of dynamic UI elements and icons

Pidoco offers a large library of 400+ interactive interface elements as well as an extensive set of icons as building blocks.
Comment

Pro
 Helps to create designs in .sketch format on Windows

Works with all versions of sketch files.
Comment

Pro
 Doesn't require internet connection

Comment

Pro
 It is free

Comment

Pro
 Fast & Easy

Comment

Pro
 No sign up model

Comment

Pro
 Team collaboration

Comment

Pro
 Runs on Mac and Windows

It offers the same features on both MacOS and Windows. Plus, you can switch machines as long as you are logged in to ProtoPie Studio.
Comment

Pro
 Utilizes sensors very easily

Easily control the sensors of smart devices in your prototype, such as tilt, sound, compass, proximity sensor, vibration motor and 3D Touch sensors.
Comment

Pro
 Native prototyping

Deploy prototypes on any device right away. What's the point of prototyping mobile apps if you cannot deploy it on your mobile devices easily?
Comment

Pro
 Fast and easy sharing

Sharing is very easy via the cloud. Open the prototype in desktop or mobile browser, or deploy the prototype on the ProtoPie Player app. All is possible.
Comment

Pro
 IoT, Interactions across devices

Create prototypes e.g. chat platforms, payment apps etc. and deploy them on multiple devices and have them communicate with each other.
Comment

Pro
 Smooth and gradual learning curve

As the interface is very clean and simple, it enables you to create interactions by combining objects, triggers and responses just like that. No need for wireframing or shitty mockups, just get to hi-fi prototyping right away.
Comment

Pro
 Code Free

No coding needed to do interactions for your prototypes. You just choose the objects and link them with the triggers and responses you want to based on your preferred interactions.
Comment
undefinedurl nextprice drop