More About Web design: models for the layout.

Of course, when a web designer himself is involved in developing the sketch of the future layout of the site, followed by its layout, grabbing the templates under the engine, optimizing the code and even the initial filling of the type “turnkey” – he seems to be more difficult, but also simpler in respects.

The designer knows his layout, knows his source, fonts, palettes, temporary billet, all that may be needed during the work.

But if you separate the designer and coder – immediately the problems may appear – how to come to a conclusion, understand each other, how to do this project.

Good layout designers with all their other virtues – are extremely rare talented artists that can perform a miracle with the author’s creative design graphics (not worn Photoshop plug-shot of the free clip art) – Yes, valid code, yes, sterile makeup – so what? Who sees this code?

A visitor (if it is just not his aim) never in life will watch source page, or test the site in validator. He needs an interface for working with information supplied by the site – convenient, beautiful interface.

Of course, I’m not saying that it is impossible to combine in a single developer the talents of the designer and maker-up – it is possible, and I personally know successful, skilled web designers whose visual is in order, and the code is efficient.

But in real life quite you often have to separate a graphic designer and designer-coder.

There may be any mishap or even a conflict – and the designer may complain that some of his “design elements” were rejected or after the layout it looks crooked, “not as he had had in mind” and the coder, getting the layout of the designer, often uses gross language, threatens to “cut the hands from this wonder-artist”.

Max Rossomahin on Habré talks about his experience (from his hand – layout developed by a third-party designer):

The customer sent a 14-megabyte PSD-file containing the layout of a web page. By opening it, I found a hefty mess in the structure: a pile of hidden layers, groups, named anyhow, the same layers duplicated several times, etc. I barely figured out what was what, and then I laid it out. And then it became clear that something has been forgotten (I just could not see that “something”).

But there are good rules for the preparation of models before sending them to the coder. I think I’ll write them down now, and if necessary I will refer to this record whenever needed.

1. Observe the order in layers. Give them clear names (“Layer 2 copy” will not do), group them by following a clear logic (e.g., if it drew the search form, then include all its components in the group “Search form”).

2. Remove all unnecessary.

3. If there are a lot of templates (for example, it is a website hosting company with user and Admin portion), then scatter page layouts for various PSD-files (eg, catalog-pages.psd, admin-vault.psd, etc.). Do not make the layout designer spend time on solving a puzzle. It is not difficult for you, as you understand all this stuff, but he has not yet.

Sometimes it is useful to create a PDF-file containing the entire set of model pages. It is good that the layout designer can see firsthand what actually should be on the site, and how all this stuff should be best laid out (a trained eye will notice the same blocks of content, styles, text formatting, etc.).

This is not, of course, a full set of rules intended for designers who are preparing the layout drawing in .psd (and there are more frameworks, corel draw or even xara), I can say one thing, it’s time to invent and publish paper rules and requirements to the model for public use – maybe even a few documents for the most popular and commonly used editors for creating source.


Tags: , , ,


This entry was posted on Thursday, September 2nd, 2010 at 8:35 am and is filed under Must know, Web design. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.


Comment Your Heart Out