Подписка на блог

В Телеграме помимо ссылок на заметки делюсь околодизайнерскими наблюдениями.

В Твиттере помимо ссылок на заметки пишу всякую чушь.

В Тумблере и Же-же есть автоматические трансляции. Если не работает, напишите мне: ilyabirman@ilyabirman.ru.

По РСС и Джейсон-фиду трансляции для автоматических читалок

Проекты

23 августа   метро   Минск   проекты   транспорт

Схема метро Минска

Дорогие друзья, пришло время показать вам новую, прекрасную схему метро Минска.

Арт-директор — я, дизайнеры — Иван Звягин и Константин Евстратенко.

В центре показаны достопримечательности и ориентиры, парки и река, улицы и расположение выходов из метро, а за его пределами — только названия станций. Благодаря этому схема получилась равномерно заполненной, привлекательной для туристов и полезной для минчан. Жмите на картинки, чтобы рассмотреть и почитать подробнее.

31 июля   метро   Минск   проекты   релиз   транспорт

Знак о штрафе за парковку на газонах

Сделал дизайн знака о штрафе за парковку на газонах Москвы:

Знак о штрафе за парковку на газонах

Графдизайнер Серёга Чикин помог с травушкой и айфончиком.

Началось с того, что ко мне пришёл Максим Кац и сказал, что есть риск, что кругом понаставят такое:

Знак о штрафе за парковку на газонах

В Москве наконец-то начали убирать уродские жёлто-зелёные заборчики. Но из-за этого водители, конечно, стали чаще парковаться на газонах, и теперь надо им как-то напомнить, что это неправильно.

В одном месте уже успели поставить адский знак по макету с картинки выше:

Знак о штрафе за парковку на газонах

Уважаемые водители, строго запрещено, КоАП — много слов, а реальной угрозы штрафа не ощущалось. Кого когда-нибудь штрафовали гаишники во дворе? На самом деле важно, что основанием для штрафа являются любые фотки, сделанные на телефон. И их могут сделать и жители, и проинструктированные управами дворники, и кто угодно ещё. В Москве есть приложение «Помощник Москвы», через которое эти фотки можно загрузить.

Поэтому на новом знаке мы нарисовали айфончик вместо фотокамеры с дорожных знаков.

Я очень люблю гостовский шрифт русских дорожных знаков и грущу, что на многих знаках в Москве вместо него используют Ариал. У букв есть некая приятная корявость. Для этого знака мне пришлось из разных огрызков собрать нужные буквы и цифры, в том числе из заброшенной оцифровки Александра Сапожникова. Почти всё пришлось допиливать — спасибо Ане Даниловой за советы. Гостовские кратки у „й“ я не смог терпеть и нарисовал другие.

Депутат Настя Брюханова убедила совет депутатов Щукина официально принять этот знак, и сегодня его утвердили. Скоро он начнёт появляться в щукинских дворах. Будет как-то так:

Знак о штрафе за парковку на газонах

Мы призываем и другие районы использовать этот знак — на его странице можно скачать ПДФ. Макет знака без изменений можно свободно использовать во всех дворах Москвы — пишите.

Жуэль 2.3

Жуэль 2.2

Жуэль — нормальный аудиоплеер для веба. Его развитием занимается Женя Лазарев.

У нас вышла версия 2.3. Жуэль теперь использует Хоулер (встроен, а не идёт отдельным файлом) вместо Джейплеера. Благодаря этому изменению, трафик расходуется умнее, прелоудер работает точнее и ушло много мелких ошибок. Функция data-repeat стала работать у отдельных треков. Если файл недоступен, Жуэль показывает это, а не «висит». Вёрстка лучше смотрится в разных браузерах.

Пример песенки:

Документацию см. на Гитхабе.

Процесс создания второй версии схемы метро Екатеринбурга. Часть вторая

Паша Омелёхин опубликовал вторую часть процесса создания схемы. Это часть, где мы прощаемся вот с этими обозначениями станций:

Фото Ильи Харитонова

Боже, сколько же эта фотка пролежала у меня на рабочем столе.

Наносхема московского метро для Эпл-часов

У меня ещё одна схема московского метро — Наносхема 2.0. Ну, что поделаешь.

Вторая версия наносхемы адаптирована для Эпл-часов:

Опытным пассажирам наносхема напоминает, сколько остановок ехать до нужной пересадки внутри кольца. Все люди делятся на тех, кто не понимают, зачем схема без названий станций, и тех, кто сразу же понимает, что это то, что им нужно.

Чтобы установить, надо сохранить картинку на Айфон и включить ей сердечко:

Наносхема метро для часов

Сильно нажать на часы, чтобы вылезла настройка циферблата, добавить циферблат «Фото», выбрав в нём эту картинку, потом снова зайти в настройку циферблата, переместить часы вниз и настроить компликейшены на свой вкус:

Наносхема метро для часов

Снизу ещё остаётся строчка для большого комликейшена типа следующей встречи или играющей песни.

Ещё если пропустили, на днях обновилась основная большая схема метро и появился в продаже её новый плакат.

Процесс создания второй версии схемы метро Екатеринбурга

В январе вышла вторая версия схемы метро Екатеринбурга. Дизайнер схемы Паша Омелёхин опубликовал первую часть процесса создания схемы.

Там самая драма — это наша заруба про обозначение центра. Людвиг сказал Паше, что хорошо бы обозначить центр, а я был против, потому что пользы от этого не было никакой, и красиво не получалось.

Но Паша не отставал, пока не получилось красиво — центр на схеме в итоге обозначен. Другим дизайнерам почитать наш диалог будет полезно, чтобы понять, как вести себя, когда ты поверил во что-то, а вредный арт-директор в это никак не верит.

Во второй части будет про то, почему Паша переделал весь графический дизайн схемы.

Интерфейс Мимика 2.0

Веб-приложения состоят из фронтенда (того, что работает у пользователя в браузере) и бэкенда (того, что происходит на сервере). Эти части разрабатывают с разной скоростью. Если при создании браузерной части сервер недоступен, разработчик обычно сильно ограничен.

Я сделал интерфейс для второй версии Мимика — инструмента веб-разработчика для имитации ответов сервера. Можно работать, как будто сервер доступен. Настроить поддельный ответ («мок») очень легко. Например, вы хотите сделать вид, что сервер ответил строчкой джейсона:

Можно настроить навороченные моки, с хитрыми ХТТП-заголовками, задержкой и чем угодно ещё:

Кайф Мимика в том, что не нужно даже поднимать локальный сервер или менять урлы в своём приложении. Он работает прямо с тем, что есть, прямо в браузере. Но даже расширения браузера не нужно, он подключается просто как скрипт к приложению.

Подробнее об интерфейсе — на странице проекта.

2017   Екатеринбург   проекты   релиз   транспорт

Новости сайта: январь 2017

За последний месяц на моём сайте случилось два важных обновления.

Новый дизайн

Во-первых, теперь у меня новое двухэтажное меню. В первом этаже всё как раньше: проекты, музыка, мир и блог. А во втором теперь может появиться что угодно, что полезно в данном контексте. В блоге я вынес туда любимые темы, в «Мире» — любимые города. А в «Проектах» там могут появляться проекты, связанные с текущим. Например, если зайти в типографскую раскладку, там появится переключалка «Для тех, кто пишет»:

Новости сайта — 2017

А в «Музыке» — другие релизы того же жанра, например, соседние альбомы:

Новости сайта — 2017

Под заголовком раздела по-прежнему может появиться ещё одна строка меню — эта строка нужна для версий одного и того же, например, схем метро:

Новости сайта — 2017

Туда же идут всякие подразделы с общим заголовком.

Всякие такие провязки делаются автоматически — см. как работает мой сайт.

Сайт стал намного лучше вмещаться в маленькие экраны. На телефоне меню прячется за гамбургер, двухэтажное превращается в двухколоночное:

Новости сайта — 2017

Картинки в рассказах о поездках, в блоге и в некоторых работах и раньше умели резиниться. Но меню всё время мешало: распирало и ломало страницу. Новое меню заставило меня прошерстить остальной сайт, поэтому теперь весь «Мир», почти весь блог и большинство проектов влезают на телефоне. Я сделал себе всяких инструментов для быстрого обеспечения влезаемости чего угодно. Некоторые страницы, конечно, выглядят не так, как выглядели бы, если бы их изначально верстали для телефона, но, по крайней мере, влезают.

За новое меню огромное спасибо Игорю Адаменко — он мужественно всё сверстал, несмотря на то, что я всё время просил невозможное. Даже сделал анимацию гамбургера в крестик как я хотел. Мы ещё заморочились с Фиттсом там: если вы поводите мышкой по новому меню, вы увидите, что области клика всех элементов очень большие.

Раздел проектов стал лучше. Раньше там проекты выводились бессмысленной матрицей, отсортированной по времени добавления. А сейчас проекты разделены на смысловые кучки:

Новости сайта — 2017

Я, конечно, хочу ещё лучше, но пока успел так. Когда-нибудь улучшения доберутся и до «Мира».

А ещё я прикрутил новые шрифты. Ну, вы видели.

Новый поиск по блогу

Если вы пробовали пользоваться моим поиском по блогу раньше, вы знаете, что он был не очень. Во-первых, он не умел склонять слова, поэтому искать по-русски было мучительно. Во-вторых, сама выдача была просто лентой найденных заметок, среди которых увидеть нужную (или что она нихрена не нашлась) было нереально.

Новый поиск склоняет слова и учитывает всякие там разные факторы, чтобы нашлись варианты получше. «Берлин»:

Новости сайта — 2017

Выдача поиска тоже переделалась: теперь вместо полных заметок там кусочки найденного текста и картинки пачкой, потому что по ним заметку легко узнать. Как видите по заметке «Трезор и Бергхайн», оно умеет вытаскивать и кадры видосов, и обозначать, что в заметке есть аудио.

Круче всего, когда в заметке много картинок. «Автобан германия»:

Новости сайта — 2017

Пока там всё равно много что работает не так, как надо. Но уже сильно лучше, чем было, поэтому новый поиск я выкатил.

Про него я ещё напишу отдельно подробнее, пока лишь скажу, что решающую роль в его появлении сыграл Роман Парпалак — это с ним мы в своё время делали умный поиск для Зерулса.

2017   веб-дизайн   дизайн   проекты   этот сайт
Ранее Ctrl + ↓