One of the most common use-cases we’ve seen for block grid layout is single post pages, primarily for article or single blog posts, as shown in the image above. Another instance where you may encounter block grids is large, full-width images, such as cover images or hero images.
Using the terminology we defined earlier (“Anatomy of a Grid”), block grids are essentially a large rectangular area taking up most of the space inside a format.īlock grids are often used for extensive or continuous blocks of text, and can often be found in blog pages or posts. Block grids consist of a single column and can either include one single element or multiple elements arranged vertically, surrounded by margins. This includes web design, interaction design, and especially responsive design.īefore we discover how and why the grid-based layout is such a valuable asset to our design process as web creators, let’s delve even deeper into the tangible components that make up a grid system.īlock grids can also be referred to as single-column grids or manuscript grids, and are considered to be the simplest grid structure. That being said, there are many areas of modern-day design that depend and thrive on a grid-based layout. The concept of grid layouts originates in print design when they were used in the context of typography with the goal of arranging handwriting on paper, especially books and newspapers. Grids also define a consistent set of fixed units of measurement that dictate the sizing, spacing, and alignment that each design element must abide by. Grid systems serve as a systematic approach that allows designers to lay out elements in an organized manner, and provide a modular approach to designing components for multiple pages or layouts. Grids help split pages horizontally and vertically, using rows and columns. As user flows often contain multiple screens or windows that repeat similar design schemes and layouts, grids ease the process of developing wireframes, templates, or standardized layouts for similar pages. When designing for web and mobile, the purpose of the pages or interfaces we design is to create various user flows. Once we have this structured framework in place, we can place text, images, and really any design element in a consistent, orderly way within the interface. In terms of how it’s used in the web design process, the grid system helps align page elements based on sequential columns and rows.
0 kommentar(er)
