Creating A Ui Design for My Android Signup, Login, And Logout Application Using Adobe Xd

Since I finished developing the API for my signup, login, and logout endpoints, I have now decided to start developing an Android application with the same signup, login, and logout functionality.

As I have always done, I will be sharing with us every step of my implementation. Before I begin, I needed a UI design of how my app would look like. I had to make the designs myself.

Note: This is my very first time designing a UI. So, I hope no one would talk bad about my design but I'm open to being corrected in any way.

I looked at Youtube for a few awesome ways to quickly make UI design and I was lucky to stumble upon this one. I quickly downloaded the software he used. It's Adobe XD for those of you who don't know. You can download it from this link

I started my designs by manually deciding the width and height. I chose 1080 x 2160 for this particular design.

Here's the overview of my Workspace

Final Looks

I will be developing the application to first launch this interface as its Homepage. This page has two buttons one for Login and the other for signup if the guest doesn't have an account.

Screenshot_20201027-132817.png

If the Login button was clicked, the user guest would be navigated to this Login page which requests for the user's Email and Password.
Screenshot_20201027-132825.png

If the Signup button was clicked from the first interface, the guest would be brought here to register.
Screenshot_20201027-132832.png

And lastly, if the info the user provided during login was correct, the user will be logged in to view his/her user info. There's also a logout button on this page which if clicked will navigate the user back to the login interface.
Screenshot_20201027-132839.png

That's all for this post and we'll begin development in the next post.

H2
H3
H4
3 columns
2 columns
1 column
Join the conversation now
Ecency