Adobe Xd Web Design Tutorial - Design your first page with me
Вставка
- Опубліковано 25 лип 2024
- My Adobe Xd Web Design Tutorial for 2022 and beyond. This replaces my old adobe xd tutorial now with a realistic design. You will learn all the basics & essentials in this beginner friendly tutorial.
Download the files: www.dropbox.com/sh/obptk4a9w0... (click on "Download" on the first page)
Sign up for my courses via the following links:
Elementor Pro Mastery Course: livingwithpixels.com/elemento...
Figma Design Mastery Course: livingwithpixels.com/design-c...
Parts in this video (clickable links)
00:00:00 Before we start
00:01:26 Step 1: Setting up Adobe Xd
00:05:02 Step 2: Creating the basic structure
00:13:56 Step 3: Working with images and icons
00:20:20 Step 4: Applying different effects
00:26:19 Step 5: Adding text content
00:37:34 Step 6: Creating buttons and our menu
00:45:28 Step 7: Using components for efficiency
00:49:18 Step 8: How to save, export and share your design
→ Software I recommend
Hostinger for affordable webhosting: livingwithpixels.com/hostinger
Siteground for premium webhosting: livingwithpixels.com/siteground
Elementor for no-code web-development: livingwithpixels.com/elementor
Figma for Web Design: livingwithpixels.com/figma
All recommended software & discounts: livingwithpixels.com/software/
→ Full A-Z Courses
Elementor Pro Mastery Course: livingwithpixels.com/elemento...
Figma Design Mastery Course: livingwithpixels.com/design-c...
Business Course: livingwithpixels.com/business...
→ Starter Guides for Beginners
Elementor Starters Guide: livingwithpixels.com/elemento...
Figma Design Starters Guide: livingwithpixels.com/design-g...
→ My Social Media
Tiktok: / rinodeboer
Instagram: / rinodeboer
Twitter / X: / rinodeboer
Some of the links above are affiliate links, which means that I earn a commission when you make a purchase via my link. Thanks a lot if you decide to do that! I couldn't make all these videos without it. - Навчання та стиль
Honestly one of the best beginner tutorial out there, I love the more hands on tutorials, makes the whole thing 100000000% less boring! :)
Perfect timing. I've been designing for the first time in XD on a current project because of your recommendations to use it before building in elementor. Your videos are so helpful. You are so generous with your time and training. Thank you
Yes finally it is there! Wow, you really put in the hours for this video, I can see. Great to see that you also teached us how the artboards work, because that was always very confusing for me.
This was such an easy to follow and helpful tutorial. I really liked last section where you explained exporting and sharing while connecting it to real world usage. Thank you!
What a great tutorial, very easy to understand. Keep up the good work Rino, can't wait for the next Adobe XD video!
Always excited to see your uploads. Thanks for the awesome content! I will definitely be trying this out day.
Thanks, Rino, you always inspire my inner feelings, when I am watching your videos I see a better version of myself. God bless you bro.
This was an awesome video! 👌 Super informative. I really appreciate all the work you did to put it together.
Great video, Rino! As I am a new AdobeXD user, I learned a few things I didn't know before. Please do more videos like that. Big thanks for sharing this.
Super helpful! Thank you so much for the detailed process!
Thank you! Really short, simple and informative.
That was awesome Rino - not only have I come away with a sense of achievement, but you have also made my day. Thank you so much!!!
Great tutorial man, I appreciate the clean design tips!
Best training ever. I just created my first design in XD and am submitting it to my client today! Thank you!
Thank you! I tried jumping straight into XD a couple of months ago thinking I’d pick it up since I know how to use INDD and Photoshop… sadly, that was not the case.
I watched and followed along with your tutorial and it was so easy! You explain things very well and in an orderly process. I’ll be checking out your other videos!
Nice video. It would be interesting to make a video of how you transfer this design to wordpress (the settings that you enter, taking care the responsiveness etc).
Thoroughly enjoyed this beginner tutorial. I can't thank you enough!!!
Thank you so much you really saved me the time of jumping from video to video you put it all in one place thanks again
So many great tips. Thank you Rino
Yo je video was super goed en informerend. Dankjewel!
I did this tutorial in penpot. I learned a lot from you. Je bent echt een baas! :D
Brilliant tutorial. Learnt a tremendous amount. Thanks.
I love your teaching style! I look forward to learning more from you in the future! :)
Thanks Rino.. another quality video 👍🙏
Hi Rino, Very nice sir. Your delivery was down to earth, honest, informative and slow enough for this beginner. Well done !
thankyou and done this tutorial xd . very detailed explained in eay way
Fantastic tutorial, thank you so much
This is Amazing Tutorial! Thank you so much!!!
this tutorial was super helpful and includs all techs that a beginner might need ...Thanks a lot :)
as always clean tutorial
Great tutorial. I would be interested in seeing your process of taking your XD design and remaking it in Elementor.
Love you!! Made my project easier .. thanks alot❤
Amazing!!!!! Thank you!!
Great job!
Excellent tutorial! 👏
Thanks 4 the video man !!! It's really nice and helpful. I just started learning UI design and I'm really bad at concentrating in class, and your video helped me a lot !!!
Thank you your excellent explanation of this program❤️
Thanks, Great video!
Amazing Tutorial!
Super Awesome & Easy tutorial 🤩🥰
Good job Rino!
Great video. Always great content.
amazing tutorial😍
Thank you... Please create more tutorial about Adobe XD
wow sooo good thanks
Before I forget. Thanks a lot for this video.
Great teacher! so clear! Well done Rino. 👏
Thank you! 😃
You are the MAN !
Perfect tutorial for beginners like me
Very good !!!
This is the best free software Ive seen. Respect.
Great video!!
totally love this!!!..more of these!!
Im sory dont have the money for package..😭😭😭😭 but will support ur video..
Thank you!
It was really an awesome tutorial from scratch and 55 minutes were worth it. Thank you so much.
Glad you liked it!
Very good tutorial
Buddy! This was An AMAZING tutorial I appreciate the effort that went into making this. You made it so easy to follow step by step directions and I feel like I’m ready to make my own!
That’s so cool to hear. Thanks for sharing 🙏🏻
One hour worth it, one subscriber your way!
understand the basics of the software untill now. Your guide is very very good quite simple and very helpful. I gave you a like and a sub
Awesome to hear!
Thanks Bro the video really helped me..
Glad it helped!
to find out where to find the middle you can also use guidelines which you can drag out on the side of the canvas and place it in the middle
Awesome program
nice crack i appreciate it
Thank you very much indeed
Thank you man. This helped a TONNE with familiarizing myself with the software. It came at perfect timing as I take on more web design projects in my digital marketing internship.
You asked for feedback - so here are some small things. I love seeing how designers work in these videos in terms of hotkeys and workflows, I noticed you missed one. Shift + CMd + ' shows grids without having to manually Cmd + click the layer panel and click the checkbox. That felt really clunky and I found out there was a hotkey.
I also would have liked to see some stuff on responsive design considerations given how vital mobile optimization is now-a-days, but I know you were just sticking to the basics. It just left me with a feeling of 'I know there's more to understand here' which if the value proposition of the video was to replace the old one more comprehensively, it would have been nicer.
Anyways extremely grateful for this free content and your excellent teaching.
Thanks so much for the valuable feedback!
Thanks so much!!! Got to do this for a lesson. Crappy part is that I have to use stuff from a downloaded UI in the lesson as well >.> Doesn't mix great but ok
Thanks
Love from Philippines🇵🇭
Cool , waiting for WordPress version
Thank you Rino for your awesome videos! I wonder where you get your inspiration for web designs from?
I was about to ask the same question!
Thanks for this helpful tutorial. I'm curious though... what shortcut you use to open a finder just like you did in 15:34
Hello Rino! It was great to shake your hand in the exhibition hall on Friday at WCUS 2022. I am the guy that called your name to get your attention, shook your hand, and chatted about how much I appreciated your video on the widget spacing in Elementor. And in parting, I told you that I use the container widget on many live sites. Once again another fantastic video from Living With Pixels. If I can ever be of any help to you, please feel free to reach out to me. I am located 70 miles east of Los Angeles and 2.5 hours from where we met in San Diego.
That’s awesome to hear! Thanks so much for the offer. I definitely remember our convo!
By the way, I love using Figma but both have own pros and cons , thanks for the video man
Ah, Figma - the elephant in the room... Figma-XD hybrid coming soon!
Tutorial is Great and So much Valuable. But i always wonder why u don't create tutorial for Figma Yet and Not Even Talking about it much.
I do have a request to you to create some tutorials with Figma as well😌👏👏.
Do you have a video how to export the design to html and css code?
Question: I hope I can explain this, How can I make a window scrolling effect? not sure what is called but basically as you are scrolling down the website you will see a background image just pass you by as if you were looking into a window. Thanks
How is this tutorial free? Thank you so much brother, easy to understand, this is my first time using Adobe XD
Great tutorial! But why do we need to know how many pixels are between the artboards? (3:48) What are those values good for?
thank you for this tutorial but i can't drag image to adobe xD ? any solution ?
sir make video to Affiliate website design in WordPress
At 21:23 polygon or triangle? but i so love the tutorial being a beginner, you are teaching me alot
hi. What can I do to export and publish my website design responsively without writing code? Animaapp is paid, is there any alternative to it?
Ok. I liked very much this lesson but I would like to know how can I use it to build my site in the Wordpress. Let me put in a different way: Now I have the design of my page... Is there a way to build the site in the wordpress using this design?
This is just what I needed! Thank you SO much!
Question: I am currently using the free version of Elementor. Would your course on how to go from XD to Elementor Pro also be useful for the free version of Elementor? That's the only link in the chain I am currently missing. Thanks in advance for your advice.
It will be useful for Elementor free as well. But some features that I talk about are pro.
@@rinodeboer Thank you. I will definitely want to attend anyway. I can always learn something new no matter what.
we are more interested in elementor or wordpress tips and tricks!!
Kinda missed the mobile version here, but thank you for the other information
When is the course coming out, I wanna take it ASAP. Thank you!
In a few weeks if I manage to finish everything. I will make an update video and notify everyone via email!
@@rinodeboer Amazing! Also I bought all your courses on Udemy (minus the one in your native language because I don't understand it). Finished one in one day. Love it! I want to learn how to take the design from XD to Elementor, hopefully that's what I'll learn in your other courses.
Thank you so much for all your work, Rino!
Hey Rino,
Try Figma it will change your life!!
Great video! Why do you prefer Adobe Xd over Figma?
I do have the same question myself...
i downloaded the colors etc but i cant import it to my xd
I really like Adobe XD but same time I foud it lot of extra work for building a website, because at the end I use DIVI or Elemonor, etc., and because of the time I have to carge lot extra to client too. Anyone know is there something where we can export Adobe XD layout to wordpress elementor or divi? Thanks!
That’s why I made this video, because it explains exactly why I have and promote this workflow ua-cam.com/video/iLEr67qVHrg/v-deo.html
Can I ask, why do you prefer adobe xd over figma?
Is there a reason why you use adobe xd instead of figma that is free ?
Can u tell me which screen recording software u use?
I use Screenflow to record my videos!
Work on crocoblock sir
Can you even make a figma tutorial
Hello Rino! Don't you do MailTime episodes now?
Please check my first ever website here: akbargfx.com and let me know your feedback. Thank you.
I actually have recorded one. Coming up soon!
This looks like old Dreamweaver and Muse
It would be better if you explained how to do things instead of using your own files and telling people to use those files. Only by doing all the steps the course will really teach HOW. But I guess your way will always get people to come back to your videos because they don't know how to do it and have to follow again and again all the steps. Good effort but maybe not for everyone.
It's not the same of working on Figma?
It is very similar!
@@rinodeboer now that adobe has bought figma... They are the same! Hahaha!
Yea, I am very curious to see what they are gonna do with it. Which one they will kill, because I don’t think they will keep both apps alive