More selected projects

Arthive 3.0
Social network for art lovers

Year:
2012 — to the present

Role:
Designer, Product Designer

Arthive — website about art. There is an editorial office, and website contains a base of 275 thousand works, there is a platform for selling paintings and a community for art lovers and artists. 

For arthive I created a system that would put the design of the whole project in order. The system will be introduced gradually over a long time, but the first results can already be seen on the project website.

In addition to the desire to streamline elements and simplify further work for themselves and developers, a critical mass was gained by changes in the company's products. It was necessary to bring website to a single structure.

Artchive.ru

The concept of loading the main page and the slider

First of all, it was decided to redesign the most visited pages and sections of the project. The main page has been almost completely redesigned. Only the news block retained the usual structure, although it was seriously reworked. A promo block was added with information about other Arthive products that were “hushed up” by the previous version of the page.

The base of exhibitions is constantly updated with users and editors, so it took an honorable third place on the page. A feed has been added to the bottom, which has made the entry page of the project endless.

The animation of the "fact of the day"

The following sections to which we paid attention were the Works and Artists. In these sections there were several problems that needed to be solved. And the technical processing of sections, allowed us to make a deeper redesign.

The concept of the table in the block "Old Masters"

In the artists section, the main problem was that the conclusion of artists in the default list was determined by popularity. As a result, the well-known old masters who gained popularity did not allow any modern or simply new artist to “seep” onto the first screen. On the other hand, we could not rework the algorithm and put dependence on activity. After all, then on the contrary, the old artists would be completely replaced by new ones.

As a result, we went to the separation of Old Masters and modern artists on the entrance page of the section. They are now ranked in their own way and have two separate pages.

In the section of works, we also had problems with the delivery of relevant and interesting content to the viewer. The treasures lay in the depths of the system, but we could not show them, because not a single intelligible sorting of the works was enough to show the best and remove from the eyes of sophisticated lovers the experiments of beginning artists.

To help the works of artists to be sold on the market, we reoriented the work page to a commercial tone, highlighting the block of price and work information.

Artwork page

We have gathered a lot of information from users that the current system of creating exhibitions and other objects in Arthive is inconvenient. In addition, they are morally obsolete. Therefore, the processing of all forms has become a separate major history. At the same time, we decided to simplify and clean them from entering extra information.

Adding an artwork

Adding an exhibition

Adding a post

A minimum of functional changes was made to the exhibition section. It's only inherited the visual part adopted in the design of the previous sections.

The concept of the animation of the exhibition slider and the transition to the exhibition page

Process. Creating a system.

Separately, I want to talk about the creation of a system that formed the basis for all changes. The desire to create such a structure arose after the previous version had acquired a large list of new features, which were not provided at the start. It was becoming difficult to work on the addition of new elements, and the introduction cost more and more.

For a start, we decided to collect all the Arthive screens in one place to determine the main patterns that are used in the project and to understand how it is easiest for us to combine them into a single system. How to build this system of objects, on what basis to combine the elements and even how to call them.

Previous version layouts

After that, we decided to choose fonts. After a long selection, we decided to use two fonts. One — the main system font. The second is for texts on news, knowledge, encyclopedia pages.

fontsfonts

The next step was to build a UI Kit. We had two options for how to act. The first option is to work out the UI kit completely and then spread it on mockups. This approach was applied when we created a bikenet. The second approach is to create and replace the UI Kit gradually.

Initially, we aimed at the first option, however, given the technical limitations, we would not be able to implement even small changes quickly and everywhere. Therefore, we decided to accumulate and expand the collection of items as needed.

We have divided the UI Kit into several parts:

- Items
- Cards
- Content
- Blocks
- Headlines
- Icons
- Tape
- Modal windows
- Through elements

The elements that are without a doubt, the skeleton of the entire project. Forms, buttons, colors, all kinds of links, drop-down lists, switchers and many other details that make up the functional part.

UI. Elements.

Each page is divided into two parts. Through elements: the top, bottom, pagination, header block, filters, sorts, and content. Content on the pages consists of a stream of "information cards" that lead to their own pages: articles, pages of works, artists, exhibitions, galleries, users, collections, and so on.

Therefore, we decided to bring the cards into a separate system of UI elements.

In this UI block, we have collected all, or almost all, text styles. It is absolutely necessary when working with a super-large project, like Arthive. As an addition, an attempt was made to synchronize the font sizes on the desktop with their sizes in the mobile version of the project. Unfortunately, this does not always provide the necessary flexibility to the project, so this works like a “default rule”, but can be broken.

Separately, it should be said that the approach to text styles was not easy. It was originally planned to collect styles, including leading and color. However, later it became clear that this dramatically increases the number of styles, since leading varies depending on the width of the page, and the text color can be any within the limits of the color gamut adopted in the project. Therefore, at present, we only collect font sizes, and leading is only a recommendation and can be flexible.

Galleries, lists, downloaders, video frames and other functional elements of the project are here.

Ui. Functional and content blocks.

Another piece of content. In order not to produce dozens of different types of headings for each page is easier and more convenient to come to 3-4 options for header blocks. The header block includes a section submenu and informational text about that is used for seo.

The icon collection has always been a weak point of the project. FontAwesome font icons have been used for a long time. However, due to the quality of font icons, we began to create our own sets. In addition, we inherited part of the collection from the mobile application.

The specific section of the UI Kit, which is unique to this project and is divided into the internal components of which consists of each card in the feed.

UI. The basic elements of the post in the tape.

UI. Content blocks post of the feed.

Modal windows

Contain some rules for the modal windows of the project. Previously, most forms were in modal windows. This should have become an important part of the UI Kit. However, we abandoned this approach, therefore, modal windows were used much less frequently.

UI. Modal windows.

Through elements

Here is a set of elements that are somehow connected with the header and footer and can cross through all the pages of the project or entire sections. 

On this block, the content of the UI Kit ends. Such a partition allowed us to create a fairly stable and flexible system, on the basis of which all the pages of the project are built on a template.

The designed system is currently being gradually introduced, replacing the current project templates with updated versions.

UI. Through elements.