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

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

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

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

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

Проекты

Новая схема челябинских трамваев

Больше десяти лет назад я сделал схему челябинских трамваев и троллейбусов. На этот дизайн решающим образом повлияли советы и комментарии Артёма Горбунова. Тогда мы нашли несколько хороших универсальных решений — на основе того дизайна десятки дизайнеров делали схемы разных транспортных систем.

Три года назад мы с Сашей Караваевым сделали новую версию схемы. В ней была целая куча схемодизайнерских изобретений: «карандашный» слой с автобусами и троллейбусами, «акварельные» водоёмы, 3Д-конечные, новая форма пеньков. Тогда же родился логотип челябинских трамваев в виде герба Челябинска с пантографом.

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

Слой с автобусами и троллейбусами добавлял интересного фарша, но практической пользы в нём было мало. Без него упростилась геометрия линий и графема стала сильнее. Добавились узнаваемые здания.

Полина рассказывает подробнее у себя на сайте, посмотрите.

Что ещё посмотреть:

16 февраля   дизайн   проекты   релиз   транспорт   Челябинск

Участники моих проектов

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

Зерулс 2.0 заставил меня унифицировать это дело, в его описании теперь такой подвал:

Наконец-то я сделал себе штуку, чтобы такое ставить:

<?= i8team ([
  'ib' => 'Арт-директор | и разработчик',
  'rp' => 'Со-разработчик | технологии поиска',
  'vk' => 'Веб-разработчик',
  'vy' => 'Дизайнер',
  'ad' => '§§-шрифтовик',
  'gg' => 'Сисадмин',
]); ?>

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

Если вывести всех, кого пока знает эта функция, выглядит так:

Тут я должен извиниться перед теми, кто пока не попал в этот список, но при этом много чего сделал. Например, это все, кто помогал в разное время с Эгеей, особенно в последнее время Игорь Адаменко и Иван Щолоков. Дело в том, что Эгея живёт на другом сайте, а не в виде рассказа в портфолио, поэтому с ней другая история. Может, я что-нибудь ещё придумаю. Если вы чувствуете, что я вас забыл, напишите мне, пожалуйста, куда именно хотели бы, чтобы я вас добавил. Скорее всего, я всё-таки не забыл, а просто пока не нашёл подходящего места, но вдруг. Если вы хотите поменять фотку или ссылку, тоже говорите.

Всем большое спасибо!

13 февраля   проекты   этот сайт

Зерулс переехал на ХТТПС

Эта новость расстроит тех, кто использовал сайт «Зерулс» для входа в вайфай с браузерной авторизацией. Да, сайт переехал на ХТТПС.

И ещё я забыл рассказать, что теперь можно шарить параграфы в соцсети. Под параграфами иконочки. На скриншоте — просто какой-то параграф. Расскажите всем, какие правила русского языка вам нравятся больше всего (хе-хе)!

В рассказе о проекте переделался этаж с участниками снизу — теперь все с фоткам и ссылками. И туда добавился Глеб Гончаров, который помог настроить новый сервер и завести ХТТПС. С Глебом мы также делаем сервис Эгеи, и он помогает с моим сайтом и сайтом самой Эгеи.

12 февраля   Зерулс   продукты   проекты

Ещё штуки в Зерулсе 2.0

Хочу ещё рассказать про пару дизайнерских фокусов в новом Зерулсе.

Во-первых, у нас два стиля ссылок: синие для переходов внутри сайта и чёрные-подчёркнутые для уходов наружу. Мы решили не подчёркивать внутренние ссылки, как Википедия. Учитывая, что на сайте нет других цветов, путаницы между ссылкой и не ссылкой не возникнет.

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

В-третьих, смотрите, как это поле подвисает при прокрутке. В Сафари оно становится матово-прозрачным, но при этом в узкой полоске над полем прокручивающийся текст не просвечивает. Это нелогично, но так красивее.

В-четвёртых, смотрите, как ведёт себя этажик ссылок на Эгею-Раскладку-Главред снизу. При растягивании окна он не тянется, а выравнивается по центру. Но в окне 1024 он левым краем выравнивается строго по левой колонке оглавления. Если бы мы просто оставили так, то при ширине, скажем, 1038, этажик бы «почти, но не совсем» выравнивался с левой колонкой, а это отстой. Поэтому на самом деле он выравнивается с ней строго до некоторой ширины, а после этого уже резко прыгает в центровку. Попробуйте поизменять ширину окна.

В-пятых, поводите мышкой по ссылкам на главной. Обратите внимание, что там непрерывная зона клика, между ссылками нет дыр. Это чтобы Фиттс был доволен.

Наверняка что-то забыл.

См. также страничку о проекте.

Второе издание правил русского языка

Запущена вторая версия сайта «Зерулс» — лучшего веб-издания правил русского языка.

Вместе с Вадимом Юмадиловым мы сделали новый дизайн. Аня Данилова нарисовала прекрасные знаки параграфов. А Виктор Корейша всё сверстал и запрограммировал:

Под капотом по-прежнему умный поисковый движок, который мы с Романом Парпалаком сделали в 2010 году (с ума сойти, как давно это было).

Пользуйтесь на здоровье.

Приём кредитов
Фотография Романа Баранова

Ссылки на всех, у кого есть куда:

На Аню некуда поставить ссылку, поэтому ей просто большое спасибо.

Смотрите также страничку проекта.

Ну и заодно напоминаю, что работает приложение «Зерулса» для Айфона, которое мы сделали с Шуриком Бабаевым.

5 февраля   Зерулс   продукты   проекты   релиз

Жуэль-про

Жуэль-про

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

Вы можете подумать, что для этого пришлось писать гору Джаваскрипта. Но на самом деле нет, просто я использую новый Жуэль-про. Гору Джаваскрипта пришлось писать Жене Лазареву, который запрограммировал Жуэль-про. А мне осталось только воспользоваться новым супермощным декларативным АПИ, которое мы придумали.

Рассказываю.

Если вы использовали Жуэль, вы знаете, что чтобы вставить на страницу аудиоплеер, достаточно просто поставить ссылку на МП3-файл и дать ей класс jouele:

<a href="ilya-birman-use-me-mix.mp3" class="jouele">
  Илья Бирман: Юз ми
</a>

Но что, если рядом с плеером стоит обложка, и я хочу, чтобы микс начинал играть по клику в обложку? С Жуэлем-про это делается так:

<img
  src="cover.jpg"
  class="jouele-control"
  data-type="play-pause"
/>

Теперь в обложку можно кликать, и микс заиграет. И запаузится, если кликнуть ещё раз.

Если я хочу, чтобы в плейлисте можно было кликнуть на конкретный трек, и микс перемотался на его место, я делаю так:

<tr class="jouele-control"
  data-type="seek" data-to="0:45:38"
>
  <td>0:45:38</td>
  <td>Tensal</td>
  <td>Achievement 3</td>
</tr>

Теперь клик в эту строчку таблицы будет перематывать микс куда надо.

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

img.jouele-is-playing {
  outline: rgba(255, 255, 255, .2) 10px solid;
}

Всё! Жуэль-про сам даёт класс jouele-is-playing своим элементам управления во время воспроизведения, поэтому подсветка просто работает независимо от того, как именно я включил музыку — из плеера, обложкой или вообще клавиатурой. Мне снова не нужен Джаваскрипт.

И точно так же работает подсветка активной строчки в плейлисте. На самом деле ХТМЛ-код каждой строчки выглядит не так, как я показал выше, а вот так:

<tr class="jouele-control"
  data-type="seek" data-range="0:45:38...0:48:55"
>
  <td>0:45:38</td>
  <td>Tensal</td>
  <td>Achievement 3</td>
</tr>

То есть строчка не только перематывает в определённую точку, но ещё и соответствует некоему отрезку. Чтобы она подсветилась, снова достаточно только ЦССа:

tr.jouele-is-within {
  background: rgba(255, 255, 255, .2);
  color: #fd0093;
}

Всё! Жуэль-про сам даёт класс jouele-is-within своим элементам управления, соответствующим диапазону, когда позиция воспроизведения находится внутри этого диапазона.

Я ещё хочу, чтобы у всех элементов, которые можно кликать или тащить, курсор мыши был пальчиком. Для этого я делаю так:

.jouele-is-interactive {
  cursor: pointer;
}

Если плееров на странице несколько, то элементы управления управляют тем, который играет или играл последним. А если такого ещё нет, то запустит первый на странице. Чтобы привязать к конкретному плееру, есть data-href:

<img
  src="cover.jpg"
  class="jouele-control"
  data-type="play-pause"
  data-href="ilya-birman-use-me-mix.mp3"
/>

На странице каждого микса у меня всегда один плеер, поэтому это там не нужно.

Жуэль-про стоит 1890 рублей на один домен. Обычный бесплатный Жуэль доступен как раньше.

Что посмотреть:

29 января   Жуэль   продукты   проекты   релиз

Работы для «500Тека»

Опубликовал пару работ, которые сделал в прошлом году для «500Тека».

Причесал логотип (был почти такой же, но пришлось полностью переделать):

С логотипом уже второй раз такое, что надо было просто привести в чувство существующий.

Сделал сайт (был совсем другой):

Тут надо было прям сделать сайт целиком, вникнув в работу компании и поняв, что вообще должно быть на сайте и почему.

2018   портфолио   проекты   релиз

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

Ваня Звягин дальше рассказывает о том, как мы делали схему минского метро.

Кажется, это самая длинная часть пока что, при этом в ней покрывается два месяца работы между этими двумя картинками, которые на первый взгляд не сильно отличаются:

Если пропустили, вот сама схема.

2018   метро   Минск   проекты   транспорт
2017   метро   Минск   проекты   транспорт
2017   метро   Минск   проекты   транспорт
Ранее Ctrl + ↓