Designing Grid Layouts for Dashboards and SaaS Products: The Ultimate Guide!
20.5K views · 2022-10-05
UI Design
🚀 Book 1:1 Tutoring Sessions with me and take your Product Design journey to the next level: https://www.learnproduct.design/sessions
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
https://youtu.be/Fq2jbai4jqI
🌟 Enjoying my content? Here is your chance to support the channel:
https://www.youtube.com/channel/UCt0L4zh1nkUKz36L8PsgCGw/join
🚀 Create an account on Mobbin for free:
https://mobbin.com/?referrer_workspace_id=84595d96-a462-44f4-a3d2-c34148889947
🔸 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: YouTube Studio
46:25 Example 10: Stripe
-------------------------------------------
Mega Product Design Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3
Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8
Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi
Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1
After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk
UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW
Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9
Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv
eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)
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
https://youtu.be/Fq2jbai4jqI
🌟 Enjoying my content? Here is your chance to support the channel:
https://www.youtube.com/channel/UCt0L4zh1nkUKz36L8PsgCGw/join
🚀 Create an account on Mobbin for free:
https://mobbin.com/?referrer_workspace_id=84595d96-a462-44f4-a3d2-c34148889947
🔸 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: YouTube Studio
46:25 Example 10: Stripe
-------------------------------------------
Mega Product Design Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1_kDOXCrEGmB58IsLOiIc3
Webflow Course for Beginners:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1N4PxzGE_ywogtBeeOaqc8
Photoshop Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ372RTmi1rQmfqbIqXr3opi
Illustrator Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ0pK595gwPLmcVF-P_jx0V1
After Effects Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ23p3SZD49unrbkh_F8q9Dk
UI Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1uHAE-_rAxeDMBnhzzmYuW
Design Resources, Tools and Softwares:
https://www.youtube.com/playlist?list=PLERed4ILxkJ1-qY3TQToZWn3vYWVo6EA9
Adobe XD CC Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ11D_9_jX80GDenpMUWjTtv
eSports Design Tutorials:
https://www.youtube.com/playlist?list=PLERed4ILxkJ3lLdkQmG-Ebw90KdChq56P
--------------------------------------------------------------------------------------------
Contact me :
Portfolio: https://chethankvs.design
Twitter: https://twitter.com/kvschethan
Instagram: https://instagram.com/design_pilot
Mail: designpilot21@gmail.com
Behance: https://behance.net/chethankvs
Dribbble: https://dribbble.com/chethankvs
--------------------------------------------------------------------------------------------
LIKE, SHARE, COMMENT & SUBSCRIBE :)