Home Designing Websites A redesign of Habrahabr and Gictimes. The finish line

A redesign of Habrahabr and Gictimes. The finish line

by admin

Here’s another post about the redesign of Habrahabr and Gictimes. Someone probably already thought to himself: " Hm, they are like tiling in Moscow – the third or fourth publication about the redesign, and the site is still the same as it was? "And will be partially right: it’s hard to "change tiles" on the whole site at once, so we decided to do it in small iterations. So that you have time to get used to it, and we have time to respond to your feedback.
A redesign of Habrahabr and Gictimes. The finish line

Today we’re going to talk about the finish line and perhaps the key iteration: the redesign of the feed, publications, and comments. Let’s get excited!

Tape

We’ve updated the look of the "pre-roll" part of the publication, and as a consequence, the entire ribbon as a whole has changed.
Working on this part of the redesign is somewhat reminiscent of a game of "spots": each publication has a dozen mandatory elements (title, author, date, thread, hubs and/or company blog, metrics, flags, a few admin buttons) and relatively little room for maneuver. Every time you try to tamper with this part of the site, you have to weigh the pros and cons: which element should come first, which should come second, which should come third, etc. Brainstorm looked something like this :

– The header should be the first one, after reading it the user knows what’s going to be discussed next and decides whether to read further or not.
– Hmm, and if the title is not clear, for example, "Recall Everything" – whether it’s about backups or memory development – maybe then display a list of hubs first, so that the user can understand by them what area the publication is from?
– And maybe display the user’s nickname first, because there are quite a few authors whose articles are read without looking at titles?
– So, what if the publication came from a search – because then you have to figure out if it’s fresh or old?
– Also, you should let the readers know that the article is from a corporate blog and it may contain material of an advertising nature, too.
– Maybe the users should look at the rating of the publication first and if it is high, they automatically get under the cat?

All in all, there were more questions than answers. The situation is complicated by the fact that the text before the kata can be large (also with a picture) and some of the information may just not fit on the screen.
Scrolling through various scenarios and options, looking at hundreds of materials, we rearranged the display of the publication in the feed, changing the location of some familiar elements. Here’s how it was :


A redesign of Habrahabr and Gictimes. The finish line


And how did it become :


A redesign of Habrahabr and Gictimes. The finish line


Since the date has already been placed above the headers, why not try inserting information about the author? Then there would be room at the bottom, too. We tried it, measured it – it all fits, even there is still space for specifying the thread, which was removed from the title of the publication. The location of checkboxes ("Translation", "From sandbox", "Recovery mode", "Tutorial", etc.) constantly depended on the length of the title, to the point of ridiculous transposition (especially if there are several checkboxes at once). Now they do not draw attention to themselves, but are neatly arranged in a single row, as if they were the boundary between the "system information" and the beginning of the publication.
It was :


A redesign of Habrahabr and Gictimes. The finish line


Became :


A redesign of Habrahabr and Gictimes. The finish line


To put it simply, we tried to refresh and regroup all the major components of the publication preview in the feed as painlessly as possible, without damaging the old experience and user behavior patterns (i.e. everything that’s commonly called user experience).

Publication page

Walked the magic wand and what’s under the cat :
New fonts. As on many resources, fonts on the site are loaded depending on the user’s operating system :

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

Increased the font size. Not because we have problems with eyesight, but because it’s a right trend in modern web typography, and many of you have repeatedly complained about the small print. Not even so much complaining as occasionally writing in the comments that they read the site at +110%.
Brushed the headlines. Headlines used to be "liquid" (no weight) on Habra, so many users would often add bold to give a headline the weight it should have. Now that’s a thing of the past, headlines have become headlines. By the way, along with this we got rid of H1 header – now it’s only used in the title of the publication, so H2 and H3 will become the main ones.
– Rethinked other publication components such as spoilers, citations, bulleted and numbered lists (they became more sparse), source tag (framing appeared), abbr/sub/sup tags, etc. The citation was :
A redesign of Habrahabr and Gictimes. The finish line
And became like this :
A redesign of Habrahabr and Gictimes. The finish line
– We combed out the voting. Often the votes merged with the main text, and sometimes it was inconvenient to read the results. It was like this :


A redesign of Habrahabr and Gictimes. The finish line


And became kingsize :


A redesign of Habrahabr and Gictimes. The finish line


Rearranged the blocks at the end of the post :

  • Block with metrics and system buttons : edit, complaint, secret fic;
  • Block with information about the author of the publication : now fully fit profile description, contact information; large karma voting arrows finally appeared;
  • If the publication is from a corporate blog, the information about the company harmoniously and unobtrusively "sticks" to the information about the author :

A redesign of Habrahabr and Gictimes. The finish line
Became :


A redesign of Habrahabr and Gictimes. The finish line


Comments Off on

The first thing you’ll notice is that we’ve separated the comment voting arrows on different sides of the rating – now it will be harder to miss the arrow.
And so, "the little things" – redrawn the form of writing a comment, as well as all the icons, a little "defused" the space around the comments themselves. It was :


A redesign of Habrahabr and Gictimes. The finish line


Became :


A redesign of Habrahabr and Gictimes. The finish line


The old form of writing a comment :


A redesign of Habrahabr and Gictimes. The finish line


And the new :


A redesign of Habrahabr and Gictimes. The finish line


By the way, as our internal survey showed, many people are unaware of the two comment functions :
A redesign of Habrahabr and Gictimes. The finish line
You can see which comment a particular comment is written to (and then go back from it).
A redesign of Habrahabr and Gictimes. The finish line
For ease of reading, you can keep just one branch, hiding everything else.

To be continued

Those who have experience working with large projects know firsthand what any changes are worth and what they sometimes lead to. We had to be even more careful, because there are thousands of publications and comments on the site, many of which will be relevant years from now. It was important to keep this valuable luggage intact – one of the reasons why some of our changes seem somewhat compromising.
We have great respect for the experiences and habits you’ve accumulated over the years of reading the site (thank you!) and have tried not to ruin it all. But if you don’t agree with us (or find any bugs), let us know in the updated comments.
P.S. In the near future we’ll have more work with "tiles": we need to improve the work with forms (in profile settings, etc.) and completely update the mobile version. Don’t switch!

You may also like