Design & Prototype a Shopping Widget using Nested Components in Adobe XD

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

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

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

    When I struggled last week, with the nested components hover states i figured there'll be a workaround with custom hotspots but I couldn't get it to work the way it was supposed to. This video tutorial cleared up all my doubts. Thanks Howard!

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

      How did you get those images? Love your channel!

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

    In this scenario how would you add a hover effect for the thumbnails?

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

    Beautiful! Never thought stacks can be so useful, thank you for that.
    Having said that I doubt it is good UX design to hide the 3 thumbnails and only show them on hover - not only do you lose conveying really important information (there are multiple colors available for that model!), you also move the target dynamically (the shop now button) which is incredibly awful for accessibility and a slow device or bad network.

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

      I think it depends on where this widget is displayed. If it's front-and-center on a landing page like this (which was just for show), I completely agree. It wouldn't make sense. But if it's part of a list of products, it's very common to only show additional colors on hover. Nike, Adidas, and others currently do this.

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

      @@HowardPinsky If the point was to show us how it can be done, than indeed it was enlightening. I still would take care not to have anything move the CTA button. I also tend to design sites that need to work on both desktop and mobile without the devs having to work too hard, so any information hidden before a hover effect can be a problem.
      Having said that, I appreciate your videos very much - they are a wonderful educational tool. You make everything seem so clear and easy, and so freaking pretty!

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

      More good points! Really appreciate the feedback, Oren!

  • @Eric-Denton
    @Eric-Denton 3 года назад

    @howard - Is there a reason we SHOULDN'T leave Type on "Auto-Animate and turn Animation to "None?" If nothing is really happening, I guess I'm not seeing the point of this step (beyond possibly being saving some render time?)

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

    as always great tutorial.

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

    Nice tutorial!!! I have an issue with xd line-height, the text box actual height does not reflect line-height value.

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

    This helped me to make header dropdowns, but after sharing it as a "presentation" it was blinking while hovering.

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

    Do u have scratch course of this XD course on ur playlist?

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

    thank you Howard

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

    from where did you download these photos?

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

    Great tutorial, what are the fonts you are using on this project ?

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

      I'm using New Spirit for the product title (Everyday Runners) and nav links. I've been toying around with it lately and it's pretty fun! The body copy is Avenir Next.

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

      @@HowardPinsky Thank You for the information.

  • @Sam-rd5bo
    @Sam-rd5bo 3 года назад

    Where do you find such images?
    Can you recommend places to find such images that are not paid?

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

      If you don't have a budget for stock images, Unsplash is a good resource.

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

    if you didnt change the auto animate to transition and animation to none, you wil have the display images switching when their respective thumbnails are hovered