Adobe XD Web Design Tutorial For Beginners

Free prototyping with Mockitt: bit.ly/39NAOqr
Limited free license: bit.ly/3qz1Mt5
"Adobe XD Web Design Tutorial for Beginners" is Perfect for You if You're New to Adobe XD and Want to Learn How to Design Web UI and Landing Pages.
Designed by: Daniel Klopper
Check his work at:
betraydan.dribb...
/ betraydan
danielklopper....
→Previous video » • How To Make Website UI...
→Subscribe to my channel » bit.ly/WebDesig... for new videos!
→ Hardware & Gear I use
MacBook Pro 13 inch:amzn.to/2PYpy47
Bose QC35:amzn.to/3cSqYXf
Logitech MXV Mouse: amzn.to/3mfY2vh
Logitech Keyboard amzn.to/3uhW5RK
Assets:
All imagery belongs to Aer and the respective photographers
bit.ly/2ByMH6t
bit.ly/30N0Llz
Adobe XD Playlist
bit.ly/3iUCB0E
The Web UI Design Playlist
bit.ly/3296sfW
Responsive Web Design Playlist
bit.ly/3bNBGxR
→ My social media
Buy Me A Coffee:www.buymeacoff...
Facebook group: / webdesigngeek
Twitter: / webdesigngeek1
About this channel:
WebDesignGeek channel is the place to learn modern designing tools to create amazing UI designs. You will learn and redesign the best UI/UX designers' work, and some of my original work. If you don't want to miss any weekly uploads, subscribe & and enable the notifications.
DISCLAIMER: Links included in this description might be affiliate links. If you purchase a product or service with the links that I provide I may receive a small commission. There is no additional charge to you! Thank you for supporting my channel so I can continue to provide you with free content!
#AdobeXDForBeginners #WebDesignTutorial #WebDesignGeek

[@WebDesignGeek]

Designed by: Daniel Klopper Check his work at: betraydan.dribbble.com/ instagram.com/betraydan/ danielklopper.com/

[@supersu6138]

Which voiceover you are using in this video??

[@WebDesignGeek]

@@supersu6138 Amazon Polly

[@araara9231]

This video kept popping up in my recommendations again and again so i finally clicked it...Did not regret one bit

[@WebDesignGeek]

Thanks, means a lot.

[@chickenlurkinyungchihuahua]

By far the best adobe xd tutorials for beginners without unnecessary and unrelated comments like the others. I'm glad you got a lot of tutorials and definitely subscribing this channel!

[@WebDesignGeek]

Thanks, means a lot.

[@emtiazahmed7844]

Just blow my mind. Amazing work and value.

[@WebDesignGeek]

Thank you, it's a great work by Daniel Klopper

[@SweetNAMese]

The tutorial is great! Straight to the point. Although the images aren't in PNG due to royalty - I was at least able to replicate the rest. Thank you, I've learned a lot!

[@VijaySolanki-tf6vt]

Falling extremely pumped to complete this tomorrow in morning ❤❤

[@WebDesignGeek]

Good luck.

[@coondawg66]

I wish there was a follow up for the rest of the pages then how to host it

[@zrigos2530]

kzbin.info/www/bejne/qGHLlWh3n8ypms0 THIS IS WHAT U NEED

[@deanlewis5748]

Great design, I really loved the dark theme 💣

[@WebDesignGeek]

Thank you! Cheers!

[@judytam5449]

Guys, this video is 100% genuine.

[@khairulhusein2282]

You are a Fucking genius... I've watched loads of these videos now and I am crying with laughter each time. Keep doing what you're doing I haven't laughed this much since I was in high school. Just totally hilarious keep them coming

[@flexincharlie]

I want to make Lo-Fi soft and today i started to soft soft tutorials. I see that you are teacNice tutorialng us very carefully and simple, i like that

[@Chloriz-ui3yg]

Thank you for tNice tutorials, tNice tutorials was a huge help.

[@abdulazizfahadshafiq7536]

TNice tutorials is by far the best soft soft basic tutorial, I rember when I just started learning, tNice tutorials was so helpful!! I’ve now been releasing edm

[@designer_ghass2623]

I really like that color , makes the web site look great

[@WebDesignGeek]

Thanks!

[@Dawninha]

Good design but I would love to see more designers following the same rules. Why not use multiple of 8px for spacing instead of having so much different spaces between elements? Also, using odd px values is a pain in the ass for front end developers. On top of this, I'm not sure that the fonts being used are web safe fonts, this is also a big problem for front end developers since the fonts in the browser will look diferente.

[@dreadrobertscanady1285]

I'm a WebDev beginner and I want to know why using odd px values is difficult for developers and why can't we include the fonts we're using in a site using ? Thanks in advance.

[@gozuvon_clutch4886]

@@dreadrobertscanady1285 pretty late comment but if you use a consistent px value like 8 for example, you can set that up as a baseline. Meaning if you preset 8px as your default, you can *2 for 16, *4 for 32, which makes not only the design a lot more consistent, but your code as well.

[@mdsyfulislam2075]

Just simply put the code, it works! thanks!

[@Yigit_925]

went through when I first started video editing, now it's taking a whole new switch and learning soft will only boost my courage for the

[@Mautiznado5139]

TNice tutorials tutorial was worth it, I understood everytNice tutorialng now

[@ov3rheat.gamestreams]

Holy Wow! I love this Design So Much!!! God bless your designs!

[@WebDesignGeek]

Thanks!

[@sergeipaz9440]

About who's the better Figma or XD, what do you think?

[@WebDesignGeek]

Both have the features that a UI design tool should have, but I *think* moving forward Figma will be the most designers choice.

[@SSibi]

Indeed, it is!

[@Love2Banime]

Something I've never used before. Imma try this software. Been looking into web design and want to make mock web pages

[@YouichiEnGi]

The design looks so cool. Thank you for making this video, it helps a lot. Anyway, I don't even know how to duplicate the text

[@tinz2342]

This is amazing! I absolutely love straight to the point tutorials! I do have a question though as I am very new to XD..how do I ultimately host my design onto the web using XD?

[@WebDesignGeek]

Thanks for your support, you use can no code tool such as Webflow, Editor X, Wix, or use plugins like Anima.

[@YREHCorp]

or pick up html and css and js in a few months and become one of a few who can design and code

[@tinz2342]

@@YREHCorp funny you mention. I will be taking that course in 2 weeks as part of my UX UI program. CSS HTML And Java Script. Hopefully I won't get too lost.

[@sushmitaprasad3816]

@@tinz2342 hey! it's been a month, did you take up that course of html js and css .. I wanted to know because I was thinking of doing UI/UX with coding too

[@pepazdepa8472]

@@tinz2342 Yeah same here

[@emmajones1810]

beautiful design! 👍👌

[@WebDesignGeek]

Thanks a lot

[@TheKingof-zd2zh]

now i am in a good mood

[@annageorgies1430]

Thank you so much bro. Sending virtual hugs. Worked like a charm ;-)

[@mellowapocalypse]

finding these types of videos better at teaching me adobe xd than my google coursera cert

[@aayushihihihi]

tomorrow's kinda my last practical tho of XD, was hoping to subscribe or else, nontheless great video , very to the point and clear.

[@tini_rap4563]

fr stay on the grind

[@rezadalir8424]

From "B Badr" Font I can tell where u are from :D Keep it up dadash

[@arafatgeneralservices2688]

I haven’t created a single project on there. On my iPhone and iPad on the other hand, I’ve created multiple s and soft in just one

[@ilyabirg]

Simple work and it looks cool

[@WebDesignGeek]

Thank you.

[@sathilahathurusingha9952]

s and a couple EDM and Dubstep goals for myself, and I guess I better start learning sowhere. Thanks for the great vid!

[@graphicdesign2960]

i am learning ux design and this has helped a lot as a beginner thank u so much

[@WebDesignGeek]

Glad it was helpful.

[@DrackCraftBr]

Thank you so much, please make more tutorials like tNice tutorials. You explain better than any other guide I've seen on youtube, very clear and

[@kishvistudio]

Great tutorial. Now how to make this design actually live? Adobe xd to coding?

[@IslamicSereniity]

First time on WebDesignGeek ! I've subscribed for thumbnail!

[@WebDesignGeek]

Then I did a good job!

[@brokenangel1879]

You really deserves a subscribe great tutorial thnx alot

[@lovenishphogaat8527]

Great !!! I started learning Adobe XD for Web design. Thanks for making videos for beginners.

[@WebDesignGeek]

Glad I could help!

[@jobsunday833]

Worked thank you alot! you're the best bro liked

[@swafel]

Hey, very cool design. I like the clean design that you created and the way you stick to a design hierarchy. I would add a CTA or something to guide your visitor to a product or event. Because now in this design your eyes are drawn to the home button and the read more in the bottom right. I would expect a "read more about this" button underneath the subtitle.

[@WebDesignGeek]

First of all, this is not my design, it's Daniel Klopper. Secondly, I totally agree with you with the CTA issue.

[@swafel]

@@WebDesignGeek I see, well keep up the nice work. You have another sub

[@metabolismosp1587]

It's working thanks my friend

[@azulnyy]

Worked smoothly, tysm

[@DigitalFox-tutorials]

Awesome design, i like the whole dark look it has.

[@WebDesignGeek]

Thank you so much.

[@Wizastudios]

Looks like every website design I see on Dribbble.

[@WebDesignGeek]

Yes, it's Daniel Klopper design.

[@mathieusilva9211]

i was at the 8 minutes mark then i got engrossed in the potential masterpiece i could make and started dancing and bobbinb my head

[@ahmedsamer8715]

bro, It's great but I prefer you tell me how you came with the Idea in the first place... Don't give me a fish rather than teaching me how to fish

[@frozor7573]

No one can teach u how to fish, u literally asking him to feed ur brain with idea, Fact is Idea and Designs comes with a lot of brain storming ,practice and experience.....no one can teach u what ur asking for u need ur own help and hard work...

[@draybaba]

@@frozor7573 LOL. True though.

[@SmartWizzard]

Check his pinned message, it’s a design by someone else

[@ahmedsamer8715]

@@frozor7573 bro, you got me so wrong... There's standards even for brainstorming... I am on a UI/UX scholarship which only took 25 trainers all over the country and thank god I was number 2 on that list... We learn there how to design websites... We all have ideas but how to work on it ? What's the perfect standard for the process itself.. creating websites is not only a talent or just ideas... You really need to know standards (how to work on ur idea... How to make it look good). That's all bro. Hope you got my idea here💜 & Thanks alot for replying 🙏❤️💚

[@ahmedsamer8715]

@@SmartWizzard I noticed thanks 😍🙏 + I love ur channel's name

[@nguyenthingocvan4496]

Great you solved one headache for me, thanks

[@nominataredepb4741]

So thankful for this

[@shadmandogar7349]

Why don't you add download links of your design and related content. Like fonts. Pics , xd file or PSD etc . Please provide . It will be helpful for learning

[@WebDesignGeek]

thanks for the suggestion. I will think about!

[@sincemayiv]

@Akbar Khan lmao

[@joshuafrederick2385]

@Akbar Khan lmao

[@ronselah8484]

@@WebDesignGeek put the links bro... I think if u decide to share your knowledge... Then do so with an open heart....

[@-MinhazulFerdous]

Wow people these days... Just be happy that he provides you a decent tutorial without any returns, and you guys demand all files?? Ridiculous...

[@tranhoangkhanhkien3089]

Thank you man for sharing this stuff

[@yunushanbayrak4992]

Thank you very much for this video, it was very helpful :)

[@dekafmusic]

Very beautiful design. And this is very modern. I have a question tho. How do you make the background blend together so well. Did you use a particular type of picture.

[@WebDesignGeek]

I used gradients to blend the background with the image.

[@joaquinrau1398]

Fantastic tutorial, keep up the great videos!

[@piotrkachel9392]

This helped a lot thank you

[@okiesib]

Hi, great video. Question: Istn it better to round pixel numbers instead of saying, for example, 61px make it 60px?

[@darkworld7898]

Worked , thanks a lot!

[@waifufx]

Nice design, Thank you sir for the tutorial So grateful, you are helping me to achieve my goals.

[@Alexander0o1]

I feel you!

[@egobuilders415]

Very cool design! Inspirational!

[@sanchez7866]

need link for fonts used .. is not in added links.. absolutely fantastic video.. looking forward to more content from you .. this is awesome..just need link for fonts used .. is not in added links..

[@AldrinHartunian]

Gorgeous design!

[@TONY_FEZ]

So why would you use this rather than Photoshop to create mockups?

[@niteshjoshi4496]

Hello, It was very nicely teaching... Can you please let us know after creating the design how can we upload it on the internet from start to end I mean? If it is possible... Thank You

[@WebDesignGeek]

This is the design only, in order to be able to upload it on the internet as a functional website you need to code it or use no code tools like webflow or woedpress page builders.

[@niteshjoshi4496]

@@WebDesignGeek okay 😊 Thank you

[@waseemfw543]

Hell yeah man good work

[@dadyjson5322]

Thanks bro!!, this work is amazing. I like this design!!

[@WebDesignGeek]

Glad you like it!

[@trinaveliz8049]

Thank you so much you really help me :)

[@ravsingh1576]

Wow, this amazing. Do you design actual websites?

[@chrinore]

Oh je vois c'est super génial

[@baran2321]

Hey, thanks for the design. My actual question is now, how can I use this finished design for a website which I want to have online? Best regards

[@kingnostalgia7911]

Html and css

[@memwebmaster]

Great tutorial

[@arunsharma4600]

Nice. Your tutorial is very descriptive

[@WebDesignGeek]

Thanks a lot.

[@mohammednobi5246]

Thanks for tutorial

[@anjumayoub9077]

amazing I saw that shot on dribbble 😍

[@WebDesignGeek]

Yeah, Daniel Klopper has some great designs

[@sipraghosh322]

Thank u very much

[@pratikshasawant6205]

You’re amazing! Thank you for this!

[@WebDesignGeek]

Welcome!

[@nathimthembu1199]

I'm going to try to build this with html, css and Javascript.

[@Graciousalicando]

In adobe xd they are clicable? Like how it turns into a real website where the people intearct it? Is it in adobe xd as well or they are using html and coder to create website?

[@mostkings333]

Amazing thanks

[@heartbrokensongs3938]

how do you stop the soft from chaning when you pick a guitar soft or so, it softs different when i test it out on the side and different

[@charlieworx]

U are great man

[@errox_pl996]

How did you get Basetica fonts for free? :)

[@WebDesignGeek]

it's a paid font.

[@robertpiolet]

Very helpful..thanks a lot.

[@suprememediaz9097]

After designing the landing page how do you export it to wordpress

[@mohdjibly6184]

Wow...This is awesome....please do more videos like this. Thank you.

[@WebDesignGeek]

Thank you! Will do!

[@divagarvijayarangam4498]

Are you using the Producer version, if so are all the effects and tutorial you use in the video included as standard with the Producer

[@davidnkana5314]

Best tutorial ever

[@WebDesignGeek]

Thank you so much.

[@majidshazad5252]

So many information in one tutorial Awesome👌

[@WebDesignGeek]

Means a lot.

[@thomasc7992]

love your style. really cleaning !!!

[@WebDesignGeek]

Thank you!! 😊 It's Daniel Klopper design.

[@jasperquiliquite691]

i have a question how can transfer the file into a css and html to add php codes and funtion ? thanks

[@NetoGonzagaNovo]

Simple, beautiful and awesome!

[@WebDesignGeek]

Thanks.

[@n.c.197]

I wish there was a follow up for the rest of the pages then how to host it...

[@jmac1882]

Thank you!

[@koitz-png6378]

I am impressed!!💯💯

[@Tezzomoney]

I'm new to this pls help. Is that a web theme u just created? I love the design by the way. Is there any way we can upload themes? Is there a direct correlation between adobe and word press? I know it's basic but I'm a beginner and looking at your channel to gain more knowledge. We all got to start somewhere they say 😆 pls help and old man anyone 😭

[@shreyasverma2075]

I was having the same question.

[@WebDesignGeek]

It's just a design not a theme, we first design in an UI design tool, then convert into a webpage or website using page builders like Elementor in Wordpress.

[@Alexia-ix6jj]

studying hard to be talented like you 🤒

[@WebDesignGeek]

Thanks, but this is Daniel Klopper's design!

[@erock3737]

I really appreciate your video. Thanks so much

[@WebDesignGeek]

You are so welcome!

[@Total_Studios_Games]

I'd recomnd going through a soft theory video on YT and making notes, there's a good 2h30 one wNice tutorialch softs looong but it will

[@washingmachine4102]

Never touched Xd but I'm curious if Xd work is publishable to internet for website etc.(?)