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!

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

[@abhishekpowar2733]

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

[@DesignSense]

Thank you 😊

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

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

[@CoolScratcher]

Love the shoe shadow effect! Very creative.

[@DesignSense]

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

[@CoolScratcher]

@@DesignSense :)

[@toiatikhawla9278]

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

[@brendalucialeovi112]

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

[@DesignSense]

Thanks for your appreciation ♥️

[@oanhle4751]

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

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

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

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

[@NicoloVol]

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

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

[@CrissyM03]

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

[@DesignSense]

Thank you 😊

[@paulocanzolo]

works, keep up the good work man

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

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

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

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

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

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

[@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 :)

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

[@shalakagaikwad8813]

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

[@DesignSense]

Welcome, stay tuned

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

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

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

[@Ati1254]

Thanks😊😘 This is AWESOME😍

[@DesignSense]

Welcome. Stay tuned for more video.

[@thegabischip]

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

[@DesignSense]

Thank you 😊, stay tuned 👍

[@robertopenaforte9025]

this is going to be great!

[@DesignSense]

❤️❤️

[@afsarnayeem9772]

Really loved it 😍

[@DesignSense]

Thanks 😊

[@foodline1584]

clean and classy design

[@DesignSense]

Thanks ♥️

[@ArisaNISHIHARA]

very interesting! love your design🥺 from Japan

[@DesignSense]

Thanks for your love. Stay tuned

[@jawadhussain2467]

Wao.. excellent work 👍👍

[@DesignSense]

Thanks 👍

[@k4iolx349]

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

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

[@sawomirparda3364]

Wow thank you so much that really helped

[@lulyasha6287]

really beautiful design!

[@DesignSense]

Thanks 😊

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

[@phato7930]

really nice 😍

[@DesignSense]

Thanks.

[@HARSHRANAYT]

I loved it!

[@RajaVelforyou]

Wow - great tutorial.. Love it!!

[@DesignSense]

Thanks 😊

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

[@マキシム-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.

[@shcreations.2695]

great presentation

[@DesignSense]

Thank you

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

[@dbercheva]

This helped a lot thank you

[@vaishnavi.indaram]

Hi import the shoe image is png r another? Plz

[@DesignSense]

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

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

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

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

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

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

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

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

Gorgeous design!

[@DesignSense]

Thank you.

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

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

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

[@juswinthomas2913]

what format are those images you added

[@DesignSense]

In png format.

[@NowHereBlow]

Amazing... Great tutorial ❤️👍

[@DesignSense]

Thanks 😊, stay tuned.

[@eder.santana_oficial]

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

[@DesignSense]

Thank you 😊

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

[@HyperActive94]

Amazing choice of colors

[@DesignSense]

Thanks 😊

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

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

[@mohitmahendiratta2620]

how did you removed the white background from the shoe image

[@DesignSense]

Using photoshop for it.

[@martinsakoje1837]

Great tutorial, I like your designs 👍🏿

[@DesignSense]

Thank you 😊

[@manitchahar9272]

Adobe xd or figma which one is better?

[@DesignSense]

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

[@chibuezeamadi8220]

I have fallen in love with design sense

[@DesignSense]

Thank you for your love and support.❤️😊

[@שריגלרנטר]

ואוווווו אחד היפים

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

[@belginv9]

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

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

[@hudamathematician5308]

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

[@abhisheksinghrajput2611]

Amazing video

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

[@inomkhalilov1291]

Thanks for tutorial

[@facundogimenez1679]

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

[@DesignSense]

Sorry, we will remove suggested video.

[@sriramabhaktahanuma]

Love your work

[@DesignSense]

Thanks 😊

[@RezoUI]

Thank you so much! Greetings from Tbilisi.

[@DesignSense]

Your welcome 😊, stay tuned thanks.

[@Yonas20102]

Respect nice work

[@DesignSense]

Thank you.

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

[@thibaultstudio]

waouhhh I LIKE THIS

[@DesignSense]

Thanks😊

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

[@mujtabam265]

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

[@muntasirahmedrafi2293]

excellent !!

[@DesignSense]

Thanks ♥️

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

[@victoriaalex4735]

Please which website do you get your pictures from

[@DesignSense]

Freepik.com

[@smsaran]

Awesome work. I love it.

[@DesignSense]

Thanks

[@smsaran]

@@DesignSense Expecting more design videos from you. Thanks.

[@DesignSense]

@@smsaran sure, stay tuned 👍

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

[@mhd_daraei1768]

Niiiice

[@Navasiri]

Thanks so much for great sharing.

[@DesignSense]

Welcome 😊

[@saqlain_ch]

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

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