Protyping Tools

From
Revision as of 11:56, 26 May 2020 by Vanessa.b (talk | contribs) (Balsamiq)
Jump to: navigation, search

Balsamiq

  • Who describes it?

Group 1

  • link

https://balsamiq.com/

  • description
  • usage conditions
  • evaluation

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

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

Melina

link https://www.uxpin.com/

Image 1.png

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 Can create wireframes. Work on multiple device Work offline Tutorials available

Conditions Both for Mac, windows users and mobile options too. Have a free trial, 3 different pricing ==

Origami Studio

Valeria


https://origami.design/


Originally created by Facebook for team design, Origami allows you to preview the live mockup on your phone in real time, show off your designs in presentations, and allows Sketch and Photoshop designs to be imported into the app. Projects can be preserved, linked, and animated as needed.


It is free and both iOS and Android users can access it.

InVision

Radhika

- Link https://www.invisionapp.com/

Pencil Project

Who describes it? Laura/Group 2

Link https://pencil.evolus.vn/

Description A free prototyping tool that can be used to create (very simple) mockups. Offers wireframe templates for android and iOS, shape collections, buttons and diagrams.

Usage conditions It is open-source, so it can be downloaded and installed for free without restrictions.

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

David

Pidoco

Who describes it?

Daniela

link https://pidoco.com/en

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.

Axure


Frame Box

Wireframe.CC

Cacoo

Jumpchart

Mockflow

  • Who describes it?: Victoria
  • 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 ect. MockFlow makes real-time design collaboration easy with its built-in sharing feature and team chat.

  • usage conditions

Basic: Free

  • 1 user

1 project in each tool Comes with a few restriction TeamPack: $39 per month

  • 3 or more users

Scaling cost-per-user All collaboration features Best suited for SMBs and design agencies

Wirefy

Gliffy