We are preparing a layout for the client. Part I: Iron or Not?

Part I: Iron or Not?
Part II: If you iron, then how?

Recently, looking through a portfolio of various designers on the popular freelance portal , I noticed one feature.

Many designers have mastered Photoshop quite well, and have learned to use a variety of tricks and tricks to produce vivid and rich pictures. Gloss and “caramel” captured the minds of many. Today it is generally accepted that such a "licked" technical design is the most expensive and fashionable. Good or bad - in this case, it does not matter.

Another thing is important. The upper half with a cap of unrealistic blue sky, excessively green grass, shiny chrome skyscrapers and plastic people with glued smiles - all this is very popular with customers, and the designers themselves are bubbling with pride, showing similar collages to their colleagues. But the bottom half ... Here, in most cases, just everything is very, very sad.

Within the framework of several articles, I would like to talk about preparing layouts for showing to clients, as well as about what difficulties await the designer on the way to approving the layout.


So, first of all, let's talk about the notorious smoothing of screen fonts, analyze various situations and identify methods of dealing with alleged difficulties.

Before starting the conversation, I would like to make a reference to my recent articles on web typography , since a number of important factors disclosed in those publications will help us better understand the essence of the matter.

What is wrong in those wonderful layouts with beautiful collages?

Everything is very simple.

They are very sloppy decorated text. All text blocks (news, introductory texts, announcements, quotes, polls, etc.) - look sadly against the background of a bright visual. There are several reasons for this problem, and we will try to consider them all.

After all, who is a web designer? And what is a website? Is his main task - to make a beautiful hat and cram cute icons? And we all go to sites for their sake?

It is unlikely that anyone will argue that the content of 90% of sites is text and, moreover, text. We all visit most of the pages to read something, find the right information. In general, learn something useful. And the pictures in this case serve only to improve perception. Moreover, the images that make up the website interface. Of course, we can do almost without text at all. For example, viewing galleries on a photo site. But this is rather an exception to the rule.

A designer should always keep this in mind. And first of all, he must be able to draw up the text in the most digestible form. And then engage in embellishments and bright collages.

Considering the design of the text, we first of all pay attention to how it looks. And there are two options: the font is smoothed or anti-aliasing (a term denoting the screen anti-aliasing algorithm) is disabled.

As an example for analysis, I decided to choose some simple and neutral site from the point of view of design, in which there are typical text blocks in two columns, with subtitles of different levels, with links and other elements. The pages of Intel's corporate website went perfectly. I randomly selected the first page that came across , and we will consider it.

Suppose we have turned off screen anti-aliasing of fonts, as was the case in earlier versions of Windows.

This page will look like this:



Not bad at all. Good strict corporate design. Without any frills, but it is also perceived well. True, the text in the header, written in white - “Technological innovations every day” looks a little strange. It is flattened. And the heading “Leadership in Technology” below is without smoothing. Any designer will shrug: so what’s the matter here, the usual thing, they say. Heading - a whole image in JPEG format, where it is customary to display text in smooth fonts. And the second heading is the HTML text. Because they look different in different ways.

However, I immediately want to ask a question to adherents of non-smoothed HTML text: do such combinations not seem strange and absurd to you? After all, both texts are typed in the same font of the same size, but look so different? And I also want to ask this question: which text do you like more? If white, then read on. If it’s black, then here’s another question for you: why are you smoothing out all the texts that appear on the site as graphic files (for example, in logos)? Then disable anti-aliasing on all fonts, even in pictures, manually erase the smoothing of the logo - even if its letters are jagged, as in this heading is black.

Okay, this, of course, I'm exaggerating.

Because in most modern operating systems, you can turn off anti-aliasing not on all pins, but only on those that are smaller than a certain size. In MacOS X, you can’t completely disable antialiasing altogether, and it’s possible not to smooth font sizes less than 14 points.

Suppose we just have a similar restriction: all text that falls into the range of 9-13 points is not smoothed. Why is the lower limit of 9 points? Because no existing font can be rasterized on modern monitors without loss of quality if it is less than this value. Try to pinpoint the text at 7 points and try to read it with anti-aliasing disabled.

So, our fragment of the site will look like this with partial smoothing:



Well, it’s better. Both large headers look the same. But somehow the subtitles in the right column began to look too fat. When the text was not smooth, these lines were not so striking in the eyes with their excessive density. Strange, isn't it? The same font behaves differently. Designers with experience will say: so this is the notorious Verdana! It’s always like that with her. In ordinary pins and especially in small texts, the font is good. And it’s better not to put it in the headlines. Especially in bold. There, they say, the letters are crooked. But we will touch on this moment a bit later.

Now enable full smoothing using the ClearType method . Much has been written about this technology, and I mentioned before . So there is no point in repeating what has been said.

You will see something like the following:



Why did I say something? The thing is, ClearType is subpixel rendering. And it completely depends on the given sequence of color signals (for example, RGB or RBG). Trying to take a screenshot can be doomed to failure: on monitors with the same order of alternating color signals, the text will look good, while on others it will be noticeably worse. And in the end you will get a set of colorful dots like this (on an enlarged scale):



As you can see, the above screenshot is one of the options for the text smoothed in the browser.

But even it looks incomparably better than text that has not been smoothed.

If you don’t think so, then I’m wrong, and you don’t need this whole article. Or maybe you just have an old monitor that greatly obscures anti-aliasing or is simply not able to render subpixel rendering efficiently. Among budget office and home displays, this is not uncommon. By the way, if you have Windows XP, try the Normal Smoothing mode. Perhaps on your monitor the text will look better with this particular mode. In addition, you can try various utilities for fine tuning the system (“tweakers”). Most of them provide the ability to change the sequence of color signals and the degree of sharpness in ClearType. Often a little tweak makes the text look better.

But I assume that the material presented is of interest primarily to designers and IT professionals who do not experience difficulties with the acquisition of modern monitors. Moreover, in our time they have become quite affordable.

In other words, suppose that you are a progressively thinking designer, and in your arsenal is a modern technique that allows you to focus on the creative process and not think about technical imperfections, mistakenly blaming all the blame on the font rendering methods.

Now let's imagine a few situations.

The first situation.

Your client is waiting - the layout will not wait. He has an ancient monitor, and he has an old version of Windows installed, in which font smoothing is completely disabled. He is used to seeing all sites with ordinary jagged letters, and does not experience any problems about this. You are also a fan of non-smoothed fonts. And show him a layout similar to that fragment that was presented in the first two screenshots. The client nods with satisfaction, offers minor corrections, and, having received a fee, you post the approved work in your portfolio in the same form, with unglazed fonts. Visitors like that client, visiting your portfolio, will not notice any oddities, and will write you a heap of flattering praises.

The second situation.

Now suppose that you like to work with smoothed fonts, and to the same client, imagine a layout where anti-aliasing is enabled on all text blocks. There may be two options. In the first case, the client "picks up" the layout and does not ask any questions about smoothing. From personal experience I can say that most often it turns out that way. The client does not want to go into technical features, his mind evaluates the integrity and interconnection of blocks in the design, and by no means there are some inconsistencies in the visual representation of the letters. In rare cases, claims may arise. Like, I see such text everywhere on sites, and here you show me in a kind. And here you can do different things. For example, try to clarify the essence of anti-aliasing to a client, let him read this article, or just convince him that it will be better for now, and after cutting and layout he will see everything the way he wants. By the way, maybe, after your arguments, the client will think about it and decide to permanently refuse to turn off anti-aliasing. You can also quickly turn off anti-aliasing in the layout and show the layout with jagged letters, and we'll talk about this a bit later. Well, if no methods help, and persuasion does not work, and the client begins to be capricious, or even to utter a frenzy, my advice to you is: drop it. There will always be more adequate people. and the client begins to be capricious, or even to whine at all, my advice to you: you leave him. There will always be more adequate people. and the client begins to be capricious, or even to whine at all, my advice to you: you leave him. There will always be more adequate people.

In general, you get the long-awaited approval of the layout with smoothed fonts, and transfer the work to the layout designers (or start to layout yourself). And your layout is safely sent to the portfolio, blogs or somewhere else for all to see. If advocates of jagged fonts come to you, they will see just a good layout where all the texts are smoothed. None of them will have any questions about this. After all, your screenshot is a graphic file, not HTML-text, and the graphics should be just that. Everyone has long been accustomed to this. Well, those who use screen anti-aliasing themselves will not have any fabrications at all: they will simply admire your creation. Of course, provided that you did everything correctly and nicely.

The third situation.

And now imagine that our client has at his disposal a modern computer, monitor and operating system (OS X, Vista / Vienna or Linux with the latest versions of graphical shells). And anti-aliasing is enabled on almost all fonts, without exception. Only less than 4 points the text may not be smoothed. This is done specifically for publishing systems, so as not to slow down the work of programs in cases where the page is presented in a greatly reduced form, and all text blocks receive the greek text attribute .

And if you, too, are of the opinion that dentation in letters is a bad manners and the century before last, then you will have complete harmony and understanding with such a client. Why am I so sure that it is in this case that such harmony ensues? Let's talk about this a bit later.

Your layout is accepted with minor amendments, and sent to the portfolio. Where, as in the previous case, visitors react to it, among which there are both colleagues in the workshop and potential customers.

The fourth situation.

Your client is like in the previous situation. But you are categorically against the inclusion of antialiasing for pins less than 14-18 points. And send him a layout with jagged fonts.

Guess what will be the reaction of the client?

Well, if he asks for something to change in the text and modify it so that everything looks in its usual form, that is, with smoothing. But it may happen that a client comes across young or has recently become acquainted with computers. And I had never seen an unlined text before. Believe me, this can also happen. And every day the chance to meet such a person increases. And then, when he saw an unusually sharp eye-cutting text, the client angrily cried out: WHAT IS THIS FOR FIGHT ?! Where is the guarantee that it will not flare up (and customers are often hot and unrestrained people) and will not refuse further cooperation with you?

But what if the client was accommodating and accepted the job as you showed him. As a result, as in the first situation, you put the work in the portfolio in this very form. And another potential client, accustomed to antialiasing, gets to your site. Seeing the work with jagged letters, he may nevertheless turn to you with a proposal. And, it may turn out that he will simply leave your site, disappointed.

Remember that the perception of most people is subjective and subconscious. Their eye is not armed with the arsenal that every experienced designer has. They may not be fully aware of why they do not like your work, but, as a rule, the reasons lie on the surface. The considered example is just one of such cases.

It is absolutely ridiculous that cases when graphic elements (signatures of logos, buttons or markers of the type "NEW" or "beta") are intentionally inserted into the layout, where the text is written without smoothing. When a site is viewed with anti-aliasing turned on, such intersperses can unpleasantly catch the eye, or even completely ruin the impression of viewing. You don’t have to go far for examples. On the mentioned Free-lance.ru many buttons are made in this way. Try to enable anti-aliasing, and you will see these "aliens from the past."

You should also take into account the fact that the owners of good monitors and modern operating systems have now become significantly more. Another year or two, and you are unlikely to meet users forcibly disabling anti-aliasing. These are the trends. You can dispute them for an arbitrarily long time, lead “holivars” and develop worthless disputes. Only this makes no sense. It is enough to analyze the given situations.

A designer who disables anti-aliasing only benefits in the first case. In the latter situation, he is clearly defeated.

The supporter of smoothing in all cases is the winner.

Isn't this argument enough? However, even if you yourself, for some reason, browse sites with anti-aliasing disabled, it will be worthwhile to familiarize yourself with the second part of the article, where we will consider various options and combinations of anti-aliasing to successfully demonstrate the layout to the client.

You may ask: why is all this necessary? I supposedly never show the client such sketches, but immediately I’m doing everything, in the graphics editor I’m only finalizing the graphics: logos, icons, collages. If you really can, this article is not for you. And personally, I take off my hat to you. I can’t do that. And all my fellow designers-designers also cannot. Before any work with HTML code begins, the overwhelming majority of the client is shown a preliminary sketch. Sketch, draft, fish. Call it whatever you like, but without it, no way.

So what to do? Some designers use the following method: they write a simple code in the HTML editor, where they insert plates of the required width and with a suitable background color, into which the text is put with the intended font and color. In the case when anti-aliasing is turned off, it is also convenient to use the “magic wand” to cut out all the text from a homogeneous background, so that later you can easily manipulate this block placed on a separate layer. But why so complicate your work if all the same can be done in a graphical editor without resorting to the layout of temporary blocks. The vast majority of designers do just that. But more often - with the only kind of smoothing: none.

If you carefully read the article, you are already aware that this is not our way.

And how to use Photoshop in the best way to prepare a layout for demonstration to the client, we will talk in the next part.

Do not switch! ;-) Thank you for your attention. PS I am reproached for the excess of "water" in the material presented. I just try to write for all audiences, not only for specialists who already know all of the above. The second part is supposed to contain proudly more practical material.

N.B. Я не намерен вступать в какую-либо полемику относительно того, насколько несглаженный текст лучше сглаженного. Я принадлежу к той категории дизайнеров, у которых всё в порядке со зрением, нормальный монитор и современная операционная система, а клиенты в подавляющем своём большинстве также не отстают от прогресса и целиком и полностью одобряют случаи, когда шрифт выглядит именно шрифтом, а не набором пикселей. Если у вас не так, я вам искренне сочувствую. Если так, но вы по какой-то причине не согласны и рвётесь доказать превосходство зазубренных букв — попробуйте ещё раз перечитать вышеизложенное. Наверняка вы что-то недопоняли.