Top 5 Desktop & Website Based Prototyping Tools

Working in the design industry, you are inevitably to do some prototypes, of course, that is also inseparable from a variety of tools. A handy tool makes a handy man. Good prototype software can greatly improve your efficiency, but each tool has its own advantages and disadvantages. There is a list of prototyping tools/apps based on browser, PC, and mobile devices. In order to better help you make the right judgments, and less detours, today I will introduce the product features of some commonly used prototyping tools.

1. Axure RP

Despite the variety of prototyping tools whose functionality and usability are constantly developing in recent years, but Axure is still the ace among these prototyping tools. It’s a very good prototyping design software on Windows, also the first choice for predesign work.

Price:

Free 30-day trial.

Pro: $289 per license

Team: $589 per license

Enterprise: $99/month

Features:

1. Renowned prototyping tool with large user population.

2. Rich video tutorials with multi-language.

3. Built-in widgets and a huge library of third-party widgets.

4. Good for making interactive prototype with complex interaction.

5. Professional training and support documentation.

Preview:

Directly press F5 to preview online, or preview via mobile device:

Export the project to HTML, and then open in Safari;

Open the uploaded project from PC through Axshare.

Export:

Support for export file types: HTML, DOCX, PNG

2. Mockplus

As an emerging rapid prototyping tool, Mockplus provides a large number of components and icons, and it’s user-friendly design helps users starting design quickly. The interaction design in Mockplus is fully visualized, that's WYSIWYG. It allows your to add page link and interaction for components with simple drag-and-drop. Simple, convenient visualization operation greatly simplifies the interaction design, also improving the work efficiency.

Price:

Free trail

Monthly subscription: $20

Yearly subscription:$119

Features:

1. Low learning curve, easy to learn for a first-time user.

2. Easy-to-use drag and drop, prototyping is fast.

3. A huge standard library of components (200) and vector icons (26,00).

4. Interaction design is visualized, adding interactivity to individual elements with simple drag and drop.

5. Comprehensive ways to preview and share your project: export to HTML, export to demo package, export to images, export project tree, publish to cloud and scan QR code.

Preview:

Mockplus supports to preview your prototypes in 8 different ways:

1. Press F5

2. Export to HTML5 view online

3. Export to HTML5 offline package

4. Export to demo package

5. Preview on mobile device by inputting view code

6. Scan QR code

7. Export to image

8. Export project tree

Export:

Support for export file types:.exe, PNG, HTML, Project tree (Mind Map, Tree View, HTML, MarkDown, XML, Text)

3. Justinmind

JustinMind is mainly focusing on high-fidelity prototyping. Compared with other interactive prototyping tools, Justinmind is more suitable for mobile device (iOS & Android) prototypes. If you want to create a complex high-fidelity prototype, you can try it.

Price:

Free 30-day trial.

Pro: $29/month (billed yearly: $19/month)

Features:

1. Gesture interaction

2. Custom components and libraries

3. Rich interactions and animations

4. Conditions and variables

5. Team prototyping and version control

Preview:

1. Preview online

2. Preview on device

Export:

Support for export file types: HTML + JS, Word, PNG, Navigation map

4. Invision

InVision is a web-based interactive prototyping tool. It can easily achieve a very good collaboration between team members, gather feedback to help designers quickly design product models, manage design teams, and online collaboration assistance. The static pages, mobile app wireframe can be quickly turn into clickable, interactive prototypes.

Price:

Free - 1 prototype

Starter - $15/month, 3 prototypes

Professional - $25/month, unlimited prototypes

Team - $99/month, unlimited prototypes

Enterprise - Unlimited prototypes, plus advanced features

Features:

1. Easy to learn.

2. Quick and intuitive to add screens and create hotspots.

3. Support for gestures and transitions.

4. Sharing and commenting system are good for collecting feedback.

Preview:

Via browser on PC or mobile devices

Share:

Prototypes can be share through URL, Email, SMS, etc., you can also download the ZIP prototype package or PDF

5. Proto.io

Proto.io is a very powerful web app with a lot of features. However, it needs to set by dragging and dropping of each step, click the button, and adjust the value in the options. Sometimes it’s a bit difficult to find some of the settings you need.

Price:

Free 15-day trail.

Freelancer: $29/month, 1 user, 5 active projects

Startup: $49/month, 2 users, 10 active projects

Agency: $99/month, 5 users, 15 active projects

Corporate: $199/month, 10 users, 30 active projects

Features:

1. A huge standard library of components.

2. Support for adding interactivity to individual elements.

3. Support for importing designs from Dropbox.

4. Support for Sketch and Photoshop plugins.

Preview:

Preview through HTML or send SMS to mobile

Export:

Support for export file types: HTML, PNG, PDF

Original Post at Mockplus.com.

What is a Full Stack Designer in 2017? Will You Be One?

Compared to the Full Stack Designer, we seem to be more familiar with the Full Stack Developers. So what is full stack designer exactly? Can we simply think he/she is a versatile designer?

In the past, designers and developers have a clear role assignment. They rarely do the both at the same time. While with the changes in product design and the evolution of team collaboration, many web designers are able to manage web developing and UX design at present.

So there comes a question: what’s the character of the so-called full stack designer? He/She is only a designer? Also coding while being a designer? Or he/she is a designer as well as a web developer?

What is a Full Stack Designer?

In fact, the concept of Full Stack Developer came out earlier than the Full Stack Designer. But full stack does not mean to do all. Specifically, it refers to a person who masters muti-skills and he can use them to independently complete a design or product development.

That means that a truly full stack designer can build a basic conception of a project, and complete the whole design and development related works. Such as the wireframes/prototypes design, visual design, and the front coding, JS / jQuery, etc.

The Emergence

The come out of the full stack designer is not accidental according to the current situation. With the outbreak of mobile Apps and the arrival of the entrepreneurship tide, there are many small development teams who cannot set full positions. That forced the team members to play multiple characters in one position. You can always see the developers not only coding but also build prototypes with the prototyping tools (Mockplus,Axure, Proto.io)

The Advantages

Comprehensive thinking is the biggest advantage of the full stack designers. A designer who is familiar with the product development and design process, he knows the limitation of product design. So that he can clearly control the expectation of the product design. Familiarity with the process can make the team more convenient to understand the development, marketing, and user experience details. This will make cooperation more seamless, reduce rework and unexpected situations.

The Importance

The full stack designer can analyze and customize his own "skill tree" according to his own situation. He can clearly know the structure of the product, the progress of design and development process. He is a multi-skill person who can use user experience, design patterns, techniques, and tools to complete the product development. And then, the whole progress will be more systematically, and the product will be better.

Focusing on the whole program, that is the most obvious difference between the normal designers and the full stack designer. If you are one of them, it will undoubtedly add a great value to your team. And if you are a freelance designer, it is necessary to be a full stack designer.

What Makes a Great Full Stack Designer?

However, it’s not a requirement for full stack designers to master anything perfectly. Taking the web design as an example, you will understand well about their roles:

Assist the product manager

Complete the pre-concept for the entire project, brainstorming, mood boards, basic planning

Prototype design

Wireframes, visual draft, low/high fidelity prototypes

User research

User experience

Test

Front-end development

HTML, CSS, JS, etc.

The handover with the programmer

Understand the interface and the development of the deep demand, how the front-end code will be more matching backend and the program.

Conclusion

To become a good full stack designer, you are destined to keep learning and enrich your skill-tree. But please note that you should choose a right industry and direction to follow up the design trend and technology, new pattern, and new tools.

Original post: What is a Full Stack Designer in 2017? Will You Be One?

A Beginner's Look At Prototype Design Tool - Mockplus v2.3

My story with Mockplus began when I started using it half one year ago, and I was so deeply impressed by its simplicity & efficiency which could be incomparable with other prototyping tools. Most recently, it will release a big update (so-called 2.3 version), and this could be another one giant leap forward for this tool that I've been witnessing.

I always believe that Mockplus is an excellent prototype design software that has been dedicating to better user experience always the time. And its feature "Simplicity and Efficiency" is so distinctive that this tool has to give up some highly-personalized and complex functions. Mockplus, this time, proves its dedication and vision again in this new update.

In the new 2.3 version, the most intuitive change we can see is the project bar has been moved from the right to left side and the components' property box has taken the entire right sidebar. That will add much convenience while setting properties.

On the other side, this change may make regular users feel unfamiliar more or less. Then, why to make this change? From my own perspective of view, I think the reasons can be the followings:

1. This can free up more design space. There are only two panels on either side and the design canvas in the middle will be much larger accordingly.

2. All interactions can be done on the right-hand panel, allowing us to set the components' interaction and the page link in one place, instead of two separate places.

3. It's much easier to set some common properties (like text font and font size) as well as common operations (layout, alignment, etc).

Plus, I notice that many new attributes have been added to components. For instance, it adds rounded corners for Tab component, label color and border, rolling and many more attributes. Moreover, I find that more components have border-related property settings. For instance, it's possible to set the border when the Shape component in the rounded corner. These attributes definitely make components much flexible and adaptive to more scenes, all contributing to better serve our design ideas.

Another highlight in this update is the components' library synchronization and sharing. The "Library" feature allows we designers to add, remove or modify our customized "Components", "Groups" and "Pictures", etc. Meanwhile, we can publish and sync our own component libraries to the cloud. Most importantly, we are capable of sharing libraries with others, which will be a big plus for team collaboration.

Also, there is no doubt that these user-customized component libraries will get more and more rich, and Mockplus users can directly modify/use various types of finished/semi-finished components with least efforts. To some degree, this feature may become a form similar to the network community, enabling users to work, learn and communicate with others via their own component library. Of course, this would be some distant visions, but we can use the Mockplus official public library to enrich design needs.

This new update adds up to 200 icons and provides more choices for graphic designers, saving much time searching and designing UI elements. Also, the 2.3 version supports the weight of font style, and to my delight, the unsupported Roboto font is supported this time. Let's take a look below:

Furthermore, users will have the ability to view version history and set protect password for cloud project management. It's allowed to customize the zoom ratio of design canvas, and to apply different widths for different pages in Web project.

Not only does this new version add some properties and functions, but also fixes a certain amount of problems. As far as I'm concerned, it fixes the issues that the keyboard cannot disappear and the images look blurry on the mobile phone, along with the issue that interactive targets may be lost while copying and pasting, etc.

It seems that there's nothing more eye-catching other than the component library, but the truth is the icons, component properties as well as the richer functions should be a further interpretation of Mockplus's focus - the user needs. From my personal benchmark, the new update is like an old and loyal friend who come over and say "Hey, tell me your troubles and I will nail it"! Instead of pushing us to learn it continuously, Mockplus is always in constant adaptation to user needs and solve user's troubles. That's why I like it.

I'd like to compare this tool to an independent assassin, because it's too focused on their own characteristics as a prototype design software. "He" only walks on his own way, never seeing anything; "he" only does what he will do, no superfluous. Its focus brings both people's love and annoyance: love he's not chasing fame and interests, but also get annoyed by this beginner's mind. But perhaps because of his focus, suddenly on one day when he abruptly looks back from his own small road and finds that he has already embarked on high hill.

About Author
Berry Sarah

Email: berry@jongde.com 
Enthusiast for developing #prototypingtools, hoping to make friends with all like-minded guys. #ux #design #prototyping.

Mockplus Pro Subscription Festival Deal - 64% off

"Mockplus is an all-in-one prototyping design tool designed to make prototypes faster, smarter and easier with drag-and-drop interaction. You can choose from more than 3000 icons and nearly 200 ready-made components and use HTML export to test your prototypes on the real device instantly.

Deal: 64% off annual Mockplus subscriptions

Offer valid until: January 15, 2017"

Offer Link:  https://goo.gl/MY6qhN

Special deal offer for UXness readers, follow deal link and  read more about Offer.

Top 13 UI/UX Design Posts for Reference

This article curated some of the most recommended design posts in 2016, such as the principles, books, and tools helpful on UI/UX design, methods and suggestions on how to make better design, as well as the new design trends.

1. The State of UX in 2017

We are looking forward to how UX will evolve in 2017. In the meantime, here's our take on looking at the past, understanding the present, and anticipating what the future holds for UX.

2. Why Design

In some ways, this knowledge is bittersweet. Nothing gold can stay. You make a thing that changes the world, and before long the world has changed to the thing. It no longer inspires the same kind of wonder. Given time, we will always demand more.

3. Design Better Forms

Whether it is a signup flow, a multi-view stepper, or a monotonous data entry interface, forms are one of the most important components of digital product design. This article focuses on the common dos and don'ts of form design. Keep in mind that these are general guideline and there are exceptions to every rule.

4. Design Doesn't Scale

Design Doesn't Scale is a statement that has bothered me for the last four-years. When I joined Spotify's design team in 2012, the level of inconsistency and fragmentation shocked me. Up-close, the treatment of type, color, imagery, layout, IA, and interactions just didn't seem to align anywhere. And when I started talking about it, I realized the whole team was frustrated too. We concluded that the fragmentation in the product was just reflecting the fragmentation in the team, that designers spread across so many different projects, timezone and competing timetables, just didn't stand a chance. And, after all, weren't these factors inherent in all modern tech companies anyway? It was then that I first heard myself say, “Design Doesn't Scale”.

5. The Difference Between UX and UI Design-A Layman's Guide (by Emil Lamprecht)

We've all overheard conversations, walking down hip streets of the world's tech capitals, discussions about the great 'UX' of a product, or the poor 'UI' of a website. Is it a secret language you will never be privy to? Are these people just using slang to look cool? Well, ok probably yes to the latter, but a determinate NO to the rest. Read on to learn what these terms mean, which jobs are better paid, and how to become a UX designer or UI designer. Scroll to the middle of the post to watch a video of me speaking about this article, and giving you some extra info on what being a UX or UI Designer really means.

6. Complexion Reduction: A New Trend In Mobile Design

Over the last several months, some of the leaders of innovative design have taken 'minimal design' to the next level. Facebook, Airbnb and Apple have followed a similar blueprint to simplify prominent products in a way that reflects this new trend of 'Complexion Reduction' in mobile design.

7. UX vs UI vs IA vs IxD : 4 Confusing Digital Design Terms Defined

Once upon a time, if you said the word “design”, the odds were overwhelmingly likely you were talking about graphic design. But nowadays, the digital world is becoming increasingly more complicated and a lot of new job positions appearing, which lead to confusion for people outside or new to the design industry. Here's a quick overview on the four different primary forms of design to help you understand what they mean.

8. Hamburger menu alternatives for mobile navigation

If you're working on digital products, you have already read dozens of articles describing how and why the hamburger navigation on mobile (and desktop!) hurts UX metrics due of its low discoverability and efficiency. (You can read some of best articles on the topic here, here, here, and here.)

9. How to apply a design thinking, HCD, UX or any creative process from scratch

This how-to article aims at providing designers, creative thinkers or even project managers with a tool to set up, frame, organise, structure, run or manage design challenges, and projects: The Double Diamond revamped.

10. Best Practices for Microinteractions 

Microinteractions are subtle moments centered around accomplishing a single task. Almost all applications around us are filled in with microinteractions. Here are just a few examples:

Confirming an item is added to cart

Use pull-to-refresh to update content

Interface animation that confirms an action (e.g. toggle button)

11. The Best UI/UX Design Books & Resources for Designers

Want to be an excellent designer? Looking for the best UI/UX books and resources? Nowhere to go or to gain the right and effective channel for becoming an outstanding UI/UX designer? Just follow me, I have compiled a list of high-profile UI/UX books, which are recommended by the major professional websites, and blogs.The topic is mainly covering UI design, UX design, and web design. Hope it is helpful and useful to you. Any resource you think it's worth to be included, please feel free to give a message below the comment area or simply drop me a line on LinkedIn.

12. 12 Design Tools & Websites for UI/UX Designers 

The continuous improvement of designing tools, have a positive impact on usability and user experience, that provides great convenience for designers, as well as the users. Therefore often a good web designer will try to be updated with frontier, and master the latest tools. Hundreds of design blogs and websites update design articles, share design skills, and recommend new tools today on the internet. That is the important source of information for designers.

13. Unintuitive Lessons on Being a Designer

I sometimes joke that everything I have ever learned about design, I learned from my first job. Nowadays, this first job has extended to nearly ten years, its soul consistent even as its shape unfurls in depths and colors I could never have imagined in the beginning.

Original Post at www.mockplus.com

About Author

Grace Jia

Prototyping tools, UI&UX news & information, article sharer, writer.

Email: grace@jongde.com 

Web: Mockplus