Designing Grid Layouts for Dashboards and SaaS Products: The Ultimate Guide!

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

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

  • @prosper.design
    @prosper.design 2 года назад +9

    48 minutes of straight, to the point, practical and actionable video. Thank you for putting this together. So much learnt in under one hour 👍🏻👍🏻

  • @tayyabsohail8823
    @tayyabsohail8823 10 месяцев назад +1

    boom what a video bro. I was designing dashboard and want to know how grid system is used then I searched find your video. What a deeply and informative content is available for free designers. How they make design functional and well experience. Thanks Design Pilor for providing valuable content for us. 😍😍

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

    Hey, thank you so much for this video... definitely will help me in my work. And what I like more is your straight forwardness and no going away from the real agenda of your video, which I see a lot videos does...

  • @priyach3789
    @priyach3789 Год назад +1

    Great explaination and showed the realtime time designs to understand for begginers even. Loved your way as you kept engaged till the end of 48th min ✌

  • @stevenquadros9004
    @stevenquadros9004 5 месяцев назад +2

    This is such an impressive video. Thank you for sharing this knowledge

  • @gabrieu.amaral
    @gabrieu.amaral 6 месяцев назад +2

    this is video is premium content, so valuable. Thanks for share

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

    Subscribed in the first 6 mins

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

    This video is a GEM 💎

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

    This is so good...I was struggling this for so long in my workplace..Thanks for sharing this.

  • @SonDang-s2l
    @SonDang-s2l 9 месяцев назад +1

    Absolutely golden content

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

    thank you so much for this chetan best wishes

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

    Tip for Windows users: I have a 15.6 inch 1920p display but by default the resolution is scaled 125%, so when I am designing I use 1536px as the width to get 100% accuracy when mirroring. Great video Chethan :)

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

      Good point. But this will confuse people even more 😂

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

      @@DesignPilot 😅ikr, takes a while to figure this

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

      Nice tip, but how do you came up this value of 1536px?

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

      @@Kobawsky I tried doing some % maths but it didnt work out😅, so I put up a frame on figma and in prototype mode set it to 100% , and eyeballed which exact frame width was covering the screen fully

  • @Kobawsky
    @Kobawsky Год назад +1

    Mind blowing content, thank you for this!

  • @Rishi-vw8nw
    @Rishi-vw8nw Год назад +1

    Great video and lots of doubts got cleared in this thanks. I was wondering if we could have a video about Dashbaord auto layout with many moving parts. like from website dashboard to tablet to mobile screen and what relevant things to show.

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

    This was needed and it turned out to be super helpful.

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

    Thank you again Chethan 👍

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

    Thank you for sharing this. Super useful 🙌

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

    Thank you, Chetan for this..💥💥💥

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

    This was great thanks a lot but I was confused with the google analytics grid as you have opted for 2 column layout but when you see the bottom view cards are coming out of the grid you designed so was confused about this don't we just need a single 12 column grid here?
    But again amazing video never learned grid in this way thanks for the awesome content.

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

    Great video! I'm designing a dashboard for my professor's research project, and this helped me a lot. Could you also share the link to this Figma file?

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

    Nice! what happens when you have a Dashboard app and it shows you different tables with different sections and each table has different columns... do you have to make a different layout grid if it displays a table with 8 columns and other layout grid for a table for a 4 column for example? ( with sidebar always fixed on the let) ...?

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

      It totally depends on the use case. Can’t say for sure. There is no rule as such. It’s more like ‘Do what’s needed’

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

      @@DesignPilot oo yeah... yes Thats what im doing. I would nto have done it without your help from this vid. Thank you. Maybe you should do a video on this kind of grids and layouts and do breakpoints for dashboard in web, then on tablet and then on mobile. would be cool!

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

      It’s covered in this video - Basics of Responsive Web Design and Breakpoints: The Ultimate Guide!
      ruclips.net/video/_2wqNI_Ch6g/видео.html

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

      @@DesignPilot Nice! you rock!!! thanks!

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

    Hey Chetan, is it possible that there can be different layout grids for different screens of the same product as we saw that RUclips studio were having different layouts for dashboard and analytics?

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

    I love you bro...