in Design
10 Very Useful Online Resources For Creating Grid Based Websites
Writen by Bogdan / Comments Off on 10 Very Useful Online Resources For Creating Grid Based Websites
A page without a grid is a usability nightmare. Grid systems bring visual structure and balance to your website, so if you know how to use it, you can greatly increase the overall user experience because you’ll create predictable patterns for users to follow. For those who don’t know, the grid helps you create effective site layouts and assist in communicating site’s main messages clearly to the end user. A grid is nothing more than a series of intersecting horizontal and vertical lines spaced at regular intervals, but its innate propensity for creating order out of chaos makes it one of the most powerful tools at a designer’s disposal. Below you have 10 online resources for creating grid based webdesigns.
960 Grid System
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.
Less Framework 4
Less Framework is a CSS grid system for designing adaptive websites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid.
Tiny Fluid Grid
Tiny Fluid Grid ships with a index.html with demo code, and the grid.css containing the CSS for the grid you created.
The 1KB CSS Grid
Other CSS frameworks try to do everything—grid system, style reset, basic typography, form styles. But complex systems are, well, complex. Looking for a simple, lightweight approach that doesn’t require a PhD? Meet The 1KB CSS Grid.
Columnal
The Columnal CSS grid system is a “remix” of a couple others with some custom code thrown in. The elastic grid system is borrowed from cssgrid.net, while some code inspiration (and the idea for subcolumns) are taken from 960.gs.
Modular Grid Pattern
Modular Grid Pattern — is application for web designers, which helps you quickly and easily to create a modular grid in Adobe Photoshop, Adobe Fireworks, GIMP, Microsoft Expression Design and other.
Golden Grid System
Golden Grid System (GGS) splits the screen into 18 even columns. The leftmost and rightmost columns are used as the outer margins of the grid, which leaves 16 columns for use in design.
3×4 Grid Builder
The 3 × 4 grid poster illustrates a change in design practice. Computation-based design—that is, the use of algorithms to compute options—is becoming more practical and more common. Design tools are becoming more computation-based; designers are working more closely with programmers; and designers are taking up programming.
Gridlover
Gridlover keeps sizing type tidy and logical. Font sizes are calculated by stepping up the font size by the scale factor.
Gridpak
Gridpak is the starting point for your responsive projects, improving your workflow and saving time. Create your responsive grid system once using the simple interface and let Gridpak do the heavy lifting by generating PNGs, CSS and JavaScript.