Interactive Menu (UI design & Prototype) - Adobe XD tutorial [2019]

[@ronnyandrade3919]

I have 0 experience with XD. This tutorial is fantastic. Thanks!

[@JerrinJames]

Glad it helped 😊

[@PunitChawla]

I really like the concept dude! I just wish you used your real voice. That would add more character to your videos

[@JerrinJames]

Yeah I'm working on it. Thanks

[@Creativedsign]

How do it

[@Creativedsign]

Voice

[@moomanow5104]

I love how you add many nice tips to the video! Really helpful for newbies like me.

[@JerrinJames]

Gale it helped 😁

[@GuitarsRgood7]

Really cool! This helps me understand XD animations a lot better

[@JerrinJames]

Glad it helped!

[@im_Shub]

Really It's Very cool✌ This is my first project ever in Adobe XD. For beginners this tutorial is very good👍.

[@JerrinJames]

Happy to hear that!

[@mamispa9650]

Wau! You prepared working sheet! That is briliant! thx!

[@SabinBajracharya]

This video really helped me with implementing slide animation behavior! Thanks man.

[@JerrinJames]

Happy that it helped. Subscribe and stay tuned for more videos.

[@sanuvarghese366]

Superb bro!! Loved it😎♥️

[@JerrinJames]

Thanks bro

[@panthersbrawlstars5886]

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?

[@kapt819]

This tutorial was awesome! Thanks for sharing 👍🏼

[@JerrinJames]

You are welcome 😊

[@OzbegimMarketing]

super tutorial!

[@berdkrillin6933]

Hi, i want to use another color but I am not sure how to pick the gradual difference between the colors you did

[@JerrinJames]

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.

[@berdkrillin6933]

@@JerrinJames Thank you! It was shades that i was looking, i couldn't think of the word

[@mohadesehshokri7059]

Thanks for sharing 👍🏼

[@JerrinJames]

Glad it helped.

[@pascualliperegrino4376]

LOVE this tutorial thanks you rock !!!!!

[@JerrinJames]

You are welcome. Stay tuned for more.

[@gopalrawat8631]

how to curve your screen like you have done in your thumbnail

[@JerrinJames]

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.

[@gopalrawat8631]

@@JerrinJames but how to do it

[@AnjaliDeepak.99]

Thank You so much for the video!

[@JerrinJames]

You're very welcome!

[@adr1908]

Thanks for this tutorial ! :)

[@JerrinJames]

You're welcome!

[@JerrinJames]

You're welcome!

[@danielpro259]

What is the name of that track in your intro?

[@geengeo4632]

Awesome... Waiting for ur next video 😍

[@JerrinJames]

thank you :D

[@ekemodeolatunji4161]

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

[@JerrinJames]

It is the first link in the description. Hope this helped.

[@sharmifayaz2080]

How to hide the symbol i tried lot of times bt i couldn't able to hide tat. Please tel me how to hide

[@JerrinJames]

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.

[@sharmifayaz2080]

@@JerrinJames 5.32 sec.. i cant able to hide that symbol at the back of today

[@noahdustin]

Well made video!

[@JerrinJames]

Thanks!

[@dianramdani958]

amazing concept .. thanks a lot ..

[@JerrinJames]

Thank you

[@Umai952]

good concept I learned a lot

[@JerrinJames]

Thank you 😊

[@shivamprajapati8294]

I am a newbie, so I want to know that how can I add this type of menu in a real app

[@JerrinJames]

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

[@onipedeomorinsola5025]

hey just wanted to ask if you continued learning Ui UX

[@fatemehghelichkhani5338]

that was geat ... thank you

[@nbaua3454]

From a design perspective its awesome, however when a developer sees this kind of UI, surely would bang his head on the desk.

[@JerrinJames]

True that :)

[@purswanitarun]

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..

[@nbaua3454]

@@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.

[@JerrinJames]

That's a cool offer

[@nbaua3454]

@@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.

[@victorafiesimama9221]

Lovely video. I love the background music. Can you please drop the name and download link to the music. Thanks. I've subscribed

[@JerrinJames]

Thank you :-) The track is called 'That Night in Your Car' by Chaz Cardigan. It is availabe in the KZbin Audio Library. Search for this song in the search box provided here: kzbin.infomusic?nv=1

[@Spacey10]

Where did you download illustrations from

[@JerrinJames]

Do you mean the icons?

[@gianfrancogerman8889]

Interesante, trataré de replicarlo, ya que descargue el adobe xd, en si, pasarlo a HTML con css lo vídeo muy díficil 😢

[@JerrinJames]

yeah it is

[@maziarjoleh9683]

amaaaaaazing

[@JerrinJames]

Thank you 😊

[@kemasauliahaldi9520]

I'm beginner junior UI Designer. I start subscribe you and like your video, Sensei

[@JerrinJames]

Thanks for these beautiful words

[@tyoistyo]

I have "missing font" problem, so what should I do? I confuse

[@JerrinJames]

You can download the fonts by checking which all fonts are missing, I use free fonts, mostly Google fonts.

[@ramdileepreddyjale6572]

Hi how to export UI in to android studio as application UI

[@JerrinJames]

Unfortunately that's not possible.

[@aishamanoo1356]

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

[@JerrinJames]

Thank you. I have a made a video on how to make that. You can find it here. kzbin.info/www/bejne/hJ2ocmB5pZ10l6c

[@Learnerbreed]

good tutorial 👌

[@mohitkorat4015]

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 ?

[@JerrinJames]

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.

[@arasucg]

Really Good. Expect more Tuts

[@JerrinJames]

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.

[@KoreaKinko]

awesome bro

[@JerrinJames]

thank you

[@mubashiroliyantakath8979]

Awesome!!

[@JerrinJames]

Thank you 😄

[@HStandard]

Well done bro

[@JerrinJames]

Thank you

[@sibyabraham4640]

More videos please!! ❤️

[@md.alaminislam986]

awesome voice

[@JerrinJames]

Ha ha, was that sarcastic. I was about to use my own voice. :p

[@ahmedalial-selmy895]

Nice

[@codewithrayyan592]

Awesome

[@JerrinJames]

Thanks

[@ghostcyber5875]

Pls how do i fix missing fonts?

[@JerrinJames]

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.

[@ghostcyber5875]

@@JerrinJames okay thanks

[@user-oh3ke5id8i]

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

[@JerrinJames]

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.

[@user-oh3ke5id8i]

Jerrin James thank you! I will :)

[@berdkrillin6933]

Does this work on figma?

[@JerrinJames]

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.

[@berdkrillin6933]

@@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

[@みや-f7w2h]

thank you!!!!!!!!!!!

[@nimittbasnet1564]

OP

[@Lzalxndr]

Which program do you use to render that presentation????

[@JerrinJames]

I use Adobe After Effects. I have made a video on how to do that. Check it out: kzbin.info/www/bejne/hJ2ocmB5pZ10l6c

[@SREERAMRUPESHBCY]

gotcha u r from kerala right?????????????

[@JerrinJames]

Yeah mate

[@SREERAMRUPESHBCY]

@@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

[@JerrinJames]

I'll be posting more tutorials here. If you want to know anything specific, feel free in letting me know.

[@SREERAMRUPESHBCY]

@@JerrinJames how to use these uis in a real mobile app

[@JerrinJames]

Unfortunately I am not well versed with programming. So i don't know much about it.

[@qedchannel8674]

Cool zzz

[@JerrinJames]

thanks :)

[@picstoryblog]

BEBAS FONT BY DHARMA

[@faizalkuttaloor]

She is brilliant... But I'm not...😔😔

[@AnkurSainiofficial]

HI which tool you used to create voice ?

[@JerrinJames]

I used an online text to speech tool

[@AnkurSainiofficial]

@@JerrinJames Thanks