As a developer trying to understand the design process, this video was by far the best one I found to guide me towards an understanding of how XD works. Thanks so much!
Absolutely steller tutorial. Thank you so much. I just downloed XD today and even though I'm comfortable with Illustrator, it's still a little overwhelming. Other tutorials just had music instead of instructions, which made it hard to follow along. Your verbal instructions are really helpful. Also get some nice little design tips! I'm always increasing my tracking, never thinking to reduce it, haha.
Sure, he called the triangle a rectangle but other than that, this was the best and easiest to follow tutorial I've seen in quite some time. Well done! I'm interested in your course - when will it be ready?
Thank you for your compliment and understanding. English is not my first language, so sometimes i mix up the words. The course is already done! You can find a link with the coupon code in the description of that video! Thanks again 👌🏼
I've been a print and advertising designer for a number of years and work primarily in InDesign. Over the years I've had to work with developers to design a number of websites as well, but usually just used Indesign to mock everything up for their reference along with sticky notes. This looks like the next tool I'll have to master to avoid people thinking I'm a dinosaur when it comes to UI/UX design!
Thank you so much for this tutorial! I'm extremely comfortable in Illustrator and found xd overwhelming. I've been looking for something simple, straightforward, and easy to watch to learn some basics and this was perfect!
I look forwards to your class! I am a designer with 30 years experience in branding, logo design, and illustration. Ive been recently asked to do web design but the last website I designed was 12 years ago and the tools have dramatically changed since! I am feeling confident that your course will smoothly bring me up to date. I will keep watching your videos on Elementor and XD to prepare for the class. À bientôt!
Wow thank you so much ! I was trying to make a website with adobe portfolio and it wouldn't allow me to do what I wanted, but now I can thanks to you :)
@livingwithpixels - I am not a web designer nor a graphic one but even before I really am interested to learn. With your tutorial i just made a web design following this. I hope to see more of tutorial who knows it will be a career switch :)
Dude this is the best tutorial i have ever seen , Thank you so much you are sooo amazing , You are patient you are informative ,You got urself a new follower keep up the good work best of luck
Wow I've learned so much from you in such a short amount of time. I can't even find a course that can teach what you just taught in this video. Thank you so so much! I'm looking forward to learning more from you and excited to see how an Adobe XD prototype will come together with Elementor.
In order for me to have a good output or out come as a student....I must have this determination and patience in order to finish all tasks. That's how to have an easy life!
Exactly what I was looking for. So many courses just go bluntly over all the features withour ever designing anything. It's so much easier to learn something while also doing it. Great introduction mate. Thumbs up!!
thank you so much man, perfect video straight to the point, i wish my teacher were as good as you at explaining things you just taught me what my teacher didnt in 4 courses!
Right size to start a Website design is 1366*768 which has been given in the adobe xd presizes... The reason I choose this size is because most of the users use laptop screens, And most laptop screens follows this resolution. It is also 16:9 aspect ratio, where your choice 1400*800 is not 16:9 properly... I use a little margin in left and right as the most developers do, it helps to make the website responsive for smaller screens or smaller laptops.
You are right, I wasn't aware Adobe Xd also had that 1366 preset. I will use this one in the future. I thought they only offered 1920 by 1080. Thanks for the tip. But I have to say that I don't really agree with the 16/9 argument because 1: a lot of laptops are taller than 16/9 and 2: OS & browsers always add a few bars of space, making the visible area different on every screen. That's why the only thing you really have to look out for is the 1140 in container width. That's why a few extra pixels on your artboard (left and right) in Xd won't make a real difference for the final website. But again, thanks for the tip.
@@rinodeboer You are mostly welcome... But I have another tip bro... You should design a long height website in a single artboard, if you do that then width will be important for you, but how pixels the height will be doesn't matter... There is a feature in xd called Viewport height, there you can set it to 768, or as your concern you can also reduce the viewport height for the browser navigation panel... I usually set viewport height to 700pixels for the exact reason you mentioned. Now another more important thing is that you have to make the design to be look good in low height as well, basically you have to design it to make sure that increasing or decreasing height would not make the look bad... That is the real art.... Another thing if you are a developer or if you talk to a developer about making pages responsive then the device screen size presets are very important, but the height is not that much important compare to the width. For that I usually start from laptop width 1366 and then I make responsive by MediaQuary for 1200, then 900, 700, 500 Also 1920 for desktops and 4000 for big screens...
Hi Rino, can you explain why website should be 1400 x 800 px instead of the recommended 1920 x 1080? I found your video while looking for tutorials on XD, which I'm clueless about.
It's a balance thing, part of design fundamentals. You don't want your entire web site to be spread across the entire monitor width. A paragraph would become two or three lines long. You probably won't want to read that far across a page - users won't either. It tires the eyes and makes viewing the web site a chore. It is best to keep the content more centred within the page to limit user reading distance. It also helps make users find content more quickly as their eyes, usually, are gently focussed on the page itself, so it's a good way to get attention. This is why slideshows and product hero sections (called a Call-To-Action or CTA for short) work well centred in a page, rather than off as a sidebar and so on.
Thank you so much for this, been having a hard time of understanding how to love what i just had, to the point of cancelling my subscription, coz it's starts giving me headaches. And then i saw this, waaaay much easier to understand, user friendly, and i'm currently downloading it right now thanks to you and your tips and tricks. This video helped me a lot right now more than someone could imagine..
That is so cool to hear. Glad I could help you on your journey! I have another basic tutorial on my channel about a bookstore header. Maybe that’s also one you will like. Thanks again 🙏🏻
Nice! Well if you already have bought bluehost then I should just stick with them. And you can’t link Adobe Xd to Bluehost. They have nothing to do with each other. Adobe Xd is only for design. If you want to build a real website you will need Wordpress and Elementor. I have a lot of tutorials about that (including a beginner one) about Elementor and Wordpress. I hope those video’s will help you!
hello, cool tutorial, really apreciated it, but one kind question when now the design you did is finished... how do you export it to usable HTML + CSS ? :-) Does Adobe XD allow this kind of export? Or Adobe XD is just to watch the final "possible" graphic result, so a sort of PhotoShop? Thank you
XD is a prototyping tool, so you're not going to get a fully coded website out of it. There are apps that help convert your designs into code, but when you actually look at the code it's really messy coding and sometimes the file sizes are obnoxiously large for a website. Learn some of the basics of HTML5/CSS3, especially learn how to use Bootstrap and making a simple website will be ezpz
Your tutorial was great, unfortunately I'm a total neophyte in Xd so I'm definitely interested in your course. I made something of a draft website page but it needs refined touches. It will have to work for now. Thank you.
Hey Rino! I think your tutorials have been extremely helpful for someone just starting out like myself. I am excited to continue watching your videos to learn as much as I can! Question: I wanted to know if you think the free version of Adobe XD is sufficient, or if I need to purchase Adobe XD for $10/month? Thank you! Best of luck!
Thank you for introducing me with the website building 🙏 Could you pls help me with the photography transition in Adobe XD. I'm designing a website for small beauty spa place and I want to use my photos in the project and make some kind of slideshow or transition to make it nice and professional. So do I have to copy and paste whole website artboard few times(depending how many pics I want to auto-animate)?
Hey Rino, Ik ben net begonnen met Xd en zit nual vast. Ik heb een lap tekst voor Mobiele weergave die je verticaal scrolt. Nou zie je vaak helemaal onder aan de tekst of kleding webshops een pijl om weer helemaal naar boven te komen, de Angle Up heb ik. hoe doe ik dat met die prototype? Ik hoop dat je snapt wat ik bedoel en kun je mij snel helpen daarmee. Of een youtube filmpje erover maken.
As a developer trying to understand the design process, this video was by far the best one I found to guide me towards an understanding of how XD works. Thanks so much!
Trumppppp
Love your videos, I have searched the internet for tutorials that are user-friendly, and you are it!
Thats awesome to hear. Thanks so much 🙏🏻
Absolutely steller tutorial. Thank you so much. I just downloed XD today and even though I'm comfortable with Illustrator, it's still a little overwhelming. Other tutorials just had music instead of instructions, which made it hard to follow along. Your verbal instructions are really helpful. Also get some nice little design tips! I'm always increasing my tracking, never thinking to reduce it, haha.
I agree with you.b
As a complete newbie to XD I thank you immensely
Sure, he called the triangle a rectangle but other than that, this was the best and easiest to follow tutorial I've seen in quite some time. Well done! I'm interested in your course - when will it be ready?
Thank you for your compliment and understanding. English is not my first language, so sometimes i mix up the words. The course is already done! You can find a link with the coupon code in the description of that video! Thanks again 👌🏼
@@rinodeboer lol none of us are perfect. You helped me out. Thank you!
A wrecked angle 📐
I've been a print and advertising designer for a number of years and work primarily in InDesign. Over the years I've had to work with developers to design a number of websites as well, but usually just used Indesign to mock everything up for their reference along with sticky notes. This looks like the next tool I'll have to master to avoid people thinking I'm a dinosaur when it comes to UI/UX design!
LMAO... dinosaur made me laugh, man.
I don't know if i was ever enjoying a tutorial like this one
Great job ❤
Wow, thank you!
Man Rino, the way yo teach is unique... For real! I've learning more from you than another designers... Good job my friend, keep it up!
Thank you so much for this tutorial! I'm extremely comfortable in Illustrator and found xd overwhelming. I've been looking for something simple, straightforward, and easy to watch to learn some basics and this was perfect!
I look forwards to your class! I am a designer with 30 years experience in branding, logo design, and illustration. Ive been recently asked to do web design but the last website I designed was 12 years ago and the tools have dramatically changed since! I am feeling confident that your course will smoothly bring me up to date.
I will keep watching your videos on Elementor and XD to prepare for the class.
À bientôt!
Wow thank you so much ! I was trying to make a website with adobe portfolio and it wouldn't allow me to do what I wanted, but now I can thanks to you :)
@livingwithpixels - I am not a web designer nor a graphic one but even before I really am interested to learn. With your tutorial i just made a web design following this. I hope to see more of tutorial who knows it will be a career switch :)
That’s so awesome to hear. I am actually working on a video very similar to this.
man, this is the best XD tutorial I watched, very simple yet it gives a deep understanding of many functionalities. Thanks!
Dude this is the best tutorial i have ever seen , Thank you so much you are sooo amazing , You are patient you are informative ,You got urself a new follower keep up the good work best of luck
Thank you very much for your tutorial! I am a beginner and was clueless about Adobe XD but now I am excited to learn more about UI :D
I got Wordpress , siteground and now adopexd thanks to he’s great advice and guidance thank you 🙏🏾
Wow I've learned so much from you in such a short amount of time. I can't even find a course that can teach what you just taught in this video. Thank you so so much! I'm looking forward to learning more from you and excited to see how an Adobe XD prototype will come together with Elementor.
Thank you, this was the best video! Even better than my uni tutorial.
Thank you for this video. It was really easy to follow along.
One thing is sure, I understand everything, materials are ready and it's just on point. I'll totally watch more of your tutorials. Kudos!🥰
In order for me to have a good output or out come as a student....I must have this determination and patience in order to finish all tasks. That's how to have an easy life!
Exactly what I was looking for. So many courses just go bluntly over all the features withour ever designing anything. It's so much easier to learn something while also doing it. Great introduction mate. Thumbs up!!
Thanks so much! This is exactly what my goal was with this video. Great to hear!
Dude!!! This guy is a legend !
Loved the way you explained..
This is perfect. Adobe XD is also free right now so make sure to go get it!
Hello, I really like the way you teach so simple and not boring...keep up the great work!!
Thank you very much for this tutorial, it was amazingly helpful!! All the effort you put into it is really appreciated !!
No problemo! Glad you liked it
I’m not an english speaker but this was really helpful. You explained everything very well! TY
7:20 For tutorial of the best 3 sided rectangle :) Actually really good video
Once again a fantastic tutorial - Thanks Rino
Thank you for sharing your expertise in XD....
Thank you very much for this excellent tutorial, your voice is nice, your instructions are very detail and your tips along the way are helpful.
this was really helpful thanks for the tutorial
thanks man, i learnerd a lot in 20 minutes as beginner!
Thanks for sharing your knowledge in a quick and concise way!
Thanks for the help. I have been using photoshop for web mockups I now I realized that I have to use Adobe XD
thank you so much man, perfect video straight to the point, i wish my teacher were as good as you at explaining things you just taught me what my teacher didnt in 4 courses!
I'm from Indonesia 😎, thanks for tutorial ❤️
This video showcases why you are the best. Thank you for the icons, awesome!
So once we are done with our website design, how do we publish it to have it a live well working responsive website? What are the steps? Thank You!
Super Dope Design Dude!
Yes, very nice tutorial, learned a lot from you
Outstanding tutorial. I've been using AI for my design mockup but this tool looks better and you made understanding how to use it very easy. Thanks!
Thank you. This was very helpful.
Very simple yet detailed video man. You are extraordinary bro!
Thank you for a great tutorial! I’m beginning my transition into Product Design! This greatly helps with building soft skills in a quality way!
Je engels is echt goed blijf doorgaan
Really nice! Thanks for great tutorial
Very good introductory video. Clear and concise, thanks.
Super good and informated video!
thank you so much for such simple tutorial, after watching so many videos i learned from yours.
your tutorials are amazing, so glad I stumbled across them!
Simple, well explained and thorough. What more can I say? Can't wait for your course! Thank you Rino!
Thanks so much for the compliment! The course is already out btw, you can find a link to it in the description of the video.
Right size to start a Website design is 1366*768 which has been given in the adobe xd presizes...
The reason I choose this size is because most of the users use laptop screens, And most laptop screens follows this resolution. It is also 16:9 aspect ratio, where your choice 1400*800 is not 16:9 properly... I use a little margin in left and right as the most developers do, it helps to make the website responsive for smaller screens or smaller laptops.
You are right, I wasn't aware Adobe Xd also had that 1366 preset. I will use this one in the future. I thought they only offered 1920 by 1080. Thanks for the tip.
But I have to say that I don't really agree with the 16/9 argument because 1: a lot of laptops are taller than 16/9 and 2: OS & browsers always add a few bars of space, making the visible area different on every screen. That's why the only thing you really have to look out for is the 1140 in container width. That's why a few extra pixels on your artboard (left and right) in Xd won't make a real difference for the final website.
But again, thanks for the tip.
@@rinodeboer You are mostly welcome... But I have another tip bro... You should design a long height website in a single artboard, if you do that then width will be important for you, but how pixels the height will be doesn't matter... There is a feature in xd called Viewport height, there you can set it to 768, or as your concern you can also reduce the viewport height for the browser navigation panel... I usually set viewport height to 700pixels for the exact reason you mentioned. Now another more important thing is that you have to make the design to be look good in low height as well, basically you have to design it to make sure that increasing or decreasing height would not make the look bad... That is the real art....
Another thing if you are a developer or if you talk to a developer about making pages responsive then the device screen size presets are very important, but the height is not that much important compare to the width. For that I usually start from laptop width 1366 and then I make responsive by MediaQuary for 1200, then 900, 700, 500 Also 1920 for desktops and 4000 for big screens...
Hi Rino, can you explain why website should be 1400 x 800 px instead of the recommended 1920 x 1080? I found your video while looking for tutorials on XD, which I'm clueless about.
It's a balance thing, part of design fundamentals. You don't want your entire web site to be spread across the entire monitor width. A paragraph would become two or three lines long. You probably won't want to read that far across a page - users won't either. It tires the eyes and makes viewing the web site a chore. It is best to keep the content more centred within the page to limit user reading distance. It also helps make users find content more quickly as their eyes, usually, are gently focussed on the page itself, so it's a good way to get attention. This is why slideshows and product hero sections (called a Call-To-Action or CTA for short) work well centred in a page, rather than off as a sidebar and so on.
@@traversal6881 thank you for taking time to reply. I hope it wd be enlightening to future readers and posters here as well. :)
@@ongjanette No problem! I teach web design and development and am always happy to help.
Love your videos. Huge fan from holland ;)
Great Lecture continue bro!
Fantastic, thanks Rino, what a rapid prototyping tool, will definitely have many other good uses for it too!
Thank you so much for this, been having a hard time of understanding how to love what i just had, to the point of cancelling my subscription, coz it's starts giving me headaches. And then i saw this, waaaay much easier to understand, user friendly, and i'm currently downloading it right now thanks to you and your tips and tricks. This video helped me a lot right now more than someone could imagine..
That is so cool to hear. Glad I could help you on your journey! I have another basic tutorial on my channel about a bookstore header. Maybe that’s also one you will like. Thanks again 🙏🏻
@@rinodeboer sure! I have subscribed your channel already😊
Do you have a tutorial to link adobe xd thru bluehost...my hosting platform is bluehost and im having a hard time linking it to adobe xd
For a starter like me,is it ok to have bluehost as my hosting platform? And i want to build my web thru adobe xd..is it advisable?
Nice! Well if you already have bought bluehost then I should just stick with them. And you can’t link Adobe Xd to Bluehost. They have nothing to do with each other. Adobe Xd is only for design. If you want to build a real website you will need Wordpress and Elementor. I have a lot of tutorials about that (including a beginner one) about Elementor and Wordpress. I hope those video’s will help you!
I love you man. THANKS!
Very helpful! Appreciate how you got right to it. Very interested in further tutorials! Thank You Much!
Game changer...If i could follow you a 1000 times i could, thank you..!!
U r excellent brother..🙏🙏 I am from India learning with your videos
that's actually a nice job!😀
Bedankt man! Ik moet voor een les iets doen met Adobe XD maar de uitleg is heel karig =/ Nu begrijp ik het 100x beter!
Thank you very much! You're tutorials are very easy to understand
Love it great starter video for getting to know XD! Thanks!
This is amazing, very helpful. Thank you! :)
….nice vid 😃 Hope that you and the family are all well 🙏🏾 Keep up the good work 👊🏾 😃
You are the best. Thank you!
thank u your tutorial. now, I'm your new subsciber :)
Awesome tutorial, thank you for this. Very helpful.
Love the way you explain. Excellent tutorial, thanks!!
Thank you!! It was super clear :)
hello, cool tutorial, really apreciated it, but one kind question
when now the design you did is finished... how do you export it to usable HTML + CSS ? :-)
Does Adobe XD allow this kind of export? Or Adobe XD is just to watch the final "possible" graphic result, so a sort of PhotoShop?
Thank you
I have the same question
XD is a prototyping tool, so you're not going to get a fully coded website out of it. There are apps that help convert your designs into code, but when you actually look at the code it's really messy coding and sometimes the file sizes are obnoxiously large for a website. Learn some of the basics of HTML5/CSS3, especially learn how to use Bootstrap and making a simple website will be ezpz
@@fyrelore5365 Cool! Thank you!
There are plugins to turn it into html but the sizes are off the charts
Really good tutorial. Learnt quite a bit
Like the way on your tutorial, really helpful and easy understanding for the Adobe XD learning beginner. Thank you so much. 👍
hey, im new with Adobe Xd and i like your tutorial videos
but can you explain why we should start a project with 1400 * 800 canvas size?
Do you use the same 1400 pixels when developing it on elementor? I've been having some resizing issues when migrating it to elementor...
Your tutorial was great, unfortunately I'm a total neophyte in Xd so I'm definitely interested in your course. I made something of a draft website page but it needs refined touches. It will have to work for now. Thank you.
Thank you so much.Nice tutorial...
I appreciated the work ...great job!!
Thank you for such a great tutorial💜🤍🧡
Thank you, you are very good, it was super clear congrats
Amazing video. You covered almost all features of this tool. this video helped me a lot. thanks much
Nice little tutorial. Really helpful and well paced for design beginners. Thanks!
thanks for a great video! can't wait to see your course.
Thank u for this..hopefully more of this tutorial...may I ask if its too late to start learning in web design esp. if ur in late adult?
You made it much easier for me to learn Adobe XD. Thank you so much.
Thank you!
I wish you and everyone else well.
living with pixels is just a great name aha
Love your videos! Any videos/tutorials on exporting the site to upload to FTP?
Did you make a video about what plugin do you use in your adobe xd to build a website??
I agree, very good demonstration and explanation of software, step by step for beginners.
Hey Rino! I think your tutorials have been extremely helpful for someone just starting out like myself. I am excited to continue watching your videos to learn as much as I can! Question: I wanted to know if you think the free version of Adobe XD is sufficient, or if I need to purchase Adobe XD for $10/month? Thank you! Best of luck!
Thank you for introducing me with the website building 🙏 Could you pls help me with the photography transition in Adobe XD. I'm designing a website for small beauty spa place and I want to use my photos in the project and make some kind of slideshow or transition to make it nice and professional. So do I have to copy and paste whole website artboard few times(depending how many pics I want to auto-animate)?
Excellent. Thank you 😀
Hey Rino, Ik ben net begonnen met Xd en zit nual vast. Ik heb een lap tekst voor Mobiele weergave die je verticaal scrolt. Nou zie je vaak helemaal onder aan de tekst of kleding webshops een pijl om weer helemaal naar boven te komen, de Angle Up heb ik. hoe doe ik dat met die prototype? Ik hoop dat je snapt wat ik bedoel en kun je mij snel helpen daarmee. Of een youtube filmpje erover maken.
really liked this! Very much like Fireworks but better.
awesome explanation dear.. keep moving on... really useful..