{ "version": "https:\/\/jsonfeed.org\/version\/1.1", "title": "Ilya Birman’s Blog: posts tagged projects", "_rss_description": "Ilya Birman’s blog on design, cities, music, and life", "_rss_language": "en", "_itunes_email": "ilyabirman@ilyabirman.net", "_itunes_categories_xml": "<\/itunes:category>\r\n<\/itunes:category>\r\n\r\n", "_itunes_image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic-square@2x.jpg?1573933764", "_itunes_explicit": "no", "home_page_url": "https:\/\/ilyabirman.net\/meanwhile\/tags\/projects\/", "feed_url": "https:\/\/ilyabirman.net\/meanwhile\/tags\/projects\/json\/", "icon": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764", "authors": [ { "name": "Ilya Birman", "url": "https:\/\/ilyabirman.net\/meanwhile\/", "avatar": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764" } ], "items": [ { "id": "384", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/tashkent-metro-wayfinding\/", "title": "Tashkent Metro wayfinding", "content_html": "

I’m happy to show and tell you about a great and very interesting project I’ve done last year. Tashkent Metro wayfinding<\/a>:<\/p>\n

\n\n\"\"\n<\/a><\/div>\n", "summary": "I’m happy to show and tell you about a great and very interesting project I’ve done last year. Tashkent Metro wayfinding", "date_published": "2025-12-25T15:52:20+03:00", "date_modified": "2025-12-25T15:51:44+03:00", "tags": [ "projects", "Tashkent", "transportation", "wayfinding" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tashkent-metro-wayfinding-cover.jpg", "_date_published_rfc2822": "Thu, 25 Dec 2025 15:52:20 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "384", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tashkent-metro-wayfinding-cover.jpg" ] } }, { "id": "379", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/superpedestrian\/", "title": "Superpedestrian fleet management interface", "content_html": "

Check out the Superpedestrian fleet management interface:<\/p>\n

\n\n\"\"\n<\/a><\/div>\n

I like designing interfaces of this kind where you need to figure out an obscure process.<\/p>\n", "summary": "Check out the Superpedestrian fleet management interface", "date_published": "2025-07-18T18:39:08+03:00", "date_modified": "2025-07-18T18:30:49+03:00", "tags": [ "interface", "projects", "release" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/superpedestrian-cover.jpg", "_date_published_rfc2822": "Fri, 18 Jul 2025 18:39:08 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "379", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/superpedestrian-cover.jpg" ] } }, { "id": "378", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/samara-metro-map\/", "title": "Samara metro map", "content_html": "

Check out the new Samara metro map<\/a>:<\/p>\n

\n\n\"\"\n<\/a><\/div>\n

Designed by Nikolay Romanov, directed by myself. Special thanks to Sergey Chikin and Leonid Motovskih.<\/p>\n", "summary": "Check out the new Samara metro map", "date_published": "2025-06-09T10:26:07+03:00", "date_modified": "2025-06-09T10:26:01+03:00", "tags": [ "maps", "projects", "release", "Samara", "transit maps" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/samara-metro.png", "_date_published_rfc2822": "Mon, 09 Jun 2025 10:26:07 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "378", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/samara-metro.png" ] } }, { "id": "375", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/parus-wayfinding\/", "title": "Wayfinding elements for “Parus” station", "content_html": "

Another project, wayfinding elements for “Parus” station<\/a>:<\/p>\n

\n\n\"\"\n<\/a><\/div>\n", "summary": "Another project, wayfinding elements for “Parus” station", "date_published": "2024-11-11T09:40:08+03:00", "date_modified": "2024-11-11T09:39:54+03:00", "tags": [ "maps", "projects", "release", "wayfinding" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/parus-map.jpg", "_date_published_rfc2822": "Mon, 11 Nov 2024 09:40:08 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "375", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/parus-map.jpg" ] } }, { "id": "373", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/wb-suppliers-wayfinding\/", "title": "Wayfinding for Wildberries suppliers", "content_html": "

Check out a new large project<\/a>: wayfinding for suppliers of Wildberries, the largest Russian online retailer.<\/p>\n

\n\n\"\"\n<\/a><\/div>\n

Wayfinding is not about drawing signs, but about streamlining the whole scenario of how people find something, and even how they understand what they need to look for. The project included signage, maps, printed instructions, a mobile website, an LED board, and a banner. And that’s all systematized for multiple warehouses.<\/p>\n", "summary": "Check out a new large project: wayfinding for suppliers of Wildberries, the largest Russian online retailer", "date_published": "2024-10-31T12:09:13+03:00", "date_modified": "2024-10-31T12:08:32+03:00", "tags": [ "projects", "release", "wayfinding" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/wb-wall-kl@fx.jpg", "_date_published_rfc2822": "Thu, 31 Oct 2024 12:09:13 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "373", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/wb-wall-kl@fx.jpg" ] } }, { "id": "370", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/tashkent-metro-map\/", "title": "Tashkent Metro map", "content_html": "

Check out our new Metro map for Tashkent, Uzbekistan<\/a>:<\/p>\n

\n\n\"\"\n<\/a><\/div>\n", "summary": "Check out our new Metro map for Tashkent, Uzbekistan", "date_published": "2024-02-03T18:31:31+03:00", "date_modified": "2024-02-03T18:31:21+03:00", "tags": [ "design", "projects", "transit maps", "wayfinding" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tashkent-metro-train.jpg", "_date_published_rfc2822": "Sat, 03 Feb 2024 18:31:31 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "370", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/tashkent-metro-train.jpg" ] } }, { "id": "360", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/chelyabinsk-transit-reform-communication\/", "title": "Chelyabinsk transit reform communication", "content_html": "

Check out the case about one of the stages in Chelyabinsk transit reform communication<\/a> — route changes from January 1, 2022:<\/p>\n

\n\n\"\"\n<\/a><\/div>\n", "summary": "Check out the case about one of the stages in Chelyabinsk transit reform communication — route changes from January 1, 2022...", "date_published": "2023-08-08T14:24:33+03:00", "date_modified": "2023-08-08T14:23:30+03:00", "tags": [ "design", "projects", "release", "transportation", "wayfinding" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/chelyabinsk-transit-reform-communication.jpg", "_date_published_rfc2822": "Tue, 08 Aug 2023 14:24:33 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "360", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/chelyabinsk-transit-reform-communication.jpg" ] } }, { "id": "355", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/dom-toma-website\/", "title": "Dom Toma’s online store", "content_html": "
\n\n\"\"\n<\/a><\/div>\n

Check out my design project from 2019: an online store for ‘Dom Toma’<\/a>. I had to manage to show both the variety of the collection and the individuality of the items. Repost everywhere and come back for good design!<\/p>\n", "summary": "Check out my design project from 2019: an online store for ‘Dom Toma’. I had to manage to show both the variety of the collection and the individuality of the items", "date_published": "2023-06-25T13:52:20+03:00", "date_modified": "2023-06-25T13:52:15+03:00", "tags": [ "design", "projects", "web" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/dom-toma-cover.jpg", "_date_published_rfc2822": "Sun, 25 Jun 2023 13:52:20 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "355", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/dom-toma-cover.jpg" ] } }, { "id": "342", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/derbent-bus-map\/", "title": "Derbent bus map", "content_html": "

Check out our new transit map. This time it’s Derbent<\/a>:<\/p>\n

\n\n\"\"\n<\/a><\/div>\n

We made it with Nikita Dubrovin. The city is undergoing a public transport reform. The first bunch of bus routes have been simplified: 3, 4, 7, 10. The challenge was to lay out the old routes, which are still confusing. In several years, all routes will look reasonable.<\/p>\n", "summary": "Check out our new transit map. This time it’s Derbent", "date_published": "2022-10-25T16:11:36+03:00", "date_modified": "2022-10-25T16:13:22+03:00", "tags": [ "projects", "release", "transit maps", "transportation", "wayfinding", "work" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/derbent-bus-map-cover@2x.jpg", "_date_published_rfc2822": "Tue, 25 Oct 2022 16:11:36 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "342", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/derbent-bus-map-cover@2x.jpg" ] } }, { "id": "336", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/bus-lane-sign\/", "title": "Bus lane sign", "content_html": "

Together with Nikita Dubrovin, we made a new road sign<\/a>:<\/p>\n

\n\"\"\n<\/div>\n

The text says: “Dedicated lane only for fixed-route transport. In operation since 28th of August. Fine for entry: 1500 ₽”.<\/p>\n

In some cities public transit is just beginning to receive proper treatment. Many drivers are yet unaccustomed to bus lanes and may ignore the official sign 5.14 “Lane for fixed-route transport”. Our sign explains the idea of a dedicated lane in words, while also teaching standard signs and markings.<\/p>\n", "summary": "Together with Nikita Dubrovin, we made a new road sign", "date_published": "2022-10-09T17:22:47+03:00", "date_modified": "2022-10-09T17:20:40+03:00", "tags": [ "design", "projects", "road signs" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/bus-lane-sign@2x.png", "_date_published_rfc2822": "Sun, 09 Oct 2022 17:22:47 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "336", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/bus-lane-sign@2x.png" ] } }, { "id": "330", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/barprephero-ui\/", "title": "BarPrepHero user interface", "content_html": "

I designed the new user interface for the BarPrepHero app<\/a>. Now it stands out among apps for lawyers:<\/p>\n

\n\n\"BarPrepHero\n<\/a><\/div>\n", "summary": "I designed the new user interface for the BarPrepHero app. Now it stands out among apps for lawyers", "date_published": "2021-10-18T15:47:57+03:00", "date_modified": "2021-10-18T15:47:43+03:00", "tags": [ "design", "interface", "projects" ], "image": "https:\/\/ilyabirman.net\/meanwhile\/pictures\/barprephero-ui.jpg", "_date_published_rfc2822": "Mon, 18 Oct 2021 15:47:57 +0300", "_rss_guid_is_permalink": "false", "_rss_guid": "330", "_rss_enclosures": [], "_e2_data": { "is_favourite": false, "links_required": [], "og_images": [ "https:\/\/ilyabirman.net\/meanwhile\/pictures\/barprephero-ui.jpg" ] } }, { "id": "307", "url": "https:\/\/ilyabirman.net\/meanwhile\/all\/jouele-pro\/", "title": "Jouele Pro", "content_html": "
\n\"Jouele\n<\/div>\n

Jouele is an amazing audio player for the web. It was built to look simple and beautiful, and to use a simple and beautiful declarative API. With Jouele, you write code like this:<\/p>\n

<a href="ilya-birman-use-me-mix.mp3" class="jouele">\n  Ilya Birman: Use Me (DJ Mix)\n<\/a><\/code><\/pre>
And you get a player like this:<\/p>\n
\n
Ilya Birman: Use Me (DJ Mix)<\/a><\/div>\n<\/div>\n
Playlists, repeating and keyboard control were gradually added in the recent years. But we wanted Jouele to be even more advanced and versatile. And we didn’t want to sacrifice the declarative nature of Jouele’s APIs.<\/p>\n
So we came up with something great: Jouele Pro<\/a> with custom controls. Let me tell you about it.<\/p>\n
What you can do with Jouele Pro<\/h2>\n
I’ve recently started publishing interactive playlists<\/a> for my DJ mixes. You can click the cover art to start and pause playback. You can click a track’s name, and the mix will jump to that track. And the currently playing track gets automatically highlighted in the playlist when the playback reaches it.<\/p>\n
Try it<\/a> before reading on.<\/p>\n
The magic is that neither the cover art, nor the playlist are a part of the Jouele user interface. The are just part of the page, layed out the way I want. But they gain their special abilities by using Jouele Pro’s declarative API.<\/p>\n
So I have a player inserted with the code above, by using the CSS class jouele<\/tt> on an HTML a<\/tt> element. And I want the cover image to initiate and pause playback.<\/p>\n
Here’s what I do:<\/p>\n
<img\n  src="cover.jpg"\n  class="jouele-control"\n  data-type="play-pause"\n\/><\/code><\/pre>
That’s it. Now, when you click this image, the mix starts to play.<\/p>\n
And to make the playlist items clickable, I do this:<\/p>\n
<tr class="jouele-control"\n  data-type="seek" data-to="0:45:38"\n>\n  <td>0:45:38<\/td>\n  <td>Tensal<\/td>\n  <td>Achievement 3<\/td>\n<\/tr><\/code><\/pre>
Now when you click on a track’s name, you go directly to it in the mix.<\/p>\n
I also want the cover art to look somehow “active” when the music is playing. Here’s what I do in CSS:<\/p>\n
img.jouele-is-playing {\n  outline: rgba(255, 255, 255, .2) 10px solid;\n}<\/code><\/pre>
That’s it. Jouele Pro dynamically sets the class jouele-is-playing<\/tt> on each of its controls during playback, so the cover art highlighting now works. No JavaScript needed.<\/p>\n
The same way the highlighting of the currently playing playlist item works. The actual HTML code for each playlist item is this:<\/p>\n
<tr class="jouele-control"\n  data-type="seek" data-range="0:45:38...0:48:55"\n>\n  <td>0:45:38<\/td>\n  <td>Tensal<\/td>\n  <td>Achievement 3<\/td>\n<\/tr><\/code><\/pre>
This line is not just to jump to a point in time, but it also corresponds to a time range. To dynamically highlight it, I use this CSS:<\/p>\n
tr.jouele-is-within {\n  background: rgba(255, 255, 255, .2);\n  color: #fd0093;\n}<\/code><\/pre>
That’s it. Jouele sets the class jouele-is-within<\/tt> to all its range controls when the playback is within this range.<\/p>\n
If there are several players on a page, the controls control the one that was playing previously, or the first one on the page, if nothing was playing before. You can link the controls to a particular player.<\/p>\n
Jouele Pro is $39 per domain name. The free Jouele is available as before.<\/p>\n
Links:<\/p>\n