Memo to the site designer

This article was written by me as a reminder for internal use by the designers of our bureau. Unfortunately, a huge army of even experienced, fashionable and effective designers forget that the result of their creativity should be a website , not a “super screenshot” for a portfolio that works only as an effective poster. I did not discover America, but simply put together and formulated a number of requirements that the designer must take into account in the design process of the site.

Modular grid

One of the first decisions in the process of creating a design is a modular grid, a single frame, and often also the layout of the main elements passing through all pages of the site. This topic is important and extensive. At least I want to consider it further and in detail in a subsequent article.

"Rubber"

We only do "rubber" sites. All elements are scaled according to the size of the user's screen and font size. The entire modular grid, blocks and other horizontals are scaled as percentages. All fonts, indents, almost all verticals are scaled in em . In many cases, this even applies to the border . The exception may be only pictures. And then, for many images, the hard size in px is only a vertical limit.

"Compression-stretching"

We use "semi-rubber", i.e. The site is stretched and compressed to a certain limit.

min

The first thing we start with is finding the minimum compression of the site. The minimum width of the site is, of course, determined by the tasks of the site and its target audience. In fact, now there are only two minimum parameters: 760 px and 990 px . The first is optimal for corporate sites or resources designed for the most mass and disparate audience (for example, mass services: email, search, news, etc.). The second one is suitable for sites of image and promotion appointments. Consider the minimum compression in the design, for each element of the modular grid, so that there are no overlaps / overlaps of elements on each other.

max

The maximum width of the site may be different, but, as a rule, we use a range for stretching no higher than one and a half to two times the size of the minimum compression. This is due to the fact that when the site is stretched more than one and a half times, the site composition usually collapses. Considering what happens to the entire site, at the size of the user's monitor over the maximum width. We decide where it will align. Right? Left? In the center? We achieve a complete view of the site and its natural transition to the environment at a resolution above the maximum. It is unacceptable that the site on a large monitor looked like a "cut off". We read and draw all the illustrations and non-repeating backgrounds from the principle "whoever has a bigger monitor will see more." Usually, the width of illustrations is due to the width of the modular grid blocks allocated to it in the max state.

Reserve for site growth

In the larger scope of tasks, if this is not about a business card site or a promo site, you need to take into account that the number of pages and sections of a site can grow and change. Therefore: Navigation should be structured so that adding new menu items, and even more so change item names were painless. It is unacceptable that the addition of a new section leads to a revision of the navigation. In some cases, it is necessary to provide for the appearance / addition of information / functional blocks on the site that are painless for the appearance. Considering the screen scalability, as well as adding new materials to the site, prefer text titles and navigation.

Font scheme

As a rule, we build a site design based on one or three fonts. Base font - the main font of the site materials. Citizen - font for headers. In some cases, additional fonts are introduced for:

• menu and navigation;
• selection blocks (important information, quotes, callouts);
• for small text, in order to improve readability.

The designer must plan a single general scheme of indent / spacing sizes for all elements on the site, an hierarchy of headings and navigation elements (for example, for a tree menu or a tag cloud). It should be traced on all pages of the site. All subsequent design of information on the site should be based on the general scheme.

User reaction

The designer must plan what will happen to the elements that react to user actions. Consider the typical elements.

Navigation

Depending on the type and scale of the site, you need to show a number of states of the navigation point. A typical set:

• Normal view.
• We hover over.
• We are in this section.
• We are in this section, but have gone deeper.
• We hover over the item of the parent section.

At the same time, the minimum set for all navigation elements, including switches and controls, is the normal and active view. Those. the minimum for all controls and navigation elements is “on / off”.

Links

References in the text are always underlined and should be different in color from the main text. It is desirable (and necessary in navigation) to provide the appearance of the link when you hover the cursor. In large volumes of text and in the issuance of heterogeneous information, be sure to provide for the state of the visited . For links that provide additional features, for example:

• alternative data acquisition (RSS, PDA, print version),
• Downloading files located on the server
• appeal to popular resources (Yandex, Google, Flickr, LJ map services, Wikipedia, etc.)
• e-mail addresses
• opening forms
• open link in new window

then for similar links in the text most often need to provide an additional icon that tells the user about the additional properties of the link.

Pseudo-links

Pseudo references, i.e. Links that do not lead to another page, but open / hide information on the current page, without reloading it, are indicated by a dotted underline. In all other respects, everything that is stated for normal links applies to them.

Tabs

This is some mixture of the navigation element and the control element. For them, we consider the states:

• tab is inactive
• hover cursor (opt)
• content loader (opt)
• tab active

Cursor

We foresee the cursor response when hovering. Especially, if we are talking about non-standard controls, such as navigation, pseudo-links and tabs ( hand ), tips ( help ), resizing the element and dragging.

A fish

When developing a design, it is necessary to take into account the information that is most typical for this page by type and volume. Ideally, handle real data. This will avoid gaps in the design and an annoying look of the site after commissioning. It is completely unacceptable to use "fish" from another language, because the volume of the text, the average length of words differ. For example in English and Russian is very noticeable.

Making the content

Provide all possible design options can not be. The layout is always conditioned by the site’s tasks and information. I give a typical list for the text pages of the corporate site:

• text paragraph;
• hierarchy of headings of three or four levels;
• links, pseudo-links;
• element highlighting important information;
• quote;
• unnumbered list;
• nested list;
• numbered list;
• illustration on a strip, in the text;
• table;
• file for download;
• callout;
• submission of information in 2-3 columns (depending on the grid);
• simple form.

In the memo, I deliberately did not touch on the issues of design, color and usability, although there is no doubt that the above set of rules leaves an imprint on these areas. In the future I plan to expand and supplement this material. It is likely that due to our discussion))) I would also like to consider the issues of modular grid, font and color schemes. But it is already in the subsequent, separate materials. If such will be)))