How to use a 12-column grid system to build better websites

Good joke at the start of the video right? haha Please don't make your logo bigger. 😂

But on a serious note, learning to use the 12-column-grid-system is really beneficial to design and build better website interfaces. And now that we are designing websites for mobile more often, we are able to use the grid system to transform our designs from one device to the next.

There is a lot you can design on a website using this, but there is a lot of website designs you can create by breaking the grid just a little, so it looks different.

In this website design tutorial, I will show you how to use it in Adobe XD, Figma and even if you are using Photoshop or Adobe Illustrator to design your websites. I am also sharing a plugin or Google Chrome Extension named Boostrap grid overlay that allows you to see how websites are currently using the grid-system in their designs.

Are you currently using grids to design your websites? And for those who are using Adobe XD, is there a way to have both the grid layout and baseline grid as I showed in Figma? Let me know by commenting below! And if you know how to do that, make a video with a tutorial and tag me in it as well!

Links Mentioned:
Boostrap Grid Overlay: https://chrome.google.com/webstore/detail/bootstrap-grid-overlay/mnlklmelflkheijccafopdohgclfefcg?hl=en-US
Figma: https://www.figma.com/
Adobe XD: https://www.adobe.com/products/xd.html
960 Ol' Grid: https://960.gs/

Timeline:
0:00 Video Intro
0:18 Channel Intro
1:00 Topic Intro
1:12 What is a Grid System
1:40 Make it or break it
2:42 Makes Website CSS a lot easier to create
4:00 Using a Grid System in Adobe XD
6:00 Using a Grid System in Figma
8:30 960 Grid for Photoshop or Illustrator
9:00 Boostrap Grid Overlay Extension

THE MUSIC IN ALL MY VIDEOS:
Epidemic Sounds - https://bit.ly/3fINEZi​​​​​​ | Great music for those doing Youtube Videos
Elements by Evanto - https://elements.envato.com/user/Tony...​...
Item Title: Tutorial Tech
Item URL: https://elements.envato.com/tutorial-...​
Item ID: B3KYEPN
Author Username: LuckyBlackCat
Licensee: Leopoldo Pirela

FOLLOW ME AROUND THE WEB:
Website: https://www.leopoldopirela.com​​​​​​
Instagram: https://www.instagram.com/designs.by​...​....
Facebook: https://www.facebook.com/designs.by.l...​...
IG: @designs.by.leopoldo

Видео How to use a 12-column grid system to build better websites канала DesignerWisdom