Gail Zahtz
SaaS, software and online solutions for wireframing, mockups and/or prototyping. Collaboration usually included. Includes list of features and pricing plans. While there are many ways to make wireframes or prototypes or card systems like the Adobe suite, Apple design software, and others, this list is specifically for the non-designer and non developer. While many have the full functionality that the highest level of web designer, graphic designer, web developer, UI or UX specialist can use for their full needs (as shown by how many come with full enterprise editions that enable web design companies and internal design teams can use for unlimited projects to clients, this list focuses only on the solutions that can be used by anyone who does not have the technical know-how of professional design software. This is wireframes and prototype "for dummies." Since we are also looking to include solutions that involve collaboration, we want our advisors in testing to both be able to get the visual impact and understanding of how a site or mobile app will look and work, and also be able to comment, collaborate and even make edits without having to go through hours of training.
As with all of our lists in List.ly, we welcome your input by adding other programs and by voting (and feel free to send us comments before they go onto web pages) as we have not trialled any or all of the programs. As with all of our lists, while they are at the list.ly stage, we receive no commissions, paid sponsorships or affiliate fees for listing. We want to ensure that the curation of the best tools is done without any question of influence from the outside. Each of our lists, after curation is complete, will be turned into usable resources for audiences around the world- so truly, while here on list.ly alone, your input in very welcome and needed. If you want to collaborate on any lists, embed them into your websites (al are made so you can embed them) please send us a message so that you can be the site that collects comments and gets input from different audiences. If you do so, your site of choice will be recognized permanently when the lists become long lasting resources.
While Atomic bills themselves as professional software for digital designers, they begin with simple features that can be much easier to use for non-designers as well as professionals than the typical clunky professional design software. They are very app and mobile and UX focused in their features. Per their web site, the feature tools for interface design, prototyping, version control and collaboration. Having not tried it, we're not sure if it will work for the "non-designer". Even from the start of it's website name (ending with an io) it seems heavily slanted towards creating IoS apps. However, you can use any Mac or PC, tablet or mobile to work on the project. It's included currently on the list because the raves about it are so high. It appears to have a lot of pull for its ability to involve collaborative design. Look for an article about Atomic after we try it and based on a fascinating online chat we just had with one of their executives!
Features Include:
EXPLORE INTERACTIONS
Design for any platform with interaction triggers and gestures such as swipe, hover, double tap and more.
CRAFT MOTION
Create magical automatic transitions, then craft individual elements using the advanced motion timeline. Preview the results instantly and iterate quickly.
PREVIEW ON YOUR DEVICE
Feel your prototypes in action on any device – simply grab the shareable link and add the design to your home screen.
SEE YOUR HISTORY
Iterate fearlessly knowing you can easily rewind time. Slide back through your changes to create a new version from any point, or help others understand your design decisions.
DESIGN COLLABORATIVELY
Invite your team and change how you work together on the same projects and design files – think Google Docs for design.
GET INSTANT FEEDBACK
Easily share your prototypes with a link, then gather timely feedback and comments, all in one place.
$15/ Month
$25/ Month
$35/ month also get
See how Cacoo makes diagrams easy to create, easy to share, and fun to work on. It's geared particularly for those who are already using google apps and google drive- download Cacoo from the chrome webstore and start making free diagrams right away. Like with other google apps, you can decide who you share with and what they can do with that shared role; you can also find earlier versions.
You can download free stencils, templates, wireframes and icons. You can also upload not only photos but Viseo and other multi-media.
Collaborate by giving feedback right in the editor. In fact, over actual creation of templates and prototypes, it appears the main focus of Cacoo is on the ability to share.
Like with most google apps, you can easily share with links and embed whatever you choose wherever you choose. In addition, you can save diagram sheets as PNG, PDF, PPT, PostScript, or SVG files.
Pricing
Free
Plus
GET FIRST 2 MONTHS FREE if you subscribe annually
Business
GET FIRST 2 MONTHS FREE if you subscribe annually
Concept inbox is a collaboration platform for creative teams and related stakeholders that integrates with many of the free and other tools included in this and others of our lists. Whether you are a designer, product manager, marketer or architect Concept inbox makes collaboration with your team and clients easier than ever and streamlines the creative process.
Like any collaboration tools, you can provide feedback and annotations aka notes in real time.
Prototyping is interactive so you can use gesture movements and other interactivity as if the prototype was live (but not on free.)
This takes a number of your collaboration apps and integrations to the next level by adding in the visual elements to Basecamp, Flow, Flowdock, GitHub, Hipchat, Jira, Redbooth, Slack, Teamwork and Trello. This also integrates with both dropbox and google drive.
For (in Euro's) 15- 99 a month you can:
Deekit is a whiteboard designed for online editing. It is an unlimited canvas for you and your team to draw, write, edit and add other content. Together, in real time. Easy to use whiteboard for remote teams to share ideas, brainstorm together, discuss complex problems, product and business planning and much more.
Examples given by Deekit for how to use their functionality include:
It's hard to believe with all of this research that we missed the app that over 1 million people use for their diagramming and other visual needs: Visio(TM) is completely free (no strings) and has more features than some of the premium pay options. It is fully integrated with Dropbox and so integrated with Google Docs that you can create an add-on in your google docs and while you are writing can add in a graph, diagram, wireframe or others. It's available online, as a chrome extension, or as an app for your mobile device. Draw.io is online diagram software / flowchart maker, built around Google Drive(TM), that is designed to replace Visio(TM) in your Google Drive based office setup .draw.io enables you to draw flowcharts, org charts, wireframes, UML, mind maps and more, then save them to your Google Drive. It uses the Google Drive Real Time collaboration functionality, so multiple users can work on the same diagram simultaneously.
draw.io is permanently free for all personal Google accounts, as well as Google for Educational accounts and for charitable usage.
It's surprisingly packed with features including:
Shapes needs its' own category
The key advantages of draw.io for a company basing their cloud storage strategy on Google Drive are:
This tool is a bit off of our list, but was entered by the public, and we love public engagement. It's still within the area of the steps you need to take when going from idea to commercialization, and, well, it also sounds interesting:
"A mobile user's first encounter with an app makes all the difference. Mobile professional know that approximately 80% of users abandon newly downloaded apps within the first three days. Elasticode's mission is to change that statistic by helping mobile app owners create and deliver personalized mobile onbording experiences. By creating an engaging onboarding process, mobile app owners can boost retention and engagement rates. Elasticode's solution allows to personalize the onboarding process based on download source, user behavior & other parameters. Anyone can use this solution, as it does not require any coding skills and offers dozens of ready-made templates to choose from. In addition, in order to implement changes to an app there is no need for end user updates or or App Store approvals. Pricing varies from free plans to custom ones."
This is an article rather than one app that shows ways that you can do rapid prototyping (with a slant for SAAS or cloud apps) for no cost. Within the post in addition to solutions, the author provides general ideas for example: think about the whole picture of the idea, your customers, channels etc.
Solutions Suggested:
Open Source and Mainstream Software
Google
Shopify Amazon or Squarespace for ecommerce
CMS and Website programs: like Magenta, Drupal or Wordpress
Starter Apps
Apps that have basic architecture to get you going faster for example:
Google Apps
Rails Composer for Ruby on Rails,
Mean.io when you want to develop in NodeJS,
Zend Skeleton application for PHP developers,
Android Kickstarter
Twitter Bootstrap
Looks good "out of the box"
useful components like nav bars, carousels and forms and responsive design
alternatives: Zurb Foundation
Git Repository
Git Hub - open source code
Bitbucket offers GIT project repository for free for up to five users
Sourcetree- free Git client by makers of BitBucket
Heroku
one of the first Platform as a Service (PaaS) providers.
Originally focused on the Ruby on Rails ecosystem, Heroku matured and now supports many languages and frameworks
Alternative PaaS include Cloudfoundry and OpenShift
Integrated Analytics
Google Analytics
As it grows add APIs like Google Analytics Event-API
Be sure to setup some "goals" and "conversions" to track your progress
Alternatives: Piwik (open source web analytics), Kissmetrics and a ton of others
Creation by integration
Look at areas already created that all applications needs such as: User account and password management, sending emails, billing, storing data, etc
search on GitHub for projects that already do this or look for existing services that can take care of that
This is inspired by an article by Nick Boucart in 2013. As a technology adviser in software engineering Nick facilitates companies on improving their software engineering capabilities. His interests include agile software development, software testing, start-ups, cloud computing and (community driven) innovation. He is co-author of "The Art of Software Innovation - Eight Practice Areas to Inspire your Business", one of the first innovation books specifically aimed at software companies.
Please help as we add to this towards a resource guide on tools and tricks for creating prototypes, mockups, presentations, wireframes, UI, UX and other forms of multi-media created by non-designers for the most people to learn!
Transform your Web & Mobile (iOS, Android) designs into clickable, interactive Prototypes and Mockups. Share and Collaborate on them with others. Get it FREE forever! Design driven card collaboration and project management. Upsells within app .Free Web & Mobile Prototyping (Web, iOS, Android) and UI Mockup Tool |
This offers design for web but is heavier towards the mobile apps functions to create an interactive wireframe. JustinMind runs as a download offline and you can update it monthly or more frequently if you want. JustinMind is so packed full of features, it's hard to believe it starts with a free for life version.
Works with All Screens
Justinmind Prototyper provides you with the best design solution to prototype feature-rich mobile apps, websites, web products and/or enterprise applications, and more. Check out the collection of pre-designed widget libraries to start prototyping right away. In addition to prototyping for the web, it is very app heavy in features for Apple, Android, Windows 8 and 10, Google Glass, Apple Watch, Blackberry and Windows Phone.
From Clickable Mockups to Fully Functional Prototype
Quickly take your design to the next level. Justinmind Prototyper allows you to share and test designs that run on real devices, and make your wireframe look and feel like the finished application to get a complete sense of your experience.
Code Free
Justinmind Prototyper lets you create interactive wireframes with interactions, animations, and even data without ever having to worry about code. From start to finish without any technical expertise or programming knowledge; it is the perfect tool to visualize designs before moving on to coding.
And More
500+ WEB AND MOBILE WIDGETS
TEST ON DEVICE
Use the Mobile Apps to experience your mockup live from any iPhone, iPad, Android device. It will look, work and feel just like the real thing.
WEB INTERACTIONS AND MOBILE GESTURES
Define the details of your experience with smart behaviors and rich interactions. Test your design with users and get genuine reactions.
SHARE TO GET MEANINGFUL FEEDBACK
Publish your entire wireframe experience online and get feedback and reviews from users and customers.
FORMS & DATAGRID SIMULATION
Design smart forms and data grids that you can test instantly. Enhance them with advanced behaviors, add conditional navigation, and personalize the experience with your own data.
And see their full features list for even more
Pricing
Just In Mind uses a the Electronic Software Distribution (ESD) model. Consequently, software is available only via HTTP download. This means it can be used offline with only an update online required once a month if selected to do so that minimally. If you switch computers, you add in your license key and that will enable you to use Just In Mind on your new computer. The pricing per user is based on the computer itself since it's downloaded software.
Free for life version
Anyone can get a free 30 day trial version which if you don't upgrade transfers to a free for life version. There is a pay as you go for features within the free for life version. It's unclear which features are paid and for how much until you try them.
Professional version
$228 a year (aka $19 a month if divided out) or $29 a month ($348 a year) if paid as you go without contract. This includes "all the features you love." Again, unclear which features are free or an up-sale within the free version.
Enterprise
Includes All the PRO features plus:
Perpetual license
a one time per user fee including one year of free upgrade is $495 per user (one computer and one laptop or device) and then $99 a year if chosen for additional upgrades.
Lucid offer two products that work with Google Drive integration for both Mac and PC.
With over 5 million users, Lucidchart is a leading solution for visual communication. Online flowcharts, diagrams, UML sketches, and ER models have never been easier. Lucid chart basic is about $7 a month, pro is $12 a month and team for 5-100 users starts at $30 a month. To do wireframing, mockups, revision history or presentation mode, you will need at least the pro version. Team includes shared templates and images and google apps. Lucid Chart Categories includes:
A difference with the wireframe templates, for example, is that you can get one for: blank, coupons, google search, hulu, instagram, LinkIn profile, paypal, twitter, wordpress blog, youtube and zendesk all in templates already. Lucid chart also runs on the cloud, is visio compatible, and fully integrated with google apps, confluence and JIRA. You can pull contents for your diagrams from sources like YouTube, Dropbox and Facebook. When you are finished, you can publish your flowchart as a PDF or image or directly embed it into your webpage or post directly to your social media platform.
They also have "popular use cases" which include examples like floor plans, iPhone mockups, mind map software, site map creator, rack diagrams, value stream maps, etc.
Lucid Press (www.lucidpress.com) is an online option instead of InDesign at a much lower price point and for those who aren't already on the Adobe Train. Lucid Press Pro is $19.95 a month and includes the embed of documents, custom fonts and document analytics. Lucid Press has some really easy to use social media templates including all of the majors: facebook, Google Plus, Instagram, LinkedIn, Pinterest, Tumblr, Twitter and YouTube. For Print, templates include brochures, business cards, flyers, postcards, letterhead, newsletters, magazines, photo books, posters and reports. (any of these can embed online, but flyers, invitations, newsletters/magazines, photo and video books and reports have their own online versions also).
MindMup is a very simple and completely free mind-mapping software that integrates heavily with Google chrome users. It does exactly what it promises- it's an easy to use mind mapping system, not for full prototyping or other uses. This makes it very easy to use and straight forward (and free). Some of the features include:
You can now with MindMup 2.0 use a free story board feature which enables you to convert your mind map and related notes into a story board worthy of being a presentation. For more information see: http://discover.mindmup.com/storyboards
MockFlow is an online tool that is divided into a series of applications that focus on different features of the mockup process and include:
Pricing
1 basic user license Free- Basic License, $19/Month Premium License `1 user,
Cloud storage 100 MB 25 GB
Support Online Knowledge Base and Tutorials Email Support
Additional at $39/ Month Team License:
Sample Changes from Free to $19 to $39 per month
Wireframe Pro
Website Pro
Banner Pro
Timeline
Mockingbird helps you you create and share clickable wireframes. Use it to make mockups of your website or application in minutes. Free for the first project, $9/month for 2 projects up to $69/month for unlimited projects.
Mockplus:
A simple, code-free, easy-to-use prototyping tool that allows you to totally focus on the design instead of spending time on learning the design tools. Almost all of the features are free with the exception of exporting and printing. Here are some of the full packed features (available for IoS and windows).
Fast
Creating an app prototype page can be done in just five minutes.
Allows you to preview and share designs on mobile phones in no time. No USB cable or remote publishing required.
“Group” feature: combine components to create a customized component, which can be further edited, ungrouped or nested again.
Page and component libraries make you even more productive.
Clone pages and components with just a single click. Masters make the changes applied globally across your prototype (coming soon).
Simple export options allow you to export your design to images or HTML rapidly.
Simple
Mockplus is a code-free and easy to learn tool. Just focus on your design rather than the tool.
Link your pages together with a drag-and-drop option. Creating interactive pages is easier than ever.
Create interactive components effortlessly with simple drag-and-drop. Anyone can do it.
Mockplus comes with advanced interactive components (coming soon). To complete your interactive design, all you need to do is drag-and-drop the built-in components.
Components and Icons
Almost 200 pre-designed components let you work even faster and easier.
Mockplus provides more than 400 icons, with even more coming soon. It is more than enough to create your prototype. If you can imagine it you can create it.
With adjustable settings, the newest “TopBar+List+BottomBar” components allow you to easily create an App page.
A generous amount of markup components allow you to add markup to your prototype. Any component you want can be set as markup.
In addition, Mockplus is all in one and has a sketch feature. To support the developers or get the export features, the premium version of the app is only $6.50 a month.
Real-time virtual work space overview of chat, task management tools, document annotations, screen recording, instant meetings, and 3rd party integrations. Free for many features, $12 a month for extra features. (photo saved on features with pricing.)
Noodl, a design tool for interactive experiences. It is geared towards making apps in real time. You can start with a wireframe and add in the user experience, interactivity, photos and more, and then watch how it works in real time on the same screen. It is a free tool that includes having a chrome app extension and the ability to attach connected devices and make them work while you are working on the development.
Pencil is built for the purpose of providing a** free and open-source** GUI prototyping tool that people can easily install and use to create mockups in popular desktop platforms.
Easy GUI Prototyping
Pencil provides various built-in shapes collection for drawing different types of user interface ranging from desktop to mobile platforms. Starting from 2.0.2, Pencil is shipped with Android and iOS UI stencils pre-installed. This makes it even easier to start protyping apps with a simple installation. Popular drawing features are also implemented in Pencil to simplify the drawing operations.
Built-in Shape Collections: Starting from 2.0.2 Pencil has even more shape collections included by default. The list of built-in collections now includes general-purpose shapes, flowchart elements, desktop/web UI shapes, Android and iOS GUI shapes. There are also many other collections created by the community and are distributed freely on the Internet. You can easily grab a collection and install it into Pencil with a simple drag-and-drop operation. Some of the stencil collections that you can try are collected in the download archive.
Diagram Drawing Support: Pencil now supports connectors which can be used to "wire" shapes together in a diagram. A collection of flowchart shapes are also available for drawing diagrams.
Exporting to Different Output Formats: Pencil supports outputing the drawing document into different types of formats. You can have your drawing exported as a set of rasterized PNG files or as a web page that can be delivered to the viewers. Pencil also supports exporting documents into popular formats including OpenOffice/LibreOffice text documents, Inkscape SVG and Adobe PDF.
Easily Find Cliparts from the Internet: Pencil has a clipart browser tool that integrates with OpenClipart.org to let users easily find cliparts by keywords and added them into the drawing by a simple drag-and-drop operation. Clipart listed by the tool are in vector format and hence good for users in scaling to appropriate sizes.
Inter-page linking: Elements in a drawing can be linked to a specific page in the same document. This helps user define the UI flow when creating application or website mockups. Linkings defined in a document are converted into HTML hyper-links when the document is exported into web format. This process creates an interactive version of the mockup in which viewers can see a simulated flow when clicking on the UI elements.
Pidoco is a powerful web-based prototyping software for rapidly creating clickable wireframes and interactive UX prototypes for web and mobile applications. $14.40/month for 2 projects up to the Platinum of 100 active project for $249/ month.
Wireframes
Prototypes
Collaboration
Usability tests
Exports
Mobile apps
Templates
Tangible UX
Integrated API
Software-as-a-Service
Living Labs has saved for you (above) some of our favorite new views of Proofhub bolt over the previous proofhub- namely the full projects section view and the very personalize just my projects view.
Over the past months, proof hub online project management software for teams has been rolling out proofhub bolt. They have been doing so in an interesting way by using medium for new features and updates. ProofHub helps you manage projects easily with features like task management, file sharing, gantt charts, group chat, discussions and many more Bolt Adds a whole new level of customization, a new visual interface, and the ability to see projects that are only your own all the way to folders of all parts of a project.
Prices goes from $20/ month - $150/ month (no extra charge per user)
All pricing includes:
Enterprise Level ($150/ month) includes
ProtoShare is the only cloud SaaS that I've been able to find that creates mockups, wireframes and prototypes for websites, mobile, applications and even presentations for the non-designer. Yes, you can use the Adobe suite is you know how to make a wire frame from scratch, but ProtoShare is all drag and drop. For those with limited needs or who want to try the idea, there is a free google app that offers a limited version of the website model. The web model works on both Mac and PC, and offers an editor role as well as a number to unlimited reviewers.
We live in a visual world now. This gives you an opportunity to have clear specifications with a mobile design and/or development team, show stakeholders, community members and clients (or prospective clients) from wire frame to a full mock up before you go into the hefty costs of development. It also enables all kinds of UX testing including "A/B" testing, versioning at the professional level of service, and many other ways you can use this. If you are raising money, you can build a visual of what you need funds to develop which is much easier for potential investors to grasp than web specifications.
The cost is per editor role per month, and you can change who has the editor role to cut costs. So, for example, if you are a solopreneur who is working with contractors around the world, you could give your designer the editor role when he/she is in that phase, and then move the editor role to your developer. The plans, which include cloud storage, run from $19 to $59 per editor per month- the higher the plan you get, you can end up with unlimited reviewers on unlimited projects.
A quick and easy example of team collaboration on an endless board. Sign up for free: https://realtimeboard.com Available as a free chrome app. It is free or at least free to start. It takes you all the way through from idea to collaboration to full mock ups. Templates available for different uses.
Free
Team - $50/ month or $420/ yearUnlimited boards for 5 users
up to $500/month or $4,200/year for 50 users, then contact for enterprise
Make your apps come to life with click-through prototypes. Code-free, quick interactive prototypes for web and mobile (iOS, Android and Windows) apps from your static design screens. Get your free account at savahapp.com The Savah team writes about the latest trends in UX, prototyping and design collaboration. Please visit savah blog at savahapp.com/blog.
SnapUp is an online wireframing tool that lets you create quick wireframes and mockups. World class sharing and collaboration tools make it easy to work with teammates and clients. It's in free beta and meant for fast and easy wireframing. You can still share, collaborate and create links- it just focuses on the basics of easily getting a wireframe up and going- what many non-designers and designers want exactly- simple.
A great article in Creative Bloq about the 20 most often used wireframe - design software or apps for designers. Some of them are the same as our mix. Others are not on our list because they appear too complex, but that level of robust may be exactly what you are looking for. We've read this article many many times. With more wireframe tools to choose from than ever, we select the pick of the bunch.
Wireframe any user interface quickly and easily
Choose from hundreds of UI elements & patterns for web, iPhone, Android, and more.
With simple drag-and-drop, add any icons, images, and custom UI elements to any mockup.
Mockup pixel-perfect UI Design
Design hi-fi mockups in UXPin, or import layered designs from Sketch and Photoshop.
The graphic design editor also lets you customize typography, UI elements, backgrounds, and more. Add your touch of genius to any design.
Prototype realistic User Experiences
With a few clicks, transform any wireframe or mockup into a fully-interactive prototype. And if you import from Photoshop or Sketch, we preserve all layers for prototyping.
Unlike other popular prototyping tools, we provide dozens of advanced interactions and animations.
Real-time collaboration & presentation
Share links and gather feedback from teammates & clients — no account required.
Present projects in real-time with screen sharing, cursor tracking, and voice calling — no phone or VOIP required.
Design together, at the same time. It's like Google Docs for design.
Built-in, native usability testing for any design
Support your design with the most convincing evidence from users.
Create tasks, then host a testing session. Record clicks, screens, and facial reactions. Generate video clips to show stakeholders.
Note: this is still an experimental feature.
Manage your design process and projects with ease
Comments act as a quick task list. As you mark them completed, any team member can be updated in email.
Keep designs and documentation together. Upload project plans, product requirements, style guides, or any other files.
Plans average $20-$30 a month.
$19/ month/ USER
$29/ month/ USER Also get:
$49/ month/ USER also includes:
Stay tuned as we merge our numerous multi-media properties into Living Labs. Lists will be one foundation of the thousands of curated resources, products and services offered for Baby Boomers, pa...
