This article is for web designers and front-end web developers who are interested in grid-based layout systems but are at a loss on how to decipher them.
A PDF written by Andrew Maher to help you design grids and to give you the resources to delve further into the grid world.
Mark Boulton pulls together some of his thoughts and concerns regarding CSS grids and how they could (or, maybe, should) be created.
A step-by-step description on how to create a Villard diagram.
A holistic approach for the typical workflow.
Mark Boulton pulled together some of his thoughts and concerns regarding CSS grids and how they could be created.
An article that that takes a look at the relationship between the grid and the use of guides.
An article outlining the re-design of ICMA’s quarterly publication and its grid.
Grids, along with visual hierarchy, typography, color theory, rhythm, etc., are the basic foundations of design and yet they are widely ignored by the industry.
In this article we have 30 WordPress themes have been developed using a popular CSS Grid Frameworks such as the 960.gs, Blueprint, YUI2 and The Golden Grid.
Step by step walkthrough of the design and build process of a grid based WordPress theme. From the initial Photoshop concept, through development.
When I first crossed the great divide from print to web, one of the earliest things I tried to do was introduce a flexible multi-column grid (you know, like a magazine).
People, including myself are building sites using grids. Now it seems to me that when you’re designing in a browser you want to be able to follow the grid’s principals all the way through the process.
Because of its beautiful nature, mathematics has been a part of art and architectural design for ages. But it has not been exploited much for website design.
The Egyptians supposedly used it to guide the construction the Pyramids. The architecture of ancient Athens is thought to have been based on it.
The golden section– a precise way of dividing a line, music or anything else-is showed up early in mathematics.
You would be surprised to find out that most aesthetically pleasing designs, works of art, objects and even people have math in common. Specifically the Golden Ratio…
A few myths and misconceptions about grids exist in the design community that can be detrimental.
Use the power of grid based designs to create a structured and professional page layout in InDesign.
A grid is a technique that comes from print design but easily be applied to web design as well. In its strictest form a grid is literally a grid of X by Y pixels.
A Wikipedia entry that defines the Rule of Thirds and how it should be applied.
Have you ever sliced a layout, only for it not to be grid-aligned once it’s scripted?
Grid structures are implicit in the word typography. To mention both typographic, and, in the same breath/sentence, grids, is strictly tautologous.
I wanted to try and give some insight on how I created Version Four using a grid, and how I went from wireframes to the finished website you see here.
Smashing Magazine takes a look at over 50 articles about grid-based designs and selected some of the most important and interesting facts.
An article by Garr Reynolds that explains the basic technique of the Rule of Thirds and how it relates to the Golden Mean or Golden Section.
An on-line companion to the book Thinking with Type by Ellen Lupton that contains a section on single-column, multi-column and modular grids.
An article by Italian designer Andrea Peltrin on how to effectively use grids for web design.
The second part to Sigurdur Armannsson excellent article on creating grid systems in Adobe Illustrator. This article is based around the grid system developed by Marcus Gärde.
While grid design is a simple concept, there are now so many tools and ways of doing it that it might get confusing for newcomers.
A detailed article by Sigurdur Armannsson on how to create a grid system in Adobe Illustrator.
There is practically no (or very little) documentation about this problem on the web or in many typography or grid design books.
When this occurs, your page is said to have vertical rhythm — the text is easier to read than text that doesn’t line up, as it feels more cohesive and less disjointed.
Quiet structure is achieved when you de – emphasize the structural elements and bring a rhythmical consistency to the layout.
Article on Mezzoblue exploring the different column options for grid based designs.
Discusses the steps taken when measuring and cutting a comp layed over a grid and turning that data into CSS.
Another excellent article on the Dev Opera site covering baseline grids and how they can be applied to the web.
An article on the Dev Opera site on how to implement grids for the web through the use of CSS.
An experiment in creating a fluid grid system using CSS that resizes with the browser window.
A quest for a simple, design-centric Keynote template that’s more about composition than gradients and 3D bullet points.
Khoi Vinh is the Design Director for NYTimes.com, where he leads the in-house design team in user experience innovation.
An article explaining the structure and uses of the Golden Grid, a CSS tool for grid based web sites.
A PDF by Khoi Vinh and Mark Boulton that was presented at the South by Southwest festival. The PDF covers the history of grids and the walks through the process of building a grid system.
The canons of page construction are a set of principles in the field of book design used to describe the ways that page proportions, margins and type areas of books are constructed.
A key component in the vehicle of communication is composition, and in design schooling it is taught as something you should feel rather than create logically.
Harmony. A word that sounds so beautiful, like its own meaning. But how is it possible to achieve it in every place of our layout design? “Golden Ratio” is the answer.
Step by step guide on creating the grid used for the covers of the original Pelican Books.
Creating a complex grid system that allows for a layout to be divided into 2, 3, 4, and 6 columns and that’s based on Karl Gerstner’s grid for CAPITAL magazine.
The Golden Section, Golden Ratio, and the grandiose Divine Proportion are all names for the same thing; a ratio of 1.618.
Effective ways of getting creative with your columns in grid-based Web design.
Khoi Vinh writes about establishing a rational and sustainable layout grid for his Subtraction site. He explains how he shoehorns previous articles into the new framework.
It’s one thing to write about how useful and important grids are for a design, it’s another thing to utilize them in a real world project.
Five steps that cover the elements which make a successful grid system and how they can be applied to a number of media outputs.
An article demonstrating how the grid that was built for The Onion functions in practice.
A flexible CSS system by Jason Santa Maria for dealing with a variety of images sizes by using multiple CSS classes.
What do houses and well designed pages have in common? They are both built on a framework — a carefully measured, solid structure that forms a foundation on which to build.
The main principle of the baseline grid is that the bottom of every line of text (the baseline) falls on a vertical grid set in even increments all the way down the page.
This article walks you through the process of creating a grid based on the golden ration for a Flash based site that will work for screen resolutions of 1024x768 and up.
Grid design is a fundamental skill of any designer. Understanding proportional relationships, white space and composition are all vital in constructing a grid for any delivery platform.
On the Web, vertical rhythm is contributed to by three factors: font size, line height and margin or padding. All of these factors must calculated with care in order that the rhythm is maintained.
In editorial design, there is a technique used for sidenotes and boxouts that aligns to the baseline grid, or vertical rhythm. It’s called incremental leading.
This article explains what is the Divine proportion (Golden Ratio) and what is the Rule of Thirds and describes how you can apply both of them effectively to your designs.
Using a grid is one of those basic design principles. A grid is made up of vertical and horizontal lines and is the foundation of nearly every type of visual media.
Many of the pages that you see everyday have a grid. You may not see it but it is there, holding up the design, establishing structure, guiding the page elements.
In this article, I will go through some simple steps to acheive good clean well structured typography in Adobe Indesign.
The chief characteristics ]are designs that include minimal graphics and a focus on typography, sans-serif typefaces and grid based layouts.