Lesson 2.2: Grid & Layouts Types

Grid & Layouts Types

Lesson 2.2

Index

Objectives

Examples

Baseline

Manuscript

Definitions

Hierarchy

Columns

Fundamentals

Activity

Importance

Modular

Objectives

By the end of this lesson, students will understand the concept of grids, different layout types, and the importance of grids in creating organized and structured designs for various media.

Definitions to Know

Rows

One or more horizontal blocks used to separate content in a layout

Format

the full length and width of the design.

Gutters

the spacing between rows and columns.

Margins

The area between the edges of the main content and the edge of a page.

Columns

Module

One or more vertical blocks used to separate content in a layout.

an individual unit of space that's made when a column and row intersect.

11:00

Fundamental Concepts of Grids

Frameworks

Purpose

Concepts

By using grids, designers can maintain balance, enhance readability, and ensure that elements are proportionally spaced, which is essential for both aesthetic appeal and user experience.

They use rows and columns to provide alignment and consistency, making it easier for designers to structure information in a visually appealing and accessible way.

Grids are structural frameworks that divide a page or screen into sections, creating a systematic layout that helps organize content.

Grids are typically 2D structures consisting of intersecting horizontal and vertical lines that create a series of rows and columns.

The Importance of Grids

Grids are versatile and fundamental tool to act as our guidelines and they can help use create organized, structured and consistent layouts for a variety of mediums.

First, we have a format which takes up the full length and width of our design. When it comes to digital design our format size will vary. Margins are incredibly important to give our content breathing room and help give our content an overall shape. A grid terminology is columns. Columns will take up the full height of our format, going from the top to the bottom margin, but columns will have their own designated width. Rows take up the full width of our format going from the left to right margin and they have their own designated heights. Gutters is the space between columns and rows. Make the gutters equal between column and rows as it helps to create that essential balance that grids are meant to provide. Module denotes an individual unit of space that’s made when a column and a row intersect

Example of Grid Basics

Manuscript Grid

a one column grid that is typically used when writing for media that will be printed.

Column Grid

one of the most used grid layouts for all forms of media, involves the use of 2 to 12 columns with content spanning one or multiple as needed.

Modular Grid

a grid structure that utilizes both columns and rows, ideal when we require a more organized layout or have a lot of unique information to display.

Baseline Grid

a grid used to establish the line height of typography.

Hierarchy Grid

a content approach grid type that prioritizes the organization of elements in order of importance.

Each group will brainstorm and sketch their magazine spread on a sheet of paper. Groups need to decide: - What type of content spread will include (e.g., an article with images, advertisements, or infographics). - How they will organize the content using their assigned grid type. Design and Construction:Using large sheets of paper or poster boards, students will: - Draw assigned grid using rulers to create precise lines. Ensure to understand the spacing for margins, gutters, and the overall format. - Cut out and place images, headlines, and text blocks within their grid. Emphasize the use of modules (intersection of columns and rows) for placing content. - Use creativity while maintaining the structural guidelines of their assigned grid type.

Group Assignment

- Manuscript Grid (Group 1) - Column Grid (Group 2) - Modular Grid (Group 3) - Baseline Grid (Group 4) - Hierarchy Grid (Group 5)

Collaborative Activity