![]() Maintaining a baseline when designing for the screen is next to impossible. An example: With a 30px gutter, there are 15 pixels on either side of the entire grid from the outer columns. Gutters are technically made up of 2 margins. A gutter is the space between each column.Anatomy of a gridĪ grid is made up of 2 parts: the column and the gutter. This versatility makes it possible for a designer to use many varying widths within the grid to make a design feel both interesting and uniform. The numbers 960, 60, and 20 may seem arbitrary, but there’s a good logic behind them: 960 is a versatile grid that is divisible by many different numbers (16, 12, 10, 8, 6, 4, and 2). “Typography has a massive impact on how a design is perceived.” Traditionally for the screen, this has manifested itself in a 12-column grid, often set at 960px wide with 60px columns and 20px gutters. (If you’re interested in learning about creating grids for print, check out Thinking With Type and Grid Systems in Graphic Design.) Multi-column gridsĪ multi-column grid focuses on splitting the page into more than one vertical column, with a gutter. In this chapter of my InVision e-course, I’m going to talk about creating grids for screens. Related: The big list of free typography resources But they aren’t rigid- grids can change depending on the content around them. Grids are an essential part of a designer’s arsenal, creating a neatly-crafted, equal system for arranging content in the space of a screen. It can influence every aspect of the design, like image ratios, measure, order of information, and the remainder of the layout. A grid brings order and hierarchy to a page-it lives at the center of any piece of design. ![]() ![]() At the core of typography is the critical task of setting type in grids.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |