The fifth lecture - المحاضرة الخامسة

march 16th, 2017

Grid System

As with all systems in design, a grid should focus on problem solving first and aesthetics second. A grid is the definition of a framework, it’s there as a tool to guide design and placement of elements. But it’s also there to enhance the user’s experience by adding order and predictability to websites.

Grids are not one size fits all, your grid should be based on the problem it’s there to solve, which is fundamentally organising content. There are a few things to consider before working out your grid.

Grid system has 4 types:

Manuscript Grid

Sometimes called a block grid or single column grid, the manuscript grid is the simplest grid structure. It’s mainly a large rectangular area taking up most of the space inside a format.

The primary structure is defined by large text blocks and margins, which position the block within the format. Its secondary structure defines the location and proportions of folios, footnotes, running headers, and other secondary information.

Column Grids

When people think of grids, especially online, they likely think of column grids. As you would expect column grids are made up by placing multiple columns within the format.

Column grids are good when discontinuous information needs to be presented.

Modular Grids

Modular grids are like column grids with the addition of horizontal divisions marked by rows. The columns and rows and the gutters between each create a matrix of cells or modules.

Modular grids are good for complex projects that require more control than a column grid can offer. Image galleries and shopping carts are likely candidates for modular grids.

Hierarchical Grids

Hierarchical grids are commonly found on the web. They’re based more on an intuitive placement of elements, which still conforms to the needs of the information.

Customized proportions are typically used in hierarchical grids instead of regularly repeated intervals. Column widths tend to vary as do the location of flowlines.

For the exersice we've designed a book spread (tow pages of the book that we designed it's cover)

In this spread I used asymmetrical design but I worked on making it balanced

The grid helped me so much with the measurements

I also practised the Typography and used it for the main title and the sub title and also the main paragraphs.

Visual elements are important to explain the ideas which I put in cosideration in my design.

I was inspired by a spread in a magazine I've seen online

At the end this lecture added so much to me and made me recognize the beauty of magazines' and books' designs and appreciate them all.