Prototype in Adobe XD

 

Prototype in Adobe XD

First of all try to understand prototypes. What's that?

You made an entire website or application, now you wanna show your client how it'll be operating. That is, how to navigate, which button will carry to where, to make this flow understandable. Or even for your team it's quite important. So, not only to clients, even when you need to showcase your design to the developers, they also need to comprehend what buttons will take them to. So, the whole flow needs to be designed and Adobe XD provides you with the powerful tools to create prototypes. So c'mon, let's look at my screen. If you see, I've designed a useless app that has no purpose whatsoever. Coming to the Design part; let me hide it so the whole screen is shown. This is just a Splash screen, right? There's one logo, and the "Sign-In", then "Create Account", Start 1, Start 2 and finally our app screen. So Nothing functional at all, nothing whatsoever. It is just a simple design. And now this design's flow, that means prototyping for our developers or clients, we'll do it now.

So first thing, that you... Notice at the upper side, here you can see "Prototype". When you come here, you'll see a button is given. First understand this button, on the top left corner it's written "Home". You can make any screen "Home" by tapping it, okay? So for now I'm making this a Home screen and in a while we'll see the Splash screen. Now... We can see the "Sign-In" is given. And... In here the Email and Password, as you've seen always, along with "Forget Password?" is provided. Okay? And the "Sign-In" button and "Create Account" are given too. For now we're not... linking the "Forget Password?", because I haven't made any screen on this yet.

So first of all I work on the "Sign-In" button. The moment a user, anyone, provides email and password and click on "Sign-In", I want them to come directly to the Start screen. Okay? Or... You may want to come directly to the welcome screen. As you wish. Right? So... As soon as I click on "Sign-In", you can see a small arrow on it, You have to drag this arrow, and drop onto wherever the button should direct. I want it to carry onto the Start screen. And, after that if the user clicks the Create Account, then that'll carry it onto this screen. That's it, simple! So if I preview, notice "Desktop Preview" option on the upper right corner, There we get the screen. As I press "Sign-In", here do we come! And, if I preview again, and go to "Create Account", it simply comes into this screen.

Now, let's see more details. See as I click on "Sign-In", it directly goes here. Now let's notice on the top-right. Here some triggers are specified, on actions to be performed with the buttons. Should you tap? or drag? Keys or put voice commands? So yes let's put it on Tap. Another is Transition, yes. To go to another screen. And... Where'll be directed? On Start 1, this screen. Then what? By default it's "Dissolve" so better keep it like that. That is, it'll fade and transit to there (Start screen). Okay? Now, "Ease Out"- the option asking how much duration needed for the animation. Similarly if I come here, the options are the same here too. Let me keep it in Dissolve. That's it.

Now, if I come over here, we have "Create Account" option, when clicking the button where should it go? So when a user creates the account, he should've got the "Sign-In" option! So we'll direct the button back to Sign-In screen. And if clicking Sign-In it'll obviously direct back to here. Functions are the same in both buttons, so from here the user will sign in definitely. Anyway, after signing in when coming over here... Okay let's play it first, if you don't have confusion as I hope, problems shouldn't occur that much I guess  because as you see we're still working on two screens. Coming to third screen, if we press Skip it'll direct there; if press Skip there, it'll direct straightly to the Welcome screen. That's it. So that's all the work we've done!

 Now if I play it.

.. here comes the Sign-In screen, pressing Skip and again, and we come at the Welcome screen. Now if I play again and press Create Account instead, once the account's created we come back to Sign-In (screen), and the process repeats. So the screens have been linked with each other. Now this screen I left behind, this was the Splash screen. Now I'm making this the Home while removing that, okay? Now as I drag and link the Home screen with this, to direct here... Notice carefully we're not clicking any button here as there's none, instead the whole screen is selected, I want its Trigger to be something else, before that let's connect it, and here I won't give Tap but Time instead. How much time? I want at least... 1 second is given; if you wish you can type too. I want it 3 seconds. So it'll wait at least 3 seconds and then we'll have the Transition. What should be the animation? I want "Push left", meaning pushed there! Now let's play and see. So... it'll wait a bit; Let's play again and see. So... 1, 2, 3- and it transited. I didn't tap anything. From then the process goes on and repeats. I hope it's simple to you, not that complicated at all. One small thing let me share, here... on the Action there's another thing called "Auto-Animate". This is an amusing thing, I'll show it in the next  article.

So I hope you've understood the Prototype concept, nothing problematic my friend! The designs here are also not complicated, trust me, just some "boxes", you can create it on your own too. Inshallah in future we'll work on a full-fledged app choosing a particular topic and working on many factors of it, like how to design an app from start to end, I'll tell you. Not right now, please wait a bit, some things are still left, let's proceed to the advanced level first. The "Auto-Animate" is coming on next  article, extremely important topic. Trust me you'll enjoy it much! I hope you loved the article.