Useful tools for the designer: grids, guides, templates and styles.

In this page we’ll discuss some tools and systems of work that are essential by different reasons: grids, guides, templates and styles.

Grids

Almost all programs incorporate an option to use grids (normally a spaced grid with configurable spacing.) This grid —usually non-printing— is a coordinate reference to place the different elements from the text, image, tables... if you activate the option of snapping to the grid when you move the objects closer to the lines of the grid and these will move as if they were attracted by it, until aligning precisely with the next row and the column.

Some programs allow special grids: for example, Xara has the option to choose an isometric grid (to see the figure.) If we draw after this grid we can easily construct objects with three-dimensional aspect.

Many vectorial illustration programs incorporate a type or another of guides or grids to facilitate drawing in perspective: Freehand has a special tool, while in Illustrator a specialized plugin exists; CorelDraw allows to transform the objects in perspective since its first versions.

Guides.

We can also use vertical and horizontal rules like reference, to know the position of an element (or the text cursor or mouse pointer.) Guidelines can be defined relative to the page rulers, and they can be used to place the elements accurately. They are especially useful fo place elements consistently on the layout, for example, the heading of a publication, its footer and other repeating elements. The usual way to place the guidelines is to click on the ruler and drag until the wished position. Also the position of the origin of coordinates (0,0) can be changed with the same procedure.

The grids and the guides are very useful tools when you want to work accurately and you want a base structure to organize the layout of the design. If we make an outline in paper, on grid paper, we can match both grids so that the rough draft and the definitive product correspond to each other.

We must take special care of with the units that the program uses. Sometimes, it will be necessary tochange them, normally in the settings or the options of the program (somewhere on the menu like Preferences... Options... Configuration... or similar.) If we must work in a design for the screen, it is better to change the units ti pixels, and choose a page size equal to the chosen resolution of the screen (be it 640 x 480, 800 x 600 or 1024 x 768...) However, if the project is destined to the paper printing, it will be better to define the grid in inches, millimeters or centimeters (be careful: many programs use by default inches—one inch equals approximately 2.54 cm.)

The guides are also very useful, not only to automate the positioning of the elements in a layout, but also for the precise editing of the elements; this has special importance in the graphical development of designs for the Web or for the screen. More information in the “graphics for the web” article.

Templates

Templates save work to repeat the common elements in different parts of a project. For example, the elements of the top and bottom parts of the page are usually constant: they share heading,page number, and the same distribution; the area dedicated to articles may have a distribution that remains unchanging within each section. In this case it is worth the trouble to create a template for each section of the publication which shares a same basic structure and elements:

A template allows us to save time, since you can avoid defining the design of the page or placing the fixed elements every time. It is enough with filling the parts that change. On the other hand, it facilitates a consistency in the look of the publication, helping the reader to know where he is and to feel a greater familiarity with the design.

If the program that you use does not have a specific option for templates, you can still do it very easily. First prepare the base document and save it with the name that you wish, making reference to it being a template. For example, template_section.ext (where ext is the corresponding extension.) Next, open the file in the application and introduce the necessary modifications for, say, an article. In order to save this article, the document with the changes you just introduced, will be saved with a new name, avoiding to overwrite the template, which must remain unchanged: (Use File|save as....) Tip: make the template document save-disabled to prevent it from being overwritten.

Variations on the theme of templates

A variation of this template system is the one in programs which allow to open an image as a template to place elements above, or to trace it, without altering it; the image will not get in the way for anything we do in the program. For example, Dreamweaver allows to open an image, it places it to the bottom with an dimmed colour, and thus we can arrange the elements of the page Web with a pixel precision. The image will not be a part of the HTML page; it is only a resource for its design. Many designers use this possibility, because they prepare an outline of the page they want, to the real size of the screen (with Photoshop, Illustrator or another program), save the image as gif, png or jpg, and use it as a reference.

On the other hand, the special use of templates in Adobe Illustrator is to use an image like it was covered with tracing paper to draw over it. Again, they are not printed nor they are altered in any way by the program, but they allow to draw above as if we traced.

Styles

The styles are another way to save time and to assure we get consistency in what we do with a program. The idea is, simply, to separate contents and the format (presentation). For example, we decide the attributes for the text, headings, photo captions... and whenever we markd a text as an instance of one of these elements of style in the document, the program will automatically apply all the format that previously we have decided. If we change our mind and re-define some of the style definitions, all the instances in the document are changed again accordingly, with no mistakes.

Since the styles can be reused in different documents, the time-saving can be enormous. Applying a single change to the definition of the style in a few seconds can update all the texts of as many documents as needed —a task that could take days, even weeks to do in a big project. In addition, we will never have mistakes when choosing text sizes, leading, fonts, because all the style is unified in a centralised definition.

Making automatic changes with styles.

One of the incentives to use styles, then, is the modification of all the look and feel of a great document (or a project with many documents) simply by modifying the attributes of the style definition. For example, if we change the colour of the titles and subtitles in the style definition, whenever we have one of these elements, even if there are dozens or hundreds, scattered in many pages, everything will be updated instantly. This is a very good reason to use this resource in most programs. For projects of a certain size it is essential.

Naturally, we can make the definition of styles customized to our own needs. We can create new styles, with a descriptive name, like for example “.pagetitle”, “.sectiontitle”. or “.cursivecaption”. A style sheet is the set of formats defined for a document (or a group of them.) Typically, a style sheet contains definitions of elements such as text title, subtitle, body, photo captions, quotes...

For web pages, a powerful system of style sheets has been introduced: cascading style sheets(CSS). It is a technology that is used more and more, as most of internet users have updated versions of the browsers, which support CSS.

Other kinds of styles.

Although in most cases when speaking of styles and style sheets we talk about the text, some programs as CorelDraw, Illustrator or Freehand also apply the idea of style to the graphics. In this case the attributes are the color of the objects, the color, line width and colour, fill...

Some programs even go a little further on and use the templates like styles. Does it sound complicated? In fact it is something very simple, and it is a very powerful tool to automatically change the look of all the pages that share a template, modifying only the master page. For example, this is what NetObjects Fusion does (a wysiwyg program used for the design of the original versions of this Website.), when you create a whole Website with all the pages and sections that you want. More details in the article about web edition programs .