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

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

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

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

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

Блог


Дизайн декларативных АПИ

Опубликовали видос моего летнего доклада на Питер-ЦСС про декларативные АПИ (на английском):

Рассказываю о том, почему декларативные АПИ — это хорошо, и потом привожу в пример:

Тогда новый Жуэль-про ещё был в разработке, а сейчас его уже можно купить и использовать.

Ещё читайте «Как прошёл Питер-ЦСС» (офигенно). Большое спасибо организаторам!

Как заменить белый фон прозрачным в Фотошопе

Оказывается, фавыконка нового Зерулса случайно была на белом фоне. Если у вас есть картинка на белом фоне, и его надо сделать прозрачным, при этом сохранив весь антиалиасинг (пиксели промежуточных цветов по краям контура), то это делается вот так:

На самом деле вдвое быстрее, но я тут ещё комментирую.

21 февраля   видео   Фотошоп

Подтемнить пересвет на краях фотографии на белом фоне

Есть такая засада, когда вёрстка пытается использовать прямоугольность фоток, а фотки этому сопротивляются, потому что пересвеченые:

Конечно, лучше всего такие фотки заменить нормальными. Но предположим, что это почему-то невозможно. Фотограф в отпуске, открываться нужно через 15 минут.

Можно попробовать взять такие фотки в рамки:

Но это выглядит фигово. Особенно, если соседствуют и такие и такие:

Намного лучше немного подтемнить фотку с нужной стороны. Я тут ещё и подсинил чуток, так как это снег:

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

Это копипейст из канала в телеграме. Это бы попало в стенограмму за 5—11 февраля, но я выкусил и делаю отдельной заметкой. Заметку помог подготовить Вениамин Векк.

Где поесть в Тель-Авиве: Покешоп

Давно тут не было фоток еды.

Понравилось место под названием «Покешоп» (Фришман × Ибн Гвироль). Там тебе дают миску риса, на который сверху насыпают разных прекрасных продуктов и наливают соусов. У меня тут свежий несолёный лосось, миндаль, авокадо, тхина. Остальное и так видно. Это обожрака, при этом очень вкусная.

Рекомендед.

Звёзды не надо делать пухлыми

Звёзды не надо делать пухлыми. Они выглядят дебильно:

Вот эта штука должна быть прямой линией:

Звезда здорового человека, короче, такая:

Понятно, что стилистическая задача может требовать чего-то там. Но я говорю о виде звезды по умолчанию. Это как «ссылка должна быть подчёркнута».

Сергей Чикин пишет: «Если ты Энгрибердс, то пухленькие — норм».

Это копипейст из канала в телеграме. Это бы попало в стенограмму за 5—11 февраля, но я выкусил и делаю отдельной заметкой. Заметку помог подготовить Вениамин Векк.

Селигерский кусок и метроплакат с указателем

Полтора года назад я выпустил схему московского метро с Окружной линией — вам она известна под дебильным названием МЦК. Так вышло, что пока я рисовал схему, считалось, что Октябрьское Поле и Панфиловская никак не связаны, ну я так и нарисовал:

Но когда МЦК запустили, их вдруг решили считать пересадкой (там 750 метров по улице).

С тех пор открывались новые отрезки Марьина Роща — Петровско-Разумовская (Люблинская линия), Парк Победы — Раменки (Солнцевская линия), и я их добавлял на схему. Но это место не трогал, потому что там надо было всё взорвать, чтобы эту пересадку нарисовать.

А потом пришёл Илья Харитонов и буквально за годик всё сделал (пришлось даже Тверскую чуточку подвинуть):

Да ещё и алфавитный указатель заверстал:

В указателе используется система, которую я изобрёл пять лет назад:

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

Cкачайте ПДФ, проверьте плиз, где мы накосячили?

Я ещё обновил картинку на странице схемы. Но плакат, на который там ведёт кнопка «Купить», пока не обновился. Будем держать вас в курсе, в общем.

Илья тем временем написал пост про всю эту петрушку. Там есть листалка вариантов решения отрезка Полежаевская — Октябрькое Поле.

Ссылки по теме:

Найти редактора — нейтив-спикера

Мы анонсировали, но пока не выпустили английскую версию книги Артёма Горбунова «Типографика и вёрстка». Ещё не анонсировали, но работаем и над английской версией моей книги об интерфейсе. И хотим в будущем делать другие книги на английском.

С одной стороны, коллективно у нас нормальный английский — можем написать заметку в блоге или рассказ о проекте в портфолио. С другой, книга — это всё-таки книга, за книгу другой спрос. Поэтому я хочу найти человека, который бы помог довести книги до ума.

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

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

Как бы вы искали такого человека? Или как бы вы решали такую задачу?

Про ворованную схему метро Софии

По образу и подобию классической челябинской схемы и её следующих версий дизайнеры делают разные другие схемы. В этом нет проблемы, нам даже приятно. Сама-то наша схема тоже опирается на достижения предыдущих поколений дизайнеров.

Вот смотрите какая классная схема движения общественного транспорта Севастополя:

Здесь используются похожие на наши графические приёмы, но в голову не придёт упрекнуть авторов в копировании. На любой вопрос «а почему именно так?» авторы могут ответить «ну а как?». Схему нарисовали исходя из задачи, использование всех приёмов оправдано целью.

Но вот на днях какой-то чувак опубликовал схему метро Софии:

Эта схема срисована с нашей схемы метро Минска. На любой вопрос «а почему именно так?» ответ один: «срисовал с Минска». Можно же было не повторять один-в-один вёрстку блочка с радиусом круга-центра? Можно было вообще иначе выделить центр, придумать свои деревья, выбрать чуть другие цвета линий, иконки другие нарисовать. Использование приёмов никак не оправдано целью.

Минскую схему мы делали с Ваней Звягиным и Костей Евстратенко. Смешно, что через какое-то время после публикации автор добавил упоминания меня и Вани (без ссылки и без слова «Минск», где-то между делом), а Костю не добавил. Хотя Костя, например, делал здания, которые этот чувак тоже нагло спёр. Костин стадион слева и его стадион справа:

Тут я хочу оговориться, что это не пост ненависти к её автору, мне до него дела нет. Просто не все понимают, где граница между заимствованием приёмов и воровством, и это прям отличная иллюстрация.

Ну а поржать над автором — наше святое право, я считаю.

Остерегайтесь подделок.

18 февраля   дизайн

Информативность и ложная информативность

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

Вот завалялась картинка:

Я сначала случайно прочитал day light вместо day flight и подумал: ого, они показывают, с какой стороны будет солнце! Вот вам пример повышения информативности. Это полезно, это влияет на выбор места (обычно я в уме представляю, как полетит самолёт и где будет солнце, чтобы ни дай бог не попасть под него).

Информативность — про полезную информацию, связанную с задачей пользователя, а не просто любые данные, которые можно вывалить. Очень часто дизайнеры показывают количество чего-нибудь, что не имеет никакого значения:

Что мне толку с того, что вариантов именно 26? Как это повлияет на моё желание перейти по ссылке? Меня-то интересует, есть ли там что-то подходящее. Лучше написать, что за варианты: со шнурками и без, с прорезиненной подошвой. Или показать превьюшечки.

Количество имеет смысл, например, тут:

Число позволяет мне оценить, сколько работы меня ждёт (а окружающим — умею ли я пользоваться почтой; это, конечно, не мой скриншот). Если я недавно видел 2, а теперь вижу 5, я понимаю, что пришла новая почта.

Но чаще всего количество элементов внутри не приносит никакой пользы. В одной из позапрошлых версий Эгеи я перестал показывать количество черновиков рядом с их иконкой — это просто мусор.

Ранее Ctrl + ↓
Эти ссылки принесут мне миллионы: When you need to buy a new car, you need car loan calculator - handy tool for car finance.