Designing Modern UI Design 404 Error Page Not Found Animation – Adobe XD to Android Studio


hello guys how are you today
my name is Abdul Aziz Ahwan from Indonesia and today’s video we will learn how do
we create something like error page or page not found or something similar like
that ok so this video would be two section the first video is about how do we design in Adobe XD and the second video is about how do we implement that design in Android studio but before we are going into the main topic of this video I am
so grateful if you want the subscribe button to make this channel growing up
ok thank you so much and let’s get started with my video hello guys welcome back to my channel
and today’s video we will learn together how do we create or how do we design
something like error page, page not found in Adobe XD ok the first thing we need
to do is connect our computer to the internet connection because we need to find some inspiration ok we’ll create something like this
404 not found like this maybe or this one I’m so interest with this design and I
want to modificate this design ok So I think I will change this image to
something like animation ok if you haven’t yet watch my last video you can
watch it’s so awesome it’s called Lottie animation library so
with Lottie animation library we can add animation in our Android studio project
ok so I open the Lottie file or Lottie animation library you can go to the
Lottiefiles.com and then you can scroll up scroll down there is stunning
animation this this this and many more ok because I want to create page not
found screen So I search in the search input 404
and just press ENTER then still loading okay maybe this one but I need modificate the color
the first is just click and then we will modoficate this color
with blue yellow blue blue and other okay because we can’t download this
animation to be PNG so I need to edit the layer color and it will bring us to the
Lottie editor so with this Lottie editor we can change the color we want or we can
maybe remove this we can see layer visibility so I change this color to
blue and many more and I have changed to this okay this is my screenshot after I
changed the color okay okay the next step is Open Adobe XD this is Adobe XD and this is add-on page the first is we need to create a new project
maybe this select this and i select Android Mobile still loading okay and then maybe we
need to change to 404 page something like that and we can press space on the keyboard to to move to move our Artboard okay and the first thing we need to
do is I import my animation, this okay and maybe I change the size okay and make its center and add some margin okay look like this ók look like this and
next I add text and change font to Poppins and just press ENTER and change to medium Okay, it’s so awesome make it Center and I add some margin and
then select this and press CTRL + D to duplicate and then change to “the page you were looking for doesn’t exist” and make it Center and chagne to regular and decrease to 16 maybe okay and the last thing we need to do is
add button maybe like this and remove border
and change the color to something similar or something like maybe magenta Boom and add some rounded corner
okay and the last thing maybe look like this and then change to Go to Home and
then color to white and make it center
and I add some margin maybe 64 okay look like this okay I think it’s
awesome maybe enough so the next video I’ll try to convert this design in
Android studio okay that’s all my video today in the next video we will learn how do we convert this design in Android studio And if you want to download like
Adobe XD project file link in the description below and if you have
any questions or comment write it down in the comment field thank you so much
and see you again on the next video

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *