Landing Page design in Adobe XD (2020)
Вставка
- Опубліковано 7 лют 2020
- 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/DesignSense
-------------------------------------------------------------------------------
Source File Link:
bit.ly/3oc3qzN
------------------------------------------------------------------------------
Resources Links:
Image src:
www.freepik.com/free-photo/sp...
------------------------
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/WhereWeStarted
-----------------------------------------------------------------------
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
-----------------------------------------------------------------------
eye-catching, perfection, simple, elegant all in one pack! Beautiful!
Thank you so much 😊
AMAZING tutorial! One of the most comprehensive tutorials I've seen for anytNice tutorialng. Thanks so much!
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
TNice tutorials is actually a very good and straight forward tutorial. No having ask questions or guess, no over-explaining elents, and brings
It really worked for me after I look and try some tutorials, yours is the one that worked. Owe you a lot.
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.
Thanks for your suggestions 😊
You are amazing, I just switch to soft softs and I am loving everytNice tutorialng about it. It much easier then my last program.
works, keep up the good work man
Lovely, and so easy to follow, a great minimalism example that inspires a lot!
Thanks for your appreciation ♥️
As a newbie just getting into this and a new subbie all I have to say is wow!
Thank you 😊
This tutorial is amazing and you are really good at teaching !! great job sir !
Love the shoe shadow effect! Very creative.
Thanks for your appreciation, stay tuned for more coming tutorials.
@@DesignSense :)
Made the same landing page with your help. Thanks for this video!
Welcome, stay tuned
This is maybe one of the best designed webpage I've ever seen. You are amazing!
Thank you 😊
I loved it!
Great work again. Clean and beautiful design. Your videos are amazing.
Thank you 😊, stay tuned 👍
I've been watcNice tutorialng tNice tutorials and you inspired to try to make soft so I thank you
This gave me many new ideas. Thank you!
Most welcome, stay tuned 😊
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...😉🤝✌
Yes, you are right 👍
@@DesignSense 🤝✌ Wishes for more creative designs
Yes, sure 😊
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.
@@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
Dude u deserve a 👏. I wish you can help to acquire a skill like yours
Thank you brother 😊, stay tuned for more creative tutorials.
Wow - great tutorial.. Love it!!
Thanks 😊
Thank you so much!
Greetings from Tbilisi.
Your welcome 😊, stay tuned thanks.
Wow thank you so much that really helped
very interesting!
love your design🥺
from Japan
Thanks for your love. Stay tuned
This helped a lot thank you
Too good.
Thanks😊😘
This is AWESOME😍
Welcome. Stay tuned for more video.
Amazing video
Você é muito bom no que faz!!! Parabéns.
Thank you 😊
Great tutorial, could you explain what you are doing , the choices you make in your next tutorial? Thank you
Thanks, we will upload the resume /CV design in word, which is most requested tutorial.
Thanks for tutorial
Niiiice
Amazing!!
Thanks 👍
this is going to be great!
❤️❤️
Great Design i learned something
Great, keep it up.
waouhhh I LIKE THIS
Thanks😊
Wao.. excellent work 👍👍
Thanks 👍
Gorgeous design!
Thank you.
Wow
Nice work! I created the exact design with illustrator.
@All in one videos SVG format it can display on the web as a preview mode I think
clean and classy design
Thanks ♥️
thanks for the info really helped alot. i rather learn about tNice tutorials than school
Amazing.....work...amd easily explaination with silent content....keep rocking...and more videos expect from entry level designers
Thank you for your appreciations. Stay tuned 😊
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
Welcome 😊, you can easily export all the things from adobe xd, in just one click by pressing Ctrl + E, in every format, stay tuned
I'm like you, how can make it dynamic page with animation , what name of this ?
@@ahmedhero3866 you can use adobe after effects or adobe xd prototype for animations, thanks
Creative work
Thanks 😊
Great tutorial, I like your designs 👍🏿
Thank you 😊
Amazing choice of colors
Thanks 😊
Love your work
Thanks 😊
Really loved it 😍
Thanks 😊
I also really like softEX, it has a very nice effect to it
Amazing... Great tutorial ❤️👍
Thanks 😊, stay tuned.
Thank you so much!
Most welcome 😊
Ï 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
Tbh I don't have a playlist. I choose music from NCS (NoCopyrightMusic) for my tutorials. Search NCS on UA-cam. Thanks.
@@DesignSense thank you
WOW
Thank you
ואוווווו אחד היפים
excellent !!
Thanks ♥️
really beautiful design!
Thanks 😊
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 !!
Thanks for appreciation. Soon we will start voice over.
really nice 😍
Thanks.
great design
Thanks
Great tutorial.
Thank you 😊
Thanks so much for great sharing.
Welcome 😊
Мощно.
Thank you for this video
Your welcome 😊
Hey Bro, Don't talk down to yourself like that. believe in yourself and don't let nobody change your mindset of that!
U r awesome ❤️
Thanks, 😊
very cool design
Thanks 😊
Awesome work. I love it.
Thanks
@@DesignSense Expecting more design videos from you. Thanks.
@@smsaran sure, stay tuned 👍
amazing
Thanks
Respect nice work
Thank you.
You should have added the xd file in the description.
No problem do it.!
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!
Thanks, but for now we just upload the designing tutorial 🙄.
There are plugins to convert this XD designs to code
Genius!
Thank you
this track bumps
شكراً
عمل رائع
Thanks
Thanks so much.
Welcome ❤️
great presentation
Thank you
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.
Nice design, while providing a responsive design to client whats are all the resolutions needed.
you make a nice design
Thanks 😊
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.
Yes, here is the other tutorials for the full landing page design, the links are below.
Tutorial 1:
ua-cam.com/video/Ei6777S0N_g/v-deo.html
.
Tutorial 2:
ua-cam.com/video/2a7bQwAIBMQ/v-deo.html
My first ti ever gettin on soft soft was in 17 man it a whole year to use to soft soft
Very Nice
Thanks
How did you got the different coloured shoes .? And changed the backgroung of it
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
Great design. But I have questions, how to make this design in to final landing page web? I never ever using Adobe XD before.
You can design in other tools like Photoshop, Illustrator, Figma, Sketch too, then code it to make it functional.
@@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 ❤
@@reda4135 yes, i will upload more tutorials about prototyping. Thanks
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.
You can contact on our Facebook page or Instagram.
Facebook:
web.facebook.com/DesignSense2070/
.
.
Instagram
@designsense99
How do you add background image in this animated prototype? Will you make a tutorial video on which software you do
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
@@DesignSense Thank You :)
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?
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
Great tutorial!!
How do you make and export of the final page?(As the finished image)
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
@@DesignSense I appreciate your advice, and try by myself too! Looking forward to your next works!🙂
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?
@@mlockey1 sorry for the music, soon i will start my voice over on the tutorials, thanks
Good Job!!
How can i open an adobe xd file created with a later version of the software? I use mac
You need to update it, it will not working in later versions, thank you 😊
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...
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.”
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.
There are a lot of tutorials on youtube who teach how to code such pages. We will start to create responsive pages soon.
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.
May be its change the position with a nice transitions, but that will look nice on front of shoes😁
what format are those images you added
In png format.
how did you removed the white background from the shoe image
Using photoshop for it.
was great
Thanks 😊
@@DesignSense sir, I need your help, I will be very thankful if you help me with a msg or with a video.I WANT TO THAT HOW TO IMPORT OR UPLOAD THIS KIND OF ANIMATED DESIGNS INTO WORDPRESS, I HAVE SEARCHED ALOT BUT CANT FING A WAY
@@freelancing4307 Actually i didn't use WordPress before, but I am working on webflow there is possible to do design exactly like this, for further discussion you can contact me on Facebook page 😊 or Instagram.
Facebook:
web.facebook.com/DesignSense2070/
Could you please tell how to get rounded corner artboard?
It is not the artboard, actually it is simple rounded corner shape, that i have designed for presentation purpose.
***** Five stars, a thumb up and a subscribe buttom clicked!!!
Thanks man, stay tuned for more best tutorials 😊
I loved it. But i need tutorial to convert it in html and css design can any body share tutorial?