Week 6
Welcome back. He we tackle part 2 of grids. WHY we use grids. The idea is to give organization and balance. Field elements must sit on some number of columns. Sometimes, this works better in theory than in actual practice. Say you want to put three elements side by side on your app. So, you divide the number of columns by three to get how many column should be contained in each of your field elements. You might have to make your field elements a little smaller than whole width of the actual columns. This would be needed in certain cases so that the whitespace between elements seems to be enough, for example. That's totally fine as long as you keep in your mind's eye that these elements are actually contained still within their number of columns. Think of it as having your field elements contained within a container. And that smaller container that holds the field element was just given some gutter space so the element didn't touch the ends. Arranging you work like this will make your designs a whole lot easier for you developers to build.
Next I'm going to go through a couple of don'ts. Don't leave field elements in the gutter between columns. That defeats the whole purpose of a grid. Don't worry about everything within you field element, i.e. words on your cards, aligning to the columns within. As long as the bigger container is aligned on the grid, you're fine. Don't use the column as padding unless you actually do it purposefully. Depending on how it's coded your padding will either stay fixed as your design is responsively moving, or it will shrink in line with your designs. "So if somebody says, 'I need a design at 1200px width,' that does not mean you design is literally 1200px wide. That means your content width is somewhere like 960px sitting inside the artboard of 1200 px so that you still have space for your side margins." Full bleed elements are the exception. If the image is full bleed, you just need to understand that it whatever is not within the grid will get cut off when scaled in a responsive design situation.
So, that's a little bit more about the why of grids. Next we're going to talk about different types of grids that act in responsive design situations.
Next I'm going to go through a couple of don'ts. Don't leave field elements in the gutter between columns. That defeats the whole purpose of a grid. Don't worry about everything within you field element, i.e. words on your cards, aligning to the columns within. As long as the bigger container is aligned on the grid, you're fine. Don't use the column as padding unless you actually do it purposefully. Depending on how it's coded your padding will either stay fixed as your design is responsively moving, or it will shrink in line with your designs. "So if somebody says, 'I need a design at 1200px width,' that does not mean you design is literally 1200px wide. That means your content width is somewhere like 960px sitting inside the artboard of 1200 px so that you still have space for your side margins." Full bleed elements are the exception. If the image is full bleed, you just need to understand that it whatever is not within the grid will get cut off when scaled in a responsive design situation.
So, that's a little bit more about the why of grids. Next we're going to talk about different types of grids that act in responsive design situations.
Comments
Post a Comment