Best Practice Design Tools for Content Management Templating

So much of the future website's success depends on how smoothly this transition takes place -- how efficiently these ideas are transferred from a vision to a reality. The key to this efficiency lies in format of the design files themselves: the language, if you will, in which they are written. Photoshop is for many designers the most trusted weapon in their arsenal of design tools. So it follows that in the scenario outlined above, it is likely that those design files have a ".psd" appended to the end of their names. While Photoshop is an amazingly powerful, intricate and versatile program, it is far outmatched when it comes to web design by another Adobe product, Illustrator.

A quick note - there are many other programs that could be mentioned, but Adobe's Photoshop and Illustrator are the industry standards, not to mention the ones we are most familiar with, so we will use them to illustrate the point.

Photoshop is a raster-based photo editing program, while Illustrator is a vector-based layout design program. Basically, the prior manipulates images with a finite amount of pixel information, while the latter uses mathematical equations to create curves and shapes that can be zoomed in upon and not lose the integrity of their form. For example, when clients change their mind and want elements to be bigger, with Illustrator there is no risk of that element becoming pixilated.

Beyond the basic difference of raster vs. vector, Illustrator's tools are more suited than Photoshop's for layout and the precise alignment of images, shapes, and text. To name a few advantages: the designer can easily set up a grid to standardize the placement of design elements, "smart guides" (ghosted outlines of design elements that appear on mouse-over) can help the designer efficiently locate and align elements, and Illustrator's latest version has a tool that allows the designer to change the entire design's color scheme in just a few mouse clicks. These and other features not only benefit the designer throughout the design process, but they allow for an elevated degree of precision in the final product. This is invaluable to our programmer from the scenario above, when his or her first task is to translate these images into code.

This process of converting design files into CSS and (x)html is called "web slicing," whereby the picture of the website is picked apart and converted to smaller image elements and code. It is a process of translating the design into a form that is readable by web browsers. The goal of web slicing is to make the webpage look as close to the original design as possible (while adhering to best-practices of web standards).

The best end product is realized when the designer complements this goal by creating design documents that are as close to the form of the website as possible. When the website is finished, it is this living document that will represent the designer's work rather than those original design files. It is to the designer's advantage to design for the pivotal moment of design becoming a functional website - to design for context. Adobe Illustrator is just one of many vector-based layout tools that are bridging the gap between web design and development.

Just as a hammer is suited to certain tasks and a screwdriver to others, so are design tools created unequally -- and with good purpose. In a typical web development project, the client will finalize most, if not all decisions regarding the site's front-end (layout, color, typography, etc.) with a designer. The designer formalizes this vision in a set of digital files. These files are then delivered to a programmer, who goes off and "makes the thing work."