Presenter
Khoi Vinh, Subtraction.com
History
A dot on a piece of paper is randomly placed, when you add a 2nd dot, you suggest something hidden. There becomes some sort of order, maybe everything is placed there for a specific reason
Any two marks on a single plane is enough to create a grid, a design, an order.
Man has always tried to find order in nature. Is there a hidden sense of order in the world around you?
The international paper standards are designed off the idea of fractals. You divide in half then half, then half again to get paper standards.
The first grid that mattered to people was the brick. You build a wall. When you put together a lot of walls (city) you start to create a grid for society.
The Power of Grid for Design
Grids add order continuity and humanity to information. They allow an audience to understand information and predict where to find new information. Grids make it easy to ad new content consistent with existing content. They facilitate collaboration between people.
History
There is a parallel between engineers and designers in standardizing the way things fit together and function in the world. Try to derive beauty from the machine. Past: printing press, current: web browser.
Designers acting like tyrants
It’s about imposing that order we see in everything on the things around us. You have to push to get that order.
Using Grids on the web
Problem solving before aesthetics. You serve the user experience. The simpler the more effective. When working with grids, you start to stop thinking about the noise and just prioritize the grid.
Steps
- Research – prioritize and catalog before you jump in.
-technical constraints
-business constraints
-content/editorial constraints - Wireframing
- Preparatory design – do the math, sketch, calculations, page sketches
-Not every sketch ends with a grate design, but every great design starts with a sketch
-Sketch the way that makes sense for you (pencil/pen/illustrator/HTML
-Sketch throughout the project (go back and fourth) - Visual design
- Code
(in whatever order works for you)
16 unit grid = 8 columns = 3 regions (2 columns and 3 columns) = 2 fields (horizontal regions)
Units are a base atomic level of the page, columns are containers for text.
Mathmatica Formulae
The golden ratio and fibonacci sequences works, but doesn’t need to be exact. Divide by 1.618.
The rule of thirds is an important rule. Bundle things into a group of three. 3x3x3, where the grid lines intersect is where the eye will go.
The power of constraints
The Ad Unit
It can be very helpful to have an ad unit around which to build your grid. This is something that doesn’t change or move. It helps to make a lot of decisions.
The View Window
How will it be viewed. Browser window 1024×768 (real: 960×950).
Sketches
Really quick and rough, they don’t necessarily need to hook to the grid.
Grid it up!
Start hacking away at the page and begin moving things around. The anchor (ad) can only fit into certain spots and will give you a starting point.
Sample typesetting
Determine the optimal line measure in the main body that you plan to work with. The human eye can comfortably 60-80 characters on a line. Once you have you sweet spot for text, try putting it into multiple columns as well to see how that works. Font size will also help to determine the line spacing. The heavier the text, or wider the character, the more line spacing you’ll need. The grid is a guide. Overly strict adherence is not necessary.
Establishing Fields (vertical grid)
You have to deal with unknown heights. Golden radio: 960 (height) divided by 1.618 = 593.
Designing the page template
Place the logo, maybe a login on right (by ad)
When placing navigation, put the edge right up to the grid. Sometimes with different states (mouse-over) you can nudge the nav elements over consistently
Fluid Grids
Use the full width of the browser to display content. You still want to use the grid to guide size of elements and consistent placement of elements. It’s new, so best practices are still being developed.
Users crave landmarks. Users want elements that appear the top findable at the top. They want a shared user experience. Designers should not be erratic.
Devices should behave consistently. Behaviors should be consistent with each device. Behavior variations should be virtually unnoticeable.
More than layout changes. – content needs to change to – there needs to be more of it or less of it, accordingly.
Is it worth the expense? The answer might not always be yes. It might make sense to just use a fixed solution for one device or another device. Satisfy what the user expects out of the design experience.
Conclusion
Grids are a balancing act. Design aesthetics can be changed going forward.
The grid is an opportunity to benefit from the past, not to recreate it.
For grid principles to effect a truley positive charge… the esigner must adapt them to new solutions.
Presenters