Чему меня научила Эрика Парфёнова
В продолжение темы «Что такое хорошо» рассказываю, чему меня научила Эрика Парфёнова:
В продолжение темы «Что такое хорошо» рассказываю, чему меня научила Эрика Парфёнова:
Вот как выглядела предыдущая неделя в моём канале в телеграме:
В продолжение темы лайн-арта, нашёл вот красивую картинку со схемой камеры из Айфона 5S, с сайта Эпла:
Леонид Андрухов:
Самый крутой дизайн таблицы Менделеева, который я видел, вот:
![]()
Главная проблема классического дизайна таблицы Менделеева — она называется периодической, но совсем не помогает увидеть, как эта периодичность устроена. То в первой строчке дырень почему-то, то снизу отдельно какие-то актиноиды идут. Я помню, что в своё время разобрался, что там периодичность более сложная, чем кажется из таблицы. Но уже забыл всё, конечно.
Круто было бы придумать такой дизайн, при котором было бы видно, как на самом деле устроена периодическая система и почему она периодическая.
Слева Валерий, справа — Меладзе:
У Валерия прям сайт нешуточный:
http://meladze.ru/
(Я случайно)
Надя Кутырева:
Сходила в местный радужный район. На районе радужное всё. Даж кофе.
![]()
Красиво! (Пить это я, конечно, не буду.)
Логотип тель-авивского музея искусств зачем-то напоминает свастику:
Совет о таймерах обратного отсчёта на сайтах:
https://bureau.ru/bb/soviet/20180123/
Такой путь совершает переднее колесо неуправляемого велосипеда, который толкнули вперёд:
Обнаружен крутейший знак польской выставки графических знаков:
(Это про аудио по четвергам.) Я решил, что всё-таки кидать сюда треки целиком опасно. Заблокируют ещё канал за нелегальное распространение музыки, как за порно блокируют. Простите.
Ваня Звягин (один из дизайнеров схемы минского метро) спрашивает, как реализовать анду, если в некоей системе пользователь удаляет страницу, на которой сам как раз находится.
А я как раз давно хотел написать о проблеме с реализацией этого в Гугль-доке. Когда жмёшь File → Move to trash, он показывает такое окно:
Оно сообщает, что файл был удалён, но выглядит как окно подтверждения. Человек, скорее всего, не станет его читать, а если он вызвал команду по ошибке, то может подумать, что файл ещё не удалён. То есть он можно просто закрыть браузер, думая, что файл остался (а он уже не остался).
Ещё у меня такое ощущение, что раньше тут действие по умолчанию было «Восстановить», потому что я всё время жал синюю кнопку и обнаруживал, что документ не удалился — хорошо, хоть это починили.
Для сравнения, вот как выглядит удаление разворота в бюрошной книге. Жмём на корзинку в углу:
Тут в середине пустота, потому что я удалил пустой разворот; надо было не полениться и показать на настоящем. Смысл в том, что там прям скриншот удалённого разворота. Это не похоже на подтверждение. Так лучше.
Дизайнер Евгений Филатов предлагает пиктограмму подземной парковки:
В навигации любая пиктограмма, содержащая в себе стрелку, представляет проблему: её фиг совместишь со стрелкой. Как вот составить знак «подземная парковка прямо»?
Традиционное обозначение «в домике» хоть и неэлегантно, но зато работает безотказно:
Когда мы делали навигацию в МГИМО, нужно было нарисовать пиктограмму лифта. А это относится к нерешённым задачам дизайна (все пиктограммы лифта или некрасивые, или непонятные, или и то, и то). У нас получилась очень клёвая пиктограмма просто из двух стрелок (справа сверху):
Но мы смогли такой обойтись, потому что нигде не нужно было рисовать стрелку рядом с ней. А если бы нужно было, соседство стрелок стало бы проблемой. Так что такая пиктограмма не универсальна.
Парковка Евгения Филатова:
http://www.efilatov.ru/portfolio/parking/
Навигация в МГИМО:
https://bureau.ru/projects/mgimo/
Клёвый логотип норвежского «Комитета здоровья» (помогают ЛГБТшникам не болеть):
Постеры к 695-летию Вильнюса: https://twitter.com/babooshkina/status/956842450391392257
Самый клёвый редизайн Я.ру сделали «Они»:
https://ya.ru/design/ony
Клёвость в том, что выглядит одновременно и свежо-интересно-экспериментально, при этом абсолютно дефолтно и в стиле Яндекса. Прям хоть бери и внедряй.
Так уже веселее. Евгений Филатов:
Знак крытой платной подземной парковки.
![]()
Если подземная, так вроде по-любому крытая? Дизайнер Илья Харитонов с серьёзным лицом показывает, что это разные вещи (по порядку: крытая, подземная, крытая подземная):
Илья вообще всегда показывает вещи с серьёзным лицом:
Я: а покажь, как будет, если все стрелочки с цифрами по правому краю выровнять?
Илья Харитонов: https://telesco.pe/ilyabirman_channel/1924
Илья Харитонов: Показал.
Читатель Сало:
Компостеры во Львове
Дайджест подготовил Иван Ветошкин.
Смотрите, вакансия арт-директора.
Реклама. Текст предоставлен клиентом
Мы — студия дизайна «Арбуз». Делаем в основном сайты, презентации и видеоролики. В общем, digital-инструменты, которые помогают бизнесу. Реже — логотипы и рекламную продукцию. Входим в группу компаний, поэтому нередко приходится работать с крупными заказчиками по рекламе: Мягков, Нефтьмагистраль, Росинтер, Marks&Spencer.
В команду нужен человек, который возглавит команду из дизайнеров, станет для всех ментором и продвинет студию на новый уровень.
Сейчас в команде 5 дизайнеров: 2 веб, 2 графических и 1 моушен. 3 парня и 2 девушки, средний возраст — 26 лет. Четверо приехали из регионов, двое — специально в студию. Так что если вы не из Москвы, то это совсем не проблема. Даже плюс.
Все дизайнеры Арбуза — фанаты своей профессии, страстно любят свое дело и постоянно учатся.
Отвечать за проекты студии и обучать дизайнеров. Что-то делать своими руками. Организовывать и проводить мастер-классы для всей команды.
Если у вас есть навык управления командой и ведения проектов, если вы можете аргументированно объяснить дизайнеру, как улучшить макет, то скорее всего вы подойдете.
Белая зарплата, оформление по ТК со всеми сопутствующими условиями. Большой офис на Бауманской, 8-часовой рабочий день, график 5/2. За точным временем появления в офисе никто не следит, но дизайнеры иногда задерживаются после работы.
Зарплата обсуждается с каждым кандидатом индивидуально.
Вы хорошо разбираетесь в дизайне, умеете работать в команде и обучать коллег по цеху.
Если приходится делать проект своими руками, то делаете дизайн быстро и круто. Вашего внимания легко хватает на то, чтобы вести 5-6 проектов одновременно.
Вы — честны и ответственны, не ноете по пустякам и не жалуетесь на политику, коллег и погоду. Вы действительно хотите встать во главу молодой студии и сделать её топовой. И знаете, как это сделать.
Посмотрите работы Арбуза: arbuz.moscow/portfolio.
Если вы уверены, что можете сделать лучше и научить этому дизайнеров, пришлите 3 лучших работы с кратким текстом о себе и пожеланиями по оплате на ed@arbuz.moscow.
С недавних пор у меня в разделе миксов работают интерактивные плейлисты. Можно кликать в треки, и микс перемотается в нужное место, и наоборот: в плейлисте автоматически подсвечивается трек, который сейчас играет в миксе. Попробуйте.
Вы можете подумать, что для этого пришлось писать гору Джаваскрипта. Но на самом деле нет, просто я использую новый Жуэль-про. Гору Джаваскрипта пришлось писать Жене Лазареву, который запрограммировал Жуэль-про. А мне осталось только воспользоваться новым супермощным декларативным АПИ, которое мы придумали.
Рассказываю.
Если вы использовали Жуэль, вы знаете, что чтобы вставить на страницу аудиоплеер, достаточно просто поставить ссылку на МП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 рублей на один домен. Обычный бесплатный Жуэль доступен как раньше.
Что посмотреть:
Разгребаю телефон, нашёл трамвайный светофор из Амстердама:
Все слышали, что есть шаббат. Но не все знают, как устроена израильская рабочая неделя. А она сдвинута на один день относительно всего остального мира.
Шаббат (суббота) — это главный выходной, как воскресенье в остальном мире. А воскресенье — это первый рабочий день очередной недели. Когда тебе говорят «приходите в воскресенье» — это значит, что неделя уже близится к концу, и давай на следующей будем твой вопрос решать.
У обычных людей в нормальных компаниях выходные — это пятница и суббота. Но где-то в пятницу могут и работать полдня. В ночных клубах все тусовки — ночами с четверга на пятницу и с пятницы на субботу. Вечером субботы — тишина: завтра же на работу.
«Шаббат шалом» (буквально: «суббота мир») — это не столько приветствие субботы, сколько пожелание хороших выходных. В четверг, уходя с работы, люди говорят друг другу «Шаббат шалом». Ни разу не слышал, чтобы «шаббат шалом» кто-нибудь кому-нибудь сказал в сам шаббат.
Большинство магазинов и кафе в шаббат не работают. Это бы ещё полбеды, но не работает и общественный транспорт (кроме Хайфы).
При этом с шаббатом есть нюанс: согласно торе или чему-то такому он начинается, когда заканчивается пятница, на улице темнеет и на небе становится видно три звезды. Поэтому в пятницу много мест закрываются довольно рано — в два-три часа дня. Автобусы перестают ходить часам к пяти. А когда темнеет следующим вечером, в субботу, многие магазины и кафе вдруг обратно открываются, а на улицах появляются автобусы.
Именно вечер пятницы в понимании людей, по крайней мере тут, в Тель-Авиве — это главный момент для отдыха и веселья. В субботу можно отсыпаться после бурной ночи, а можно и поработать, если, конечно, ты не слишком религиозен (я обычно по-быстрому отсыпаюсь и иду работать).
Ближайший супермаркет закрывается в пятницу в 18:30 и открывается обратно в 18:30 в субботу. Одна из хороших кофеен, «Нахат», работает каждый день с утра и до 22, но в пятницу — до 18. То есть их нисколько не смущает работа в субботу, но вечер пятницы — это святое. Подобное же расписание у соседней аптеки. А другая кофейня, «Кафеликс», в субботу закрыта весь день, а в пятницу официально работает до 15:30. Но вчера меня оттуда выгнали около трёх, объяснив, что щас зима и шаббат наступает раньше.
При этом тут полно иммигрантов, которые открывают свои бизнесы и работают как им вздумается. Ещё одна кофейня, «Ориджем», которую держат бразильцы, работает каждый день до 19, но в субботу — до 14. Не работать в воскресенье — это экзотика, но вот хорошая бургерная неподалёку в воскресенье закрыта.
В результате пятница, суббота и воскресенье — это такая зона неопределённости. Перед тем, как куда-то пойти, нужно посмотреть расписание, и оно ещё может оказаться неверным, «потому что зима».
Когда живёшь в России, вся эта хрень с неработающими в субботу местами кажется дикостью. Но если честно, с воскресеньями в большинстве городов Европы дела куда хуже, чем с субботой в Тель-Авиве. Тут полно заведений, которые в гробу видали израильские странности, и работают всегда.
Только с транспортом засада. Так что если вы планируете съездить в Израиль, постарайтесь прилететь и улететь не в шаббат, а то из аэропорта и в аэропорт вы сможете доехать только на такси (где-то по 2,5 тысячи рублей в одну сторону) — поезда не ходят с середины пятницы до вечера субботы.
Важная штука:
Заметка обновлена 9 янв 2020
Я обещал рассказать, как поменять цветовую схему для подсветки кода в Эгее.
Начнём с примера. Комплектная тема оформления «Дуглас» использует цветовую схему Tomorrow Night Eighties, нестандартную для Эгеи. Посмотрите в её файл стилей: .../themes/douglas/styles/main.css. В его конце есть несколько правил с префиксом hljs-. Они и определяют подсветку кода.
Чтобы сделать свою расцветку кода, нужно сделать новую тему оформления. Достаточно скопировать папку той темы, которую вы используете, и дать новой теме уникальное название в файле theme-info.php. Теперь переключите тему в «Настройке» и напишите в main.css любые свои правила по аналогии с «Дугласом».
Для подсветки кода у меня используется библиотека «Хайлайт» Ивана Сагалаева, которая включает целую кучу разных популярных цветовых схем (там слева можно примерить к разным языкам). Если вам лень сочинять свои цвета, вы можете просто прикрутить какую-нибудь из этих схем, взяв её ЦСС-файл с Гитхаба и вставив его в конец своего main.css. Ну или взять и докрутить по вкусу.
Рекомендации в Эпл-музыке — полная хрень.
Достаточно сказать, что у них есть жанр музыки «электронная».
Чтобы было понятно, какое-то это безумие, представьте жанр музыки «неэлектронная». Ты слушаешь Битлз, а тебе говорят: «Возможно, вам также понравится Децл». Тот же жанр как раз!
Вот как выглядела предыдущая неделя в моём канале в телеграме:
Удивительной тупизны вещь Фейсбук всё же. Вот там, когда пишешь пост, иногда есть такая штука (да, именно иногда):
Плюс написать пост на другом языке вопрос. На каком другом? По сравнению с чем? С тем, на котором я уже написал? Что значит плюс? Что значит вопрос? Почему плюс в кружке, а вопрос в квадратных скобках, как во времена МС-ДОСа? При этом эта штука вообще не выглядит как элемент управления. Я её заметил вообще недавно случайно, хотя в Фейсбук пишу довольно давно.
Если нажать, она превращается в такое:
По умолчанию: Английский.
Что это значит? Я пишу в основном на русском. Куда идёт это умолчание? Фейсбук думает, что я пишу на английском? Он что, не понимает без выпадайки, на каком языке текст?
При этом всё выглядит так, будто мне предложили выбрать язык этого поста, а не вообще.
Потом под, зачем-то, огромной линией:
Язык: Выбрать. Отменить
Что за синтаксический ад? В начале было «(Как): (Что)», а тут уже «(Что): (Что сделать)». То есть в первой из двух одинаковых на вид выпадаек я вижу, что выбрано, а во второй написано «Выбрать». Это как если бы на одной кнопке было написано «Сохранить», а на другой — «Нажать». Шизофрения полная.
Если зайти в этот селект, там список языков, русского среди них нет:
То есть, видимо, он как-то понял, что у меня русский, поэтому я не могу поменять на русский. Человек, который это проектировал не понимает, что выбранный вариант должен быть в списке, и именно он должен быть написан вместо слова Select.
В верхней выпадайке я заодно поменял на русский. Не знаю, на что это повлияет.
В Фейсбуке интерфейсы проектируют люди, не имеющие вообще никакого представления о проектировании интерфейса.
Эпловский шрифт Сан-Франциско умеет делать «лигатуры» из букв и квадратиков:
В предыдущем совете о транспортных схемах я писал, что сортировке маршрутов в пучках стоит посвятить отдельный совет.
Теперь посвятил:
https://bureau.ru/bb/soviet/20180116/
У Вконтакта почему-то две крутилки, да ещё и разного размера:
У Товеровского реклама Лидмашины, причём в очень крутом формате. Рекомендую почитать:
https://ksoftware.livejournal.com/381958.html
Там заодно рекламируется реклама у меня:
«Кстати, а реклама в блоге Бирмана тогда отлично сработала. На весенний набор я ещё одну заказал :-)»
Такой круговорот рекламы. Заказывайте ещё рекламу, хорошая тема.
Израильский знак электроопасности:
Так выглядит стартовый экран Фейсбука. Надо сказать, довольно красивый у него цвет, и вообще приятный экран, хоть и пустой. Но почему бы Ай-ОСу не показывать часы и прочее в это время?
Заодно: нашёл программу Notchify, которая мгновенно выкусывает всё лишнее из скриншота на 10-м Айфоне. Правда, в Телеграм лишнее почему-то отправилось белым, а не чёрным.
Жгун зарецензировал схему «Магистрали» Кости Коновалова:
https://www.artlebedev.ru/kovodstvo/business-lynch/2018/01/18/
Главная претензия к цветам, которые не Костя выбирал, и которые вообще к самой схеме не очень относятся, ведь они используются и на аншлагах автобусов.
Когда решение о том, чтобы использовать цвета «соответствующих» линий метро в «Магистрали», ещё не было принято, я почти теми же словами объяснял, что этого делать нельзя, но Дептранс решил по-своему.
Эти часы — очень красивые. Дизайн как на часах швейцарских железных дорог.
Но меня убивает двусмысленность секундной стрелки. Мне несколько раз объясняли, как её читать, и я всё ещё не уверен. С одной стороны, конец с шариком длиннее. С другой — такой шарик в большинстве часов висит с короткой стороны как противовес, а указывает стрелка всегда острой частью. В итоге я всегда на полминуты не уверен. Что для часов железной дороги как-то не очень.
Рубрика «Отвечу голосом». Как вы относитесь к системе апрувов в команде дизайнеров? Вот у программистов перед коммитом нужно пройти код ревью. Получить хотя бы 3 апрува из пяти, например. Подходит ли такая система дизайнерам? Или это разные истории? Может ли дизайнер, который не был полностью погружён в историю, не поставить лайк и тем самым не пустить работу дальше?
Чтобы задать вопрос в рубрику «Отвечу голосом», надо прийти в чат @ilyabirman_chat и поставить вопросу хештег #вопрос.
В недавнем «Что почитать на выходных» я выкладывал статью про дизайн ивритских шрифтов, и автор там жаловался на неудобство, связанное с тем, что буквы очень разной ширины. Он сначала их пытался подровнять, но из-за этого становилось менее читаемо.
А вот вам пример красоты, когда эту особенность иврита не пытаются спрятать, а, наоборот, выпячивают:
Кстати, рубрика «Это очевидно, но вдруг вы об этом никогда не задумывались». Книги на иврите открываются в другую сторону:
Про иврит тут больше, чем кажется нормальным, но пока он меня окружает со всех сторон, занимает голову. Вернусь в Челябинск через пару месяцев — иврита станет сильно меньше.
Как эффектно демонстрировать переменные шрифты (видео):
https://www.instagram.com/p/BeGFF7WHQsv/
Гардиан переделал писать себя с маленькой буквы и стал таблоидом. Шрифт и главная верстательная фишка с забоем на правило внутреннего и внешнего — остались.
Ещё картинки тут:
https://www.underconsideration.com/brandnew/archives/new_masthead_for_the_guardian.php
Тимур:
Мою заметку «Биткоин будет только расти» без спросу подредактировали и перепечатали в газете «Деловой Петербург». Нормально.
Схема электричек Мэриленда:
Очень нравится графема в виде цветочка и тот факт, что три цвета образуют последовательность. Всё остальное — полный шлак, конечно.
Совет о том, что такое графема:
https://bureau.ru/bb/soviet/20160621/
А знаете ли вы, как выглядит флаг Мэриленда? Невероятно, но так:
Предыдущий флаг на канале для тех, кто с нами недавно:
t.me/ilyabirman_channel/578
А вот кое-что в продолжение темы моноширинных и немоноширинных цифр. Игорь Штанг опубликовал страничку из книги 1700 года об истории Португалии. В первых колонках таблицы цифры моноширинные, потому что сравнимые. А в последей — немоноширинные, потому что они составляют просто часть текста. См. 1185 примерно в середине листа:
Интересная заметка Игоря про дизайн этой таблицы:
https://nobelfaik.livejournal.com/159641.html
Это один из моих любимых знаков. Наглядность и информативность 100%:
Интересный шрифт справа. Буквы нестандартных пропорций. R широченная, W узкая; N шире M:
Дайджест подготовил Иван Ветошкин.