![]() ![]() ![]() When I increase the quantity of columns and rows in a modular grid they become smaller and quickens the speed of reading. Right: Those same elements arranged on a 6x4 modular grid. Left: Elements arranged on a 5x3 modular grid. Adding columns and rows makes a design feel increasingly formal and might be better suited to arranging more content. Three and four columns have a less formal feel and are better suited to longer passages of running text. An empty space can be just as important as one filled with content.Ĭhoosing different quantities of columns and rows for a modular grid can have a huge impact on the feeling created by a design. Not every module in a modular grid needs to be filled. Or, for an altogether different feel, I may arrange an equal amount of horizontal and vertical spacial zones, and single modules, leaving two opposite modules empty to draw the eye across a page. Even size spaces for images and text and a repeating pattern of modules creates a sense of order. The even sizes and deliberate placement of elements in this arrangement create a sense of order. Although these modules are symmetrical across a diagonal axis, if you folded this layout along the red line, the two halves wouldn’t align.įor a more structured feel, I might repeat a pattern of single modules across the width of my layout. I may opt for square spacial zones and mirror them along a diagonal axis. Three sizes of images and text adds rhythm to this arrangement of elements on my modular grid.Īngles can help you make a layout look less structured and feel more organic. I might place images and text vertically to emphasise my columns and use each column for a discrete piece of content. This arrangement-based on a three-column modular grid-would suit a set of portfolio items or product images.Ī carefully considered modular grid can add rhythm to a layout. Not every module in a modular grid needs to be filled with content and here, empty modules add breathing space inside this energetic arrangement. In this next arrangement, two larger spacial zones-one landscape, the other portrait-offer space for larger images and have been placed alongside a series of smaller images and text blocks of the same size. Right: A bold statement made with a 2x3 spacial zone containing a large image.Ī modular grid offers a huge variety of potential layout options. Left: Four-column modular grid with landscape orientation rectangles. In this arrangement, the large image in a 2x3 spacial zone adds immediate impact and is complemented by a solid column of running text which fills the height of this layout. This simple modular grid is ideal for making a bold statement, perhaps on a home or landing page, or a product page on an e-commerce website. Each module is a landscape orientation rectangle, but could also be portrait orientation or a square. ![]() They’re also fabulous for making diverse designs with plenty of drama and energy and can be especially useful for laying out portfolio or product pages.įor these examples, I start with a modular grid comprised of three columns and rows. Modular grids are excellent for bringing order to large amounts of varied content and you can also use them to create visually appealing layouts when there’s very little content. Tip: I wrote about compound grids in more detail in my book “Art Direction for the Web.” Buy the e-book for £12.99.Īt first glance, modular grids might seem complicated. Whatever you choose to call them, they’re adjacent modules bound together to form larger areas. In CSS Grid, spacial zones are called grid-template-areas. A spacial zone comprised of six grid modules. Clockwise from top-left: Modular grids with four, five, and six columns, with three or four rows. We don’t hear as much about modular grids for web design as we do column-based grids. Modules can be any size: based on your content, the aspect ratios of images, and even advertising sizes. Grid modules are individual units-most commonly rectangles or squares-which repeat horizontally and vertically. There are several components to a grid: columns, fields, flowlines, gutters, margins, modules, and spacial zones. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |