Protyping Tools
Contents
- 1 Adobe Xd
- 2 Axure
- 3 Balsamiq
- 4 Bubble
- 5 Cacoo (tbd)
- 6 Figma
- 7 FlutterFlow 2.0
- 8 Framer
- 9 Gliffy
- 10 Helio (tbd)
- 11 Hotgloo (tbd)
- 12 InVision
- 13 Jumpchart (tbd)
- 14 Mockflow
- 15 Lunacy
- 16 Marvel (tbd)
- 17 Miro
- 18 Mockplus
- 19 Origami Studio (tbd)
- 20 Pencil Project
- 21 Pidoco
- 22 Proto.io
- 23 Sketch
- 24 UIZARD
- 25 UXPin
- 26 Visily
- 27 Webflow
- 28 Wireframe.CC
- 29 Wirefy (tbd)
Adobe Xd
- Who describes it?
Laura S & Julia
Update 07.06.21: Lena & Nico
Update 30.06.23: Helena & Moritz
- Adobe Xd has been discontinued & sunset and is no longer available as a single product
- It is still part of the complete Adobe Creative Cloud, but therefore very expensive
- Price
Student: ca. 20€ / month --> after 1 year 30€ / month Standard: 61,95€ / month
- Link
https://www.adobe.com/de/products/xd/prototyping-tool.html
- Description
powerful tool to create interactive prototypes
- links to enable realistic 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
- Limitations
- only one document
- can only be shared with one further person
- limited exports
- less cloud storage
- Real-time view is not supported via USB on Android
- Font's aren't displayed correctly on different devices
Axure
- Who describes it? Grace
- link https://www.axure.com/
- description
This platform lets you build advanced, interactive prototypes like click-throughs, animations which helps to create realistic models of websites or apps. It can be a bit complex to learn, but it’s pretty flexible. You can share prototypes easily and get team feedback directly within the app.
- usage conditions
Axure offers a 30-day free trial, then requires a subscription. The trial has full features, but after it ends, a license is necessary for most advanced tools. The subscription is $29 per month for an individual account and $49 for a team account.
- evaluation
It is really good for building interactive, high-quality prototypes that act like the real app or website. For experienced designers, it’s a fantastic tool because of its realistic features and animations, which help test ideas deeply and share clear concepts. But it’s not very beginner-friendly because it has many things you have to learn to use properly. For simple projects, it’s a bit much, but for bigger, more detailed prototypes, it’s very effective.
tutorial video- https://www.youtube.com/watch?v=vzV2d2KxzWI
Balsamiq
- Who describes it?
- 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 for 2 projects, $49/month or $490/year for 20 projects, $199/month or $1,990/year for 200 projects
- 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 (tbd)
- Who describes it?
- link https://cacoo.com/
- description
- usage conditions
Figma
- Who describes it?
- Ferdi, Pınar, Joyce, Nico
- Update: Hakan Mural, Duru Sıla
- Even more stuff coming soon from Saeid, stay tuned
- 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.
- - It is web based, easier usage as a collaborative space for your team.
- - DevMode (development), a new function for the design development, is now on the same page with the design function, which makes it easier to do your project and switch it to the other part when needed.
- - You can connect your designs to component code and developer documentation through integrations with Jira, GitHub, Storybook.
- -New extention, VS Code, allows you to navigate and inspect design files, collaborate with designers and track changes without leaving your code editor.
FlutterFlow 2.0
- Who describes it?
- YouniGo Group
- 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
Framer
- WHo describes it?
- Elizabeth
- Link
- https://www.framer.com/
- Usage conditions
- 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.
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.
Helio (tbd)
Fast user research and testing for product design teams.
- Who describes it?
- Description
- describe it here
- Usage conditions/Pricing
- Evaluation
- add Pictures here
Hotgloo (tbd)
- Who describes it?
- tbd.
- Link
- https://www.hotgloo.com/.
- Description
- .
- Usage conditions
- .
- Evaluation
- .
- add Pictures here
InVision
- Who describes it?
- Ferdi, Amelie, Pınar
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 (tbd)
- Who describes it?
Elias
- Link https://jumpchart.com/
- Description
Jumpchart is a web design and content planning tool that helps teams organize website projects by focusing on structure and content before moving to the design phase. It allows to create and visualize site architecture, manage content, and collaborate with team members in real-time. Features include sitemaps, page-by-page comments, and export options for CMS platforms like WordPress. It's designed for web developers, content creators, and project managers to streamline the planning process and ensure cohesive team collaboration.
- Evaluation
- User-friendly interface for planning and structuring web projects
- Enables real-time collaboration, ideal for teams
- Export options, e.g., to WordPress
- Includes version control and page comments
- Focus on content planning and sitemap creation
- Limited projects and pages in lower-tier plans
- Cloud-based, no download required
- Also designed for mobile devices
- Intuitive and user-friendly
- Usage conditions
- Selecting an annual plan usually results in savings compared to monthly billing. Jumpchart offers discounts for annual payments
- Higher plans not only provide more and larger projects and storage but also advanced features like WordPress export and versioning, making them more suitable for larger teams and complex projects
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
Lunacy
- Who describes it?
- Hakan Mural , Duru Sıla
- Link
- https://icons8.com/lunacy
- Description
- Vector graphic design tool with many icons and UI kits. Lunacy is a next-gen vector graphic app for UI, UX, and web design. It has everything you are used to in other similar apps and goes beyond. Created by designers for designers to focus on the workflow and minimize distractions. No more wasting time surfing the internet for graphics or switching apps to remove backgrounds, or thinking placeholder texts! Lunacy has it all and even more.
Key features include: — real-time worldwide collaboration — tons of built-in graphics — powerful AI tools — Figma & Sketch support — both online and offline modes — low system requirements
- Usage conditions
- Lunacy is absolutely free for both personal and commercial use. Lunacy runs on Windows, macOS, and Linux.
- Evaluation
- Includes full sketch format compatibility
- It can handle and edit huge sketch files
- High-quality assets included: Icons, Photos, Illustrations
- You can export CSS and XAML code
- Rich Boolean Operations for better designs.
- It has powerful AI tools.
- It is web-based, offers Cloud storage and offline usage, which you can access anywhere. Easier for group projects.
Marvel (tbd)
- Who describes it?
- Amanda
- Link
- https://marvelapp.com/.
- Description
- Marvel is a web-based design and prototyping tool that allows users to create interactive prototypes and mockups for websites, IOS and Android mobile apps, and Apple smartwatches. The tool includes plug-ins that allow users to turn sketches or designs into clickable prototypes that simulate the look and feel of a real app or site. It supports multiple file formats and integrates with Sketch, Figma, and Photoshop tools. Marvel also includes features for user testing and feedback collection.
- Usage conditions
- Platform Compatibility: Accessible via web browsers on Windows, macOS, and Linux. It also has mobile apps for iOS and Android.
- Pricing:
- Free Plan: Limited features, including 1 user and 1 active project.
- Pro Plan: Paid plans start from around $12/month, with access to more projects, team collaboration features, and advanced prototyping tools.
- Enterprise Plan: Tailored for larger organizations with features like team management, analytics, and custom branding.
- Technical Requirements: No installation is necessary for the web version.
- Evaluation
- .
- add Pictures here
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/
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.
Origami Studio (tbd)
- Who describes it?
- Link
- https://origami.design/.
- only available on Mac
- Description
- .
- Usage conditions
- .
- Evaluation
- .
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.
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
Proto.io
- Who describes it?
- Helena & Moritz
- Link
- https://proto.io/.
- Price
- - 15 day free test service
- - very limited free version for lifetime
- - 29-199€ / month (depending on amount of project's & user)
- Description
- - online tool
- - available aspect ratio's for all devices (Phone, Tablet, Smart Watch, PC)
- - elaborate Tutorials
- - import option from Sketch & Photoshop
- - multiple editors online possible
- Usage conditions
- - cant be used offline
- - specialized on Apple (Android possible)
- Evaluation
- - existing Presets (Screens) make starting easy and allow reverse-engineering
- - All in One Tool since Usertesting & Validity are included
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
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
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
Visily
- Who Describes it?
- tbd
- Link
- https://www.visily.ai/
Webflow
A visual way to build the web
- Who describes it?
Max, Theresa, Liubou (June 30th 2023)
- Description
- Build custom blogs, portfolios, ecommerce stores, and more with a flexible CMS.
- Take control of HTML, CSS, and JavaScript in a visual canvas.
- Webflow generates clean, semantic code that’s ready to publish or hand to developers.
- Design & develop visually.
- Usage conditions/Pricing
- Webflow is free for students and educators
- Evaluation
- Can be used via phone and laptop;
- "Best applicaiton for launching a basic website”
- Allows to create interactive designs and fully customise every structure of page
- Start for free, learn how to navigate and use the tools- similar process (Questionnaire in the beginning to express your webpage design experience is a plus)
- add Pictures here
Wireframe.CC
- Who describes it?
- Vedanti
- 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
Wirefy (tbd)
- Who describes it?
- link https://getwirefy.com/
- description
- usage conditions
