Strength is in details
Little things matter. We might ignore them, but they influence our perception of the web interface. What do I mean by these «little things».
Margins
Margins of the web interface design have always been a problem. Coders often overlook them or treat them as an unimportant detail of design. If the margins are too large, there may appear as unpleasant «holes», if too small — everything looks crumpled and, as a result, information is lost. There is a concept of whitespace.
«White emptiness» or whitespace is an empty space between the elements in the composition. To understand about how whitespace affects the perception of information, try to read the next sentence without spaces: «Therestivesteedandtimiddeermustne'erbeharnessedtoonecart». Margins just like gaps carry a function of separation and grouping of text elements. This is one of the main tools of the designer in information design.
Let’s have a look at a simple example with text on the plate.
It is obvious that the second version of the text is easy to read.
Leveling of elements
Micro leveling of elements strongly affects the aesthetic appearance. When the elements «are in dance» with respect to each other, there often appears a feeling of clumsiness. It's like buttoning a shirt out of order and skipping holes. For example, let’s take the header of hrbroker.ru and align some of the elements relative to each other.
Align the top of the menu on the right side and then have a relatively aligned «forgot your password», «registration» and the text block with the news. We will only align the text in the news, as the frame is not heavy, it can be taken outside the line of alignment. Align the text inside the button «Log in» vertically. The logo also needs to be aligned vertically as to the news block. Let’s see what we've got.
Without changing any elements we gave the header more aesthetic appearance.
Alignments are also very important in the form fields. The text within the text fields must be centered with sufficient space to the left and right.
Colors
I will not talk about color palettes, about the impacts of certain colors on the human psyche. I want to focus on some of the errors in the work with the colors in gradients, shadows and highlights.
It so happens that you look at the site and everything seems to be fine in it, but still it looks somewhat blurred and dirty. Most likely the problem lies in the colors and gradients.
Recent years it has been a trend to do pseudo display plates, buttons, input fields, bulges, dents, and so on. The volume of the element can be shown by a flare (a lighter shade of the base color) and shadow (darker shade of light). So these shades are often matched not correctly (not realistic).
As an example, consider the plates under the headings on the site radialka.net
If you tweak the shade on plates even a little bit, without touching even the main color, it turns better.
The shadows cast by objects are never gray in nature. All colored objects will cast a shadow with a dark shade of its base color. Here is a simple example. The button on the left obviously looks more realistic.
At this good design, of course, does not end, but thanks to such little things, any web interface design will be more comfortable and enjoyable for users.
