Grid System: The Invisible Glue To Hold Together Your Web Design

GRID SYSTEM THE INVISIBLE GLUE TO HOLD TOGETHER YOUR WEB DESIGN What is Grid? Grid is a structure (usually two-dimensional) made up of a series of intersecting straight (vertical, horizontal, and angular) or curved guide lines used to structure content. The grid serves as an armature or framework on which a designer can organize graphic elements (images, glyphs, paragraphs, etc.) in a rational, easy-to-absorb manner. (Source: Wikipedia) In Web design, grid systems are invisible structures that organize, collect and present all the elements in a web page together. GRIDS The grids institute a set of guidelines for how different elements should be 1 CREATE A RHYTHM positioned within a web structure to form a rhythmic layout. The grid system help visitors realize where to find the next piece of information with the layout, making the layout accessible and navigable. GRIDS ESTABLISH 2 A METER GRIDS REFLECT PROPORTION The grids define and emphasize proportion (size and scale) in fluid web design. Grids make sure each element is placed right in its place. 3 GRIDS PROVIDE A FOUNDATION Think of grid as a roadmap. It sets the foundation of a web layout, defines rules for placement, synchronizes 4 elements and builds usable Uls. The grids work with other design elements, such as colors, typography, iconography, wireframes and more to bring together a balanced design. GRIDS BRING EVERYTHING 5 TOGETHER The Composition of Grid FORMAT MARGIN The format is the area in Margins are the negative space between the edge of the format and the outer edge of the content. which the design is placed. On the web, the format is the size of the browser window. MODULES ALLEY Modules are individual units The narrow stripes which separate each of the units is called alley. The alleys are a form of micro whitespace which give the grid some breathing room. of space created from the intersection of columns and rows (i.e. the horizontal equivalents of columns). COLUMN Columns are the basic building blocks of every grid. Multiple columns form the overall grid. Types of Grids Different columns, modules and margins can be merged in more than one ways to create distinct forms of grids. Here are four standard grid layouts: 1- MANUSCRIPT GRID A manuscript grid, also known as a single-column grid, is the simplest grid structure. It's basically a large rectangular area that takes up most of the space inside a format. 2 - MULTICOLUMN GRID A multicolumn grid, as the name implies, contains more than one columns. The more columns you add in your grid, the more flexible it will become. 3 - MODULAR GRID Like a multicolumn grid splits a web layout vertically into columns, a modular grid subdivides a layout both vertically and horizontally, creating modules. Grab your reader's attention witha great quote from the document or use this space to emphasize a key point. To place this text box anywhere on the page, just drag it. Grab your reader's attention with a great quote from the document or use this space to emphasize a key point. To place this text box anywhere on the page, just drag it. Like a multicolumn grid splits a web layout vertically into columns, a modular grid subdivides a layout both vertically and horizontally, creating modules. 4 - BASELINE GRID HEADING Grab your reader's attention witha great quote from the document or use this space to emphasize a key point. To place this text box anywhere on the page, just drag it. A manuscript grid, also known as a single-column grid, is the simplest grid structure. It's basically a large rectangular area that takes up most of the space inside a format. Things To Keep In Mind When Designing A Web Layout a b PICK THE RIGHT GRID STYLE Select a grid that complements the content. Sketch out possible layouts and see which grid style best suits your need. DESIGN WITH CONSTRAINTS Know what is important for your audience and consider your constraints when designing a website layout. READ MORE BE CAREFUL WITH THE SPACE EMPHASIZE STRATEGIC ELEMENTS Direct the views by putting more visual weight to the important elements or call to actions. Use frames or color highlights to emphasize. Both horizontal and vertical spaces are essential to balanced grids. Inconsistent spacing could be off-putting for viewers. ENSURE MOBILE COMPATIBILITY TEST, TEST AND TEST The more you test the more you Optimize grids to be responsive to mobile devices. Make grids adaptable to the know. Test each element of the layout and restate grid to fit the need. interface. ... STEP OUT OF THE GRID Last but not the least, don't be afraid of stepping outside the grid. Don't stop being creative or experimental because of grids, highlight, randomize or twist elements as needed. Resources: webdesign.tutsplus.com, smashingmagazine.com, sitepoint.com, brighthub.com, wikipedia.org. dn DesignMantic