What palette and coloring of interface elements would you choose?

Question

Habr

Along with the proposal to make a new design for messages on Habré for the next version of userscripts, there is an idea to improve the graphic content of the pages in the current version in order to use it as a starting prototype of the new design.

Until now, no one was seriously engaged in design - attention was paid to the size of the elements and ease of use. The design is mixed - from the existing Habr, from the elements of the old Habr and from the changes of Habr at different times. Some elements of Habr really look unaesthetic and do not perform the function of orientation (for example, there is no separator between the article and comments, so you had to smooth colors and put some color separators on the go. The mechanism for separating authors by popularity received 20 color tags , and the first task was to test its usefulness, and not to choose the harmony of colors or other elements.

Now the functionality is more or less settled, so you can think about "beautiful". Several typical pages are offered. Question: how would you design these pages to keep the principles of compactness and not repeat the shortcomings (such as those mentioned just above) of the original design?

Answers can be formatted as the same drawings, but recolored in Photoshop/Gimp, with an explanation of the ideas of changes (for example, a palette; changing the size of elements - for what purpose, etc.). As source files, 3 groups of 3 drawings are offered:

1. Without scripts and styles in general (except for standard website ones). 2. Without ZenComment, but with HabrAjax. 3. With ZenComment and HabrAjax. Links to used pages: habrahabr.ru/feed/new/ habrahabr.ru/qa/19443/











habrahabr.ru/post/143974/
All groups show the same sections of pages:
1) section of the Tape with questions and answers and articles (type "All");
2) a question with answers expanded without reloading the page (for groups 2 and 3, and for the 1st - just a question page with answers);
3) the article and the beginning of the comments (the colors of the authors are shown, causing a lot of criticism).

Any group can be taken as a basis, however, the compactness of the 3rd group is of interest, even a slightly smaller, but not twice as stretched traditional tape. We need a better acceptable design that will be easy to pull on the existing layout and scripts. Therefore, ideas with a complete redesign of the layout are undesirable - these ideas are expected for the next version of the scripts. However, the current version is far from dying; in addition to convenience, it needs repainting.

Answer 1

spmbt , my opinion has not changed - Without ZenComment and Without HabrAjax. Both implementations are bad in terms of color palette.
It is better to reduce the entire palette to 2-3 tones of color and use different saturation or brightness to highlight elements.

Answer 2

I think you are over complicating things. Now the pages look light, you suggest to hang a bunch of elements on them.
It is not clear why you say that there is no separator between the article and comments, it is quite there, the date and other information is displayed on it.
And then, to memorize 30 color values ​​of the author's popularity, in my opinion this is too much.

Answer 3

> Pages look light now...
--the goal of the project is to improve information content and ease of use. Now the pages are light, and you need to turn the mouse a lot and the texts are separated by emptiness, which is why there is a 50% loss of space. A bunch of elements for a reason, but for useful information before your eyes. And, by the way, some of the information is hidden and appears when you move the mouse (favorites, a link to yourself; there is no up arrow at all). If you look at the “zen” mode in styles, the rating buttons are hidden there. Instead of all this, color tags of the frequency of comments by authors are added (for now) and at the same time - indicators of different authors. Without reading the names, you immediately see how many authors are having a dialogue, whether there is an author who has spoken a lot or not. For all this, it is desirable to have as many tags as there are authors in the topic, and there can easily be more than 30 of them. You can also get by with dynamic tags of different authors,
> why do you say that there is no separator
--If it exists and is poorly visible, it is tantamount to saying that it does not exist :). Have you ever tried to quickly scroll to the beginning of the comments on a long article? Remember how closely you have to look with your eyes for these non-contrasting dates and other information?