How to create awesome and interactive UI/UX using ProtoPie

How to create awesome and interactive UI/UX using ProtoPie


Hello, maybe you all remember our previous article about Adobe XD and how the software offer a great platform to make prototype and UI/UX design and Mobile/Website user interfaces, but Adobe XD isn't the only platform capable to do so, and there's some great alternatives out there maybe even better than Adobe XD . 
today, we will review one of the greatest platform that will help us create mobile prototype and UI/UX with more flexibility and better UX, and we will explain throw this article all about ProtoPie platform .

دليلك لفهم منصة ProtoPie لصناعة و تجسيد تصاميم الـ UI/UX بإحترافية



Why using ProtoPie ؟ 
Have you ever wanted a full and ideal platform that provide all the tools to create beautiful interfaces and user experiences for mobile apps easily with trying it live in your mobile and without coding at all ?
Well, ProtoPie is give us what we want, you can do all what we said in one single platform, you can use ProtoPie to create UI/UX for mobile with many options like add animations and triggers and click and all that stuff ( we will walk through all that in this article ), even you can see your UI/UX live in a real device, and yes without coding, ProtoPie can do that . 
ProtoPie come with a really easy principles in learning and executing as well, you don't need any previous experiences to start using ProtoPie, even the software interface is so easy and similar to graphic software and platforms we used before like Adobe Photoshop, easy to use and simple . 
to close you more from the idea of ProtoPie, this video show us a little bit about the platform :  




- Try your work live in any Device : 

And we don't see that a lot in platforms like ProtoPie, even when you finished your prototype and everything, you keep asking yourself : " how this will look like in a real device ? ", maybe you try to add your work in a MockUp or something, but you will not face the truth of your real prototype until it's completely done . 
ProtoPie will help you get throw this dilemma, the platform offer us an option to try our prototype in a real devices ( Android , IOS ..), not only seeing it, but touching it, and interacting with it and try all the functions of our project,  and yes, without writing any single line of code .  

دليلك لفهم منصة ProtoPie لصناعة و تجسيد تصاميم الـ UI/UX بإحترافية

- Interact with your designs  : 

One of the greatest things at all in ProtoPie platform, you can easily make your dead buttons and layout come to life, touching a button will trigger an action, that's basically the main principle of interacting with your designs, and absolutely without coding at all . 
Adding triggers and interacting with your designs are not difficult at all, as we said before, ProtoPie platform offer us a really easy to use interface, not only this, you can also walk through all those triggers to implement all your necessary interaction in your design, like Gesture and Sensor who help us interact with our design through  Clicking and Touching and scrolling as well . 


دليلك لفهم منصة ProtoPie لصناعة و تجسيد تصاميم الـ UI/UX بإحترافية


- ProtoPie Interface : 

I'll be honest with you, it doesn't matter really all this stuff and benefits the ProtoPie come with if the software itself was hard to use and difficult, then you have to watch a lot of courses and  videos so you can master the software, and that's mean more work for you . 
the creators of ProtoPie knows that very well, so they offer us a beautiful and easy to use software, the software come with UI we seen it a lot in most of the graphical platforms too, especially in Adobe, if you are familiar with Adobe software like Photoshop, Illustrator and even Adobe XD, then you are in safe hands, if not, don't worry, just open the software, take a quick look on all the options, and Voila !  the software is obvious and easy . 



- Understand the Concept Module :



As we said before, you can make any object do some actions without writing any line of codes, to do that you need to understand the Concept Module, basically the Concept Module is based on 3 parts : the first one is the " Object ", the target that we want to add some interaction on, the second part is the " Trigger ", is the action or the stimulation that we do like Taping or Scrolling, you will find in the next part all the most important triggers, and the final part is the Response, is the goal that we want to achieve on an object like moving it or something, those three concept allow us to add interactions on objects easily . 
the table above show you the Triggers in the left, and the Responses in the right, when we create a trigger let's say DT ( Double Tape ) we can achieve a response in the right column let's say RT ( Rotate ), and just like that you can make any object do any action without writing any single line of code, Amazing huh ?






- The Best new technologies in ProtoPie : 

as we mentioned before, the ProtoPie platform come with a lot of new technologies in designin UI/UX designs, hoewever, the most amazing part about ProtoPie is the triggers and the interactions they offer, and here is some of the great interaction that you will find in the platform : 
- Add the scroll option to your design, so that you can scroll down and up to see how full page will look like . 
- Add Paging to your design: pagging well help us navigate through multiple pages without changing the activity, we see that a lot in the first page of apps or in the documentation, however, you can implement that without coding using the platform .  
- One Time Trigger, a good option to animate an element when clicking on it . 
- Double Tape, yes, you can add animation or any action when double clicking on an element, and don't forget,  you will not write any single line of code . 
- Pinching, is when you drag an  element form its corners so you can control its size, you can add that as well in the design . 
- Embed videos, sounds and all the medias you want, yes you can do that too, easily and of course without coding . 
you can find all that and all the technologies used in ProtoPie here : 
https://www.protopie.io

شاركه على :