Interactive Menu (UI design & Prototype) - Adobe XD tutorial [2019]
Вставка
- Опубліковано 16 жов 2024
- Hello everyone, follow this tutorial to create a beautiful interactive menu in Adobe XD.
You can download the project files with all the assets included form the links down below.
Project file ( practice and completed): goo.gl/oGY8Fs
Sorry for the robotic voice, I'm working on it.
If you guys find any of the discussed sessions difficult to follow or not working as expected, comment below and I am happy to help. If you find this video helpful, kindly subscribe and share it with your friends.
********************************************************************
Find me on social
Instagram: / jerrinjms
Instagram 2: / jx3_design
Facebook: / jerrinjmsfacebook Page: / jx3design
Dribbble: dribbble.com/j...
Behance: www.behance.ne...
#AdobeXD #JX3Design #autoanimate
![Soft UI Navigation Bar[UI Design & Prototype] - Adobe XD Tutorial pt.3 [2020]](http://i.ytimg.com/vi/vXX8xAqusNc/mqdefault.jpg)
![Soft UI Navigation Bar[UI Design & Prototype] - Adobe XD Tutorial pt.3 [2020]](/img/tr.png)
![Menu Concept - Adobe XD Tutorial [2020]](/img/n.gif)
I really like the concept dude! I just wish you used your real voice. That would add more character to your videos
Yeah I'm working on it. Thanks
How do it
Voice
I have 0 experience with XD. This tutorial is fantastic. Thanks!
Glad it helped 😊
I love how you add many nice tips to the video! Really helpful for newbies like me.
Gale it helped 😁
Really cool! This helps me understand XD animations a lot better
Glad it helped!
Really It's Very cool✌ This is my first project ever in Adobe XD. For beginners this tutorial is very good👍.
Happy to hear that!
Wau! You prepared working sheet! That is briliant! thx!
This video really helped me with implementing slide animation behavior! Thanks man.
Happy that it helped. Subscribe and stay tuned for more videos.
Superb bro!! Loved it😎♥️
Thanks bro
This tutorial was awesome! Thanks for sharing 👍🏼
You are welcome 😊
Lovely video. I love the background music. Can you please drop the name and download link to the music. Thanks. I've subscribed
Thank you :-)
The track is called 'That Night in Your Car' by Chaz Cardigan. It is availabe in the UA-cam Audio Library. Search for this song in the search box provided here:
ua-cam.com/users/audiolibrarymusic?nv=1
Pls can you provide the link to download the assets? I tried to view it but didn’t see it thanks and this video is great I love it, thank you for sharing
It is the first link in the description. Hope this helped.
From a design perspective its awesome, however when a developer sees this kind of UI, surely would bang his head on the desk.
True that :)
As for me I’d take it like a nice challenge and do it. Something different than what I’ve done in a decent recent while..
@@purswanitarun if you can build it out in 8 days in Java or Kotlin for my Android app, by taking the challenge.. I will give away the app revenue to you.
That's a cool offer
@@JerrinJames yeah I really meant, there are two types of people, one who's really good at coding and other's who are really good at bluffs.
LOVE this tutorial thanks you rock !!!!!
You are welcome. Stay tuned for more.
Thank You so much for the video!
You're very welcome!
Awesome work. But how did you add the dark blue background at the end, and how did you curve the corners of the artboard? Is that also done in Adobe XD? Thanks
It is done in After effects, so is the background. I recorded the video and placed it on a blue background. I have made a tutorial explaining it. Check it out.
Jerrin James thank you! I will :)
super tutorial!
Thanks for this tutorial ! :)
You're welcome!
You're welcome!
Helllo bro,it would be great if u can help me with this,at 5:30 while placing all the menu to the TODAY Artboard the component stays above tht tabs which im shifting from the MAIN artboard,could u please look into this?
Interesante, trataré de replicarlo, ya que descargue el adobe xd, en si, pasarlo a HTML con css lo vídeo muy díficil 😢
yeah it is
Thanks for sharing 👍🏼
Glad it helped.
HI which tool you used to create voice ?
I used an online text to speech tool
@@JerrinJames Thanks
Awesome... Waiting for ur next video 😍
thank you :D
Hello i liked your tutorial it is very very good One thing how did you do round corners and make video like at 9:12
Thank you. I have a made a video on how to make that. You can find it here. ua-cam.com/video/NlEA-Cp8AaE/v-deo.html
that was geat ... thank you
good concept I learned a lot
Thank you 😊
amaaaaaazing
Thank you 😊
amazing concept .. thanks a lot ..
Thank you
Well made video!
Thanks!
I am a newbie, so I want to know that how can I add this type of menu in a real app
I'm sorry, I don't know about how you can code this. You can check out similar type of menu style in some websites like stack overflow or GitHub
hey just wanted to ask if you continued learning Ui UX
I'm beginner junior UI Designer. I start subscribe you and like your video, Sensei
Thanks for these beautiful words
OP
Hi, i want to use another color but I am not sure how to pick the gradual difference between the colors you did
Do you mean the color pallet i used? You can create a similar color palette with some online tools like coolors.co or any color palette generator. Adobe color could also help you with that. (color.adobe.com/create/color-wheel). Make sure you choose analogous colors if you want different shades of same color.
@@JerrinJames Thank you! It was shades that i was looking, i couldn't think of the word
What is the name of that track in your intro?
Where did you download illustrations from
Do you mean the icons?
Awesome!!
Thank you 😄
Nice
Really Good. Expect more Tuts
Thank you.
New regular tutorial on every Monday, subscribe and press the bell icon to get notified.
If you like to see anything specific, let me know in the comments.
I really like this ui animation, but i have a one problem , how can i implement this ui with animation in android studio. Can you help me please ?
Thanks for the feedback Mohit. Unfortunately, I have no experience in coding and that puts me in no good shape to help you out. I really wish I could.
good tutorial 👌
Awesome
Thanks
awesome bro
thank you
More videos please!! ❤️
I have "missing font" problem, so what should I do? I confuse
You can download the fonts by checking which all fonts are missing, I use free fonts, mostly Google fonts.
awesome voice
Ha ha, was that sarcastic. I was about to use my own voice. :p
how to curve your screen like you have done in your thumbnail
That is actually the image in a rounded rectangle. I don't think XD have an option to make the corners round of an artboard. I used it as a thumbnail because the rounded corners looks good.
@@JerrinJames but how to do it
How to hide the symbol i tried lot of times bt i couldn't able to hide tat. Please tel me how to hide
Can you please specify at what time in the video. Also Symbols is replaced by Components in the latest versions of Adobe XD, adding more functionalities and by removing some old, so everything might not work as expected in this tutorials.
@@JerrinJames 5.32 sec.. i cant able to hide that symbol at the back of today
Well done bro
Thank you
gotcha u r from kerala right?????????????
Yeah mate
@@JerrinJames eagerly waiting for next video and u r the reason why I am using adobe xd , Thanks mate.It will be good if u make tutorials
I'll be posting more tutorials here. If you want to know anything specific, feel free in letting me know.
@@JerrinJames how to use these uis in a real mobile app
Unfortunately I am not well versed with programming. So i don't know much about it.
thank you!!!!!!!!!!!
Hi how to export UI in to android studio as application UI
Unfortunately that's not possible.
Does this work on figma?
The work flow will be different but i think you can do a similar type of design in Figma too. I am not well experienced with Figma, so I can't direct you exactly to how to recreate this in Figma.
@@JerrinJames I followed it exactly and tried it many different ways too. I think the problem is Figma smart animate is not good as Adobe, I found many people having issues with this
Pls how do i fix missing fonts?
If you have any missing fonts, a window appesrs with the lost of missing fonts. Note down the name of the font and search for it in Google. I try to use free fonts so that it's easily accessible. Most of the fonts are available in Google Fonts, so that will be a good place to start looking.
@@JerrinJames okay thanks
Cool zzz
thanks :)
BEBAS FONT BY DHARMA
She is brilliant... But I'm not...😔😔
Which program do you use to render that presentation????
I use Adobe After Effects. I have made a video on how to do that. Check it out: ua-cam.com/video/NlEA-Cp8AaE/v-deo.html