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

Поделиться
HTML-код
  • Опубликовано: 10 янв 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!

  • @sgwofficial1
    @sgwofficial1 День назад

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

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

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

  • @captz637
    @captz637 Год назад

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

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

  • @alaynaquiles8149
    @alaynaquiles8149 2 года назад +6

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

  • @Art4Wrk
    @Art4Wrk 6 месяцев назад

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

  • @midwaykid
    @midwaykid Год назад

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

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

  • @asyahalayubi9328
    @asyahalayubi9328 2 года назад

    This is the best free software Ive seen. Respect.

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

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

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

  • @saamira86
    @saamira86 Год назад

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

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

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

  • @mohamad_b2097
    @mohamad_b2097 Год назад

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

  • @Kevin-nd6yd
    @Kevin-nd6yd 2 года назад

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

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

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

  • @kierenshepherd1111
    @kierenshepherd1111 2 года назад

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

  • @ce.studios
    @ce.studios Год назад

    Perfect tutorial for beginners like me

  • @chrisp6703
    @chrisp6703 2 года назад

    Great tutorial man, I appreciate the clean design tips!

  • @br1580
    @br1580 Год назад

    Brilliant tutorial. Learnt a tremendous amount. Thanks.

  • @2ndActSuccess
    @2ndActSuccess 2 года назад +1

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

  • @SafetyHeaven
    @SafetyHeaven 9 месяцев назад

    Yo je video was super goed en informerend. Dankjewel!

  • @mariajosecarrascosanchez2557
    @mariajosecarrascosanchez2557 Год назад

    Great teacher! so clear! Well done Rino. 👏

  • @julesbenson4110
    @julesbenson4110 Год назад

    So many great tips. Thank you Rino

  • @zuzu4u
    @zuzu4u 2 года назад

    Thank you! Really short, simple and informative.

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

  • @keylamusky
    @keylamusky Год назад

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

  • @yassineboujalla150
    @yassineboujalla150 2 года назад

    as always clean tutorial

  • @SophieSmith-h4e
    @SophieSmith-h4e 11 месяцев назад

    Fantastic tutorial, thank you so much

  • @guilhermeebert
    @guilhermeebert 2 года назад

    Before I forget. Thanks a lot for this video.

  • @dzakiahsana6
    @dzakiahsana6 2 года назад

    Good job Rino!

  • @EmmanuilMard
    @EmmanuilMard 2 года назад

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

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

  • @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?

  • @bmorechido
    @bmorechido Год назад

    Excellent tutorial! 👏

  • @imbarinderkumar
    @imbarinderkumar 2 года назад

    Super Awesome & Easy tutorial 🤩🥰

  • @markhogan77
    @markhogan77 2 года назад

    Thanks Rino.. another quality video 👍🙏

  • @Appet1zer
    @Appet1zer 2 года назад

    Amazing Tutorial!

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

  • @ankamadi2144
    @ankamadi2144 8 месяцев назад

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

  • @ZimHomes
    @ZimHomes 2 года назад

    One hour worth it, one subscriber your way!

  • @daytodaytoxic
    @daytodaytoxic 10 месяцев назад

    amazing tutorial😍

  • @lucreceaugusma7656
    @lucreceaugusma7656 2 года назад

    Great video. Always great content.

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

  • @cindynewcomb7139
    @cindynewcomb7139 Год назад

    Thank you your excellent explanation of this program❤️

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

  • @chesterplays8931
    @chesterplays8931 2 года назад

    Love from Philippines🇵🇭

  • @darlenebrooks126
    @darlenebrooks126 Год назад

    Great job!

  • @onetravel6836
    @onetravel6836 Год назад

    You are the MAN !

  • @koldwotr
    @koldwotr 2 года назад

    Great video!!

  • @annak7905
    @annak7905 Год назад

    Amazing!!!!! Thank you!!

  • @GertAvikson
    @GertAvikson 2 года назад

    Very good tutorial

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

  • @thefrankincense4331
    @thefrankincense4331 2 года назад

    Thanks Bro the video really helped me..

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

  • @WilliamPalomino
    @WilliamPalomino 2 года назад

    Thanks, Great video!

  • @vaosia
    @vaosia Год назад

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

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

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

  • @citizen1819
    @citizen1819 2 года назад

    Cool , waiting for WordPress version

  • @undevelopedporcupine2203
    @undevelopedporcupine2203 Год назад

    wow sooo good thanks

  • @liliagarcia7424
    @liliagarcia7424 14 дней назад

    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?

  • @liliagarcia7424
    @liliagarcia7424 5 месяцев назад

    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!

  • @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 ruclips.net/video/iLEr67qVHrg/видео.html

  • @FernandoMansur10
    @FernandoMansur10 2 года назад

    Very good !!!

  • @BVDR_T
    @BVDR_T Год назад

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

  • @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?

  • @UltraTV95
    @UltraTV95 2 года назад

    Awesome program

  • @wanaaa8461
    @wanaaa8461 2 года назад

    nice crack i appreciate it

  •  Год назад

    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?

  • @herryvipassana1254
    @herryvipassana1254 2 года назад

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

  • @nothingwasneeded
    @nothingwasneeded 2 месяца назад

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

  • @stevedelatorre3343
    @stevedelatorre3343 2 года назад

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

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

  • @abdallahthorp4687
    @abdallahthorp4687 4 месяца назад

    Thank you so much

  • @cod_moe9755
    @cod_moe9755 Год назад

    Thank you!

  • @burakacunman2097
    @burakacunman2097 9 месяцев назад

    Thank you very much indeed

  • @RA-po5rl
    @RA-po5rl 2 года назад

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

  • @zerobambiro
    @zerobambiro 11 месяцев назад

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

  • @s.a.z.u7848
    @s.a.z.u7848 2 года назад

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

  • @AllenLu
    @AllenLu 2 года назад

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

  • @benpeetoom5627
    @benpeetoom5627 2 года назад

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

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

  • @shanjidarehman1594
    @shanjidarehman1594 2 года назад

    Can u tell me which screen recording software u use?

    • @rinodeboer
      @rinodeboer  2 года назад

      I use Screenflow to record my videos!

  • @giovannip349
    @giovannip349 2 года назад

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

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

  • @tahirkh315
    @tahirkh315 2 года назад

    Work on crocoblock sir

  • @legagold6630
    @legagold6630 2 года назад

    Thanks