This article was written by despoth on Habré in 2009, however, even after 5 years it has not lost its relevance, because it answers the most common questions from beginners in web design.

Each designer has a set of rules that guide him in his work. And often reminders made up of such rules from experienced designers are a good help for beginners. I have a number of such rules too. True, they relate to what should NOT be done when making a model. Some may seem trivial and obvious, while others may even cause some bewilderment. But they help me a lot and, I hope, some of them will also be useful to those who are engaged in web design or want to join this area of ​​website development.

one

NOT do what the layout designer would not be able to do later. And, although modern methods allow you to achieve almost any result in HTML layout, you should always remember that you are creating a website, not an advertising poster. Your idea should be transferred without difficulties and incompatibility problems into the code, which can be displayed with the same result on any systems.

2

NOT use the replacement of standard form elements with screenshots of similar elements from your operating system. Believe me, the Windows 98-style button you forcibly introduced is unlikely to please MacOS users.

3

NOT shrink the text. It is highly discouraged to use pins less than 9 pt. Use 9 and 10 pt pins only for minor blocks, footnotes and captions. Publish the main text in size not less than 11 pt.

four

NOT rely on standard leading values ​​(+ 120% to the size). It is often necessary to add 1-4 points to the default values, this can significantly improve the perception of the text. Most often, the value 140-160% of the size can be successful. Choose the one that suits you best. I use the following font / leading values: 11/14, 12/16, 13/18.

five

NOT rely on any default values ​​whatsoever. Remember that the vast majority of them were invented at the dawn of standards, and do not fit well with modern concepts of aesthetics and ergonomics. Carefully check all bullet indents and positions in lists, superscript and subscript offset, form element sizes, fonts and colors for specific tags (for example, code or cite). And then describe the new properties of all elements in the cascading style sheets without exception.

6

NOT use absolute units when specifying font size. Pixel size (px) is the most harsh and dangerous method. Better, but not much, is the indication in paragraphs (pt), since it depends on the resolution of the monitor. It’s fine to use relative values ​​like Em. But, you have to get used to and correctly calculate such values.

7

NOT use unmotivated values ​​of indents, selected “by eye”. For example, 21 or 17 pixels. Replace them with rounded values ​​or multiples of 5 (or even 10), if there is no strict need to use just such “non-circular” values. This will make it easier for you and coders when you need to calculate coordinates and combine blocks for layout.

8

NOT make columns of text too wide and too narrow. If you have fixed columns with small size text, then the minimum width is 140–160 pixels. If you have a fluid layout, make sure that the widest column does not occupy more than half of the entire width of the site. The optimal column size for 11–12 points is 50–80 characters per line.

9

NOT let the text fit closely to other text boxes, frames, or the borders of the box that has the text box in the background. Convince yourself that the minimum indentation of everything related to the text is 10 pixels, and the optimal one is 15-20 pixels. Do not regret giving your texts more space to live, do not be afraid to sacrifice your precious graphics for improved readability and harmony of text blocks.

ten

NOT use a lot of bold or italics, underlines, capitalization. Remember that for the best perception of the text, it must have an even dynamics, and all selection methods serve only to emphasize the most significant fragments.

eleven

NOT do “full justify” (align = “justify”). This works well in books and newspapers (thanks to hyphenation), but it is bewildering on websites. In addition, you should often refrain from using “red lines”, because this method of paragraph selection works best in combination with “full justification”, and with the standard align = “left”, the “red line” looks a little ridiculous.

12

NOT forget about dangling lines, orphans and widows, prepositions at the end of lines, non-breaking spaces (in names or proper names) and correct typographic characters (for example, dashes and quotes). Well-thought-out typography even on a preliminary sketch of the layout is a sign of professionalism. You can use, for example, “Typographer”.

thirteen

NOT Use fonts other than commonly used web typefaces on your site layout unless images are intended to be used as headings or captions, or if an exotic font is a necessary component of your corporate identity. For fonts that can be used to display HTML text in layouts, see the Web Typography Today series. You should also refrain from using several web fonts at once, it is enough to limit yourself to two or three typefaces.

14

NOT place overly long and monotonous blocks of text in your layout. Break them into paragraphs, interspersed with subheadings if possible. This will give the text harmony and consistency. Strive to ensure that any textual information within one block looks smooth, but not dull.

15

NOT use as a “fish” the same sentence, multiplied several times (“Here will be news. Here will be news. Here will be news”). It will not be difficult for you to find any suitable text to demonstrate how the text block will look.

16

NOT copy several times similar blocks next to each other (for example, news announcements). Do not be too lazy to change the text every time so that the blocks look like on a real site, and not like on a hastily assembled draft, even if it is a draft. The same applies to images. If you copied the event blocks several times and changed the text, change the pictures next to the text as well. After all, the Internet is full of images for every taste. And since most often all the texts in your layout are “fish”, then any pictures will do.

17

NOT show your customer unfinished blocks or places where you left a sign like “Here’s the news.” Set aside a few minutes of time and at least roughly sketch this block. It’s not difficult. The easiest way is to copy text or images from the sites of your client’s competitors or partners, for added security, removing all references to these competitors. But remember that this is only a temporary measure and is intended only for demonstration to the client. See rule # 20.

eighteen

NOT Leave blank spaces or filled rectangles in the areas of intended advertising banners. Do not be lazy and find real banners of the required size on the Web. You can even work hard and find banners of a suitable color scheme. If something happens, they can be easily turned off later. On the other hand, the customer will have no doubts that “the layout looks somehow empty” if there are dull holes in it filled with the same color and a barely noticeable inscription “Here is a banner”.

19

NOT use images with non-aliased text if it is not part of your brilliant idea and does not fit into the style of pixel art. This way, users who turn on anti-aliasing will not notice the cutting elements. And those who have anti-aliasing turned off will take the anti-aliased text in the picture for granted. Just pick a good font and anti-aliasing method. Untialiased text is an anachronism, and while the use of antialiasing can be controversial when displaying HTML text, unaltered text in images looks just ugly. Remember and visitors to your sites! You can read about font smoothing in my previous articles.

20

NOT forget to replace all “fishy” texts and images with real ones after finishing work on the site. Remember that the materials you use as “fish” are someone’s intellectual property.

I hope that two dozen of these simple rules will come in handy when preparing a layout for a customer. Other important aspects of preparing layouts for a customer are discussed in the series of articles Preparing a layout for a client and Web typography today.

Author: despoth
Source: Habr