Designing Grid Layouts for Dashboards and SaaS Products: The Ultimate Guide!
HTML-код
- Опубликовано: 6 июн 2024
- 🚀 Get 2 free months of Skillshare Premium & watch my design course for free: skl.sh/2TVhf8z
I will show you many ways to design a grid layout for Dashboard and SaaS products.
🔗 Ultimate Guide to Layout Grid Systems for Websites! - Figma Tutorial
• Ultimate Guide to Layo...
🌟 Enjoying my content? Here is your chance to support the channel:
/ @designpilot
🚀 Create an account on Mobbin for free:
mobbin.com/?referrer_workspac...
🔸 Chapters
00:00 Introduction
00:51 Example 1: Jira (3 Sections)
02:30 Outdated Methods of Creating Grids
04:33 Common Patterns of Layouts
10:11 Which Frame Size to Design with?
12:07 Creating a Layout Grid
15:03 Example 2: Jira (2 Sections)
20:50 Example 3: Lottie Files (Standard Box Layout)
24:59 Example 4: Typeform (Similar to Lottie Files)
26:36 Example 5: Tailwind CSS
29:33 Example 6: Hype Auditor (Statistics Dashboard)
38:29 Example 7: Unsplash (No Sidebar)
39:31 Example 8: Google Analytics (Adaptive Grid Layout)
42:50 Example 9: RUclips Studio
46:25 Example 10: Stripe
-----------------------------------------
Mega Product Design Course for Beginners:
• The Mega Product Desig...
Webflow Course for Beginners:
• Webflow Course for Beg...
Photoshop Tutorials:
• Photoshop CC Tutorials
Illustrator Tutorials:
• Illustrator CC Tutorials
After Effects Tutorials:
• After Effects CC Tutor...
UI Design Tutorials:
• UI Animation/Interacti...
Design Resources, Tools and Softwares:
• Design Resources, Tool...
Adobe XD CC Tutorials:
• Adobe XD CC Tutorials
eSports Design Tutorials:
• eSports Design Tutorials
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: chethankvs.design
Twitter: / kvschethan
Instagram: / design_pilot
Mail: designpilot21@gmail.com
Behance: behance.net/chethankvs
Dribbble: dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :) 
Кино
48 minutes of straight, to the point, practical and actionable video. Thank you for putting this together. So much learnt in under one hour 👍🏻👍🏻
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...
This was needed and it turned out to be super helpful.
This is so good...I was struggling this for so long in my workplace..Thanks for sharing this.
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. 😍😍
Mind blowing content, thank you for this!
Thank you for sharing this. Super useful 🙌
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 ✌
This video is a GEM 💎
Thank you, Chetan for this..💥💥💥
Thank you again Chethan 👍
Absolutely golden content
thank you so much for this chetan best wishes
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.
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?
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.
Subscribed in the first 6 mins
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 :)
Good point. But this will confuse people even more 😂
@@DesignPilot 😅ikr, takes a while to figure this
Nice tip, but how do you came up this value of 1536px?
@@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
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?
Absolutely
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) ...?
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’
@@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!
It’s covered in this video - Basics of Responsive Web Design and Breakpoints: The Ultimate Guide!
ruclips.net/video/_2wqNI_Ch6g/видео.html
@@DesignPilot Nice! you rock!!! thanks!
I love you bro...