The grid is the visual basis for organizing the information on a web page. A rigid or fluid base? Two, three or four columns? Horizontal or vertical? The answers to these questions are given by the content that we have to…
The grid is the visual basis for organizing the information on a web page. A rigid or fluid base? Two, three or four columns? Horizontal or vertical? The answers to these questions are given by the content that we have to handle.
what is a reticle
Any document that has to be layout will have to be composed based on a grid.
The grid is a series of guides that will give us the sizes of the columns for the text, graphics and images that we have to compose.
inside out
In this article we are going to explore the layout of the reticle from the inside out. First we are going to compose a grid for the contents and then we will see how to compose the grid for the rest of the navigation elements (buttons, etc…).
the blank sheet
The first approximation that we must make to be able to propose a grid is to know the content, hierarchies and objectives of the document.
We must know clearly what the document must communicate, its theme (if it is an opinion, if it is a recipe, if it is a technical report…).
If our website can host different types of documents, we must design as many grids as types of documents. There is no other way. It is not possible to think of a design “for everything” since we will lose readability and comprehension on the part of the users.
If the user is exposed to different types of content under the same scheme, it can be lost. It is key that a visual difference makes an editorial difference.
You already know the content… put it on paper.
There are two ways to approach the layout of the reticle.
The mathematician.
It is assumed that one can directly take the width of the document, calculate the golden ratio and output a grid.
In this case, the blue lines mark the golden ratio of the document and from there we can draw a grid.
I don’t usually like this method because it assumes many aspects of paragraph width, etc… that need to be taken care of.
the organic
The most natural approach is the organic one where the content will give us the proportions that we can then systematize in the form of a grid. So the first step to establishing the grid is to put our content on paper… or in this case, on the browser.
We must be able to create a text width where we see our content flow naturally.
Reading on the screen is harder than on paper and therefore we must take care of the line width. In general, something greater than 350 pixels with fonts of size 10 / 11 / 12 is usually correct.
Even so, we must take great care of these aspects of size and line width since a document that can be read comfortably on the screen saves users a lot of time.
Especially in areas such as intranets, universities or documentation centers, if it is possible to make the documents legible on the screen, the savings in printing, etc… can be huge.
This base column width is the starting point for the grid.
Now we have to see how we will put the photos, text calls, annotations, etc…
Systematizing the grid
Within our general width, we must be able to divide the grid into a sufficient number of columns and rows to accommodate all kinds of elements, but without too many that it seems arbitrary or too complex to manage.
Here we must also work organically at first by creating the layout in a free form. Photoshop is usually the most comfortable tool.
We must compose the photographs, possible graphics in a natural way and then see how to systematize the elements.
That is, we must separate the design and production processes.
And it’s good that they are different people. The designer must free himself from possible technical obstacles that prevent him from freely expressing the concept to be captured.
If the technical aspects are the ones that prevail, in the end all the websites end up looking the same.
The grid is the only way to a scalable design
Layout based on the grid is the only way that guarantees that your project, at the design level, is scalable.
On the other hand, despite opting for an organic design as a method of approximation to the design, the best thing at an operational level is that this design is translated into the roundest terms possible.
In other words, when the project is finished we have a language of the style:
- Paragraph Width: 350px
- Column 1 Width: 150px
- Column 2 Width: 150px
- …
In this way, at the operational level, any extension, revision, edition can be carried out from a solid base.
Facebook Comments
Disqus