Grid

Question 1

What is the rule of thirds?

Answer 1

A grid system that divides a composition evenly into thirds, both horizontally and vertically.

The design elements are placed at the intersection of those dividing lines, or along one of the lines itself.

Question 2

What is the golden section?

Answer 2

The golden section has been used in art and architecture for more than two thousand years. Expressed numerically, the ratio for the golden section is 1 : 1.618.

The golden section is commonly found in nature, and when used in a design, it fosters organic and natural-looking compositions that are aesthetically pleasing to the eye.

Question 3

What is the single-column grid?

Answer 3

Single-column grids are the simplest, consisting of a single column of text surrounded by margins.

Question 4

What is the multi-column grid?

Answer 4

Multi-column grids provide flexible formats for publications that have a complex hierarchy or that integrate text and illustrations.

Question 5

What is the modular grid?

Answer 5

Modular grids have consistent horizontal divisions from top to bottom in addition to vertical divisions from left to right.

Question 6

What is the baseline grid?

Answer 6

Baseline grids consist of horizontal guidelines that govern the whole document. Baseline grids serve to anchor all (or nearly all) layout elements to a common rhythm.

Practical Tip: To create a baseline grid, simply choose the type size and leading of your text, such as 10-pt Scala Pro with 12 pts leading (10/12). Avoid auto-leading so that you can work with whole numbers that multiply and divide cleanly. Use this line space increment to set the baseline grid in your document preferences.

Question 7

What is a responsive grid?

Answer 7

Responsive grids adapt to screen size and orientation, ensuring consistency across layouts. They are typically made up of three elements — columns, gutters and margins.

Question 8

What are columns?

Answer 8

Columns are the areas that content occupies.

Question 9

What are gutters?

Answer 9

The gaps in between columns are gutters, which add breathing spaces between the content to avoid visual overload.

Question 10

What are margins?

Answer 10

margins are spaces that add padding between the page’s contents and the edges of the viewport.

Question 11

What is a breakpoint?

Answer 11

A breakpoint is the range of predetermined screen sizes that have specific layout requirements. At a given breakpoint range, the layout adjusts to suit the screen size and orientation. Each breakpoint range determines the number of columns, and recommended margins and gutters, for each screen size.

Question 12

What is a common grid system used in publication design?

Answer 12

Multi-column grids provide flexible formats for publications that have a complex hierarchy or that integrate text and illustrations.

Question 13

What is a common grid system used in web design?

Answer 13

A responsive grid adapts to screen size and orientation, ensuring consistency across layouts. These grids are typically made up of three elements — columns, gutters, and margins

Question 14

What is an Axial System?

Answer 14

The axial system is one of the simplest systems. All elements are organized either to the left or right of a single axis. This is a branching arrangement from an implied main line. The axis can exist anywhere in the format to create a symmetric or asymmetric composition. Examples of axial arrangements in nature include the trunks of trees, flowers’ stems and the structures of many other plants.

Question 15

What is a radial system?

Answer 15

In the radial system, all elements are organized to extend from a central point of focus like rays. Examples include the petals of flowers, fireworks, domes in architecture, rays of the sun, spokes of a wheel and starfish. The compositions are dynamic, as the eye is drawn to the focal point of the radial composition. This point can be depicted, or implied.

Question 16

What is a dilatational system?

Answer 16

In a dilatational system, circles dilate or expand from a central point. Examples of this system include the iris of the eye, the waves created when a pebble is dropped into still water and sound waves. Similar to the radial system, the compositions are dynamic as the eye moves along the arc of the circle or is drawn to the focal point at the center of the circle.

The simplest forms of the dilatational system are circles that expand in regular or rhythmical increments from the center. Variations of this system can include dilations that are tangent, dilations that are non-concentric, and multiple dilations.

Question 17

What is a random system?

Answer 17

The random system is a spontaneous design consisting of elements that are arranged without definite aim, pattern, direction, rule, method or purpose, but it is deceptively simple because the viewer imposes organization on compositions even when it is unintentional.

Question 18

What is a grid system?

Answer 18

A grid is a system of vertical and horizontal divisions that organize and create relationships between elements.

Grid system arrangements are usually formal and are intended to create visual order and economy in production. Examples of grid systems include windows, maps and crossword puzzles. Grids are frequently used in publication design and web design as they guide information hierarchies and promote visual rhythm and consistency among multiple pages or screens.

Question 19

What is a transitional system?

Answer 19

The transitional system of visual organization is an informal system of layered and shifted banding. There are no interrelationships along an axis or edge alignments, and elements move freely left and right. This is a far more casual system than the grid system in that a strict interrelationship through edge alignment is not desirable. The lines of type are free-flowing, and the textures they create assist in ordering the message. Examples of natural transitional arrangements include strata of layered rock or casually stacked wood.

Question 20

What is a modular system?

Answer 20

The modular system is dependent on standardized non-objective elements or units that act as a ground to hold and contain text. Compositions are created by the organization and placement of the modular units. Examples of the modular system include building blocks, storage containers and component systems.

Question 21

What is bilateral system?

Answer 21

The bilateral system is the most symmetrical of the visual organization systems. It consists of a single axis with lines of text centered on the axis. Examples of the bilateral system include the human body, butterflies, leaves, and many animals and man-made objects.

Question 22

… is designed to the left and right of a single axis.

Answer 22

Axial

Question 23

… is designed from a central point of focus.

Answer 23

Radial

Question 24

… is designed along a circular path.

Answer 24

Dilatational

Question 25

… is a spontaneous design.

Answer 25

Random

Question 26

… is designed with vertical and horizontal divisions.

Answer 26

Grid

Question 27

… is designed with standardized units.

Answer 27

Modular

The modular system is dependent on standardized non-objective elements or units that act as a ground to hold and contain text.

Question 28

… is designed with shifted bands or layers.

Answer 28

Transitional

Question 29

… is designed with text that is symmetrical to an axis.

Answer 29

Bilateral

Question 30

What is the difference between the grid and axial systems?

a. What is the difference between the grid and axial systems?
b. Axial systems are not tied to a single axis.
c. There is no difference between grid and axial systems.

Answer 30

a. What is the difference between the grid and axial systems?

Grid systems differ from the axial system in that the visual relationships are not tied to a single axis and usually employ more than a single column.