The Best Mockup & Wireframing Design Tools & Apps for UI/UX Designers ｜Ariel Chang

Author: Grace Jia

Prototyping/wireframing tools are the best communication method between interaction designers, project manager, and website developers. It’s a key step of web or mobile app development process. While in principle, the design of prototypes must be a product of interaction designers, and the user-centered concept shall run through the whole product design progress. The professional perspective and rich user experience of interaction designer will directly influence the usability of the product.
So, the problem of how to complete a good prototype design that’s depending on how you choose prototyping/wireframing tools. Below are the most popular mockup & prototyping/wireframing tools & apps based on website, desktop, and mobile device.
Web-based Prototyping Tools
As a web-based collaborative program, InVision is powerful at clickable & interactive prototypes, real-time design collaboration & share. InVison is an ideal choice for high fidelity design which is always impressive. The nice features such as Invision + Sketch, Invision + Adobe could be a great helpful for designers who pursue the high-end product.
2. UXpin
UXpin puts everything for designers in a UX design platform, also, it supports to upload file seamlessly on Sketch and Photoshop. Responsive prototypes and wireframes created by UXpin can run on different devices and resolutions. In addition, this software also provides version control and iterative function, you can easily share and preview prototypes by the intuitive and real-time collaboration.
3. Marvel
Marvel is also a web-based prototyping tool with good real-time collaboration. You can simply import mockup images from Sketch or Photoshop to link into clickable interactive prototypes for different devices. Just simple drag and link, you can bring your idea to life without any code experience.
Proto.io is a very strong web app with many functions. Under the web-based environment, it supports rich gestures and touch style, such as slide, touch, zoom, press and other mainstream actions. With it, developers can create interactive prototypes for the iOS, Android and other mobile internet devices, and get feedback from users.
Some other web-based prototyping tools:
Pidoco — Online wireframe and UX prototyping tool
Mockingbird — Wireframes on the fly
Mockflow — Great design tools and collaboration services for designers
Moqups — Mockup, wireframe & UI prototyping tool for creating hi-fi wireframes
Gliffy — Mock up web pages quickly & easily with wireframes
Wireframe.cc — Minimal wireframing tool
Framer — Design tool for code needed
Desktop-based Prototyping Tools
1. Axure RP (Mac & Win)
Axure RP is a desktop application that allows designers to create, test, and share interactive prototypes. Been called as the the most comprehensive (in terms of functionality) prototyping tools, it’s an ideal desktop software for both static, low-fidelity prototypes and more sophisticated, interactive prototypes. As an extremely professional UX tool, Axure requires a steep learning curve.
2. Justinmind (Mac & WIn)
Justinmind is a flexible prototyping tool for web and mobile app prototypes and high-fidelity website wireframes. The rich gestures in Justinmind allow designer to better build gesture interaction mobile apps. Justinmind also requires a deep learning curve, such as value expression.
3. Mockplus (Mac & Win)
Mockplus is an all-inclusive rapid prototyping tool supports for the mainstream platforms of PC, website, and mobile device. The packaged interactions components and creative preview method allow designers to design and preview within minutes. It is a solid prototyping app for professional designers who want to produce high-quality prototypes but without too much long learning curve.
4. Balsamiq (Win)
Balsamiq Mockups is a rapid wireframing tool that helps you work faster & smarter. It reproduces the experience of sketching on a whiteboard, but using a computer. By comparison, Balsamiq is more focus on static and low-fidelity prototypes.
5. OmniGraffle (Mac)
OminiGraffle is a powerful design tool, it has extensive options for objects, canvases, templates, inspectors, and stencils to help designers set out to do something well, quickly. It has won the Apple Design Award in 2002.
Some other desktop-based prototyping tools:
Origami — A free tool for designing modern user interfaces (Mac)
Adobe Experience Design — The first all-in-one tool for UX designers (Mac)
Prott— A new mobile app prototyping tool built for design teams (Mac)
Principle — An animated design tool for interactive prototypes (Mac)
Mobile-based Prototyping Tools
1. POP（Prototyping on Paper) (iOS & Android)
POP is a light weight prototyping app helps designers to make sketches & screen mockups come to life on mobile devices. Simply upload your mockups and add transitions & gestures to make an interactive project.
2. Tapcase (iOS)
TapCase lets desigbers create app prototypes from hand-drawn sketches and screen mockups. It’s quite fast and easy to create interactive elements by adding hotspots, linking target screens, and picking transition animations.
3. Marvelapp (iOS & Android)
Marvelapp is a free prototyping app for mobile app, the whole design progress completed on mobile devices. Like POP and Tapcase, easily upload the prepared sketches or screen mockups, and add inbuilt transitions & gestures to make the pen & paper ideas to live.
Some other mobile-based prototyping tools:
Mockplus app — Easily & quickly preview prototypes on mobile devices by scanning QR code or input the view code. (iOS & Android)
JustinMindPrototyper — The prototype viewer for Justinmind prototypes (iOS & Android)
Mockup Builder — Super-easy prototyping and mockups (iOS & Android)
Live Wires — To quick wireframe & prototype for iPhone and iPad app (iOS)
Appcooker — Prototyping studio for iPhone & iPad (iOS)
Any of your favorable tool you think should be included in this list? Please feel free to contact me. Hope this article be useful to you great UI/UX designers!


Related Reading:

Comentarios

Publicar un comentario

Entradas populares de este blog

UI/UX Designer Skills Valued by Facebook｜Ariel Chang

Imagen
My friend Cynthia wasn’t a fan of social networking. It’s hard to find her in any online circle, except for Facebook, where she occasionally kills her time. However, yesterday she told me that she’d fallen in love with FB. On the 2 anniversary of her registration, she just logged in the community and found a video clip customized for her. In that video, her avatar was printed on a badge, picked up by a hand with dark skin and was put on table in the middle of many badges printed with the avatars of her friends, accompanied by another badge, on which there is a line, “Thank you for your accompany and not forgetting” Cynthia was deeply moved and played the video back over and over again. Facebook, a community with over 1.4 billion users, totally won her affection by its focus on users. It’s no wonder that so many designers dream of becoming a member of the social network giant. An article from my team mate:  Doris Facebook never made its  process of selecting a
Leer más

8 Steps to Amazing Microinteraction Design｜Ariel Chang

Imagen
As you already know, microinteractions are one of the hottest UX trends right now. They enhance user experience, provide important feedback, explain functions and even entertain your audience. Today, I’m going to dive a little deeper and share some tips on how to take your microinteraction design to the next level. Microinteractions — A Magic Formula? Microinteractions are such a fundamental part of website design these days, that any site without them will probably look boring and bland. We like to think of them as the magic components that add delight, create surprise, and offer something entertaining and engaging. However, creating fabulous microinteraction design isn’t always easy. You’ve got to create something practical which makes the user’s life easier. It needs to be intuitive, human and responsive. In short, if you haven’t got microinteraction design mastered by now… you really need to get on it pronto! Explaining Microinteractions Essentially, you should think of
Leer más

User Journey Vs User Flow — Differences & Similarities｜Ariel Chang

Imagen
User Journey and User Flow are two terms frequently mentioned in the product development process, they refer to two tools created to improve the product user experience. However, the differences between these two can easily mislead designers: some people think they are the same There is also opinion that the range covered by User Journey is wider than that of User Flow. Yes, they do have something in common, but they also differ from each other in many ways. In this article, I will make a comparison of “User Journey Vs User Flow “to help you understand better. 1. What is a User Journey? What is a User Flow? First let’s look at the definitions of the two terms: a. User Journey: It can also be called Customer Journey, it refers to the scenarios in which the user interacts with the product, and normally the scenarios consist of between 4 and 12 steps. Its function is mainly to assume and demonstrate the current and possible way in which the user can interact with the product.
Leer más