UI Standards: Base Layout Grid

Full Layout Grid: 960px width, 12 columns, 10px gutter

Equal Split Layout: Dashboard Pages

Two-Column Layout: Base Layout Mode

Three-Column Layout: Alternative Layout Mode

One-Column Layout with Left Menu

Two-Column Layout with Left Menu

The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.

You can find out more about the 960grid at the project's page.

The 12-column layout is being used in these mockups in order to ensure proper layout consistency. After carefully evaluating the needs for granularity, the 16-column layout seemed to be too detailed.

Three-Column Layout: Alternative Layout Mode 2

MHM Offboarding Prototype