Adobe Xd Web Design Tutorial - Design your first page with me

Поділитися
Вставка
  • Опубліковано 9 лют 2025

КОМЕНТАРІ • 134

  • @EliaszSobinski
    @EliaszSobinski 2 роки тому +18

    Honestly one of the best beginner tutorial out there, I love the more hands on tutorials, makes the whole thing 100000000% less boring! :)

  • @SondraSneed
    @SondraSneed 2 роки тому +8

    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

  • @levindeheer2056
    @levindeheer2056 2 роки тому +8

    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.

  • @sgthomas98
    @sgthomas98 Рік тому

    Best training ever. I just created my first design in XD and am submitting it to my client today! Thank you!

  • @alexandrosdimiropoulos4768
    @alexandrosdimiropoulos4768 2 роки тому +5

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

  • @ahmedjama4199
    @ahmedjama4199 2 роки тому +1

    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.

  • @sgwofficial1
    @sgwofficial1 Місяць тому

    thanks for this video, i had to pause and play numerous times but i finally made it through.

  • @captz637
    @captz637 Рік тому

    Hi Rino, Very nice sir. Your delivery was down to earth, honest, informative and slow enough for this beginner. Well done !

  • @SteveKinzey
    @SteveKinzey 2 роки тому

    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.

    • @rinodeboer
      @rinodeboer  2 роки тому

      That’s awesome to hear! Thanks so much for the offer. I definitely remember our convo!

  • @cloudtoxic8521
    @cloudtoxic8521 2 роки тому +2

    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!

  • @midwaykid
    @midwaykid Рік тому

    Thoroughly enjoyed this beginner tutorial. I can't thank you enough!!!

  • @Art4Wrk
    @Art4Wrk 7 місяців тому

    I love your teaching style! I look forward to learning more from you in the future! :)

  • @damienabbott9805
    @damienabbott9805 Рік тому

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

  • @alaynaquiles8149
    @alaynaquiles8149 2 роки тому +6

    Great tutorial. I would be interested in seeing your process of taking your XD design and remaking it in Elementor.

  • @trungg6673
    @trungg6673 Рік тому

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

  • @hamiljoen
    @hamiljoen 2 роки тому +1

    What a great tutorial, very easy to understand. Keep up the good work Rino, can't wait for the next Adobe XD video!

  • @CandiceIris
    @CandiceIris Рік тому

    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!

  • @xiongmao8348
    @xiongmao8348 2 роки тому

    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

  • @saamira86
    @saamira86 Рік тому

    It was really an awesome tutorial from scratch and 55 minutes were worth it. Thank you so much.

  • @SafetyHeaven
    @SafetyHeaven 10 місяців тому

    Yo je video was super goed en informerend. Dankjewel!

  • @samroff8986
    @samroff8986 2 роки тому +1

    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.

    • @rinodeboer
      @rinodeboer  2 роки тому

      Thanks so much for the valuable feedback!

  • @asyahalayubi9328
    @asyahalayubi9328 2 роки тому

    This is the best free software Ive seen. Respect.

  • @kierenshepherd1111
    @kierenshepherd1111 2 роки тому

    Always excited to see your uploads. Thanks for the awesome content! I will definitely be trying this out day.

  • @joephogenboom6928
    @joephogenboom6928 Рік тому

    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

  • @Kevin-nd6yd
    @Kevin-nd6yd 2 роки тому

    I did this tutorial in penpot. I learned a lot from you. Je bent echt een baas! :D

  • @mohamad_b2097
    @mohamad_b2097 Рік тому

    this tutorial was super helpful and includs all techs that a beginner might need ...Thanks a lot :)

  • @davidsimmons4491
    @davidsimmons4491 Рік тому

    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!

    • @rinodeboer
      @rinodeboer  Рік тому

      That’s so cool to hear. Thanks for sharing 🙏🏻

  • @keylamusky
    @keylamusky Рік тому

    Love you!! Made my project easier .. thanks alot❤

  • @priteshkumar1987
    @priteshkumar1987 Рік тому

    thankyou and done this tutorial xd . very detailed explained in eay way

  • @juneldelacuadra5973
    @juneldelacuadra5973 2 роки тому

    Thank you... Please create more tutorial about Adobe XD

  • @cindynewcomb7139
    @cindynewcomb7139 Рік тому

    Thank you your excellent explanation of this program❤️

  • @mariajosecarrascosanchez2557

    Great teacher! so clear! Well done Rino. 👏

  • @ankamadi2144
    @ankamadi2144 9 місяців тому +1

    At 21:23 polygon or triangle? but i so love the tutorial being a beginner, you are teaching me alot

  • @SophieSmith-h4e
    @SophieSmith-h4e Рік тому

    Fantastic tutorial, thank you so much

  • @julesbenson4110
    @julesbenson4110 Рік тому

    So many great tips. Thank you Rino

  • @ce.studios
    @ce.studios Рік тому

    Perfect tutorial for beginners like me

  • @PicSta
    @PicSta 2 роки тому

    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.

  • @Just_Sunshine_and_Coffee
    @Just_Sunshine_and_Coffee 2 роки тому +1

    This was an awesome video! 👌 Super informative. I really appreciate all the work you did to put it together.

  • @guilhermeebert
    @guilhermeebert 2 роки тому

    Before I forget. Thanks a lot for this video.

  • @br1580
    @br1580 Рік тому

    Brilliant tutorial. Learnt a tremendous amount. Thanks.

  • @chrisp6703
    @chrisp6703 2 роки тому

    Great tutorial man, I appreciate the clean design tips!

  • @Mahfujur_Rahman_14
    @Mahfujur_Rahman_14 2 роки тому

    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

  • @imbarinderkumar
    @imbarinderkumar 2 роки тому

    Super Awesome & Easy tutorial 🤩🥰

  • @onetravel6836
    @onetravel6836 Рік тому

    You are the MAN !

  • @ZimHomes
    @ZimHomes 2 роки тому

    One hour worth it, one subscriber your way!

  • @daytodaytoxic
    @daytodaytoxic 11 місяців тому

    amazing tutorial😍

  • @auldzbuzz3374
    @auldzbuzz3374 Рік тому

    Thanks for this helpful tutorial. I'm curious though... what shortcut you use to open a finder just like you did in 15:34

  • @EmmanuilMard
    @EmmanuilMard 2 роки тому

    This is Amazing Tutorial! Thank you so much!!!

  • @yassineboujalla150
    @yassineboujalla150 2 роки тому

    as always clean tutorial

  • @bmorechido
    @bmorechido Рік тому

    Excellent tutorial! 👏

  • @johnupdate
    @johnupdate Рік тому

    Great tutorial! But why do we need to know how many pixels are between the artboards? (3:48) What are those values good for?

  • @zuzu4u
    @zuzu4u 2 роки тому

    Thank you! Really short, simple and informative.

  • @markhogan77
    @markhogan77 2 роки тому

    Thanks Rino.. another quality video 👍🙏

  • @JBKNL
    @JBKNL 2 роки тому

    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

  • @dzakiahsana6
    @dzakiahsana6 2 роки тому

    Good job Rino!

  • @liliagarcia7424
    @liliagarcia7424 Місяць тому

    Hi, thanks for the great video! Why do some designers use 1920px, while in this tutorial you're using 1400px? Does it make a difference when designing for a website or landing page?

  • @rovelynabarico1042
    @rovelynabarico1042 2 роки тому

    totally love this!!!..more of these!!

    • @rovelynabarico1042
      @rovelynabarico1042 2 роки тому

      Im sory dont have the money for package..😭😭😭😭 but will support ur video..

  • @thefrankincense4331
    @thefrankincense4331 2 роки тому

    Thanks Bro the video really helped me..

  • @darlenebrooks126
    @darlenebrooks126 Рік тому

    Great job!

  • @Appet1zer
    @Appet1zer 2 роки тому

    Amazing Tutorial!

  • @annak7905
    @annak7905 Рік тому

    Amazing!!!!! Thank you!!

  • @lucreceaugusma7656
    @lucreceaugusma7656 2 роки тому

    Great video. Always great content.

  • @chesterplays8931
    @chesterplays8931 2 роки тому

    Love from Philippines🇵🇭

  • @koldwotr
    @koldwotr 2 роки тому

    Great video!!

  • @vaosia
    @vaosia Рік тому

    Do you have a video how to export the design to html and css code?

  • @jahas9359
    @jahas9359 2 роки тому +1

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

  • @metaversohoy8230
    @metaversohoy8230 Рік тому

    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

  • @launebaer86
    @launebaer86 2 роки тому +1

    Thank you Rino for your awesome videos! I wonder where you get your inspiration for web designs from?

    • @skjelstad777
      @skjelstad777 2 роки тому

      I was about to ask the same question!

  • @aqibsial4018
    @aqibsial4018 2 роки тому +2

    sir make video to Affiliate website design in WordPress

  • @abdulwahab2179
    @abdulwahab2179 2 роки тому

    By the way, I love using Figma but both have own pros and cons , thanks for the video man

    • @danfrankkuhn
      @danfrankkuhn 2 роки тому

      Ah, Figma - the elephant in the room... Figma-XD hybrid coming soon!

  • @liliagarcia7424
    @liliagarcia7424 6 місяців тому

    Hi Nice Video. But the question is, the how, how to move your design to WP? do I need a plug-in, Do I have to start to build the whole process again in wordpress? Would really appreciate some help! Thanks in advance!

  • @viorel-
    @viorel- 2 роки тому

    When is the course coming out, I wanna take it ASAP. Thank you!

    • @rinodeboer
      @rinodeboer  2 роки тому

      In a few weeks if I manage to finish everything. I will make an update video and notify everyone via email!

    • @viorel-
      @viorel- 2 роки тому

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

  • @BVDR_T
    @BVDR_T 2 роки тому

    thank you for this tutorial but i can't drag image to adobe xD ? any solution ?

  • @nothingwasneeded
    @nothingwasneeded 3 місяці тому

    Hi Rino, why do you make the page with 1400 in stead of 1920?
    I followed your advise on 1400 but now im starting to doubt if thats right...

  • @undevelopedporcupine2203
    @undevelopedporcupine2203 Рік тому

    wow sooo good thanks

  • @citizen1819
    @citizen1819 2 роки тому

    Cool , waiting for WordPress version

  • @GertAvikson
    @GertAvikson 2 роки тому

    Very good tutorial

  • @FernandoMansur10
    @FernandoMansur10 2 роки тому

    Very good !!!

  • @burakacunman2097
    @burakacunman2097 10 місяців тому

    Thank you very much indeed

  • @WilliamPalomino
    @WilliamPalomino 2 роки тому

    Thanks, Great video!

  • @JohnAdreamstyler
    @JohnAdreamstyler 2 роки тому +1

    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!

    • @rinodeboer
      @rinodeboer  2 роки тому

      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

  • @RA-po5rl
    @RA-po5rl 2 роки тому

    Can I ask, why do you prefer adobe xd over figma?

  • @cod_moe9755
    @cod_moe9755 Рік тому

    Thank you!

  •  Рік тому

    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?

  • @guilhermeebert
    @guilhermeebert 2 роки тому

    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?

  • @abdallahthorp4687
    @abdallahthorp4687 5 місяців тому

    Thank you so much

  • @UltraTV95
    @UltraTV95 2 роки тому

    Awesome program

  • @benpeetoom5627
    @benpeetoom5627 2 роки тому

    i downloaded the colors etc but i cant import it to my xd

  • @herryvipassana1254
    @herryvipassana1254 2 роки тому

    How is this tutorial free? Thank you so much brother, easy to understand, this is my first time using Adobe XD

  • @giovannip349
    @giovannip349 2 роки тому

    Is there a reason why you use adobe xd instead of figma that is free ?

  • @legagold6630
    @legagold6630 2 роки тому

    Thanks

  • @TerryWindell
    @TerryWindell 2 роки тому

    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.

    • @rinodeboer
      @rinodeboer  2 роки тому +1

      It will be useful for Elementor free as well. But some features that I talk about are pro.

    • @TerryWindell
      @TerryWindell 2 роки тому

      @@rinodeboer Thank you. I will definitely want to attend anyway. I can always learn something new no matter what.

  • @wanaaa8461
    @wanaaa8461 2 роки тому

    nice crack i appreciate it

  • @AllenLu
    @AllenLu 2 роки тому

    we are more interested in elementor or wordpress tips and tricks!!

  • @shanjidarehman1594
    @shanjidarehman1594 2 роки тому

    Can u tell me which screen recording software u use?

    • @rinodeboer
      @rinodeboer  2 роки тому

      I use Screenflow to record my videos!

  • @stevedelatorre3343
    @stevedelatorre3343 2 роки тому

    Great video! Why do you prefer Adobe Xd over Figma?

  • @zerobambiro
    @zerobambiro Рік тому

    Kinda missed the mobile version here, but thank you for the other information

  • @AkbarHasan
    @AkbarHasan 2 роки тому

    Hello Rino! Don't you do MailTime episodes now?

    • @AkbarHasan
      @AkbarHasan 2 роки тому

      Please check my first ever website here: akbargfx.com and let me know your feedback. Thank you.

    • @rinodeboer
      @rinodeboer  2 роки тому +1

      I actually have recorded one. Coming up soon!

  • @s.a.z.u7848
    @s.a.z.u7848 2 роки тому

    Hey Rino,
    Try Figma it will change your life!!

  • @tahirkh315
    @tahirkh315 2 роки тому

    Work on crocoblock sir