Later Ctrl + ↑

The process of creating the Minsk Metro Map. Part Two

The process of creating the Minsk Metro Map: Part One · Two · Three · Four

In this note, I am going to talk about the design process of the metro map in March and April. Many people were surprised that it took us 8 months to make a map. I want to make a clarification. We dedicated to work no more than 8 hours a week on the map. In total, I spent 200 hours on this project.

March

We worked to find a proper visual language. After we studied Ilya’s edits, we rebuilt the older version. First, the descents of the lines that were on different levels have become smoother.

The following were the trees. We have collected a folder with pictures of trees. Some of them impressed us:

We were inspired and made a new version. We tried different colors and added details for the buildings. We made new trees and new river. We added gradient transition. We smoothed down the lines and added the shadow of the city center. Stations that were placed outside of the city center were shown as list with stations names.

Ilya answered us:

Parks, trees, river – amazing.

But in general, everything is formless. Half of the square is empty. On the central island you can clearly shrink part of the space. The font size of the park names is too small. You need to fill the empty quarters somehow with something else. There are too many breaks at the river behind the center.

Half of the red metro line is not named. It seems that to go from station Kupalauskaya to Pershamayskaya it takes a week. Im not in favor of the shadow that the city center throws onto the map.

In general, the form does not seem that beautiful, and the whole is more important than details. This does not mean that the details are not important.

And here I had an idea. If the form of center of the city seems not beautiful, then it is necessary to use a circle for shape. Therefore, we need to redraw the center of the city completely. I quickly made a draft and sent it to the art director.

Ilya said he liked the idea and asked to try to make the metro lines symmetrical. We drew cubes for the building that we were planning to add. Also we added a green metro line. This is the rough layout of the result:

Ilya’s answer:

We need to squeeze or fill the free quarters on the map.

Circles are for nothing darker than lines. Need a new font, this one does not work. The logo of the subway that you have is not very attractive, the current one is better.

We need to redraw everything from scratch. I made the draft in notepad.

It became clear that the streets should be drawn at 45 degrees (breaking the geography parameters). It looks aesthetically more pleasing, and it became easier to draw.

April

In April, we worked on city. We made all streets to be under 45 °. Everything appeared little bigger. Also we added a green metro line. We begin to draw hills and trees in the parks. After all, the center of the city accidentally appeared as wink smile.

Ilya writes:

We must shorten the distance between Kastrychnitskaya station and Ploscha Peramogi station and somehow get the intersection of the red and blue lines in the center of the circle.

The color of the stops is different from the color of the lines.

The green metro line is poorly seen over the park.

I made a new prototype of the map and showed to Ilya.

At the same time, I decided to try new designations of stations in the center and behind it. Behind the center-ordinary square, in the center – rectangle.

The answer of the art director:

Parks should be made smoother, especially where the green metro line is. Let’s just do it without a legend. Let’s try to type everything on the map.

It is necessary to understand the useful information that we will place below. Working hours? Tickets?

The shapes of stations in the center aren’t good.

The top stations of the blue metro line near the circle you should write on the right. You need to make the river look less bright.

Contrast of the font size between central and non-central metro stations should be made larger or just don’t do it.

Let’s fix the transliteration?!


The process of creating a Minsk Metro Map: Part One · Two · Three · Four

The latest version of the Minsk Metro Map.

2019   map

The process of creating the Minsk Metro Map. Part One

The process of creating the Minsk Metro Map: Part One · Two · Three · Four

It seems like every designer has to draw a version of the metro of the city which he lives.

Start

The idea to draw a map of Minsk Metro came to mind when I saw the updated version of it from another designer. Maps were installed at a few metro stations throughout the city.  I saw it face to face in a subway station of Urucha. It looked like this:

I thought it was possible to make the metro maps more simple and more informative. In its current state, it features too much useless information and the accents are not placed correctly.

I started to accumulate a collection of well-made maps, and I was amazed by Ilya Birman’s helpful tips. I looked through the maps from Ilya’s portfolio. After reading the description of the construction of the Metro map of Ekaterinburg, I realized that I can write Ilya a letter to ask for his advice. I quickly sketched the test version at sufficient level and sent a email. This is what the first version looked like:


I could not refuse the deal that Ilya offered (all messages are translated by me):

If you want to do the map together then I want to be the art director of the project and I’ll release it on my website. Of course, it will state that you are the designer. I’ll dive into everything and give you detailed comments, advise how to communicate with the city authorities and with an advertising agency.


At the same time the final word in the design will be mine. I’ll make you redraw a bunch of things hundreds of times, and try different versions. I need you to be proactive. Also, call me again when I don’t answer for a long time. It will be a confidential project before its release. If we do not complete it, it will not be possible to release it without an agreement with me.

I understand that it is hard, but if you agree, I will be ready to give this time and effort.


Productive work begins. I was so excited with the idea that I was ready to make edits for days, absorbing new knowledge and ideas. By the way, I knew the app Illustrator very poorly and never made a map or something like that.


A piece of the center of New York

A week later Ilya proposed to draw the city in detail:

If there are only two metro lines in the city, you have to draw the rest of the city as well.


Let’s show some pieces of the center more closely for the map to be interesting. For outside of the center, we will leave only the remaining stations.


It was necessary to fill in evenly all of the blank spaces in order to use the map efficiently. I liked the idea. I drew first the river, main streets, parks, metro exits, railroads, and even exits to tram tracks. I then added the buildings. We have reached this version:


After a month of work, the interest level began to fall slightly. And then I was very encouraged by the news from Ilya, and it appeared at the perfect moment.


Another designer came to me who also wanted a map of Minsk Metro to draw on the same terms I certainly don’t mind doing both, but I’m telling you just in case. Let me know if you don’t want to continue the project. Tell me, if you think there’s something wrong.

IIlya offered to show my version to another designer. He told me he could help with the isometric in the buildings. I was excited about the collaboration. And so, I met the cool designer Kostya Eustrenko.


Trees in the Berlin Tiergarten

Kostya and I met the next day. We spoke about ourselves and began to write a list of ideas. We immediately divided the areas of responsibility and decided on how we will work. Kostya took the isometric sights, and I managed the rest.


In order to understand how to display parks and rivers even more on the maps, Kostya asked Ilya a few questions. A few days later, Ilya gave us detailed answers about the rivers and parks. 


February

In February, we concentrated on drawing the center of the city. We expanded it and added a green metro line. We have compiled a list of streets that are included in it. I began to redraw lines and stations, selected the border radius for streets and lines. I offered Ilya several stations as options in the center:


Kostya drew several drafts with different details:


We added the highway, lines and river. As well as we added several buildings in the center. We prepared the version on a white background and on blue background. We decided to pick white because it looks nicer.


We wrapped the map and sent it to Ilya. The next day, we got a detailed answer. Ilya does not like the general coloring. He thinks that buildings are too shiny and the shadows of the center are terrible.


Lines on different levels look good. However, this won’t work because people will be confused! The station’s sign needs to be larger.


The transition needs a beautiful gradient.


The road doesn’t look good. The plane icon is very small.



Ilya advised to look for color maps for buildings in the game “Monument Valley”. There are a lot of cool buildings.



The process of creating a Minsk Metro Map: Part One · Two · Three · Four

The latest version of the Minsk Metro Map.

2019   map

Radioemoji 1.0

Radioemoji is a plugin that will help you to find out what users think about your content. Seven emotions in a set, any text on the buttons.

Users leave their emotions, the plugin counts them and displays the number:

Counters are connected to the database of the site owner, authorization works on browser Fingerprint technology. The number, text and images of emotions can be changed.

Designer is Ivan Zviahin, programmer is Olga Mokhova.


The plugin is free for everyone: radioemoji.intuition.team

App Sovest

Sovest is a deferred payment card. Previously, the application could not be used until you order a card. The motivation to get one was small. Now the application shows a huge selection of products and features of the card, while offers to order it.

Smart output of goods

In the first screen the app shows the products that you can buy. After mixing lists of partner stores, special offers, promotions and offers to order a card:

If the map is already there, the application tries to report any interesting information:

The list of products is impressive in its diversity. But if you’re looking for something specific, a “smart” search will help you. If you go to a specific category, the app shows interesting products from other categories:

The application remembers the interests of the user, so everyone gets a list of products that are collected individually for him. The list is collected automatically by templates and rules. Templates and rules use the proportions and nature of the photos:

Item card

The application shows the goods, tells how much will cost a monthly payment, the duration of the deferred payment and the number of points that you will receive after repayment. The application says where you can buy the goods and from which sellers it is also. The application asks for personal data if the card is not yet issued:

Store card

The application shows all the products of a particular store and contacts:

In addition to cards and product list

We have designed about fifty screens and animations for selecting and viewing products, searching and filtering, different stages of ordering and delivery of the card, setting up a user profile, repayment of deferred payment, motivation for further purchases, loyalty program. For example:

In real life, look in the App Store and Google Play

The design of the application is made in six weeks from January 22 to March 14, 2018.
Ilya Birman is art director and designer, Ivan Zviahin is designer.

Website Brumby

The task is to make a minimal first version of a website for a startup from Amsterdam. The site says that the company helps professionals find the best companies, and companies find the best professionals around the world. The site tells the idea of the name of the company and gives contacts:

The site works on mobile devices:

I made the site design and logo. We spent two weeks on everything.

2019   brumby   done   website
Earlier Ctrl + ↓