FUNDAMENTALS OF COMPOSITION, LAYOUT DESIGN

Composition

how different elements are arranged in a design to create a complete and visually appealing piece 

Balance

Making sure elements are evenly distributed. 

Harmony 

Ensuring elements work well together. 

Contrast

Using differences in size, color, or shape to create visual interest. 

Proximity

Placing related elements close together. 

Repetition

Repeating certain elements to create unity.

White Space

Leaving empty areas to improve readability and focus. 

Positive space

main subject or object in a design 

Negative space

empty area around it, which helps define the main object 

Golden ratio

golden rectangle (where the longer side is 1.618 times the shorter side) to create balanced layouts 

Rule of thirds

3x3 grid, placing important elements along these lines or at their intersections  

Symmetrical

centered, having equal space to the left and right or above and below them, a mirror image on either side 

Asymmetrical

elements are placed unevenly, feels more dynamic and energetic 

Format 

Full area where the final design will be laid out 

page

format in print design

browser window

format in web design

Margin 

Empty spaces between the edges of the format and the content 

Flowlines 

horizontal lines that separate the different sections of a grid into parallel bands

Modules 

Building blocks of grid (yung squares sa isang grid) 

Spatial or Region 

• Groups of modules that are next to each other 

• Create spatial zones or regions for blocks of text, pictures, or videos 

Columns 

vertical spatial zones or regions that fit fully from the top to the bottom margin. 

Rows 

are horizontal spatial zones that fit fully from the left to right margin. 

Gutters 

• Spaces between rows and columns 

• Should always be equal between columns or rows to maintain a visual balance 

Markers 

• Areas inside the running header or footer that mark the exact place where repeating information is placed page to page  

• Mga nilalagay dito: volume number, page number, etc.  

 

Manuscript Grid

• Is the foundation for all magazine, newspaper, ebook, and all text-based design 

• Is set up on the first page and the rest of the pages will follow the same measurements  

 

Column grid 

• Used to organize elements into columns 

• Can have as little as 2 columns or as many as six or more (but not that common) 

Symmetrical column grid

all columns are the same width 

Asymmetric column grid

some columns are proportionally thinner or wider than others  

Modular grid 

• Similar to a column grid that it also has columns, but it its difference is that it has ROWS 

• Have equal size modules, which make it easier to “break the rules” and use spatial zones in various ways  

• Ex. Phone homepage (apps) layout, Instagram’s feed  

Baseline grid 

• Gives a flowing rhythm to text 

• Gives the headings and subheadings a proportional space in relation to the body text, making them more pleasant to read 

Hierarchal grid 

• Mosty used in web design 

• Its purpose is to organize elements in order of importance 

• Can be set up freestyle, or with a modular grid as a guide 

• In their move to digital platforms, newspapers moved from the usual. symmetric column grids to hierarchy grids with columns inside the spatial zones