Protyping Tools

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 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 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

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?
• 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

https://www.framer.com/

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.

Getting started with Mockplus

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/

Miro

Pidoco

Who describes it? Daniela

Link https://pidoco.com/en

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

• link https://www.gliffy.com/

• 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

https://uizard.io/

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?

Hakan Mural , Duru Sıla

https://icons8.com/lunacy

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. Faster than Figma, smarter than Sketch. It combines the best features of designer apps to optimize your workflow and minimize distractions. Take advantage of the built-in graphics library, use powerful AI tools, and collaborate on projects with your team on several platforms simultaneously! Lunacy also offers cross-app format support, offline use, and cloud storage.

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, your projects will be saved on Cloud, which you can access anywhere. Easier for group projects.

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/.

only available on Mac

Description

.

Usage conditions

.

Evaluation

.

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

Webflow

https://webflow.com/.

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