In this article I give examples of the basic principles or concepts that I’m guided by while designing desktop interfaces. I’m not planning to act as an innovator or a mentor, but I will happily share a set of settings that helps me in my work.

Accents and priorities.

Each time, designing an interface, I ask myself or a client the question: “What information is important to the end user now? How shall we distribute his attention in a particular case?” To do this, we are armed by color and its shades, font size, its intensity.

In a complex, properly using these tools, we “leave a message” to the user, lead him in the right way, concentrating his attention on the most important things.

A good example where the designer gave the user understanding that it is important to see the sender, then the subject and only then the content or the @nick in the system:

A bad example, where the designer, “claims” that avatars are the most important, and the rest is left to the air:

Indents and their proportionality

Modern design is light, simple and “full of air”. It is filled with breath. And indents play not the minor role in these sensations. Significant indents help to simplify the presentation of the material. But they should be subject to some regularity and proportion.

I define N pixels as the base indent when I start a new project. Then I use 2N, 3N, and so on proportion to create visual balance, if somewhere a larger indent is required.

A good example where the designer more or less complies with the proportionality of the indents:

A bad example when the indents are almost based on the random numbers generator:

Button text is always primary to the icon.

Don’t forget that the text is the determining factor of what expectation or reaction will be pre-formed from the user at the sight of the button. And the icon image will secondary complement the meaning. The image of a bell with the inscription “notifications” gives us some idea of the purpose of this functional before we click it.

The same bell without the inscription in a different application will lead us to the alarm clock, although we will most likely expect the appearance of the screen with notifications. I offer to always give the inscription more “weight” than the icons. I do believe they are a big deceit. Many modern interfaces are quite able to do without them. It just would be too boring!

It is generally good:

Here some improvements can be made:

Either looks not bad:

And then there is something to improve:

Don’t try to be too clear

Not all interfaces should be intuitively clear. There are many complex systems that we studied (!) to interact for some time. Now they may seem easy, but we don’t realize that we were researchers-pioneers for the first minutes, hours, or more. And as we continue to work within some initially complex system, apparently nothing interfered with our way of the first studies.

Most likely, the designer has done his job so well that we easily mastered the new environment. A vivid example from life: try for a moment to imagine that you don’t know the meaning of the mathematical equal sign. Admit, these two dashes, one above the other, do not seem intuitively clear. Just once in school the math teacher taught us this. I urge you not to try to be clearer than that is required at the minimum level.

In this example, the designer was overly clear with the close button:

In this example, the designer was overly clear with the possibility of adding:

Cursor movement takes strength

We should not oblige the user to drag to another part of the screen to get advanced functionality. If the user works with the list, the button creating a new item should be nearby. Or if we create a new popup by clicking the button on the bottom left, it is absurd to force a user to pull the cursor diagonally to the right top to close the window.

A good example where the designer offers to close popup in the same area, which caused it’s creation:

A bad example where the designer separates the functionality of the item adding to the list from the list itself:

The relationship of locations or a single plane.

This is another interface balancing tool. Similar to the grid if you want. For example, you use trekkyandy. Are its headers in the same plane on the X-axis? Or the icons with the buttons. Is it possible to draw an imaginary Y-axis and discover that they are both neatly attached to it? If the answers are affirmative, things are going well. This is because visually it is easier to perceive the table chart due to the structured data. And in the interface design we should arrange elements with some tabular logic.

A bad example with inconsistencies:

A good example with the harmony and conformity:

Color makes sense

Some trivial things are stored for the end. Red means alarm, green means that everything is fine. For centuries the best perception of text information is black on white. If you use many colors without argument, you create chaos. If you color the items meaningfully, you create order.

An example of chaos: (Does 172 votes green mean positive condition? if yes, then 280 visitors orange logically means negative? Not at all! The designer just divided the numbers by color):

Example of creating order and justification of colors (I’ve just added some graphic on top of someone else’s creativity):

A good example of non-abuse of colors:

The bottom line

I express my gratitude to the members of the dribbble community, for their informal agreement to submit their work for this review :) I would like to remind you that the above mentioned principles are basic for me. I always keep them in mind when designing interfaces. Choose your side… Do you want to create interfaces for designers and work for likes , or do you strive to solve user’s problems? By the way, in my opinion it’s a great example of how the closeness of the community allows you to maintain focus on the main purpose of interfaces!