How I did the design for the "Habr clone"

As many have already guessed from the title, it will be about the LiveStreet engine, or rather, about the basic Synio template, which is included in the CMS assembly, and the author of which I was lucky to become.

Today I would like to tell you about the process of its creation and about what we managed to realize.

What is good design?

')
As a digression, I want to say that, in my opinion, design is first of all functionality and attention to detail. Not the ability to choose a combination of colors and even not the ability to make beautiful graphics, namely, convenience and love for trifles are, I think, the main components in the formula of any successful design.

---

Task

Any project, in my opinion, should start with the formation of the project objectives.

And in this case, the solution of the problem should be a template that is suitable for different projects by subject, with a simple but functional interface and a simple color scheme that could be safely changed in the future.

---

Analysis

Once the task is clear, you should study the market. In simple terms, understand user needs and analyze existing projects in this environment.

Of course, if you go back to the history of creating LiveStreet CMS, then the first person you should pay attention to was Habrahabr, because it was the Habr functional that was at the bottom of this engine.
But for three and a half years ( and by that time it was exactly that time that turned to Livestritu ), the differences in functionality were already significant.



In addition to Habr, there were other blog-social and news sites, the experience of which I began to explore.
For example, “ Look At Me ”, “ Poster ”, “ DOU ”, “ LJ ”, “ Reedus ” and others (about 15 in total). I took a piece of paper and looked for the most successful solutions in functionality.

---

Teamwork

Of course, when creating a design, constant consultations are required with those who know the functionality from the “inside” - with the system developers.

A curious fact is that due to the geographical location, I am with the LiveStreet CMS development team in different countries and time zones, and we have never met in person, although we have known each other for several years.

Therefore, for remote communication, we used three main tools: GMail (and GTalk in particular) - for brief discussions, Worksection - it did the main work, discussion of tasks and intermediate results, and of course Skype - for long debates and “offtopic” topics ( where do without them) .

pros

The main advantage of remote work is the ability to work in your own schedule of the day - for example, I often sit at night if the work is interesting. In addition, you can significantly save time without going to the office (for large cities it is from forty minutes to two hours daily) .

Minuses

The disadvantage of this method of work is a longer stretch of time than, as it seems to me now, it could be if we were sitting in the same office and “kicking” each other with enviable regularity. But despite this, we have achieved the desired results.

---

New in the design of the base template

Turning to design, I remind you that, as I wrote earlier, the functionality should have become the cornerstone of the new design. And I tried to introduce the experience of other projects and supplement it with my own ideas.



A. Visual block
The new version has a graphic block with the image of the possibilities that appear to the user after clicking the "Create" button.

At the same time, you can switch between creating a blog or a topic and in the next step, directly in the creation form.



B. Number of voters for the topic
It was decided to make statistics on the number of voters and abstentions in a separate pop-up block, which appears after hovering over the voting element.

C. Navigation unit
A quick navigation block has been added that allows you to switch from one topic header to another. Also on it there is a neat button "Top".

D. Selection of "topikstarter"
In the comments, the author's nickname is underlined to make it easier to distinguish it from other participants in the conversation.



E. Convenient search and sort users
In the " People " section, you can quickly search by username. As well as sorting alphabetically, strength and rating. As well as the ability to display users who are currently on the site.



F. Text of the comment live
Live added the ability to quickly view the text of the comment in the pop-up block. And now there was no need to go to the topic to find out whether you are interested in it or not.

G. Quick search by tags
The block with tags was supplemented with the ability to switch between common and own tags. And also there appeared a search with tips.

H. Ability to quickly join a blog with one click
In front of each blog name in the same section appeared buttons "Read", by clicking on which the user becomes a blog reader.



I. Photo upload

Separate attention deserves loading photos. In one compact unit, the ability to upload a photo to a topic from a computer or from the Internet is realized, or simply to place it by indicating a direct link.



J. Different avatars
The undoubted "beauties" that we wanted to realize are distinguished avatars for the beautiful and strong sexes. Now, if the user has not uploaded his photo, but indicated the gender, it will be possible to distinguish him by gender and in the photo.

---

Summarizing

In total, more than 35 screens and about 50 various icons and pictograms have been drawn for the project.



The main stage of work on the design lasted two and a half months , but even now there is a need for drawing to implement new ideas and additional functionality.

In general, working on this project, in the same team with such talented people as ort and deniart , turned out to be an exciting and enjoyable experience.

PS

For those who have not yet seen how the new design looks in life - this link is for you.
If someone has questions about the design of templates on LiveStreet - ask, I will try to answer.