Landing Page design in Adobe XD (2020)

[@krithik-fh7ul]

TNice tutorials was honestly so helpful. I’ve been working around soft, whether it be church, singing in a band, or theatre for most of my life so tNice tutorials

[@shikhanath8877]

eye-catching, perfection, simple, elegant all in one pack! Beautiful!

[@DesignSense]

Thank you so much 😊

[@murtazakarimzada4473]

I absolutely loved the design. However to start a project I would suggest to use grids that will help you and web designers who wants to create the pages in html and css.

[@DesignSense]

Thanks for your suggestions 😊

[@EditorialGuiasdelSur]

TNice tutorials is actually a very good and straight forward tutorial. No having ask questions or guess, no over-explaining elents, and brings

[@TwilightOdin]

It really worked for me after I look and try some tutorials, yours is the one that worked. Owe you a lot.

[@mcsfsfv]

AMAZING tutorial! One of the most comprehensive tutorials I've seen for anytNice tutorialng. Thanks so much!

[@fal2981]

You are amazing, I just switch to soft softs and I am loving everytNice tutorialng about it. It much easier then my last program.

[@abhishekpowar2733]

This is maybe one of the best designed webpage I've ever seen. You are amazing!

[@DesignSense]

Thank you 😊

[@toiatikhawla9278]

Hey Bro, Don't talk down to yourself like that. believe in yourself and don't let nobody change your mindset of that!

[@mohammeddhillshaardthd2122]

Wow excellent and amazing but the developer will be like, Do you know how many hours should I sit to code those small stuffs in the backend... I see his emotions in this design...😉🤝✌

[@DesignSense]

Yes, you are right 👍

[@mohammeddhillshaardthd2122]

@@DesignSense 🤝✌ Wishes for more creative designs

[@DesignSense]

Yes, sure 😊

[@ododesigninc8252]

U can design that from the front end much faster. using WordPress elementor the new way to design websites without coding. it works for me.

[@biuxer0]

@@ododesigninc8252 look, I can make stuff like this but does it have to be coded in order to sell? Can I sell only the image???? Plz reply

[@oanhle4751]

thanks for the info really helped alot. i rather learn about tNice tutorials than school

[@CoolScratcher]

Love the shoe shadow effect! Very creative.

[@DesignSense]

Thanks for your appreciation, stay tuned for more coming tutorials.

[@CoolScratcher]

@@DesignSense :)

[@TechnoPel]

Great work here. But would just like to point out that this is just the hero section. A landing page is the entire "home" page that a website has.

[@DesignSense]

Yes, here is the other tutorials for the full landing page design, the links are below. Tutorial 1: kzbin.info/www/bejne/e5qZaGptiJWBlck . Tutorial 2: kzbin.info/www/bejne/aJKak4Stdq51g7M

[@eswar1023]

Amazing.....work...amd easily explaination with silent content....keep rocking...and more videos expect from entry level designers

[@DesignSense]

Thank you for your appreciations. Stay tuned 😊

[@georgesngandeu9115]

Ï will say it again, you are a god designer, ï can feel all those hours of dedicated work. Please bro give me your playlist, you have good music taste

[@DesignSense]

Tbh I don't have a playlist. I choose music from NCS (NoCopyrightMusic) for my tutorials. Search NCS on KZbin. Thanks.

[@georgesngandeu9115]

@@DesignSense thank you

[@brendalucialeovi112]

Lovely, and so easy to follow, a great minimalism example that inspires a lot!

[@DesignSense]

Thanks for your appreciation ♥️

[@bimalthapaliya7134]

its better,if we get to know how to code exact things in vs code!! it will be easier for us to learn things! cause only designing is not enough we need to develop a website also! thanks for the great designing vdo!

[@DesignSense]

Thanks, but for now we just upload the designing tutorial 🙄.

[@elitedesignhub415]

There are plugins to convert this XD designs to code

[@ΓεώργιοςΑθανασίου-λ2ε]

This tutorial is amazing and you are really good at teaching !! great job sir !

[@NicoloVol]

I've been watcNice tutorialng tNice tutorials and you inspired to try to make soft so I thank you

[@CrissyM03]

As a newbie just getting into this and a new subbie all I have to say is wow!

[@DesignSense]

Thank you 😊

[@マキシム-r5g]

Great tutorial, could you explain what you are doing , the choices you make in your next tutorial? Thank you

[@DesignSense]

Thanks, we will upload the resume /CV design in word, which is most requested tutorial.

[@AnhHoang-zr4pe]

Great design. But I have questions, how to make this design in to final landing page web? I never ever using Adobe XD before.

[@DesignSense]

You can design in other tools like Photoshop, Illustrator, Figma, Sketch too, then code it to make it functional.

[@reda4135]

@@DesignSense You can do some animation with xd like click on buttons and move to the next page/images that's can make it professional too Thanks for the tuto ❤

[@DesignSense]

@@reda4135 yes, i will upload more tutorials about prototyping. Thanks

[@jamievdj2824]

Please tell me how you got that image off the shoes? Did you create it in Illustrator? Photoshop?

[@DesignSense]

You can remove the background of that image in photoshop by few clicks. or if you are working in figma there is a plugin for removing background, which is more easy. Thanks

[@archies23]

Great design and how fast you are. Could you please say from next time as what you are doing as it would help beginners like me. Keep posting my friend !!

[@DesignSense]

Thanks for appreciation. Soon we will start voice over.

[@ilanebha8112]

Hi thank you one question please how can i implemant ux/ui design in that design like what i have to add?

[@DesignSense]

I didn't get, what do you mean?

[@alfredopaghasian5538]

Dude u deserve a 👏. I wish you can help to acquire a skill like yours

[@DesignSense]

Thank you brother 😊, stay tuned for more creative tutorials.

[@purnimadeshpande3837]

This gave me many new ideas. Thank you!

[@DesignSense]

Most welcome, stay tuned 😊

[@kalelkar]

Does the art board factor in the browser tab and favourites that people have in their browser. Wouldn't that shift everything down a bit? Trying to get me head around this.

[@199rajesh]

How do you add background image in this animated prototype? Will you make a tutorial video on which software you do

[@DesignSense]

It is just the adobe premiere pro transitions for the tutorial, but for prototype you can use adobe xd, soo i will upload tutorial on prototype it is very easy process 😊. Thanks

[@199rajesh]

@@DesignSense Thank You :)

[@jordyntv223]

I take a web design class and I’m really struggling to create a design for my project lol

[@paulocanzolo]

works, keep up the good work man

[@kinsleyharvey9017]

Did the design really applicable at real website, i am still new to adobe XD , if the design and prototype can be this beautiful, when it comes to developing it will be really hard to configure the CSS doesn’t it?

[@DesignSense]

In Adobe xd you can do just design and prototype the web pages or apps designing. For the real responsive websites you need to code it. Thanks

[@minyoonki1583]

Could you please tell how to get rounded corner artboard?

[@DesignSense]

It is not the artboard, actually it is simple rounded corner shape, that i have designed for presentation purpose.

[@waleedtarek975]

How did you got the different coloured shoes .? And changed the backgroung of it

[@DesignSense]

Actually i have downloaded that image from freepik. com.... Then remove the background in photoshop, and aslo changes the colors of the shoes, with hue and situation method.. Thanks

[@k4iolx349]

I also really like softEX, it has a very nice effect to it

[@HelloShaggy]

Made the same landing page with your help. Thanks for this video!

[@DesignSense]

Welcome, stay tuned

[@harsh-v5s]

which windows laptop perfect for the designer or can you tell which windows laptop use in video?? That support all the software for the designer.....

[@DesignSense]

You have to install windows 10, and for laptop i would suggest you MacBook pro for graphic designing, but other laptops also you can use.

[@diegoarf_]

How can I know if my design can be coded? What rules or things do you follow? Great design btw, wish I could see how to code this.

[@DesignSense]

There are a lot of tutorials on youtube who teach how to code such pages. We will start to create responsive pages soon.

[@deividecom]

very top, but how will you move to the side if the landing page is a photo? and how to host it right?

[@DesignSense]

I didn't get it, can you explain?

[@deividecom]

@@DesignSense na hora se subir para o site, como instalar a landingpage?

[@thegabischip]

Great work again. Clean and beautiful design. Your videos are amazing.

[@DesignSense]

Thank you 😊, stay tuned 👍

[@saqlain_ch]

I loved it. But i need tutorial to convert it in html and css design can any body share tutorial?

[@hudamathematician5308]

Kindly told me how we select a single object without any margin or boarder ?

[@Amankumar-mk1yt]

Can you tell me which good font he should do to make a website

[@DesignSense]

Google fonts is a good start. Go and download fonts there.

[@belginv9]

Nice design, while providing a responsive design to client whats are all the resolutions needed.

[@omerertem]

This is a great design... Can we code this design and use it without copyright? Or can we sell it to our customers? Is there any copyright for this? ☺😍

[@DesignSense]

This design is only for practice purposes. You can't resell it or you can't make this for your clients. It's for KZbin. Thank you 😊

[@tanyakronsujinprum651]

what if user clicks the arrow, will the bubble in front of the shoes move? or it's just stay there it looks cool tho.

[@DesignSense]

May be its change the position with a nice transitions, but that will look nice on front of shoes😁

[@choose2behappy699]

Design is nice, but WHAT ARE THE STEPS TO CONNECT THE each buttons to make them work and to lead to the actually landingpage. How does the file has to be exported?

[@DesignSense]

Stay tuned for the future videos, we will be making videos on this topic.

[@yasmimks8708]

Ok so I am using Figma to do that and I am stuck at 4:10 when I add the Shoe picture, there is a white background on it, how do I take it out and make it transparent? HELP PLEASEEEEEEEEEE

[@DesignSense]

Use photoshop for it. 1) open your photoshop 2) In the above navbar click on "help" 3) click on photoshop help 4) then search for remove backgrounds, when you find that just press and photoshop will remove that background automatically 😊. Or you can use others figma plugins too.

[@yasmimks8708]

@@DesignSense THANKYOU SO MUCH! I LOVE THIS CHANNEL!!!!!!!!!

[@DesignSense]

Welcome!

[@shcreations.2695]

great presentation

[@DesignSense]

Thank you

[@sawomirparda3364]

Wow thank you so much that really helped

[@mujtabam265]

You should have added the xd file in the description. No problem do it.!

[@alyssonalbuquerquealysson667]

My first ti ever gettin on soft soft was in 17 man it a whole year to use to soft soft

[@yoshiakiyoneyama895]

Great tutorial!! How do you make and export of the final page?(As the finished image)

[@DesignSense]

I have just saved the image as jpeg, then again I have design the finished image for thumbnail to give a frame and shadows etc, to look good. Thanks

[@yoshiakiyoneyama895]

@@DesignSense I appreciate your advice, and try by myself too! Looking forward to your next works!🙂

[@mlockey1]

The music is totally unnecessary and quite distracting. The design is nice, but why didn't you make it more useful by explaining what you are doing?

[@DesignSense]

@@mlockey1 sorry for the music, soon i will start my voice over on the tutorials, thanks

[@abhisheksinghrajput2611]

Bro please tell me, which software you use for this

[@DesignSense]

Adobe xd

[@abhisheksinghrajput2611]

@@DesignSense free of coast or paid

[@DesignSense]

@@abhisheksinghrajput2611 adobe xd is free

[@abhisheksinghrajput2611]

Thanks bro

[@ArisaNISHIHARA]

very interesting! love your design🥺 from Japan

[@DesignSense]

Thanks for your love. Stay tuned

[@facundogimenez1679]

the suggested videos don't let me see the final image :(

[@DesignSense]

Sorry, we will remove suggested video.

[@YN-pg9ch]

Nice work! I created the exact design with illustrator.

[@reda4135]

@All in one videos SVG format it can display on the web as a preview mode I think

[@tmanemaran]

Fantastic work... However everytime i start in XD....I will end up ditching it and be back using Fireworks again.... Its a mistake for Adobe to stop development for Fireworks...

[@DesignSense]

Thanks, the core reasoning behind this change, according to Adobe, is the overlap in functionality between Fireworks, Photoshop, Illustrator, and Edge Reflow. This decision is hard to vet without seeing Adobe’s sales and usage numbers, but there is clearly a strong, niche market for Fireworks - perhaps too niche for Adobe’s own aspirations. Fireworks CS6 will continue to be available, as will the entire CS 6 suite of apps, but Adobe is only planning to offer “security updates as necessary and may provide bug fixes.”

[@lulyasha6287]

really beautiful design!

[@DesignSense]

Thanks 😊

[@funfact3411]

Sir, Could you tell me which is better for UI Design Adobe Xd or canva

[@DesignSense]

Both

[@funfact3411]

@@DesignSense how I learn both.I have to pick one

[@videophotokissi7700]

Hey bro want to full tutorial on 1 each & every step by step

[@shahzadaatif3625]

Please make complete tutorial about Adobe XD 😊

[@DesignSense]

Sure, Thanks.

[@foodline1584]

clean and classy design

[@DesignSense]

Thanks ♥️

[@RajaVelforyou]

Wow - great tutorial.. Love it!!

[@DesignSense]

Thanks 😊

[@biancac2191]

It's not like Muse where you could design and export like a web site with no code, XD is only for design, right?

[@DesignSense]

In Adobe xd you can design your landing page or web page, also you can add some animations to the web page (prototype). And it is very easy and friendly, you can export easily all the things. Thanks 😊

[@biancac2191]

DesignSense Thanks for you answer and pretty nice job!

[@elitedesignhub415]

Please can you suggest plugins for me to download, or can i get a zip pack of plugins

[@DesignSense]

Adobe offers, Adobe xd for free

[@elitedesignhub415]

@@DesignSense But you have to sign in, and I've been unable to!

[@cssmaster2978]

I am studying front end. Thank you for your design. I look at it and try to code it :) thank you for resources link, too

[@DesignSense]

Welcome 😊, you can easily export all the things from adobe xd, in just one click by pressing Ctrl + E, in every format, stay tuned

[@ahmedhero3866]

I'm like you, how can make it dynamic page with animation , what name of this ?

[@DesignSense]

@@ahmedhero3866 you can use adobe after effects or adobe xd prototype for animations, thanks

[@robertopenaforte9025]

this is going to be great!

[@DesignSense]

❤️❤️

[@manitchahar9272]

Adobe xd or figma which one is better?

[@DesignSense]

Both are good. I would say figma got an edge over XD.

[@sankalpsinghbais8588]

Hey there, Can you plz tell me how did you add the background behind the artboard.

[@DesignSense]

It just for the presentation purpose, simple export a png or jpeg image from that landing page, then create a little bigger artboard from it, 2nd create a rectangle frame for that jpeg image and clipping mask to the frame, and apply some shadow to that frame, and also give the same color to the background in the bigger artboard. Thanks

[@sankalpsinghbais8588]

@@DesignSense Thank you very much sir😊

[@shakourhajji5406]

@@DesignSense I have problem how to make header side white

[@chibuezeamadi8220]

I have fallen in love with design sense

[@DesignSense]

Thank you for your love and support.❤️😊

[@humamughal2884]

I have seen your video and its mind-blowing. I have never ever seen such a quick and owsome design in such a time. I am following you and wanted to show you the full landing page by following this design. How can I contact you? let me know.

[@DesignSense]

You can contact on our Facebook page or Instagram. Facebook: web.facebook.com/DesignSense2070/ . . Instagram @designsense99

[@iqrajannat4690]

I was trying this today.. But i am stuck now because the image i download from freepick isnt transprent

[@DesignSense]

Please download the source file the link is given in the description, there you can find that transparent shoes images.

[@iqrajannat4690]

Yes i downloaded the source file.. Its in jpeg format :(

[@DesignSense]

@@iqrajannat4690 please download the Source file from Dropbox the link is given, not the image.

[@iqrajannat4690]

Oh thankYou men.. Now i get it

[@afsarnayeem9772]

Really loved it 😍

[@DesignSense]

Thanks 😊

[@Ati1254]

Thanks😊😘 This is AWESOME😍

[@DesignSense]

Welcome. Stay tuned for more video.

[@dbercheva]

This helped a lot thank you

[@NazrulIslam-ir5ef]

Where you design? Online or using any software? If you use onlione please tell me this site link.

[@DesignSense]

Adobe XD and figma. FIGMA is online app for UI/web wireframes Nd prototype.

[@jailbirdx0x]

Can I addthe HTML,CSS and JavaScript code of the elements here on XD too?

[@DesignSense]

No, here you can just design 🤐

[@Kejasr]

DesignSense then how will you...

[@NowHereBlow]

Amazing... Great tutorial ❤️👍

[@DesignSense]

Thanks 😊, stay tuned.

[@sayantansamanta832]

How do you make those background outside the artboard?

[@DesignSense]

It just for the presentation purpose, simple export a png or jpeg image from that landing page, then create a little bigger artboard from it, 2nd create a rectangle frame for that jpeg image and clipping mask to the frame, and apply some shadow to that frame, and also give the same color to the background in the bigger artboard. Thanks

[@vaishnavi.indaram]

Hi import the shoe image is png r another? Plz

[@DesignSense]

The image... And remove background in PS in few clicks

[@joel9909]

Nice design but you did a lot of things that is hard to follow as a beginner, especially key shortcuts that you didn't show, it's quite hard to follow and replicate

[@DesignSense]

We will try to be more comprehensive in the future. Thanks

[@joel9909]

@@DesignSense But thank you so much for this, I was under a lot of pressure back then, You opened my eyes to the possibilities of XD and I really liked the hover state on nav design ... classic

[@martinsakoje1837]

Great tutorial, I like your designs 👍🏿

[@DesignSense]

Thank you 😊

[@giacomopellini4335]

Good Job!! How can i open an adobe xd file created with a later version of the software? I use mac

[@DesignSense]

You need to update it, it will not working in later versions, thank you 😊

[@mohitmahendiratta2620]

how did you removed the white background from the shoe image

[@DesignSense]

Using photoshop for it.

[@Швейнаямастерская-е3ч]

Gorgeous design!

[@DesignSense]

Thank you.

[@HyperActive94]

Amazing choice of colors

[@DesignSense]

Thanks 😊

[@phato7930]

really nice 😍

[@DesignSense]

Thanks.

[@victoriaalex4735]

Please which website do you get your pictures from

[@DesignSense]

Freepik.com

[@tanvirahasan2880]

From where do I get this type of image and 3D type images for free?

[@juswinthomas2913]

what format are those images you added

[@DesignSense]

In png format.

[@vijayk3610]

When I see the same design in laptop and phone tha colors are vary...How to fix it

[@DesignSense]

Not every device have true colors, may be your laptop color result will not true.

[@vijayk3610]

@@DesignSense then how to change my laptop color into true color

[@nqh288kael2]

Hmmm... Seems like a difficult program to handle but manageable.

[@KiranSharma64414]

but how to use this design on my website I'm completely a noob in adobe xd enlighten me

[@DesignSense]

In Adobe xd you can create design layouts, you can export the necessary things easily.

[@MrRyanIsle]

I think what you are looking for is something like "elementor" for wordpress. Adobe XD is more for designers / UX Designers it doesnt automatically translate the design to a functioning website

[@artankaraj]

That's amazing but do you know what ? if you were a designer in a place with me, I as a programmer would quit my job. lol.

[@DesignSense]

Hahahahaha

[@SumitSarkar96]

Files are nit downloading. Do you have any solution

[@DesignSense]

It is working, I checked it.

[@egoistoDota]

Hi, if i wanna create Wix website, can I edit ui with Xd too?

[@DesignSense]

I dont know about wix much bro, but Adobe xd is very simple and easy to use, here you can create your whole layout, styling, and coloring etc of your website easily. Thanks.

[@egoistoDota]

@@DesignSense i see, thanks bro! nice job anyway

[@HARSHRANAYT]

I loved it!

[@jawadhussain2467]

Wao.. excellent work 👍👍

[@DesignSense]

Thanks 👍

[@eder.santana_oficial]

Você é muito bom no que faz!!! Parabéns.

[@DesignSense]

Thank you 😊