Great video, reminds me my editorial design teacher: the grid is control, order. But it was the 90's 🙃 made some fanzines and couldn't care less about the grid. Then you go to work, a catalog 100 pages, 500 images, adds, and you finally understand 😂
I study graphic design in 90' in Germany. When I would design some editorial layout (magazines, flyers) without grid, my teacher will just not allow it. I would fail exam for sure. We learned how to construct different grids, how to use them, we even learn how Gutenberg designed the Bible layout etc. Grids are amazing, so very effective.
Thank you so much, this video was really helpful for me. I picked up a couple of helpful tips for creating grids and guides. I really appreciate the time and effort you put into making this video.
UA-cam suggested you to me and even though Im not into graphic design I think I might be able to use some of the information I learned here on my own web design. Thanks 👍
Would be good to have longer video about using the grid in Figma. If and how to use row grid in webdesign, if use 12columns also for mobile devices (because stay at 12 columns through whole design is better from developers point of view - I think), if use rows for vertical spacing or em units are better or there is another approach etc etc :)
Great video. Am new to InDesign. The part of video around 4-5 minutes I couldn't find the "Layout grid" selection on the right hand side like yours. i can only go to "Layout" and select "create grid". So i couldn't find the column selection like demo. Am on 2023 version. The rest of video worked perfect for me. The onlt thing is when using multiple grids cannot select different colours there fore bit hard on my eyes😊
Amazing video! Very informative and a pleasure to watch. Regarding your recommendations for margins, what would be a similar margin for a book where you need to show the chapter on the top of the pages? Thank you!
Hey man, came across your channel by coincidence. A fortunate coincidence. I have a suggestion if you take those. I'm setting up a small business, and I've been wondering about designing a unified set of document templates - internal and public facing documents like letters, emails, reports, etc. I would love to see a professional's take on this.
Just wondering do you not to make sure your baseline grid for type is aligned to the overall grid of the document? This was one of the more difficult things to get your head around it, which involves some maths but I haven't seen anyone teaches. Can you comment on this? Thank you
@@paincult7121 well I usually do this, as I been thought that at the university, but don't really see anyone ever talk about this.. Seems its just arbitrary 🤷♀ And clearly no comment made so far
Thanks for this but how does a grid layout relate to a baseline grid for text? I.e. doesn't the text baseline grid have to match up (be perfectly divisible) to the grid layout?
Ideally the baseline grid for text should be harmonized with the overall grid layout. However, baseline grids are not always necessary. It depends on the medium.
You probably know this but I noticed you dragged down 2 separate guide lines to the bottom of the page. If you grab the guideline on the outside of the page it will bring down a line that spans both pages. Drag it down from inside a page and it brings down only one for that page. Just a wee tip incase you missed it.
🎯 Key Takeaways for quick navigation: 00:00 📏 *Grids aid in creating dynamic layouts, fostering visual interest by providing guidelines for deliberate element arrangement, enhancing composition rules like alignment and scale.* 01:08 📐 *Common grid types include manuscript/one-column, multi-column, modular, baseline, hierarchical, and combined grids, each serving specific design purposes in print and digital mediums.* 03:02 🖥️ *Figma allows beginners to set up basic grids for digital design, offering modular grids for precise element placement, and column grids for structuring web layouts.* 08:42 📰 *In Adobe InDesign, creating grids involves setting margins, columns, and gutters, utilizing guides to structure page elements for balanced and visually appealing layouts.* 18:48 📝 *Sketching layout ideas beforehand helps in exploring different compositions, determining hierarchy, and swiftly executing diverse designs within the established grid framework.* Made with HARPA AI
Great guide thank you so much! Question: Is there a reason you didn't add a baseline grid to the editorial sample and align all the type to it along with appropriate font size and leading? I've also read that the gutter is usually determined by the letters "MM" from the chosen font, but noticed you chose your gutter from a different point. Any help would be greatly appreciated! Thank you!!
hi kaii, gutter size is personal choice, but a 12 col grid gutters size ranges from 16 to 24 pixels, and for print, 5-10mm. Layouts look better with more white space rather than cramped. Regarding baseline, again it depends on yr layout, does it have images, do the images have single or double line Captions or none, is there text next to the images and captions, these things matter because not all items will line up with the baseline, eg: the tops of Capitals in first line, and you may have to edit it by making up a "f" height Grid and adjusting yr grid first, then applying the baseline. cheers
The problem with setting your grid within margins is that in this way the margins are not structurally related to your grid at all. Arguably a better option would be to do exactly the opposite, first set your grid and then draw margins as part of the grid structural logic.
I love using grids but not every platform has them. Sometimes there are lines to help you center but its not always accurate. I'm referring to web design platforms like Wix and Divi. I'm newer to Divi and working on a client project in it. I'll spend a minute or two trying to aligned and centered elements. Any advice?
does this help? ua-cam.com/video/ofNUvVW6O5k/v-deo.html If you want to create more custom designs that look just like your designs however, I'd suggest taking a look at learning webflow, depending on how much code you know.
@@holyshiet787 Just to convince myself that you don't need a degree program to become good at something. It may sound silly, but my head needs something like that every now and then
Body text not even sitting on the grid and does not align with the bottom edge of the image 💀Please, do yourself a favour and buy and study tf outta Grid Systems in Graphic Design by Josef Müller-Brockmann. Thats the true "missing guide to grids".
Ah, so you don’t know paragraph and character styles. Master pages, special characters like column break and page numbers. You don’t know about dropping .psd and .ai files in and updating links. Or drawing frames first and dropping images in after. Table of Contents that you can update automatically. There are many projects I would not even embark on if there was no InDesign. Have fun changing text individually on 50+ pages, selecting each heading paragraph and quote and not losing your selection before you can change the font face and point size.
I’ve been wanting to make this one for a while. Hope it helps you get started with grids. ✌️
absolutely love every video you make for flux, matt!
@@shayanzaidi2836 very kind Shayan, thanks.
@@MattBruntonUK Same here Shayan. This video was well explained and really applicable
Great video, reminds me my editorial design teacher: the grid is control, order. But it was the 90's 🙃 made some fanzines and couldn't care less about the grid. Then you go to work, a catalog 100 pages, 500 images, adds, and you finally understand 😂
I study graphic design in 90' in Germany. When I would design some editorial layout (magazines, flyers) without grid, my teacher will just not allow it. I would fail exam for sure. We learned how to construct different grids, how to use them, we even learn how Gutenberg designed the Bible layout etc. Grids are amazing, so very effective.
I loved this part at 18:20, I took a screen shot of the layouts so that I can keep them in mind for future projects. Thank you for making this video!
Thanks, my pleasure.
Lovely reminder video for all of us how Grids can improve any design. Thank you for this ❤️
Super helpful. Love the way you explain and instruct. Very practical tutorial on how to build and apply grid too. Thank you very much.
I love how things work well here
I'm just starting to learn InDesign and how to set up grid is incredibly useful! Much appreciated Matt.
Such a helpful upload! I’ll be using this info for a project I’m working at Uni. Thank you!
Great video. Learnt a lot about grids in just half an hour. Thanks for making this video. Really appreciate it!
Pleasure. Thanks for the comment.
Interesting information. I will use this grid concept to create my scrapbook layouts.
I like how you gave all of these information in one video, now i'm a fan of your videos
I appreciate that!
Thanks for this amazing video! I'm trying to design my portfolio, and this was so useful.
we want more videos like this one!
This was very helpful, thank you! If I can learn to make designs as nice as your quick mockups, I will be a happy camper🙏🙏
thanks for the content, the editorial grids section was very interesting and well done. Looking forward to a more complete one for web grids!
Precise & effective demo // Thanks
Thanks, you're a good teacher!
Superb video mate.
Thank you so much, this video was really helpful for me. I picked up a couple of helpful tips for creating grids and guides. I really appreciate the time and effort you put into making this video.
That's so valuable. I need to work in Indesign for one of my uni project and have felt so lost as I am used to work in Figma. Thanks, so nice.
Thanks so much for this. Been having problems setting up my document the correct way before I start to design. This will def. help. Thanks again.
Interesting would like to see more of your vids with Figma layout tutorials!
Thats awesome! Thank you a lot!
absolutely amazing tutorial, thanks!
Glad it helped!
Great Video! It was a quick refresher on indesign for me! Thank you!
Glad it was helpful!
Glad to have found the ‘missing’ piece
Clear explaination. Thanks.
Nice one Geezer!
Thanks, it really helped me understand how to work with grids
You're welcome, glad it helped!
UA-cam suggested you to me and even though Im not into graphic design I think I might be able to use some of the information I learned here on my own web design. Thanks 👍
Would be good to have longer video about using the grid in Figma. If and how to use row grid in webdesign, if use 12columns also for mobile devices (because stay at 12 columns through whole design is better from developers point of view - I think), if use rows for vertical spacing or em units are better or there is another approach etc etc :)
great video!!
Great video. Thx.
Very helpful! great video. PS: I used grids all the time.
- Different types of Grid: One Column / Double Columns / Multiple Columns /Uniform Column / Modal / Baseline / Hierarchy / Combine / Radial Grid
- Things to consider: Gutters, Coloured Columns
Thank you
Best tutorial on Guides in InDesign.
Thanks!
Remarkable demo there, sir. Thank you so much. Appreciate your way of calm teaching with greater clarity.
thank u very useful
Super video!!!
thanks matt healy
here‘s a book tip for y‘all: Grid systems in Graphic Design by Josef Müller-Brockmann (that‘s the red one in the background) it’s a must have!
thank you
i wish that you speak about the grids in posters design or logo design
Great video. Am new to InDesign. The part of video around 4-5 minutes I couldn't find the "Layout grid" selection on the right hand side like yours. i can only go to "Layout" and select "create grid". So i couldn't find the column selection like demo. Am on 2023 version. The rest of video worked perfect for me. The onlt thing is when using multiple grids cannot select different colours there fore bit hard on my eyes😊
He used figma at first then went to in design😊
I want to learn swiss layout WHAT lesson you recommend
Can you make one for illustrator? it would be really helpful
Nice video. I wish it would had been on web design entirely as the video is really well made 👍
Great video, thank you 🙏🏾🙏🏾 I followed the link to download the document, but the download button is not working 😢😢
Thanks, this is great. How does this tie in with the work of David Carson?
Hahaha. It doesn't. 😆
What keyboard shortcut did you use to repeat?
Amazing video! Very informative and a pleasure to watch. Regarding your recommendations for margins, what would be a similar margin for a book where you need to show the chapter on the top of the pages? Thank you!
Lovely video, thanks! As a non-native English speaker, I'm wondering what accent you've got? Is it Australian or Irish or?
2:43 Which program is this?
Figma
Hey man, came across your channel by coincidence. A fortunate coincidence.
I have a suggestion if you take those. I'm setting up a small business, and I've been wondering about designing a unified set of document templates - internal and public facing documents like letters, emails, reports, etc. I would love to see a professional's take on this.
Thanks! Sounds like they might be better off with simple formatting and kept online so Google Docs or Notion might be better.
Just wondering do you not to make sure your baseline grid for type is aligned to the overall grid of the document? This was one of the more difficult things to get your head around it, which involves some maths but I haven't seen anyone teaches. Can you comment on this? Thank you
Did you ever figure this one out?
@@paincult7121 well I usually do this, as I been thought that at the university, but don't really see anyone ever talk about this.. Seems its just arbitrary 🤷♀ And clearly no comment made so far
@@NadiaNj 😬I refuse to give in! I must find out!
do i have to make this gird or somewhere i can get tem
would you use the same values for a smaller papersize? or would you downsize the gutter and margins accordingly?
Always proportional. 👍
Thanks for this but how does a grid layout relate to a baseline grid for text? I.e. doesn't the text baseline grid have to match up (be perfectly divisible) to the grid layout?
Ideally the baseline grid for text should be harmonized with the overall grid layout. However, baseline grids are not always necessary. It depends on the medium.
You probably know this but I noticed you dragged down 2 separate guide lines to the bottom of the page. If you grab the guideline on the outside of the page it will bring down a line that spans both pages. Drag it down from inside a page and it brings down only one for that page. Just a wee tip incase you missed it.
Finally
Good day i am new nd i wish to learn alot from you but i want to ask what are the application or software i need to start with
if you are referring to website design, the best option would probably be figma
🎯 Key Takeaways for quick navigation:
00:00 📏 *Grids aid in creating dynamic layouts, fostering visual interest by providing guidelines for deliberate element arrangement, enhancing composition rules like alignment and scale.*
01:08 📐 *Common grid types include manuscript/one-column, multi-column, modular, baseline, hierarchical, and combined grids, each serving specific design purposes in print and digital mediums.*
03:02 🖥️ *Figma allows beginners to set up basic grids for digital design, offering modular grids for precise element placement, and column grids for structuring web layouts.*
08:42 📰 *In Adobe InDesign, creating grids involves setting margins, columns, and gutters, utilizing guides to structure page elements for balanced and visually appealing layouts.*
18:48 📝 *Sketching layout ideas beforehand helps in exploring different compositions, determining hierarchy, and swiftly executing diverse designs within the established grid framework.*
Made with HARPA AI
NeueGrafik movement gang where you at 😎
Great guide thank you so much!
Question: Is there a reason you didn't add a baseline grid to the editorial sample and align all the type to it along with appropriate font size and leading? I've also read that the gutter is usually determined by the letters "MM" from the chosen font, but noticed you chose your gutter from a different point. Any help would be greatly appreciated! Thank you!!
hi kaii, gutter size is personal choice, but a 12 col grid gutters size ranges from 16 to 24 pixels, and for print, 5-10mm. Layouts look better with more white space rather than cramped. Regarding baseline, again it depends on yr layout, does it have images, do the images have single or double line Captions or none, is there text next to the images and captions, these things matter because not all items will line up with the baseline, eg: the tops of Capitals in first line, and you may have to edit it by making up a "f" height Grid and adjusting yr grid first, then applying the baseline. cheers
If I make: outside 15mm, top bot 2cm, inside 2cm, so the gutter still 10mm like you do? , I make columms 6, rows 9
Hey yo, which font you are using for this tutorial? :)
The problem with setting your grid within margins is that in this way the margins are not structurally related to your grid at all. Arguably a better option would be to do exactly the opposite, first set your grid and then draw margins as part of the grid structural logic.
I love using grids but not every platform has them. Sometimes there are lines to help you center but its not always accurate.
I'm referring to web design platforms like Wix and Divi. I'm newer to Divi and working on a client project in it.
I'll spend a minute or two trying to aligned and centered elements.
Any advice?
does this help? ua-cam.com/video/ofNUvVW6O5k/v-deo.html If you want to create more custom designs that look just like your designs however, I'd suggest taking a look at learning webflow, depending on how much code you know.
💐💐💐💐
👍👍👍
0:44
it doesn't show me inside/outside margins but left and right only: (
Useful. However, the guides are hardly visible. Maybe you should make their color a bit darker.
Thanks for the feedback 👍
@Matt Brunton: Did you study graphic design at a university or teach yourself?
I've been to University twice but never for graphic design!
@@MattBruntonUK So you're a self taught graphic designer?
@@oooBoEoNooohows that relevant?
@@holyshiet787 Just to convince myself that you don't need a degree program to become good at something. It may sound silly, but my head needs something like that every now and then
@@oooBoEoNooo you are getting an imposter syndrome without actually working. Build some confidence first
Still don't see a good use idk if it's just me
for grids? if you ever do actual design work, you sure will lol.
first!
I learned absolutely nothing in 25 minutes. The only interesting part is sped up and too short.
Body text not even sitting on the grid and does not align with the bottom edge of the image 💀Please, do yourself a favour and buy and study tf outta Grid Systems in Graphic Design by Josef Müller-Brockmann. Thats the true "missing guide to grids".
Typical Insta content...One might just go for a proper graphic design school, after all.
You should call your video
"Misleading guide to grids and mindless self centered expression"
Better videos on the topic. The few Jewels here are NOT worth the length of the video…
God I hate InDesign 🥲
Ah, so you don’t know paragraph and character styles. Master pages, special characters like column break and page numbers. You don’t know about dropping .psd and .ai files in and updating links. Or drawing frames first and dropping images in after. Table of Contents that you can update automatically.
There are many projects I would not even embark on if there was no InDesign. Have fun changing text individually on 50+ pages, selecting each heading paragraph and quote and not losing your selection before you can change the font face and point size.
Same 😢
Because you haven’t learned how to use it.
@@suspendedhatch my eyes were opened once i started using master pages instead of adding page number to every single page
Try Affinity Publisher