Landing Page design in Adobe XD (2020)

No video

Landing Page design in Adobe XD (2020)

Рет қаралды 341,816

4 жыл бұрын

Hello guys!
Today you will learn to design a clean Landing page in Adobe XD
#Adobexd #LandingPage #Ecommerce
-----------------------------------------------------------------------------------------------------------------------
Follow us:
Facebook:
/ designsense2. .
/ god-is-a-designer-1144...
Join our Facebook group for curated content, inspiration, design critique, and job postings :
/ 415654592183891
Instagram:
@designsense99
Dribbble:
dribbble.com/D...
-------------------------------------------------------------------------------
Source File Link:
bit.ly/3oc3qzN
------------------------------------------------------------------------------
Resources Links:
Image src:
www.freepik.co...
------------------------
Icons src:
www.flaticon.com/
------------------------
Color Hex Codes:
#FF0073
#ECDC47
#57C7E4
#FCE7F6
#E3EAF8
#FECBE2
#FFF6FB
--------------------------------------------------------
Music:
Track: Lost Sky - Where We Started (feat. Jex) [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • Lost Sky - Where We St...
Free Download / Stream: ncs.io/WhereWeS...
-----------------------------------------------------------------------
Track: Andromedik - SHE [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • Andromedik - SHE [NCS ...
Free Download / Stream: ncs.io/SHE
-----------------------------------------------------------------------
Track: Unknown Brain - Why Do I? (ft. Bri Tolani) [NCS Release]
Music provided by NoCopyrightSounds.
Watch: • Unknown Brain - Why Do...
Free Download / Stream: ncs.io/WhyDoIYO
-----------------------------------------------------------------------

Пікірлер: 355

@murtazakarimzada4473 4 жыл бұрын

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 4 жыл бұрын

Thanks for your suggestions 😊

@shikhanath8877 4 жыл бұрын

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

@DesignSense 4 жыл бұрын

Thank you so much 😊

@EditorialGuiasdelSur Жыл бұрын

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

@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

@mohammeddhillshaardthd2122 4 жыл бұрын

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 4 жыл бұрын

Yes, you are right 👍

@mohammeddhillshaardthd2122 4 жыл бұрын

@@DesignSense 🤝✌ Wishes for more creative designs

@DesignSense 4 жыл бұрын

Yes, sure 😊

@ododesigninc8252 3 жыл бұрын

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 3 жыл бұрын

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

@mcsfsfv Жыл бұрын

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

@TwilightOdin Жыл бұрын

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

@abhishekpowar2733 4 жыл бұрын

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

@DesignSense 4 жыл бұрын

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.

@toiatikhawla9278 Жыл бұрын

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

@CoolScratcher 4 жыл бұрын

Love the shoe shadow effect! Very creative.

@DesignSense 4 жыл бұрын

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

@CoolScratcher 4 жыл бұрын

@@DesignSense :)

@TechnoPel 4 жыл бұрын

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 4 жыл бұрын

Yes, here is the other tutorials for the full landing page design, the links are below. Tutorial 1: kzfaq.info/get/bejne/e89mappouJayj5s.html . Tutorial 2: kzfaq.info/get/bejne/aMdnlbSopq-mfYU.html

@brendalucialeovi112 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Thanks for your appreciation ♥️

@bimalthapaliya7134 4 жыл бұрын

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 4 жыл бұрын

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

@elitedesignhub415 4 жыл бұрын

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

@oanhle4751 Жыл бұрын

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

@CrissyM03 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Thank you 😊

@AnhHoang-zr4pe 4 жыл бұрын

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 4 жыл бұрын

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

@reda4135 3 жыл бұрын

@@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 3 жыл бұрын

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

@archies23 4 жыл бұрын

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 4 жыл бұрын

Thanks for appreciation. Soon we will start voice over.

@purnimadeshpande3837 3 жыл бұрын

This gave me many new ideas. Thank you!

@DesignSense 3 жыл бұрын

Most welcome, stay tuned 😊

@user-in2jt6qi3r Жыл бұрын

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

@shalakagaikwad8813 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Welcome, stay tuned

@georgesngandeu9115 4 жыл бұрын

Ï 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 4 жыл бұрын

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

@georgesngandeu9115 4 жыл бұрын

@@DesignSense thank you

@eswar1023 2 жыл бұрын

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

@DesignSense 2 жыл бұрын

Thank you for your appreciations. Stay tuned 😊

@paulocanzolo Жыл бұрын

works, keep up the good work man

@alfredopaghasian5538 4 жыл бұрын

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

@DesignSense 4 жыл бұрын

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

@thegabischip 4 жыл бұрын

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

@DesignSense 4 жыл бұрын

Thank you 😊, stay tuned 👍

@user-st5gy7ep7o 4 жыл бұрын

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

@DesignSense 4 жыл бұрын

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

@199rajesh 4 жыл бұрын

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

@DesignSense 4 жыл бұрын

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 4 жыл бұрын

@@DesignSense Thank You :)

@kinsleyharvey9017 3 жыл бұрын

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 3 жыл бұрын

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

@k4iolx349 Жыл бұрын

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

@waleedtarek975 4 жыл бұрын

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

@DesignSense 4 жыл бұрын

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

@sawomirparda3364 Жыл бұрын

Wow thank you so much that really helped

@diegoarf_ 3 жыл бұрын

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 3 жыл бұрын

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

@tmanemaran 4 жыл бұрын

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 4 жыл бұрын

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

@choose2behappy699 3 жыл бұрын

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 3 жыл бұрын

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

@HARSHRANAYT 3 жыл бұрын

I loved it!

@ArisaNISHIHARA 4 жыл бұрын

very interesting! love your design🥺 from Japan

@DesignSense 4 жыл бұрын

Thanks for your love. Stay tuned

@RajaVelforyou 4 жыл бұрын

Wow - great tutorial.. Love it!!

@DesignSense 4 жыл бұрын

Thanks 😊

@dbercheva Жыл бұрын

This helped a lot thank you

@robertopenaforte9025 Жыл бұрын

this is going to be great!

@DesignSense Жыл бұрын

❤️❤️

@minyoonki1583 4 жыл бұрын

Could you please tell how to get rounded corner artboard?

@DesignSense 4 жыл бұрын

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

@ilanebha8112 2 жыл бұрын

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

@DesignSense 2 жыл бұрын

I didn't get, what do you mean?

@saqlain_ch 2 жыл бұрын

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

@kalelkar 3 жыл бұрын

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.

@eder.santana_oficial 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Thank you 😊

@alyssonalbuquerquealysson667 Жыл бұрын

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

@Ati1254 3 жыл бұрын

Thanks😊😘 This is AWESOME😍

@DesignSense 3 жыл бұрын

Welcome. Stay tuned for more video.

@foodline1584 2 жыл бұрын

clean and classy design

@DesignSense 2 жыл бұрын

Thanks ♥️

@belginv9 3 жыл бұрын

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

@mujtabam265 4 жыл бұрын

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

@joel9909 3 жыл бұрын

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 3 жыл бұрын

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

@joel9909 3 жыл бұрын

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

@jordyntv223 2 жыл бұрын

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

@harsh-v5s 4 жыл бұрын

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 4 жыл бұрын

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.

@YN-pg9ch 4 жыл бұрын

Nice work! I created the exact design with illustrator.

@reda4135 3 жыл бұрын

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

@artankaraj 3 жыл бұрын

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 3 жыл бұрын

Hahahahaha

@RezoUI 4 жыл бұрын

Thank you so much! Greetings from Tbilisi.

@DesignSense 4 жыл бұрын

Your welcome 😊, stay tuned thanks.

@lulyasha6287 2 жыл бұрын

really beautiful design!

@DesignSense 2 жыл бұрын

Thanks 😊

@facundogimenez1679 3 жыл бұрын

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

@DesignSense 3 жыл бұрын

Sorry, we will remove suggested video.

@HyperActive94 4 жыл бұрын

Amazing choice of colors

@DesignSense 4 жыл бұрын

Thanks 😊

@inomkhalilov1291 2 жыл бұрын

Thanks for tutorial

@humamughal2884 3 жыл бұрын

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 3 жыл бұрын

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

@Navasiri 3 жыл бұрын

Thanks so much for great sharing.

@DesignSense 3 жыл бұрын

Welcome 😊

@shcreations.2695 3 жыл бұрын

great presentation

@DesignSense 3 жыл бұрын

Thank you

@martinsakoje1837 3 жыл бұрын

Great tutorial, I like your designs 👍🏿

@DesignSense 3 жыл бұрын

Thank you 😊

@DudeWithCoffee 3 жыл бұрын

Play this at 0.5 speed and it will be easier to catch up

@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

@jawadhussain2467 4 жыл бұрын

Wao.. excellent work 👍👍

@DesignSense 4 жыл бұрын

Thanks 👍

@NowHereBlow 4 жыл бұрын

Amazing... Great tutorial ❤️👍

@DesignSense 4 жыл бұрын

Thanks 😊, stay tuned.

@omerertem 2 жыл бұрын

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 2 жыл бұрын

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

@afsarnayeem9772 2 жыл бұрын

Really loved it 😍

@DesignSense 2 жыл бұрын

Thanks 😊

@deividecom 4 жыл бұрын

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

@DesignSense 4 жыл бұрын

I didn't get it, can you explain?

@deividecom 4 жыл бұрын

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

@mhd_daraei1768 2 жыл бұрын

Niiiice

@user-eq2kq1qq5t 3 жыл бұрын

Gorgeous design!

@DesignSense 3 жыл бұрын

Thank you.

@tanyakronsujinprum651 4 жыл бұрын

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 4 жыл бұрын

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

@yoshiakiyoneyama895 4 жыл бұрын

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

@DesignSense 4 жыл бұрын

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 4 жыл бұрын

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

@mlockey1 4 жыл бұрын

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 4 жыл бұрын

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

@cssmaster2978 4 жыл бұрын

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 4 жыл бұрын

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 4 жыл бұрын

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

@DesignSense 4 жыл бұрын

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

@phato7930 2 жыл бұрын

really nice 😍

@DesignSense 2 жыл бұрын

Thanks.

@nqh288kael2 Жыл бұрын

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

@videophotokissi7700 Жыл бұрын

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

@CollinsKreation 4 жыл бұрын

Great Design i learned something

@DesignSense 4 жыл бұрын

Great, keep it up.

@KiranSharma64414 4 жыл бұрын

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

@DesignSense 4 жыл бұрын

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

@MrRyanIsle 4 жыл бұрын

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

@Amankumar-mk1yt 4 жыл бұрын

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

@DesignSense 4 жыл бұрын

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

@chibuezeamadi8220 3 жыл бұрын

I have fallen in love with design sense

@DesignSense 3 жыл бұрын

Thank you for your love and support.❤️😊

@hudamathematician5308 2 жыл бұрын

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

@thibaultstudio 4 жыл бұрын

waouhhh I LIKE THIS

@DesignSense 4 жыл бұрын

Thanks😊

@muntasirahmedrafi2293 3 жыл бұрын

excellent !!

@DesignSense 3 жыл бұрын

Thanks ♥️

@sriramabhaktahanuma 3 жыл бұрын

Love your work

@DesignSense 3 жыл бұрын

Thanks 😊

@user-ic7mn2yi3s 4 жыл бұрын

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

@abhisheksinghrajput2611 3 жыл бұрын

Amazing video

@shahzadaatif3625 3 жыл бұрын

Please make complete tutorial about Adobe XD 😊

@DesignSense 3 жыл бұрын

Sure, Thanks.

@smsaran 4 жыл бұрын

Awesome work. I love it.

@DesignSense 4 жыл бұрын

Thanks

@smsaran 4 жыл бұрын

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

@DesignSense 4 жыл бұрын

@@smsaran sure, stay tuned 👍

@Yonas20102 3 жыл бұрын

Respect nice work

@DesignSense 3 жыл бұрын

Thank you.

@sankalpsinghbais8588 4 жыл бұрын

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

@DesignSense 4 жыл бұрын

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 4 жыл бұрын

@@DesignSense Thank you very much sir😊

@shakourhajji5406 3 жыл бұрын

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

@biancac2191 4 жыл бұрын

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 4 жыл бұрын

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 4 жыл бұрын

DesignSense Thanks for you answer and pretty nice job!