关于网格设计的大量资源文章

http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/

Articles about Grid-based Design Approach

Columns & Grids
Dave Shea talks about the difficulty of grid systems in web pages and the compromise of columns.
Subtraction: Oh Yeeaahh! – “Grids Are Good”
Download the “Grids are Good” presentation (8 MB PDF) created by Khoi Vinh and Mark Boulton. Layers Cake.
Compose to a Vertical Rhythm
On the Web, vertical rhythm – the spacing and arrangement of text as the reader descends the page – 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.
Design grids for Web pages
No one design grid system is appropriate for all Web pages. Your first step is to establish a basic layout grid. With this graphic “backbone” you can determine how the major blocks of type and illustrations will regularly occur in your pages and set the placement and style guidelines for major screen titles, subtitles, and navigation links or buttons.
Developing the grid that supports your design
Just a few months ago when I created any design, I didn’t practice a grid system. I didn’t know much about it so I thought that I can live without it. Yes it’s true. You can live without a grid system, but should you? Why is the grid important? I will try to answer to all of your questions in this article.
Grid-Based Design
Few basic rules and techniques in grid-based design.
Typographic Grids
Grids, Ratios and Typography. Theories, such as the golden ratio (also known as the golden mean, golden number, golden section, golden proportion, divine proportion and section aurea) arise from natural patterns and they are applied in the visual and creative fields to create “beauty” by way of considered composition. The Golden Section is derived from a naturally occurring number, called Phi (1.618), which has intrigued humanity for thousands of years.
The Grid: The Structure of Design
Using a grid is one of those basic design principles. Most news designers are working with a grid someone else designed. No matter what you think about it, you need to understand how to use it. And, at some point in your career you will likely be called upon to create a grid for a new section, or to do a re-design for a paper.
Cutting and sewing grid-based design: Part 1,working with other people’s comps
“In this article I’m going to discuss the steps I take when measuring and cutting a comp layed over a grid and turning that data into CSS. The point is to demonstrate the steps to site developers who are new to grids.”
The Principles of Design
We can group all of the basic tenets of design into two categories: principles and elements. For this article, the principles of design are the overarching truths of the profession. They represent the basic assumptions of the world that guide the design practice, and affect the arrangement of objects within a composition.
Grid-based design: Designing blog theme templates
The previous grid article dealt with how to come up with a CSS strategy when you’re working with another visual designer’s comps. Now I’d like to discuss doing grid-based theme design for open source content management systems, e.g. Drupal and WordPress….
Feeling your way around grids
Designing grids carefully and thoughtfully, using simple compositional theory, such as the Rule of Thirds or the Golden Section, increases the legibility of your designs. By using a grid a designer shows an understanding of systems within visual communication and a sympathetic knowledge of conventions..
Grid-based Layout
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. The elements on the page are then placed on the cell border lines and overall aligned on horizontal and vertical lines.
Grid Computing… and Design
A look at the layout grid behind the Subtraction’s 7.0 redesign.
Adobe Web Tech Curriculum – Page Layout Grids
Introduction to Layout Grids. On each page layout grid, you’ll want to decide placements for main content, branding or logo, page title, global and local navigation elements, copyright or contact information, etc.
Setting Type on the Web to a Baseline Grid
We web designers get excited about the littlest things. Our friends in the print world must get a kick out of watching us talk about finally being able to achieve layouts on the web that they’ve taken for granted for years. Let’s face it: it’s easier these days to embed a video on the web than it is to set type consistently or align elements to a universal grid….A List Apart Article by Wilson Miner
The Funniest Grid You Ever Saw
An in-depth look at the complicated layout grid behind The Onion.
Using a Background Image Grid to Lay Out Your Web Site
“Simply put, you apply the grid to the body of your page as a background image so that it displays behind your site. Thus you can use it to precisely line up your layout.” Article by Christian Watson.
Why use a grid?
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 – web, print & real 3d environments.
Wikipedia: Grid (page layout)
A typographic grid is a two-dimensional structure made up of a series of intersecting vertical and horizontal axis used to structure content. The grid serves as an armature on which a designer can organize text and images in a rationalist, easy to absorb manner….
Thinking Outside the Grid
“There is a new kid on the block, and her name is ‘I’ve never designed with a table in my career.’” An article by Molly E. Holzschlag
Grids: Show ‘em if you got ‘em
Grids are a topic that’s rarely discussed or disected in the online community, yet is one of the fundamental components of good design. Why is it that many designers have a hard time with the grid?
Grid systems in Web Design
An overview of grid-based techniques. Every design you make should have a clear grid system whether its print or for the web because they help to organise information into a clear easy to follow layout. Here we roundup the best articles and resources on the subject.

Tutorials

Five simple steps to designing grid systems – Preface
In the context of graphic design, a grid is an instrument for ordering graphical elements of text and images. The grid is a child of Constructivist art and came into being through the same thought processes that gave rise to that art movement.
Five simple steps to designing grid systems – Part 1
The first part of this Five Simple Steps series is taking some of the points discussed in the preface and putting it to practice.
Five simple steps to designing grid systems – Part 2
In part one of this Simple Steps series I talked about how to use a simple ratio, that of the paper size you are using, to create a symmetrical grid on which to create your designs. This, the second part in the series, will deal with other ratios and how they can be combined to create more complex grid systems.
Five simple steps to designing grid systems – Part 3
The third installment to this series is going to be a little different. The previous installments have been talking through some of the basics of grid construction using ratios as the primary device.
Five simple steps to designing grid systems – Part 4
For the purposes of this article, I’m going to be focussing on the theory of creating the grid rather than the implementation. I did mention in the last series that I would cover implementation using CSS, well I’m not going to.
Five simple steps to designing grid systems – Part 5
Flexible vs Fixed. Which one to choose? Why choose one over the other? Well you won’t find the answers to those questions here. What I’m aiming to do with this article is to investigate how the theory of grid design can be applied to a flexible web page.
Grids make eyes happy: how to use Grids
An example on how to create effective grid systems.
Grids: Order Out of Chaos
Invisible Structures: When and Why to Use Grids in Page Layout. 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.
Designing Grid Systems for Flash
I’ve decided that I’m going to write a little something up for those people interested in grids. I’m going to walk you through the process of creating a grid for a Flash based site that will work for screen resolutions of 1024×768 and up.
How to Create Page Layouts in GoLive CS2
GoLive CSS-based or table-based layout grids enable you to create designs by freely positioning objects anywhere on the page. You can convert a CSS-based layout grid to a table-based layout grid. You can also convert a table-based layout grid to an HTML table.