Memo to site designer

The second version of the article, expanded and supplemented.

Most of them were preparing for my speech at RIT: Client Technologies , which, unfortunately, I didn’t get to.

 



Unfortunately, a huge army of even experienced, “fashionable” and spectacular designers forget that the result of their work should be a website , and not just a “super-screenshot” suitable only for a portfolio.

Initially, this memo was written by me for internal use, but, overgrown with materials, grew into an independent article. I did not discover America, but simply put it together and formulated a number of requirements that a designer should take into account in the process of designing and designing a site.

First think, then do

This is a very simple and often broken rule. Especially by young designers.

I highly recommend it to anyone and everyone: take a pencil and paper. Think about the tasks and the idea of ​​the site. Make quick rough sketches, find composition, approximate grid, arrangement of blocks and elements, handwriting of the required illustrations. And only after that sit down at the computer.

Such a simple move is much more productive, saves a lot of time and helps to find more interesting solutions.


An example of a quick sketch and the result

From greater to lesser, from general to particular

This is the second simple rule. And it is also often violated.

The classical teaching of drawing and painting teaches: “Move from greater to lesser, from general to particular. First work out the overall composition, the largest masses and volumes, the largest spots, and then refine, refine, saturate with details. ”

This rule is fully applicable to all aspects and genres of design.

Think over your project, find an idea and composition, draw a series of sketches. And then, systematically, embody these sketches, starting with the grid, layout of blocks, elements, large color spots. And consistently saturate them with details.


An example of step-by-step refinement and refinement of the layout from general to particular.

Admittedly, I often saw self-taught artists- Nuggets began to paint a portrait of a person from the eye, or from the toe of their left foot. And more than once I saw how some designers begin to draw a site with  a single private icon. And in both cases, to my surprise, an interesting result was obtained.

But this is a long way, often requiring large adjustments and alterations in the design process. Perhaps it is applicable for creativity, but in the  design profession , when at a certain time you need to get a good result, I believe that such an approach is unacceptable. We need guaranteed process technologies to get guaranteed results in a clear time frame. And not just "succeed, not get it . "

So to summarize: "From greater to lesser, from general to particular . ”

Modular grid

One of the first decisions in the design process is a modular grid. A single framework and arrangement of all the main blocks and elements passing through all the pages of the site.

Grids are simple and complex, flexible to use and not very. This is not so important. The important thing is that if you asked a certain grid of modules when designing a design, please be so kind as to follow it. From the first to the last page of your project. And if in the process of drawing internal pages you have elements that do not fit into the accepted grid, then you have not spent enough time designing it.

Following a single modular grid within the project will not only increase the integrity and logical perception of the site, but also greatly simplify the work of developers.


Modular grid example


Modular grid example

Scalability

Nowadays, when all users have a wide variety of monitors, it makes sense to create mostly “rubber” sites. Those. Sites that scale to the resolution of the user's monitor.


Displaying an elastic site on various monitors

So, while making a “rubber” design, we don’t forget that:

• The overall composition should not be violated at any visitor resolution.
• All elements are scaled depending on the user's screen size and font size.
• The entire modular grid, blocks, and other horizontal lines are scaled in percent.
• All fonts, indents, almost all verticals are scaled in  em . In many cases, this is true even in the framework of ( border ).
• An exception may be only pictures. And then, the hard size in  px for many images is a vertical restriction.

"Compression-stretching"

The so-called "semi-rubber" is optimal for use , i.e. the site is stretched and compressed to a certain limit.

min

The first thing you need to start with is to find the minimum site compression.

The minimum width of the site, of course, is 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 massive and motley audience (for example, mass services: mail, search, news, etc.). The second is suitable for image and promotion websites.

We check, and if necessary, we correct each element of the modular grid so that no collisions / overlaps of elements occur against each other with minimal site compression.

max

The maximum width of the site can be different, but, as a rule, the recommended range for stretching is not 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 composition usually collapses.

It is necessary to determine what will happen with the entire site, with the size of the user's monitor over the maximum width. We decide where it will be aligned. To the right? To the left? In the center?

We achieve the complete look of the site and its natural transition to the environment with a resolution above the maximum. It is unacceptable that the site on the large monitor look like "cropped".

We draw all the illustrations and non-repeating backgrounds from the principle "whoever has a larger monitor will see more." Usually, the width of the illustrations is determined by the width of the blocks of the modular grid allocated for them in the state max .

Stock on site growth

In the larger sphere of tasks, if it is not a  business card site or a promotional site, it must be taken 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 changing the name of the items, is painless. Adding a new section should not lead to a revision of navigation.


An example of a “painless” change / addition of tree navigation of the first and second level

In some cases, it is necessary to provide for the appearance / hiding of information / function blocks painless for the site on the site.


An example of a “painless” move,
change / delete site blocks

Given the on-screen scalability, as well as adding new materials to the site, it is recommended to give preference to text headers and navigation.

Font scheme

Most sites look complete and complete when building designs based on one to three fonts.

Basic font  - the basic font of the site materials.

Accidental  - font for headlines.

In some cases, additional fonts are introduced for:

• menus and navigation;
• allocation blocks (important information, quotes, callouts);
• for small text, in order to increase readability.

The designer should plan a single common indentation / spacing size scheme for all elements on the site, a hierarchy of headers and navigation elements (for example, for a tree-like menu or tag cloud). It should be integral and used on all pages of the site.

All subsequent processing of information on the site should be based on the general scheme.


Font scheme of a simple corporate site

User Response

The designer must plan what will happen to elements that respond to user actions.

Consider typical elements.

Navigation

A fragment of the site’s layout, which shows three navigation states: the usual view of the menu, the menu item with the cursor, highlighting the current section.

Depending on the type and scale of the site, you need to show a number of states of the navigation item.

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 in the parent section.

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


Different states of a navigation item

References

The links located in the text are always underlined and should differ in color from the main text.

It is desirable, but in navigation, to provide for the appearance of the link when you hover over it.

In large volumes of text and when issuing heterogeneous information (for example, a table of contents of articles, site maps, etc.), it is imperative to provide an appearance for the links visited. And they also require their appearance on hover.

Links with additional properties

For links that provide additional features, especially when used in the text , it is recommended to provide a small icon that tells the user about additional properties of the link.

These icons require links:

• alternative data acquisition (RSS, PDA, printable 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 a new window

Examples of using additional "in life" icons.

Pseudo links

Pseudo links, i.e. links that do not lead to another page, but open / hide information on the current page without reloading it, are indicated by dotted underline. In all other respects, they are covered by everything that is indicated for regular links.


One example of the use of pseudo-links.

Tabs

Tabs are some mix of navigation and control.

For them, we take into account the state:

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

A fragment of a site on which three states of tabs are visible at once: active tab, hover and normal, inactive state.

Cursor

We provide a cursor response on hover. Especially when it comes to non-standard controls, such as navigation, pseudo-links and tabs ( hand ), tooltips ( help ), element resizing and dragging.

Content Design

Information rules the Internet. A site is just a way to deliver it. The external design of the site is just a frame that sets the emotional mood and reinforces the brand.

It is by studying the information that the user spends the largest part of his time on the site. And precisely for this reason, due attention should be paid to the design of the content.

The tasks of the site and its content are always different. Therefore, this content also always needs to be formatted in different ways.


A fragment of a news site on which the designer showed most of the typical elements for content design.

Content Elements

It must be said right away that it is impossible to foresee all possible design options in advance. We will consider only typical.

For example, for a corporate site:

• paragraph of text;
• иерархия заголовков трех-четырех уровней;
• ссылки, псевдо-ссылки;
• элемент выделения важной информации;
• цитата;
• ненумерованный список;
• нумерованный список;
• вложенные списки;
• иллюстрация на полосу, в текст;
• таблица или несколько их типов;
• файлы для скачивания;
• выноски;
• оформление маргиналий, если такие используются;
• подача информации в 2–3 колонки (зависит от сетки);
• простая форма.

Рыба

Ideally, you need to operate on real content. If this is not the case, then at least the “fish” should be as typical as possible for the page to be drawn up in its type and volume. This will avoid gaps in the design and annoying appearance of the site after commissioning.

The use of “fish” from another language is completely unacceptable, because text sizes and average word lengths vary. For example, in English and Russian it is very noticeable.


A different pattern of identical content blocks of text in different languages.

PS

The above requirements are not dogma. From any rules you can sometimes deviate. Only this should be done not out of ignorance, but  consciously .

 

about the author

Pavel Kolodyazhniy. Art director and founder of the design bureau make.
He specializes in website development and interface design.
Total experience in design - 9 years. As an author and co-author, he was involved in the birth of more than a hundred sites and about three dozen interfaces. Among the works there are projects for companies such as Sunbay Software, Space Andventures, Pulsar Software Systems, Canon Inc., Yandex, Yamaha Motors. Despite previous achievements, he believes that the most interesting projects are yet to come.

 

Acknowledgments

To all my colleagues and employees, as all examples are fragments of the work of our bureau.
Evgeny Cheporov, who pushed me to create an article.
Vlad Denisov, who helped me with illustrative examples.

Yaroslav Trofimov (from Inspire) for his advice and constructive criticism of the texts.

Ira Yantsev, for proofreading, translating the English version and for convincing me to finish the article when I wanted to quit.

To all users of LiveJournal and  Habrahabr , for comments, feedback and questions, thanks to which I finalized and expanded this material.