Adobe Xd Web Design - How to design a simple website in Adobe Xd for beginners (2020)

[@lucisetumbrae]

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!

[@Wade_Fucking_Wilson]

Trumppppp

[@michaelrusso6405]

Love your videos, I have searched the internet for tutorials that are user-friendly, and you are it!

[@rinodeboer]

Thats awesome to hear. Thanks so much 🙏🏻

[@xXRubella666Xx]

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.

[@Haneendweikathussain]

I agree with you.b

[@maracheztrendycollections4302]

As a complete newbie to XD I thank you immensely

[@motazalia5301]

I don't know if i was ever enjoying a tutorial like this one Great job ❤

[@rinodeboer]

Wow, thank you!

[@davidmejiasacosta2449]

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!

[@fongdimbulator]

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!

[@jideoforigbelina6957]

LMAO... dinosaur made me laugh, man.

[@CeCe-yo3el]

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!

[@raphaelyx7353]

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

[@Zenfabrice33]

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!

[@johnkorn6698]

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?

[@rinodeboer]

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 👌🏼

[@TeaSpiracy]

@@rinodeboer lol none of us are perfect. You helped me out. Thank you!

[@4h1no58]

A wrecked angle 📐

[@jacquelineelefante870]

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!

[@marymargarettego_7252]

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!

[@kaizancalsiman7469]

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!🥰

[@gabgab9417]

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

[@rinodeboer]

That’s so awesome to hear. I am actually working on a video very similar to this.

[@alnajigolden]

man, this is the best XD tutorial I watched, very simple yet it gives a deep understanding of many functionalities. Thanks!

[@blueryna9768]

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

[@Gateway-io]

I got Wordpress , siteground and now adopexd thanks to he’s great advice and guidance thank you 🙏🏾

[@evagil9171]

I’m not an english speaker but this was really helpful. You explained everything very well! TY

[@droodthedude]

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

[@rinodeboer]

Thanks so much! This is exactly what my goal was with this video. Great to hear!

[@IrwinBorjas]

Thanks for the help. I have been using photoshop for web mockups I now I realized that I have to use Adobe XD

[@hadjernekhoul7250]

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

[@hollybecker5975]

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.

[@AdamMDafa]

I'm from Indonesia 😎, thanks for tutorial ❤️

[@BobbyDaSilva]

7:20 For tutorial of the best 3 sided rectangle :) Actually really good video

[@papiangelus]

This is perfect. Adobe XD is also free right now so make sure to go get it!

[@Gateway-io]

Dude!!! This guy is a legend !

[@hollyking4792]

Hello, I really like the way you teach so simple and not boring...keep up the great work!!

[@andreak9254]

Thank you, this was the best video! Even better than my uni tutorial.

[@believethatyoucan92]

Frustrating, I’m following along and at 3:08 but every time I change column width, the gutter width changes and I can’t copy what you’ve done 😠 Has there been an update to XD since this video was made? Or are there some settings that need to be adjusted

[@JP-ld6nx]

Hey bro I had the same problem. I just changed the number of columns from 2 to 1 and then changed it back to 2 then it lets me input the correct proportions of 1140 and 130. I think it's just a glitch or something with XD. I hope this helps.

[@markomitrovic4184]

Beneath the 130 column width you need to type 0 (that's for left right margins)

[@danielweston4853]

@@markomitrovic4184 Thanks this worked

[@mrtazey]

Make a custom (custom web page and change the size) page, then it will work

[@ataud9754]

Thank you very much for this tutorial, it was amazingly helpful!! All the effort you put into it is really appreciated !!

[@rinodeboer]

No problemo! Glad you liked it

[@alexandret.8130]

Do you use the same 1400 pixels when developing it on elementor? I've been having some resizing issues when migrating it to elementor...

[@Zain09921]

How can i manage a php/html website to adobe Xd ? Is it possible?

[@Niithish]

Every kid can understand if there is a teacher like you

[@MatthewFurman]

This video showcases why you are the best. Thank you for the icons, awesome!

[@whoisryad]

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!

[@YunusParvezKhan]

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.

[@rinodeboer]

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.

[@YunusParvezKhan]

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

[@matthewm9529]

Hi am I confused after creating a website with adobe xd how do I transfer that to a domain and make the website live? Is there plug in or somewhere I upload the file to shopify/word press to? Thanks so much!

[@royennev]

Super Dope Design Dude!

[@quangle9049]

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.

[@HABIBLUTFIPAMUNGKASHABONG]

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?

[@PizzaPunk86]

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!

[@munabhaimpharm]

Loved the way you explained..

[@hoshangakrawi9405]

thanks man, i learnerd a lot in 20 minutes as beginner!

[@adrianlightfoot7341]

Once again a fantastic tutorial - Thanks Rino

[@prayerhouseofjesus]

U r excellent brother..🙏🙏 I am from India learning with your videos

[@elisagrossenbacher8106]

Thank you for this video. It was really easy to follow along.

[@thehansr]

this was fine and all, but many missing things here. how do you import fonts for example, i know now that I have googled it but you could have just said it in the tutorial.

[@sajman420]

So how does one publish a website once they are done designing in XD?

[@clydeforland5944]

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!

[@rovelynabarico1042]

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?

[@DindinHendra]

Did you make a video about what plugin do you use in your adobe xd to build a website??

[@dantepaule6720]

Thank you for sharing your expertise in XD....

[@FAsTecIT]

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

[@satrialesporkstore7889]

I have the same question

[@fyrelore5365]

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

[@satrialesporkstore7889]

@@fyrelore5365 Cool! Thank you!

[@granthefato340]

There are plugins to turn it into html but the sizes are off the charts

[@ongjanette]

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.

[@traversal6881]

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.

[@ongjanette]

@@traversal6881 thank you for taking time to reply. I hope it wd be enlightening to future readers and posters here as well. :)

[@traversal6881]

@@ongjanette No problem! I teach web design and development and am always happy to help.

[@FM-yj6ry]

hi tihis is auto code in website or manual coding once your design is ok thanks

[@amruthkiran94]

Simple, well explained and thorough. What more can I say? Can't wait for your course! Thank you Rino!

[@rinodeboer]

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.

[@OriginalTman]

Very simple yet detailed video man. You are extraordinary bro!

[@fiji4059]

this was really helpful thanks for the tutorial

[@Marvelteecee23]

Game changer...If i could follow you a 1000 times i could, thank you..!!

[@CheckTesting1]

….nice vid 😃 Hope that you and the family are all well 🙏🏾 Keep up the good work 👊🏾 😃

[@isabellarai409]

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)?

[@JBKNL]

Bedankt man! Ik moet voor een les iets doen met Adobe XD maar de uitleg is heel karig =/ Nu begrijp ik het 100x beter!

[@LePasha1974]

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.

[@bookbeatles]

How are you gonna create that triangle in elementor?

[@kerenewell7908]

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!

[@yannaseodigitalmarketingst739]

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

[@rinodeboer]

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 🙏🏻

[@yannaseodigitalmarketingst739]

@@rinodeboer sure! I have subscribed your channel already😊

[@yannaseodigitalmarketingst739]

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

[@yannaseodigitalmarketingst739]

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?

[@rinodeboer]

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!

[@datukspotdatukspot7733]

When I Change the grid guides it keep correcting my numbers as if the guides are locked at a certain ratio. How do I fix this?

[@rebeccajames5242]

but you don't tell us how to get the css & htlm code for website view

[@judithmyers258]

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.

[@ChristopherJones-cjphoto]

Thanks for sharing your knowledge in a quick and concise way!

[@HackUniversity]

Everyone should see this, especially those who want to jump in this field!

[@ankitagogia4879]

thank you so much for such simple tutorial, after watching so many videos i learned from yours.

[@seeithappen1]

I haven't seen anything here that cannot be done way faster with plane html - css and an icon library. And how are you going to extract a responsive web page without funky plugins ? Especially after dropping Adobe Muse like a hot potato.

[@GraceOLeary]

your tutorials are amazing, so glad I stumbled across them!

[@marymargarettego_7252]

that's actually a nice job!😀

[@MrAngryNeard]

And what about the code part? how do you transform that in to code?

[@mijuu186]

Great Lecture continue bro!

[@creativefuel3411]

I have tried the 1920x1080 template for desiging a webpage and everything seem off (font size, image size) do you know why this is?

[@michaeltrue6202]

living with pixels is just a great name aha

[@robertfreeman8157]

Thank you. This was very helpful.

[@jean-louisscarsi5687]

Hi ! Thank you so much. As student, I would like to build a full website for a travel agency, a fast food delivery and a e-commerce. Regards

[@lequeirozc]

Could you explain why don't you use the "website" size adobe xd gives you?

[@travishill3002]

Not a bad tutorial. Still, you should teach about text color contrast because it's hard to read the logo...

[@bijoypathak2236]

Wanna know can XD can be used to make full fledged sites or just the prototype

[@w.obrien8044]

Very good introductory video. Clear and concise, thanks.

[@khairulamar537]

Hey how do i import my design after i finished in adobe xd to WordPress?

[@julianvd3116]

Je engels is echt goed blijf doorgaan

[@mhieriechiu2974]

I’m a newbie trying to make everything add up from every details I gathered. By the way, can you please have a sample on how to create a coffeeshop website? Thanks.

[@nirmititaylor1209]

These social media icon link you have put in description is not transparent as it shows it comss with a box and its creating a problem. All other things are great

[@On1onStudio]

Yes, very nice tutorial, learned a lot from you

[@bvbkubapoland6038]

Really nice! Thanks for great tutorial

[@benjaminkapferer4949]

Super good and informated video!

[@credenzyinternational2944]

Good job, but how will this page create hyperlinks? Will it be more complicated elementor?

[@zackriaszack4832]

First time I watched tutorial video regarding Web design.. Amazing and very very easy explanation to understand..! Superb, sir please I need an help.. After creating the design how to proceed further to complete the website process?? How to post the designed page in web?? Please do help me!!

[@advancedconstructiondesign8919]

Shouldni use xd or dreamweaver or illustrator?! Im confused but i wanna make websites!!!! Help

[@laurencpratt7004]

Love your videos! Any videos/tutorials on exporting the site to upload to FTP?

[@matthewslocombe9571]

What is the theory behind designing in 1400 x 800px and not the dimentions suggested within XD? Thanks

[@dhruvagrawal291]

What are the commands for zoom in and zoom out

[@damwrz5739]

Hello, why you sugest to create artboard with 1400 x 800 ???