Responsive Website Design in Adobe XD

Поделиться
HTML-код
  • Опубликовано: 17 ноя 2024

Комментарии • 64

  • @geosesame6162
    @geosesame6162 3 года назад +31

    Is it really responsive after ? It seems to me more adaptative.

  • @xopixell
    @xopixell  3 года назад +3

    Share your design with me using the hashtag #XOPIXELPerfect 👍 Download Project Assets: bit.ly/3mt9BAP

    • @Unfuck_society
      @Unfuck_society 3 года назад

      Love you gurl❤ keep up the great work 🖒🖒

    • @mariozdk
      @mariozdk 3 года назад

      link no working

    • @xopixell
      @xopixell  3 года назад

      @@mariozdk It should work now

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

    What I really wanted to learn is the grouping and padding part, is there a slowed down version of this video with tutorial?

  • @prdobymat
    @prdobymat 3 года назад +10

    Why I haven't found you earlier?? Your videos are simple but super informative and as well as satisfying to watch! Keep up, got a aub! :)

    • @xopixell
      @xopixell  3 года назад +2

      Welcome! So glad you're enjoying all the content here :)

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

    I'm sooo impresed! Thank you very much for this video

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

    Awesome tutorials but How to export resonsive HTML CSS from XD ? Please guide

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

    Hi, how you turning these blue boxes (I think guidelines or sth)

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

    u just earned another subscriber thanks

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

    Ok, but what after? Should it be all prototyped or in a separate flow? Sorry I am new, I don't know what to do after I did the same You did. Great video btw!

  • @keithkirkland6508
    @keithkirkland6508 3 года назад +4

    👀😱😳 you made it look so easy! Thanks for the wonderful tutorial!

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

    Outstanding tutorial!!! Perfect pace and selection of content - pure gold.

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

    Great tutorial! Thanks for sharing!

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

    Thanks a lot for this great and inspiring video ❤

  • @matthewm9529
    @matthewm9529 2 года назад +3

    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!

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

      Good question! I have a video series that shows the process from start (in Adobe XD) to finish (building an actual website in Webflow). I would say that's a super easy way to get a website you design in XD intro a legit website: ruclips.net/video/3UQKqBC-N54/видео.html

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

      @@xopixellHow do you connect the Web design and the phone or tablet design with Web Export? I got both html files, but don‘t know what to do to make it work.

  • @ren-dq6mn
    @ren-dq6mn 2 года назад +1

    This is really amazing! How do you deliver the finished product to the client? Just send the file as is? Do you watermark it?

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

      There's actually a "share' tab in XD. You can share a link to the actual artboard(s)-that way you don't have to keep sending attachments via email or when you update it/make changes. Hope this helps!

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

    XO Pixel please tell me if we adaptive there is no difference in mockup?

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

    Awesome tutorial, thank you so much!

  • @AkinsRealm
    @AkinsRealm 3 года назад +4

    A tutorial on how to do animations with device mockups like the one at the end of the video would be great! (Please update me if you already have a tutorial on that) Great content as always! 😊👍

    • @jamiedingwall1819
      @jamiedingwall1819 2 года назад +2

      That'll be using Adobe After Effects - Look up 'After Effects website mockup'

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

      @@jamiedingwall1819 Thank you for the tip! :)

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

      @Saiful Islam Also thank you for the suggestion, will check!

  • @aburayhan9900
    @aburayhan9900 3 года назад

    i just fall in love with your work

  • @sihemtoutsimplement6616
    @sihemtoutsimplement6616 3 года назад +1

    Thank you for all tutorials 😀

    • @xopixell
      @xopixell  3 года назад +1

      So glad you enjoy the videos!

  • @asadmehmood6173
    @asadmehmood6173 3 года назад +1

    your Design skills are really amazing! Thanks for sharing with us.
    Kindly let me know which software you used to present your design in all three devices (Desktop, mobile, iPad) like as at the end of video that you show. thanks.

  • @Rafael-dj-c
    @Rafael-dj-c 3 года назад +1

    How come you made the gutters bigger? Curious on the advantages of it.

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

    worth watching

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

    So where is the responsive part? How do you set break points?

  • @emilyburger3422
    @emilyburger3422 3 года назад +2

    Why use 1280px for the website instead of 1920px?

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

    Thank you that was awesome and it enabled me to do good work for my company

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

    Hi, your design is so good. I want to work stock market, like uplabs, themeforest and etc. I have some question... please help me. 1) i want to use some assets icon, where i found this assets? 2) is assets has any copyright issue? because i want to download this type of assets from others site for my design! 3) i want to use some mobile app picture, did i design that? 4) if i download this mobile app picture from any free resource sites, Would it be copyrighted? 5) i want to use some team-logo image, where i found it with out copyright issue? Please help me, plz plz plz.....

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

    great video, how do I connect them together ?

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

      Just dropped a new video on how to convert this website design to code 😉

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

    Are you able to export HTML/CSS Files of the work, please?

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

      Just dropped a new video on how to convert this website design to code 😉

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

    Hi, download link not working !! pls give me download link...

  • @МоникаКараиванова-д3ж

    except this is to show case the resizing to developers it doesn't make your prototype responsive???

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

    What did you use to build your website so you can take payments please

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

      I used webflow ☺️

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

      @@xopixell ok thanks for responding....I didn't know webflow offered shopping options now

  • @shahzadashraf8929
    @shahzadashraf8929 3 года назад

    Very impressive.

  • @maggsvamp
    @maggsvamp 3 года назад

    how did you add a new canvas in diff size on the same document?

    • @jasmijnzielman
      @jasmijnzielman 3 года назад

      Just press A and you can create an artboard any size you like!

  • @edwardkelly6986
    @edwardkelly6986 3 года назад

    You are amazing

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

    great video! only thing is you designed 3 different screen sizes but none of them is responsive. responsive means designing one screen that will respond to its width and adapt seamlessly (breakpoints etc)... you did none of that- does that just not work in xd? it works in figma...

  • @naheeljarousha7365
    @naheeljarousha7365 3 года назад

    Amazing video and work ..I need to ask you don't minimize the font size when you make the mobile version ??

    • @lizhamm5442
      @lizhamm5442 3 года назад +1

      Probably because it keeps the site very readable, especially for older audiences.

  • @muntasirkamalravi1844
    @muntasirkamalravi1844 3 года назад +2

    Do I have to know coding to make website? I mean after making the website from xd, can I get the source code?

    • @josephmgomez3921
      @josephmgomez3921 3 года назад +1

      I don't code so that would be my question as well

    • @codingwithbia
      @codingwithbia 3 года назад +2

      Yes. After that you have to code yourself.

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