Layout Glossary

Here you can find important tech terms and definitions, explained in a simple and clear way.

Z-Pattern Layout

The Z-Pattern Layout is a model for organizing content on a simple, typically single-page or low-content website. It is an effective framework for ensuring key elements align with the user's natural Visual Hierarchy and User Flow.

Layout
Design
UI-UX

Y-Axis Alignment

Y-Axis Alignment is a fundamental layout principle controlled by CSS (Cascading Style Sheets). It dictates the precise vertical positioning of elements within a container.

Design
CSS
Layout

Padding

Padding is one of the two main properties (the other being Margin & Padding) used to control the visual spacing on a web page. Unlike margin (external space), padding is internal space that affects the size of the element's background or clickable area.

CSS
Design
Layout

Margin & Padding

These two CSS properties are essential for achieving control over the Layout Grid and Visual Hierarchy: padding and margins.

CSS
Design
Layout

Grid System

A Grid System provides designers and developers with a set of invisible columns and rows that all page elements adhere to. Common grids include 12-column systems, which offer maximum flexibility for different layouts.

Layout
Design
UI-UX

Footer

The Footer is the bottom section of a webpage that typically contains secondary navigation, contact information, legal links, and other supplementary content.

Layout
Navigation

F-Pattern Layout

F-Pattern Layout is a design approach based on eye-tracking studies showing that users typically scan content-heavy pages in an F-shaped pattern: horizontally across the top, down the left side, then across again.

Layout