More Grid Systems2:59 with Hope Armstrong
Thirsty for more grid systems? Let's go!
- An ode to the pioneer of typographic brilliance Karl Gerstner - Typeroom
- Grid systems in graphic design - book by Josef Müller-Brockmann
- Josef Müller-Brockmann "swiss style" - Grapheine
- Thinking with Grid - Thinking With Type, Ellen Lupton
Earlier, you saw how to use a baseline grid to create rhythm in a design. 0:00 Now, we'll cover some other types of grids. 0:05 Now that you know text is easier to read when it's in a column, 0:09 you may find yourself with designs that have white space. 0:13 How can you lay out the text and other content? 0:16 First up the multi-column grid. 0:19 Multi-column grids allow you to create hierarchy and 0:22 integrate text with photos or graphs. 0:26 You can define certain zones for 0:28 photos, and you can allow content to span multiple columns. 0:30 Aim for an average of 40 to 50 characters per line. 0:35 Back to our project, 0:39 here's an alternative way we could layout the type in a multi-column grid. 0:40 To create this, click the plus sign to add another layout grid. 0:45 You'll want to define the columns so they match up with the baseline grid. 0:50 So it's important to see both grids at once. 0:55 Select Columns and set it to 3 columns. 0:59 For the margin, make it 64 pixels so it spans two 32-pixel squares. 1:02 For the gutter, make it 32 pixels. 1:09 This will work best in order to lay out the type with good measure. 1:12 Then arrange the content to align the columns while maintaining alignment with 1:17 the baseline grid. 1:22 For the headline, you'll need to adjust the line height and 1:24 remove any paragraph spacing if that happened to be set on the text box. 1:27 I added a photo of Mars to spice up the white space. 1:31 As you work on it, it helps to hide the grids to check out how the layout looks 1:35 without the red guidelines. 1:39 Second up is the hang line. 1:47 In the hang line grid, 1:50 you can divide the page horizontally to designate a given area of the page. 1:51 This is called the hang line. 1:56 The area often contains images, footnotes, asides, and so 1:58 on that complement the main text. 2:02 Lastly, the modular grid. 2:06 These were popular among Swiss designers in the 1950s and 1960s. 2:09 In this style of grid, the art board is divided into consistent divisions, 2:14 horizontally and vertically. 2:18 Content can span across sections as you wish. 2:20 That's it for types of grids. 2:24 Keep in mind when you design for the web you want to prepare for 2:26 a range of screen sizes. 2:29 For instance, a mockup for a responsive website design could be in three parts. 2:31 A desktop design with a three column grid, a tablet design with a two column grid, 2:36 and a mobile design with a one column grid. 2:42 If you're interested in learning more, check out designers Kirchner and 2:45 Muller-Brockmann for inspiration. 2:48 I put some links in the teacher's notes. 2:50 Stay tuned for 2:53 the next video where we'll look at the super cool world of variable fonts. 2:54
You need to sign up for Treehouse in order to download course files.Sign up