Protyping Tools
Contents
- 1 Adobe Xd
- 2 Axure
- 3 Balsamiq
- 4 Bubble
- 5 Cacoo
- 6 Framer
- 7 Frame Box
- 8 InVision
- 9 Jumpchart
- 10 Mockplus
- 11 UXPin
- 12 Wireframe.CC
- 13 Pencil Project
- 14 Sketch
- 15 Miro
- 16 Pidoco
- 17 Mockflow
- 18 Wirefy
- 19 Gliffy
- 20 Figma
- 21 UIZARD
- 22 FlutterFlow 2.0
- 23 Lunacy
- 24 Marvel
- 25 Hotgloo
- 26 Origami Studio
- 27 Proto.io
- 28 Webflow
- 29 Template for - Yet another prototyping Tool
Adobe Xd
- Who describes it?
Laura S & Julia
Update 07.06.21: Lena & Nico
Update 30.06.23: Helena & Moritz
- link
https://www.adobe.com/de/products/xd/prototyping-tool.html
- description
powerful tool to create interactive prototypes
- links to enable realisitic simulation (e.g. navigating through pages and menus, or pressing buttons)
- Content-Aware Layout
- Responsive Resize
- Vector drawing tools
- Precision design tools
- App integrations
- compatible with Adobe Photoshop, Illustrator and Sketch
- audio and sound effects
- real time IOS and Android preview
...
- usage conditions
helpful tutorials
account for private users - for free
limitations:
- only one document
- can only be shared with one further person
- limited exports
- less cloud storage
Axure
- Who describes it?
- link https://www.axure.com/
- description
- usage conditions
Balsamiq
- Who describes it?
- Group 1, Joyce, Mara
- Link
- https://balsamiq.com/
- Description
- Low fidelity prototyping tool, it focuses on structure and content more than color and details. Very fast at generating ideas, and easy to edit.
- Usage conditions
- 30 day free trial / payment starting at 9$ a month or 90$ a year
- Evaluation
- Good starting off point and easy to use. More simplistic design that focuses on the structure of the app, content and interactions rather than on the design and aesthetics. The appearance of the design is doodle-like, suggesting an intentionally unfinished look. It is very easy to edit and implement changes, so that you can test out many different versions and quickly arrive at the one that works the best. Could be a good middle ground prototyping tool that gets the basics done, but lacks the depth of functions and design options.
Bubble
- Who describes it?
- Joyce, Mara
- Link
- https://bubble.io/
- Description
- Easy-to-use prototyping tool that features drag-and-drop editor for creating interactive, multi-user apps for desktop and mobile web browsers.
- Usage conditions
- Evaluation
- Bubble is good for building fully-functional and scalable apps. It is easy enough for total beginners to use, especially with its comprehensive tutorial bank. Upon starting the platform, users are taken through an interactive tutorial introducing them to the basic features and functionality of the platform. The end product of using bubble is a preview of the actual app with live interactive interfaces. Bubble is a one-stop build-to-live platform.
Cacoo
- Who describes it?
- link https://cacoo.com/
- description
- usage conditions
Framer
Elizabeth
Free trial 14 days $15/ month
Runs on: OS X iOS Android Windows 10 Mobile
Description: Framer is one of the most popular prototyping tools. It’s based on the premise that with the code it is possible to prototype anything, resulting in novel and beautiful designs. It provides a seamless workflow, further complemented by device previewing, version control and easy sharing.In case you do not understand, Framer has a very well structured documentation. Also, there are plenty of how-to videos and courses on Udemy and O’Reilly about the UX prototyping tool. It offers a first-hand view of how flexible and powerful code can be. Like other tools, Framer supports Sketch, Photoshop projects, and will also preserve your design’s layers.In addition to this, Framer’s Mac App is well designed and provides live previews as you write code, which is encouraging for those who are writing code for the first time. You can also import graphics directly from Sketch, Photoshop or Figma.
Frame Box
- link https://www.framebox.org/
- Link doesn't seem to exist any more (6/7/21)
InVision
Who describes it? - Ferdi, Amelie, Pınar
Link https://www.invisionapp.com/
Description
InVision is a platform for inclusive collaboration within digital product design and development. Provides the possibility to work either for free or on team mode even in the free version. It features many different studios, each thought for a specific stage of UI. The Cloud Studio covers the stages of prototyping, and screen design, and offers a plug-in to run on either Photoshop or Sketch, called Craft, specifically thought to facilitate the design process. As for wireframing, it offers different layouts mimicking different screen layouts. It overall looks very similar to Miro in terms of available features.
Usage Conditions
Free: Up to 10 active users
- Unlimited Freehands
- Suitable for individuals and small teams
Pro: $7.95 per active user&month
- Up to 15 active users
- Unlimited documents and archive
- Suitable for pro collaborative teams
Enterprise:
- Unlimited team members
- Best for organizations
Jumpchart
- Who describes it?
- link https://jumpchart.com/
- description
- usage conditions
Mockplus
- Who describes it?
- Vanessa
- Link
- https://www.mockplus.com/?r=dpm-wft
- Description
- Mockplus comes with nearly 200 components and more than 3,000 icons to save you much time and effort on design. Drag-and-drop elements in order to build interactive prototypes on an intuitive working canvas with a clean, spacious interface. Simply scanning a QR code lets you test your prototypes on actual devices or you can publish the project to cloud and receive a shareable weblink.
- It supports multi-users working on the same project, easy markup/reviewing, and sophisticated page editing organization.
- Usage conditions
- 30 days free trial / license from $199 per year.
- Evaluation
- It is a multi-faceted tool that has a lot to offer. Very aesthetic and customizable, you can spend a lot of time playing around with all the different setting and options to fine-tune the look and feel. Definitely on the professional side, might be a little too complex for the scope of this class.
UXPin
- Who Describes it?
- Melina
- Link
- https://www.uxpin.com/
- Description
- It is code-based design tool that merges design and engineering into one unified process.
- Conditional interactions, variables, state-based animations, and powerful expressions, you can build prototypes that feel like the real thing.
- Features( Pros)
-
- Can create wireframes.
- Work on multiple device
- Work offline
- Tutorials & Webinars available
- Interactive Stateful elements( no need to duplicate art-boards)
- Security
- Code component( interactive, easy interface, fast)
- Built in libraries
- Data ( visual, easy to understand such as using avatars)
- Vector drawing tools
- Real-time collaboration(many people on same work such as GDOC)
- Features(Cons)
- The free trial is only for 14 days.
- Conditions
- Both for Mac, windows users and mobile options too.:
- Have a free trial, 3 different pricing
Wireframe.CC
Who describes it? Vedanti Shinde
Link https://wireframe.cc/#about
- Description
-
- Click and drag elements to draw
- Limited palette to avoid wasting time on decor
- Smart features vanish when you don't need them
- Wireframes for web as well as mobile screens
- Usage conditions
-
- Free version: no user accounts, public wireframes, single-page wireframes.
- Premium version: private account, private multi-page wireframes, master pages, clickable wireframes, export to PDF and PNG, revisions possible.
- 7-Day free trial, no credit card required to sign up.
- Pricing
-
- Solo: $16/month
- Trio: $39/month
- Enterprise: $99/month
- Do not recommend
Pencil Project
Who describes it? Laura/Group 2
Link https://pencil.evolus.vn/
- Description
- A simply prototyping tool that can be used to create mockups for apps and websites with collections of buttons and other shapes or cliparts from the Internet.
- Hyperlinks and Buttons can be used to navigate within the wireframes.
- The prototypes can then be exported as images, PDFs and other formats for further editing, or tested by the user in the browser.
- Usage conditions
- It is open-source, so it can be downloaded and installed for free without restrictions on Windows, Mac and Linux.
Sketch
- Who describes it?
- Shrekha
- Link
- https://www.sketch.com/
- Description
- WebSketch is similar to Photoshop in many ways, allowing you to edit and manipulate photos. Sketch’s Vector shapes easily adapt to changing styles, sizes, and layouts, allowing you to avoid a lot of painful hand-tweaking. Sketch’s fully vector-based workflow makes it easy to create beautiful and high-quality artwork from start to finish. In UI design, repeating elements is something very common: buttons, bars, bubbles — all sorts of things; and these reusable elements can be automatically copied and pasted using the sketch app.
- Runs on
- OS X
- Prototypes for
- OS X,
- iOS,
- Web
- Cost
- Free trial--
- $99 for full version
Miro
- Who describes it?
- Group yoUNIgo
- Link
- https://miro.com/login/
- Description
- White board with real time collaboration. It simplifies working on a project across distance in a team. Most students are already familiar with it and is self-explanatory. Different plug-ins are available to make prototyping even more detailed.
- Usage conditions
- Free trial for up to 3 boards, subscription costs 8$/month
- Evaluation
- Good starting off point and easy to use. It is self-explanatory and allows to work on mind-maps or other sketches in a team. However the handling and designing can be difficult as soon as more than 2 people are working on it together.
https://miro.com/templates/prototype/
Pidoco
Who describes it? Daniela
- Description
- A tool based on usability, not design
- Pros
- Interactive & collaborative - project for team work
- Share prototypes for comments and collaborations
- Possible to do mobile simulation
- Possible to do usability test
- Intuitive
- You can export prototypes as PDF or HTML
- Secure German data centers
- Easy and quick to use
- Free trial - unlimited time
- Contras
- Free trial - Not possible to archive it, Only for one project
- Usage conditions
Source CopyRight: https://pidoco.com/en/pricing?currency=EUR
Mockflow
- Who describes it?: Victoria - Update: Amelie, Ferdi, Pinar
- Link https://www.mockflow.com/
- Description: MockFlow is a cloud-based wireframe software allowing designers to collaborate in real-time on user-interface prototypes for websites and software.
MockFlow is an online wireframe software for designers planning, building and sharing work. MockFlow provides users with a large library of mockup components, icons, stickers and other shapes to quickly and efficiently build clean looking interface mockups. It allows us to draw any User Interface due to numerous wireframe components. MockFlow includes a wide variety of features and capabilities such as wireframes, sitemap, annotations, design collaboration, style guides etc.
There are several templates already available such as for a food app or a job search app. There are elements for Android as well as iPhone and devices such as the Apple Watch. MockFlow makes real-time design collaboration easy with its built-in sharing feature and team chat.
- Usage Conditions
Basic: Free
- 1 user and 1 project
Premium: $14 per month
- 1 user, unlimited projects
TeamPack:
- 3 or more users
- Scaling cost-per-user (3 users = $30 per month)
- All collaboration features
Enterprise: $160 per month
- Unlimited editors
- Full feature set for organizations
Wirefy
- Who describes it?
- link https://getwirefy.com/
- description
- usage conditions
Gliffy
- Who describes it?
Lena & Nico
- description
not very useful in basic version (see limitations below)
software to create diagrams and flow charts
reminds us of Miro
- simple drag and drop mechanism
- easy sharing via URL
- comment function to work in teams
- keep previous versions (not in free version)
- usage conditions
free 2-week trial
after that: Gliffy free basic account possible
limitations of free account:
- documents are visible (as read only) for everyone in the internet
- only one pubilc diagram
- no technical support
- no history of previous versions
- you can not import vsio diagrams
- NO UML shapes and other business shapes such as website and UI, containers, navigation, forms, icons, and wireframes
we would recommend using miro or other alternatives instead.
Figma
- Who describes it?
- Ferdi, Pınar, Joyce, Nico
Hakan Mural, Duru Sıla
- Link
- https://www.figma.com/
- Description
- Figma is a vector graphics editor and prototyping tool which is primarily web-based, with additional offline features enabled by desktop applications for macOS and Windows.
- Usage conditions
- Evaluation
- - It allows to turn static design files into an interactive experience without coding.
- - You can define subtle interactions, like on click, while hovering, while pressing a button, and more.
- - it’s device optimized
- - Can be used to observe test subjects in a research session
- https://www.youtube.com/watch?v=-sAAa-CCOcg&ab_channel=Figma
UIZARD
- Who describes it?
13.10.2021
Pinar, Joyce, Ferdi, and Nico
- Link
- Description
- Design mobile apps, web apps, websites, and desktop software
- Usage conditions
Free User
- unlimited creators
- up to 3 projects
- up to 10 screens
- only few templates
- no export
- Evaluation
- According to uizard it is easy to use - "If you can use Google Slides, Keynote, or Powerpoint, you can use Uizard!"
- can confirm - seems very intuitve also with simulations
- some really useful elements like icons, buttons, form elements
- comes with some free design patterns in different categories like card, content, dialog and more
- device frames for smartphone and laptop
FlutterFlow 2.0
- Who describes it? YouniGo App
- .
- Link
- https://flutterflow.io/.
- Description
- * Visual application builder. No need to install an application. Ü * Can be used for Android and iOs, developing is used via drag and drop.
- Usage conditions
- Free Package with lots of useful options already included
- More packages available at a cost (30$ or 70$ per month, free trial of one month possible)
- Evaluation
- used for mobile apps, important feature for us
- lots of templates, good for beginners
- you can also create your own designs
- add Pictures here
Lunacy
- Who describes it?
- .
- Link
- https://icons8.com/lunacy
- Description
- Vector graphic design tool with many icons and UI kits.
- Usage conditions
- .
- Evaluation
- .
- add Pictures here
Marvel
- Who describes it?
- tbd.
- Link
- https://marvelapp.com/.
- Description
- .
- Usage conditions
- .
- Evaluation
- .
- add Pictures here
Hotgloo
- Who describes it?
- tbd.
- Link
- https://www.hotgloo.com/.
- Description
- .
- Usage conditions
- .
- Evaluation
- .
- add Pictures here
Origami Studio
- Who describes it?
- .
- Link
- https://origami.design/.
- Description
- .
- Usage conditions
- .
- Evaluation
- .
Proto.io
- Who describes it?
- .
- Link
- https://proto.io/.
- Description
- .
- Usage conditions
- .
- Evaluation
- .
- add Pictures here
Webflow
- Who describes it?
Max, Theresa, Liubou
- .
- Link
- https://webflow.com/.
- Description
- .
- Usage conditions
- .
- Evaluation
- .
- add Pictures here
Template for - Yet another prototyping Tool
- Who describes it?
- .
- Link
- .
- Description
- .
- Usage conditions
- .
- Evaluation
- .
- add Pictures here
