Projects 

Mimic 2.0: The client’s feedback 

I’ve recently designed the new user interface for Mimic, a web developer tool for mocking server responses in a browser. Ilya Gelman, one of the Mimic’s developers, comments on working with me:

Ilya is of that rare kind of designers that seek to find solutions to problems instead of matching colors and shadows. He asks the right questions, concentrates on important things and understands that real products aren’t just beautiful pictures on dribble. He helped us redefine our tool to make it simpler to use and easier to understand.

Working with local Israeli designers, we usually communicated by real-time channels like Slack, WhatsApp or phone. It was a bit different with Ilya because we had to communicate mainly via email and had to schedule our calls ahead of time. Part of this was the difference in time zones and part of it was Ilya’s principle of managing his own time, which I can fully understand and respect. All in all we never had an issue of lack of communication and everything was always delivered on time.

What I liked about Ilya the most is that he was able to explain the reasoning behind his design decisions, and that he knew how to work together with us to get our tool released on time.

   
Apr 1   feedback   projects   quotes

User interface for Mimic 2.0 

A web application’s front end (what the user sees) and back end (what happens on a remote server) are often developed separately. If the back end of some feature is not ready yet, the front-end developer is very limited in what they can do.

I’ve designed the user interface for Mimic 2.0, a web developer tool for mocking server responses in a browser. With Mimic, you can develop as if the server was alive. It’s very easy to set up a simple mock. Say, you want to pretend the server responds with a line of JSON:

It lets you set up very advanced mocks, adjusting HTTP headers, timeouts and what not:

The great thing about Mimic is that you don’t need to set up a local server and change request URIs in your application. It works with the existing applications as they are, right in the browser. And you don’t even need to install browser extensions: you just link one script to your application and that’s it.

Read more about the user interface on the project page.

   
Mar 17   projects   user interface   web
2017   Ekaterinburg   projects   transportation

Introducing Aegea 

Introducing Aegea, a great blogging engine.

An engine is a program that runs on the blogger’s website. It provides the writing tools to the author, shows the posts to the readers and lets them write comments. Medium.com (or similar) is simpler, but they can shut down and take all your posts offline. With an engine, the blog runs on your own website and you have access to the files and the database (you don’t have to deal with the files or the database, but you own all the data).

I want most people to have access to personal blogging in this way. That’s why it uses the most easily available platform: PHP with MySQL.

Aegea powers this and many other blogs. Among my favourites:

With Aegea, you can use the built-in neutral theme or customise it however you like (this blog is an example). Be flexible with comments: allow and disallow them globally or per post. Refine posts using Drafts. Add images, videos, audio or code to illustrate your point. Organise your writing with tags.

Designers, writers, musicians and software developers use Aegea to show their work, communicate and spread knowledge. They love it because it’s simple and fast yet does everything they need. Aegea is free for personal use and paid for business use.

Learn more and get Aegea at blogengine.me.

   
2016   Aegea   my products   projects   release

Sayve, a reliable voice recorder and recogniser 

Sometimes an idea comes to mind when I am running or driving and I can’t write it down. I just want to say it to my phone and I want the phone to remember it. Unfortunately, there was no tool for this.

Siri needs Internet and is stupid. When it fails to recognise what I’ve said, there is no way to get back to it later. Keyboard dictation works offline most of the time, but if you aren’t lucky, the original audio recording is also lost. Also, you have to remember to pick the right keyboard language before starting dictation, otherwise you will also lose everything. The Voice Notes app records audio, but does not recognise speech. To find the necessary recording, you need to listen to each as they all look the same.

That’s why together with the developer Michael Rubanov we made Sayve — a reliable voice recorder and recogniser. It works like this: when you open the app, it starts recording and recognising immediately. When you are done speaking, it underlines the words it’s unsure about.

Sayve, a reliable voice recorder and recogniser

You can tap the words and replace with the alternatives. If it’s completely wrong, you can re-listen to the audio. Raise the phone to your ear to listen through the ear speaker.

You can change the recognition language after recording, and it will re-recognise the recording. Then you can export everything to Notes.app or whatever.

We can’t always recognise speech without Internet. But audio is stored permanently, so you won’t lose your thoughts in any case. Also we’ll try to recognise it later, when Internet is back.

Here is the button:

Get for free in the App Store

For free for now, but we’ll see.

   
2016   projects   Sayve

Fifth version of the Moscow Metro map 

I made my first Moscow metro map in 2007. The official map was disgusting then, but nobody cared. My work inspired many designers to try to design their own map. I know several designers who gave up after they’ve appreciated how hard the task actually was. I had two major revisions of my map including the one for the official 2013 competition for the new map to be used on the system. In that version I’ve solved the problem of the Biblioteka imeni Lenina junction and invented the Compass (more on that on the 2013 map’s page in my portfolio). I took the second place. It took most of the 2015 to design the next version of the map: it used space more efficiently and the overall graphical design was improved.

Here is the new version, with the new Circle Railway (Line 14) added:

Compared to the official map, this map has almost 35% larger font when printed as same-size poster:

Fifth version of the Moscow Metro map

See the project page for detail.

   
2016   design   moscow metro   projects

Ekaterinburg metro map 

Check out this new Ekaterinburg metro map:

Designed by Pasha Omelyohin, directed by myself.

A large metro network works like teleport: people don’t care how it gets you from point A to point B, it just does. In London, Paris or Moscow metro maps do not show the surface geography: there is no room. And for many people, the metro map is the map of the city.

But that’s not the case for the small metros. Designing a map for a small metro this way makes no sense:

This does not contain any new information compared to a plain list of stations. The need to simplify and get rid of surface details only occurs when the complexity of the map gets in the way of finding your route. Ekaterinburg does not have this problem.

When there is one metro line, there is no teleport effect. It is very important to show how the metro is connected to the surface:

That’s why we list the routes of buses, trolleybuses and trams, show metro exit locations, nearby streets, parks, the river Iset, railway and coach stations:

   
2016   Ekaterinburg   projects   transportation

The fourth version of Moscow metro map 

I made my first Moscow metro map in 2007. The official map was disgusting then, but nobody cared. My work inspired many designers to try to design their own map. I know several designers who gave up after they’ve appreciated how hard the task actually was. I had two major revisions of my map including the one for the official 2013 competition for the new map to be used on the system. In that version I’ve solved the problem of the Biblioteka imeni Lenina junction and invented the Compass (more on that on the 2013 map’s page in my portfolio). I took the second place.

In the beginning of 2015 I saw many ways to make my map better. I wanted to use the space more efficiently and to improve the graphical design: remove the dirty gradients and pseudo-realistic shadows, use beautiful peanut-like transfers that I imagined. It took most of the 2015 to design the new map.

Here it is:

I like it on every level, it’s beautiful. I’ve spent much time to perfect the overall shape, the graphical rhythm, the relationships between the widths of the lines, ticks and circles. Inside the Circle line, I’ve found the most even distribution of captions and white space. This not only looks calm and unforced, but also makes possible a significant font size increase as the space is never lost.

I also had to engineer a special version of the PT Sans font for the map. I used PT Sans in the previous version and I like it. But it has a problem: the capital letters are too high. When you have a multi-line caption, you have to make its line height quite large, which is hindrance when you strive for density. So I had to create a version of PT Sans with lower capitals and slightly less prominent accents specially for the map. Thanks to Anna Danilova for help with this.

Go see the new map’s page in my portfolio. There you can also download a PDF to see the map in detail. Don’t forget to share.

   
2016   design   moscow metro   projects
2016   Jouele   projects   web

Jouele 2.0 

Jouele 2.0

Three years ago I made Jouele, a good audio player for the web.

Eugene Lazarev has made version 2.0. The player has dropped the skeuomorphic look and got even nicer. It is now easier to customize the colours. The new version has dynamic initialisation, and is a jQuery plugin with an API (these are presumably good things). I have installed it on my website.

Related:

   
2015   Jouele   projects   web
Ctrl + ↓ Earlier