The missing guide to grids

you asked for it here it is the missing guide to grid layouts I'm going to show you how to set up grids and demonstrate how to use them as a tool to improve your designs if you've seen layouts like these and wondered how it's done this is it instead of static looking central line compositions grids assist in the production of dynamic asymmetrical layouts introducing tension and visual interest grids are simply a network of guidelines that allow you to arrange your elements in a deliberate way they help you to become more attentive to the rules of composition such as alignment white space scale allowing you to achieve better results faster grids are everywhere replacing ancient Pathways with modern Street layouts and displacing the symmetrical form of traditional architecture with repetitive structures in graphic design we have a few different kinds of grids so let's start with an overview of some common types before jumping into a demo firstly manuscript or one column grids you'll find these in a paperback book defining the margins and subsequently the line length as well as where the page numbers sit next column grids two column layouts have been used for hundreds of years to set religious texts multi-column grids are commonly found in newspapers magazines and on the web modular grids divide the page into vertical columns and horizontal rows allowing items to be aligned in both the X and Y axis these can be uniform grids consisting entirely of squares with no space in between the canyon software has baked in or allow each module to be rectangular with or without gutters the name for the space in between rows and columns around each module so that they spread evenly across the page a baseline grid consists of evenly spaced horizontal lines on which the type sits this allows the designer to align bass lines across columns and differing Point sizes when leading is set correctly difficult to do on the web but important to be aware of as a professional graphic designer even if it's not necessary in every document when type is type set carefully across a baseline grid the whole layout looks solid and together a thing of beauty that a pro can spot straight away hierarchical grids are Custom Creations which allow modules to be different sizes as the name suggests the hierarchy of the information determines the makeup of the grid for example this magazine layout defines areas for headlines section titles copy imagery Etc and finally combine grids we choose two or more grid Types on one page the different grids are overlaid or edited creating additional guidelines as needed I'll show you this in the demo in a moment Beyond this we can also have radial grids where elements emanate from a central point and grids that use angles other than 90 degrees but in this video we're focusing on grids with only vertical and horizontal line here in figma I'm going to give you a beginner's introduction to grids in digital design then we're going to jump into some more complicated editorial design style grids so you can follow along here in figma if you'd like to I'm just going to make a new frame for a desktop size frame frame frame and here we can set up some grid so you can see here in the right column we have layout grid so if we click add it adds a grid in here and this is a simple modular Grid it's like a baseline grid of 10 pixels so it's creating all these 10 pixel squares and this kind of thing can be quite useful for things like apps or when you're designing even a website icon design having some sort of Baseline for the size of things so you might have like a line you know a rule as we call it in graphic design you know that's always going to be you know maybe 10 pixels high and we maybe Use multiples of that so 200 wide 10 high for example for this shape or let's just add a fill to that so we can see it that's not white and then you might you know say okay but my buttons they're going to be a different hat they're going to be like 30 pixels high or something like this so if we zoom out and you could develop things along this sort of Baseline but to give us something a little bit more useful we also when it comes to something like web design and getting going as a beginner if you click on grid here you can see there's different types of grids we can also have a column grid and you can choose here the count means the number of columns so let's type in 12 columns you can change the color here if you want to have a different color for the guidelines for the columns and how or pick or that is we can make it a little bit darker and the type so this is stretching them across with a gutter a space in between each column the white space here of 20 pixels so we can change this however we want we can Center it so then now it's not stretching them it's giving it an absolute size so here it's at 10 pixels if we change that to 100 you can see how they would stretch across the page like that and we have a little bit of margin Auto generated at each size now 12 I selected is a common number for columns and the reason is that when you're creating uh something with 12 columns you can have lots of different multiples 12 has lots of factors so here we have got one across so we can whoops we can do this as 12 I'm just using the command D to duplicate to repeat the action so here we've got if we just turn this grid off which is shift G 12 items that are one column wide each then we would maybe do something where we had two columns if I can do this exactly so we've got six items that are two columns each then we could have three column wide for four items we could have four column wide for three items and we could have six column wide for two items and we could have twelve column wide for one item that I've not quite done that exactly there we go and also obviously you could go across the whole size of your frame as well beyond the margins so there are lots of different options here because of all these different multiples that allow you to create things within this grid so when it comes down to creating something more useful you know we might for example have a little square like this it's not quite a square is it let's make it square and then maybe have something that spanned over a couple of columns next to it you know it may be some type might be some points in a in a list something something like that so there's better ways to do these layouts but we're just demonstrating uh the grids so you can see you begin to you know create different little things like this um that different options you might have an image for example that spans over more columns you know it's a halfway uh then some text to the side of it you know using the columns even as as spaces in between you know we could do something that was a couple of rows of text a few rows of text got over a couple of columns so you can start to create these different kind of things in digital design so that's just to illustrate the idea of a 12 column grid setting that up in figma how you can use that to make sure that things are aligned properly but I really want to get into the meat of this video now showing you how to set up modular grids and then layout your elements so for that we're going to jump over to Adobe InDesign so once you're in InDesign go to file new document we're going to set the intent as print number of pages let's do seven to give us some to work with facing Pages which is going to turn these into spreads the page size is A4 and the orientation as portrait we'll start with one column and set them up in a moment the margins again leave those as zero or set them to zero and we'll set them in a moment the bleed I'm going to make that three mil just for good practice that's what we should normally do in print but it's not really necessary for a demo and then click ok then I want you to select the parent now the parent is the template for those unfamiliar with InDesign so if we draw a box here which is cyan then that's going to appear as you can see in these thumbnails here on all the different pages okay let's delete that thing now make sure you've got both selected here you can just click on them hold shift click on them and then we're going to go to layout margins and columns so we're going to set our margins now so a top margin I'm going to select as 10 mil just to make this nice and easy and you can see here it appears at the top of our pages now the bottom layout I'm I could set this as 10 mil but when you have your top and bottom margins the same it gives the effect of the layout falling off the page and all that margins if I click this make all the same being the same size it looks very default and we want to add some life into this composition so best practice over hundreds of years of type setting tells us that we want to change these things so we're going to change the bottom margin to 20 or double what the top margin is these aren't exact relationships that you have to use every time but they'll give you an idea of the principles the inside margin I'm going to make at 1.5 x so 15 millimeters and the outside I'm going to make the same as the top margin now you can set the columns here but I don't want to so I'm going to just leave that there and then I'm going to click OK and you can see the one column grid that we now have and how it sits on the page if we draw like a black box just to really emphasize how this looks I'll put that onto both sides I'm just going to hold option while I click and drag that over I press W to switch to preview View and you can see how the area within the margin sits on the page it's just a little bit more interesting and dynamic than all the margins being the same so now let's set up some columns in fact let's save this thing and I encourage you to do the same thing we're going to go to layout create guides so I want to do my columns first and I'm going to select five columns on each page and the gutter which is this space in between the smaller space so you can say if I change that to something huge and see it becomes where we can't even recognize the columns or something very small but I'm going to change that to 10 which is the same as my outside margins my my outside and top because I want to just have that feel of of them being the same between the images and such and then the rows I'm going to do six rows now the gutter here it doesn't have to be the same as the column got it just as it didn't have to be the same as the outer margin size you can do whatever you like with this it depends on the requirements of your layout but as we're learning here how to set these things up I'm going to put them all the same as 10 and have that nice consistent margin around items here now make sure you fit your guides to the margins that you've set in this instance if you want to follow along if we do it to Page you see how they move around margins page that's going to start at the very corner of the page so within our area inside the margin this first cell is going to to be a different size to the next one so make sure that's the margins and the reason I created the guides in here and not in the margins dialog boxes because I have this option here of removing existing ruler guides and it's easier to I find to edit right here so I'm going to click ok and that is our basic grid set up now I promised you a combined grid so I'm going to go layout create guides again and just do some simple things I'm going to select two columns with zero gutter and that is going to give us a center line see if we just turn the preview on and off on and again align to the mind if we do that to the page that's going to be off to the center versus where our main grid is and it's difficult to see here where is the cell the gutter so make sure that's to the margins and we know we've got a center line on each page which I often find useful and one more thing I'm going to add another guideline at the bottom to align my page number two now you don't have to do it this way again but go up to the rule here click and drag and you can just drag guidelines down now I want this at the same 10 mil from the bottom so that's 297 which is the Air Force size so I'm going to do it at 287. did that move it'll tell me up here it's always hard with a stylus when you let go 287 on both sides so if I do want that same margin at the top and bottom just where I sit my page numbers I have that option so let's do that now I'm going to select the type tool I'm going to click and drag a type area into here and just type in a default page number even number on the left so I've typed 28 I'm going to align this to the bottom and range it to the left when you type selected now it doesn't really matter what font you use something similar you know around 10.9 points something like that is fine for now for the purposes of this demo I'm going to drag a copy box over here and I'm going to arrange this type to the right this isn't really an InDesign demo it's a grids demo but I will mention a few things about InDesign um because I know some of you will be unfamiliar with it so that is basically setting up our page numbers what they would look like so overall I'm quite happy now now it does look like we're going to have the feel of the margin being the same all the way around but because this will just sit in this field if I draw this box again it'll be okay because you will still get the feel that the bottom margin is larger as you can tell here with the page number being a small element with it within there so to make these actual page numbers what I'm going to do is just delete this or select it and go to type insert special character markers current page number and you can also see there is a shortcut for that which is option shift command n on the Mac and that's put it as a because you see this is a parent I'll do it here with the shortcut a a but if we go down to four and five you can see there six and seven and I'm just double clicking on these previews our page numbers are in there fantastic now what we want to do is bring in some content and make this a little bit more interesting so if we select page two and three what I like to do with content is add this in to the side and have it close by so that I can know what I'm working with and the elements that I have to hand so I've prepared a little bit of copy and a few images so here's a headline this is for our Magazine spread so I'm just going to put a test text box here let's just bring a couple of three text boxes and if you want to type this out you can it's very short I don't need to uh send you this this is just something made up to allow us to do this layout Okay so we've got this type and then we'll have some imagery which had maybe pull in but I've just gathered a few photographs that were able to use so when I have the content and some idea of what we're working with maybe we'll this is going to stay small so maybe let's just make these a little bit bigger just so we can get the sense of the hierarchy that this is going to be the headline these are the droids you're looking for and then this is going to be like a byline and then we've got the credits for the writer and the photographs for the article and then we'll probably add you know some body cop here with some placeholder text so once I have that there I like to think about layouts and different options now for this I tend to jump over onto a sketch pad with a pencil and paper now here I've got a gridded pad and I've drawn a bunch of layouts just different options that might work for this now I've got the Grid in mind I know I'm using this five column grid so because I have some experience of grid layouts I know kind of how it's going to feel how it's going to work together but I thought about what if it was a four column Grid or a six column or a five column grid and just done a few ideas this is always something I can change if you're setting up a new grid for a new project but it's just to think about some different compositions now even if you're not familiar with grids and you're not really sure where to start it is just good to start to do some layouts based on the things you know the things that are important well what about the hierarchy the headline needs to be quite big or maybe some imagery maybe that's going to be the largest thing and in most cases here I've got the imagery is the largest most dominant element then the headline and then everything else becomes the tertiary elements so I'm going to look at these sketches and now do a few different layouts based on these sketches maybe with some boxes maybe bringing in some of the content and see how we can actually set these items out across our grid I've decided to speed up this section and add the commentary later because it was a bit slow in real time but other than that there are no other edits there are no Cuts here this is my first attempt at laying out elements in this grid so here you can see I'm doing some type setting with a large headline sub headline underneath and the grid is really useful just giving you a place for things to belong things to align to again based on sketches I'm just looking back and forth here to my sketch pad and seeing which layouts I want to try out you can see here the larger margin at the bottom and the feel that that gives on the page and just trying different things to achieve balance to achieve a nice composition within each layout now I'm trying actually spreading over the fold in the middle which is a nice technique of the photograph going through the fold and again the grid just gives you a nice place to align to making sure there's that gutter around the type so it's still clearly legible trying a bit of a different layout here with another image and this is again based on a sketch I've got one where there is a large headline of just one word that I've decided to span across the full width between the margins so I'm just drawing that out here in InDesign made that into curves so I could just bring it to the exact size and then this idea of an image within the grid that is overlaid with the headline and it just shows you how quickly you can achieve different layouts when you have a grid because it's suggesting things to you and based on the sketches that you've already got it's very quick to begin to pull things together and make sure that things are in alignment and achieve the right sort of feel that you want and the balance that you want on a page I thought now about maybe the next page in the article after the opening pages with the title you'd maybe have some sort of photo spread have some more copy and want to introduce some more images so I'm just laying them out here and you can see I've got a column with three rows of images and then the column next to it with two and this just adds a little bit more interest that I'll just create an example here where is if we had three and three it's a little bit static looking and it just adds more interest with what we have on the right and that's the great thing about grids they suggest this kind of thing to you and it's very easy and quick to set these things up having the correct margins around everything and suggesting this so now to achieve balance across this spread because the images on the right are way over to the right and I'm not using the left column on the right hand page I've decided to have this image which spreads right off the page on the left and so even though that it's smaller than the others it distributes the visual weight by pulling something over to the left so it's distributed across the spread and here I've got the The Columns of text that run down and this was all done in about 18 minutes like I said first attempt at doing these spreads and this is not finessed if this was going to be a final magazine I I definitely want to add some more detail maybe some little titles for each section but it shows you how quickly in just 18 minutes you can lay out a few spreads and you can begin to get a feel of how something will work within a grid and we can add some interest later in the description of this video there's a link to a free guide I've written in title principles of layout and we also have a three-part video series on that same topic here on the channel combining those rules of composition with use of an appropriate grid and lots of practice will allow you to produce appealing and effective layouts consistently so go and make something until next time happy designing foreign [Music]

Channel: Flux Academy

Views: 110,683

Keywords: become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy

Id: wIabVp0Hh8U

Length: 24min 14sec (1454 seconds)

Published: Fri Dec 23 2022