While recently visiting Boston & New York i picked up this book “Ordering Disorder: Grid Principles for Web Design” written by Khoi Vinh. I took some notes and have highlighted some of the points that i found interesting. I had to break this post up in 2 parts only because 80% of the book talks about Execution which is Chapter 4. I figured it would be better to explain Chapter 4: Execution in my own words. So read on till i update part II shortly.

Before i begin with my notes, what i like about the book is that it focuses on science and mathematics a bit and “Khoi Vinh” manages to dig a little deeper into time and math and smoothly transitions into Interfaces and how math could somewhat be applied to Interface Design through grids.

Who this book is for: Designers/Developers of all kinds, its a must read just to get your mind focused towards a structured approach to design.

One thing i certainly got re-assured by was that things look appealing to the human eye if they are symmetrical or in order or in a formation. I guess naturally we just love structure or some method to madness.

So here are my notes:

Chapter 1: Introduction

• Draw two dots on a single page to understand at anytime if more than one element is present, there is a suggestion of human agenda at work. A pattern of order being imposed. A Design is nothing if not Order applied to Disorder.
• Implicit structure in everything. 
• The historical evolution of grid thinking is something no designer should deny him/herself of. This obviously is true because you need to know where grid thinking was born from in order to understand its true purpose.

Chapter 2: Concept

• “It follows, then, that Web Designers-those who have a predisposition to order-would want to excert an explicit influence on and management, of elements they are putting on a computer screen. To accept that reality and harness its power. The grid seems like a natural fit.”

Benefits of Grids in the digital world:

1. Grids add order, continuity, and harmony to the presentation of information on frequently high-density web pages.
2. Grids help users predict where to find information from a page to page or from behavioral state to behavioral state, which aids in the communication of that information.
3. Grids make it easier to add new content to a website in a manner consistent with overall vision of the original website.
4. Grids facilitate collaboration on the design of a single website without compromising the overall vision of that website.

Invisible Order:

• When we often criticize a design we are thinking in our minds about finding disorder and then to put it in place we think about our practices.
• When a user browses through a website and has a sense of things being in order – this is invisible order. A certain design hierarchy and things being in place, this build confidence in the user and trust in the ordering system he or she is interacting with.
• “Grids, of course, are a type of visual ordering system. Like ordering systems of any kind, they work on these two levels: first perception, then experience. That is, a user feels the grid, then he uses it.”

Mathematical formulae: 

• The rule of thirds: It contends that compositional strength can be found by dividing any image intro three columns of equal width and three rows of equal height. The intersection of the dividing lines forms four focal points to which the human eye is naturally attracted. The rule of thirds holds that by aligning elements with the dividing line or placing elements at these focal points, a maximum of interest, energy, or tension can be communicated.

A shift in Communication:

• We must also keep in mind that the grid is not a tool to impose order on users or to usurp their control; it is a tool to impart order to our users, so that they can create their own experiences.

Chapter 3: Process

• The major steps in designing the Grid System:

1. Research & Requirements
2. Wireframes
3. Preparatory Design

a. Pencil Sketches
b. Units, Columns,  baseline development and calculations
c. Page Sketches

4. Comps
5. Production (code)

Research and Constraint:

• We first truly judge good design by its beauty or by its innovativeness or its effeciency, but rather by how well it responds to its original problem.
• Identify your constraints, which are:  Technical / Business / Content & Editorial.
• **The more wide open a design problem and the less restrictive the constraints, the less a designer is likely to make those insightful leaps of logic that are the hallmark of great design.**

Terminology:

• Units make columns make regions make fields.
• baseline grid aligns the font and lets the bottom of the alphabet “p” hang below the baseline grid and for all similar alphabets.
• Gutters are empty spaces between units and columns
• Margins and padding – margins are used to create gutters / padding to inset space towards the content.

Chapter 4: Execution

• Identify all the constraints first. The example in the book uses 3 constraints.

1. The screen resolution
2. An Ad-unit
3. The Brand

•  Constraints form the grid and the structure of the page.
• 16 units of 60 pixels wide add unto 960 pixels makes for a mathematically useful framework in a layout.
• Accommodate for 10 pixel gutter which still falls in the mathematical framework.
• The baseline grid is automatically formed by the line-height. “The science of determining the correct line-spacing is really a shadow of practice of “leading” from traditional typography.
• The baseline grid is too minute of a detail – and is not important in web-design – a visual decision from a designer also works.
• Golden Ratio of 1.618 then apply the rule of thirds to have 10 baseline grids.