The requirements for screen design are higher than ever, as screen design is an important component in the overall design workflow. So it is no wonder, that nowadays static design is sometimes not enough to represent a whole concept, e.g. the exact function of single UI elements. That’s why you as a designer will someday face the following question: What’s the benefit of a terrific concept with an amazing design, if your dear colleagues, the developers, do not understand how they should finally implement your creative brainchild? This is also an issue at ePages, as UX experts, UI designers, and a huge number of developers work closely together to create our great product. Thus, we need a good workflow to make handovers easier.
But help is on the way… Let’s talk about prototyping tools.
Our 3 favorite prototyping tools in action
A prototyping tool is a software that supports you in building a functional click dummy instead of a simple, and static design. You can click around, fill input fields, animate toggle elements, or build user flows for mobile, or desktop devices — depending on which prototyping tool you use and which visual design software you need to combine with. Thus, a prototype can help to create the perfect workflow between you and the developers.
But be careful: A prototyping tool can probably change your working life forever… 😉
InVision
To be honest, I only worked with the limited version, but let me say something at the very beginning: Prototyping with InVision is fun!
I guess it is the perfect tool for impatient people who want to see results as soon as possible. Just after a few minutes you already know how the tool and its functions are supposed to work. Let’s assume you are a greenhorn, and just want to build a simple website click dummy: It might take you about 15 minutes to export your final screen design, upload it to InVision, and link your pages to each other with smooth crossings. You will be amazed by the result! But the thing is: That’s almost it. You can only work with a few functions and animations, and sooner or later you will sadly reach the limit.
Let’s sum up the pros and cons (of the limited version):
Pros:
- Easy to use (e.g.: navigation from page to page, implementation of buttons)
- Simple & self-explanatory interface
- Free license for a limited version and one project
- Uncomplicated upload of designs (GIF, PNG, JPG)
- Real-time file sync of Sketch, Photoshop & Illustrator
- Feedback and communication tools
Cons:
- No code exports, just ZIP & PDF
- Less functions & animations
- No responsive design features
Link: InVision
Proto.io
My emotions varied between exuberant euphoria and angry freaking out. Never before a program or a tool affected my emotions like that!
To prototype in Proto.io feels a bit like playing god. It offers nearly everything - From a big range of functions to imitate the behavior of a whole page to the animation of a single UI element, and working with variables. On the other hand, it takes a lot of time to understand all these powerful functions. Even designing simple UI elements will take you some time at the beginning. But you will see: After this exhausting time, you fall in love with your really good-looking prototype, that gives you an authentic feeling of a real, already implemented website or app.
Let’s sum up the pros and cons:
Pros:
- Comes with big library of UI elements for different devices
- Powerful tool relating to animations, functions & interactions
- Easy to jump from one page to another
- Import of Sketch & Photoshop files with a plugin
- Project export into PDF, PNG & HTML
- Authentic prototype (feels like a real website/app)
Cons:
- Takes much time to get familiar with the functions
- Uncomfortable to create own UI elements (e.g.: jumping elements after copy & paste)
- Dropbox is the only possibility for design synchronization
- Missing responsive behavior when switching the orientation of the prototypes
- Only a few tutorials
Link: Proto.io
Adobe Experience Design CC (beta)
When you first open up Adobe XD, you might be wondering how such a clean and nearly empty interface can provide you with everything you need for creating and prototyping a website or app. But don’t underestimate this program!
Adobe XD comes with only the most necessary tools for creating a design, but has some cool features to build a good-looking click dummy. What I like most is that you can drag design elements from other Adobe programs like Photoshop, Illustrator, InDesign, and also from the creative cloud library, and drop them easily into your XD project. The working areas are also well arranged, and it is fun to build a prototype in here. Nevertheless, a lot of functions are still missing: When you build a prototype, it feels almost like faking an animation by clicking and jumping from page to page. As there is still plenty of room for improvements, Adobe is bringing an update for XD almost every month. Nice!
Let’s sum up the pros and cons one last time:
Pros:
- Included in Adobe Creative Cloud
- Offers UI kits
- Clean interface
- Simple but nice design tools
- Prototype project can be shown instantly on mobile devices via an add-on
Cons:
- Still Beta
- No code exports, just PNG, SVG, JPG & PDF
- Limited tools for creating compact designs
- Limited functions & animations
- No responsive design features
Link: Adobe XD
Conclusion
The thing is: There is no perfect tool for our team right now. But we decided to go with Proto.io, and use it for some features we want to implement in the next months. Right now, Proto.io is the best choice for us because of its huge range of functions and animations, but we still have to discover a lot.
So, now it is up to you to choose a prototyping tool for your project…😊
About the author
