12—18 фев ← → 26 фев — 4 мар

Вот как выглядела недавняя неделя в моём канале в телеграме:

Понедельник, 19 февраля

В чате обсуждают дизайн эмблем спортивных клубов. Я смотрю на одну из картинок и думаю: надо ж было так всё испортить.

А потом замечаю, что старая справа, новая слева. Не надо так делать.

А вот это крутой апгрейд, кстати, если считать, что слева «было», а справа — «стало» (вроде так и есть):

А вот Госуслуги на эту же тему:

Надо: Получить, Получить, Записаться, Открыть.

Илья Харитонов спрашивает:

А на Лубянке специально плашка до пересадки дотянута, или это косяк?)

Специально :-)
https://ilyabirman.ru/projects/moscow-metro/map/2016/

Смешно!

Александр Путилин:

graph of my colored pencil use [oc]. График использования карандашей

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

Вторник, 20 февраля

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

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

Но оказывается, что у некоторых людей несколько номеров телефонов. Как это показать, чтобы не было батареи иконок-телефончиков?

Да никак, оставить один, и показать все после тапа:

[Про стрелки на схеме метро:]

Некоторые пытаются смотреть не из центра схемы, а от того места, где расположена надпись в самом указателе, и не находят станцию. Но стрелка универсальна и не зависит от того, где указатель стоит. Она показывает, где станция в Москве, а не на плакате, в этом её кайф.

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

Сокольники — справа сверху на красной ветке. Где бы ни стояла эта надпись:

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

Среда, 21 февраля

Читатель прислал пару примеров необычных объяснений того, что с какой стороны на пластинке. Тут, как я понял, с одной стороны трек Hello, с другой — Delusion. Типа лишнее зачёркнуто:

Тут две пластинки, используется кодирование оттенками серого:

А это промка, тут одна сторона вообще пустая. На ней написано «играет с другой стороны»:

Кстати, это суперский трек.

Шаринг в телеграме

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

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

Четверг, 22 февраля

Илья написал вторую смешную часть работы над указателем в схеме метро:
http://ilyakharitonov.ru/blog/all/moscow-metro-poster-part2/

Пятница, 23 февраля

Довольно аккуратная инструкция, симпатичные иконочки на зелёном фоне (Привет, Москва):

Обнаружена схема общественного транспорта:

Пучки разных направлений надо было отделить расстоянием. Эти мелкие стрелки кто-нибудь да пропустит.

Клёво! В шрифте П22 Андерграунд, повторяющего фирменный шрифт лондонского транспорта, на месте знака достопримечательности (⌘) стоит такой глиф:

Почему знак достопримечательности именно такой:
https://ilyabirman.ru/meanwhile/all/susan-kare-on-her-work/

Вот это гирлянда! Выглядит как дешёвая китайская электроника :-(

Воскресенье, 25 февраля

Красивый график у этого уравнения:

В чатике подсказывают: это уравнение доказывает, что принглсы надо есть по две штуки:

Дайджест подготовил Вениамин Векк.

Чётенько:

Услышал такое, когда однажды затусил в клубе «Агломерат» в Москве.

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

Загружаешь пнг, а Эгея превращает его в джипег, да ещё и оставляет ему расширение «пнг», чтобы вообще невозможно было понять, что происходит и почему файл испортился. Оказывается, некоторые мои пользователи от безысходности шли и закачивали файлы по ФТП, чтобы Эгея их не ломала. Простите, что устроил вам такую засаду.

Я выпустил фикс (по-прежнему называется v3254). Скачайте, пожалуйста. Достаточно заменить файл system/core.php новым, чтобы проблемы больше не было. Традиционного синего сообщения об обновлении не будет, потому что Эгея даже не поймёт, что обновилась (потому что это всё ещё v3254).

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

Для пользователей Эгеи как сервиса тоже выкатили обновление. Если хотите перезакачать картинки, держите нажатым Альт, когда затаскиваете их — это значит «перезаписать имеющуюся картинку с тем же названием».

Начало бодрое, ну и дальше много хорошего:

Если переносите много файлов из Гугль-драйва в другое место, убедитесь, что среди них не оказалось где-нибудь файлов .gdoc и .gsheet:

5—11 фев ← → 19—25 фев

Вот как выглядела позапрошлая неделя в моём канале в телеграме:

Пользуясь случаем, напомню, что ещё открыта запись на февральский (24—28) московский курс об интерфейсе и представлении информации:
https://bureau.ru/educenter/ui/

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

Вот какой-то случайный отзыв:

Иконка туалета в местном сёрф-клубе:

Дизайнер Илья Харитонов, уже знакомый моим читателям, кое-что для меня сверстал и сделал себе логотип:

Красная капсула выглядит так, будто плавно ездит по шахте:

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

(Потом было видео про вырезание фона.)

Nikita:
а можешь пояснить, как ты белый фон через маску вырезаешь? Там какие-то хоткеи юзаешь, я не смог разобраться.

(Добавил этот ответ к исходной заметке тоже.)

Бюро Горбунова:

Оставьте почту, чтобы узнать, когда выйдет электронная книга Владимира Колпакова «Фотосъёмка автомобилей»

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

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

Этот приём можно использовать много где в интерфейсе. Если у вас какая-то фигня должна улететь с экрана, можно дать ей пролететь 20 пикселей и одновременно увести её в полную прозрачность. Чаще всего этого будет достаточно.

При этом, конечно, важно экспериментировать и развлекаться. Например, вот кто-то попробовал учитывать направление наведения в ховер-эффектах. Это клёво, где-нибудь пригодится, но точно не как дефолтное поведение всего:
https://css-tricks.com/direction-aware-hover-effects/

Маленький секрет Мака. С некоторых пор зелёная кнопка в светофоре окна стала переводить окно в фулскрин (который многих бесит своей изолированностью и тормознутой анимацией):

Если вы хотите просто увеличить окно «по-старому», не превращая его в полноэкранное приложение (т. е. сделать zoom, а не full screen в терминах Мака), то надо жать зелёную кнопку с альтом. Тогда в зелёной кнопке будет старый добрый плюсик. Заскриншотить это чуть сложнее, так что скриншота не будет.

О, Йлья принёс скриншотик:

В центре фото — один атом стронция:

Статья:
https://meduza.io/shapito/2018/02/13/odin-atom-v-ionnoy-lovushke-pobeditel-britanskogo-konkursa-nauchnoy-fotografii

Читатель Александр прислал пешеходный светофор из Дрездена:

Верхняя секция информирует, что кто-то уже нажал на кнопку вызова зелёного света.

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

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

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

Насчёт иконок
Мне полностью плевать на них — 110 (14%)
Рад хорошей иконке, но она не влияет на то, как я расположу приложения на экране — 376 (46%)
Слишком страшную иконку спрячу с первого экрана, если это не суперважное приложение, нужное сто раз в день, конечно — 240 (30%)
Я вообще могу поставить приложение специально ради клёвой иконки или снести из-за плохой — 54 (7%)
У меня айфон висит в раме на стене, и на нём — тщательно выбранные приложения с лучшими иконками; я их никогда не запускаю — 31 (4%)
811 человек проголосовало.

Гениальное обозначение анального и вагинального секса:

Хорошая аналогия в «Бизнес-линче» месячной давности:

Про чистку от ошмётков. Бывает, вам надо показать фрагмент чего-то, как вот мне, например, схемы метро Осло. Я вырезаю нужный кусок из большой картинки:

Перед тем, как сохранить, нужно убрать вот это говно:

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

Но вот этот хвостик от буквы можно и грохнуть:

Однажды я опубликовал на Ютюбе видео, которое набрало уже 12 миллионов просмотров и 1,5 тысячи комментариев, в половине из которых выражается недоумение по поводу происходящего в кадре. Фрагмент полуфинала чемпионата Великобритании по снукеру, играют Хиггинс и О’Салливан, 13-й фрейм:

Как написать короче, используя цвет (было и стало):

Я когда на днях добавил в проектах новые титры с фотографиями и ссылками, забыл обратить ваше внимание на то, что:

1. Если есть ссылка, то фотка тоже обязательно кликается. Это прям правило: картинка, относящаяся к ссылке, должна тоже кликаться. Например, какая-нибудь фоточка про новость рядом с заголовком новости.
2. Кликабельность не пропадает между именем и фоткой. Веб-разработчики всё время забывают это настроить, получаются дырявые ссылки. Не забывайте:

По всей России висят такие таблички разной степени уродства. Лев Владов как-то прислал мне эту (из Челябинска) и спросил, как можно улучшить:

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

Это, кстати, те самые трамваи, которых схема. Присылайте свои варианты тоже (@ilyabirman_chat).

В Челябинске из-за обилия заводов особенная топонимика: ЧМК, ЧЭМК, ЧГРЭС, АМЗ, ЧТЗ, КБС... При этом я понятия не имею, как некоторые из них расшифровываются. Это как JPG: плевать, как расшифровывается, но все знают.

Когда я показывал свою давнюю схему Тёме Лебедеву, его первый комментарий был: «Пиздец, город аббревиатур».

На новой схеме мы постарались хоть чуть-чуть снизить градус жести и написали словами то, что можно («Парк Гагарина» вместо ПКиО; «Педагогический» и «Аграрный» университеты вместо набора букв, который я не смогу воспроизвести):

ЮУрГУ (Южно-Уральский государственный университет) оставили, потому что его все так и называют. Аграрный все называют «сельхознавоз»; этот факт мы приняли решение не отражать на схеме.

Обложка номера о женской сексуальности:

Ещё красиво свёрстан правый верхний угол

Логотип Открытого университета Каталонии (тех же ребят):

http://wearemucho.com/

На сайте Стокгольмской дизайн-лаборатории очень круто сделан поиск в меню. Единственное, что отличает поле от ссылки — мигающий курсор:

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

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

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

Про «Ещё 50 моделей» я сегодня уже писал.

Но зато смотрите, в чём фокус. Тут не сказано ничего про модность, не показаны «луки» (пока). Но уже есть ощущение, что валенки крутые (хотя сами валенки на картинке обычные). Просто сайт выглядит не по-деревенски.

Это вот дизайн. Когда мы используем не только слова и фотографии для передачи сообщения, но все доступные выразительные средства. Теперь если в макете нигде не будет ни слова про модность и ни одной фотографии человека, я всё равно буду считать эту задачу решённой.

(Работа Александры Ещенко)

Небольшое улучшение в подвале моего сайта. Было:

Стало:

Нижнюю иконку нужно отразить, чтобы смотрела в сторону убежища (кстати, убежища тут на каждом углу и в каждом дворе, и по идее ты должен знать ближайшее к дому, куда тебе бежать, если что):

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

Вот убежище с фотки выше. Я не знаю, как на иврите убежище. Написано מקלט (мклт). Но какие там гласные? Маклит? Миклет? Мкалот? Я предположил, что миклат, потому что убежище — это место. И оказался прав. Это магия.

Как-нибудь всё-таки напишу.

П. С. Другие места с тем же паттерном гласных, которые я уже знаю: мизрах (восток), мисрад (кабинет), митбах (кухня), мифъаль (завод).

Дайджест подготовил higimo.

29 янв — 4 фев ← → 12—18 фев

Вот как выглядела позапозапрошлая неделя в моём канале в телеграме:

Вторник, 6 февраля

Андрей Бочкарев спрашивает в «Советах» о сайте магазина, который не продаёт через интернет, какое там целевое действие. Ответ:
https://bureau.ru/bb/soviet/20180206/

Что понравилось в картинке:

Кампусы объединены в сеть номеров. Возможно, линии — это физические дорожки. Каждый номер в кружочке имеет физический носитель в виде номера в кружочке. А могли бы просто воткнуть скучную стелу.

Вот как выглядел Зерулс до редизайна, кстати. С 2010 года, олдскул. Тогда я ещё не догадался, что заголовок можно не делать.

Среда, 7 февраля

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

Деловая переписка:

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

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

В иврите нет гласных букв, поэтому обычно всякие слова выглядят короче. По-английски на гостинице написано Renaissance, а на иврите — רנסנס (рнснс). Но иногда бывает наоборот:

Ink превратился в אינק (айнк, в углу). Почему буква алеф считается согласной — я пока не постиг. Очень часто она не читается вообще никак и сочетание אי просто передаёт «и» в заимствованных словах.

(Потом было про звёзды и про края пересвеченных фотографий на белом фоне, я сделал отдельные заметки.)

Четверг, 8 февраля

Никита Фо нарисовал красоту и принёс в чат. А я делюсь с вами.

Это маленький катушечный магнитофон (очки для сравнения размера). Очень нравится, как дозированно используется белый цвет.

Насчёт описания выпадайки:

Я сразу заметил прокол, конечно — 58 (17%)
Я сначала не заметил, но когда ты спросил, подумал, и понял, в чём проблема — 71 (21%)
Понял, в чём прокол, только когда дочитал у тебя — 99 (29%)
Так и не понял, в чём прокол — 38 (11%)
Вообще не читал заметку — 72 (21%)

Девушки, простите, что тут в мужском роде варианты ответа. Не такой уж и могучий русский язык, как нам пытаются внушить. Голосуйте тоже, пожалуйста <3

Ох, какое всё красивое на новом Зерулсе! Любо-дорого смотреть:

В продолжение сегодняшнего поста про выпадайки — смотрите, что творит Сафари. Если ты дошёл стрелочкой до найденного варианта, который не начинается на введённые тобой буквы, то он дописывает только остаток, а на то, что было перед этим — просто забивает. Потому что тут пофиг: при нажатии на Энтер просто откроется страница из букмарок, сам текст из поля никуда не пойдёт. А дёрганий меньше:

Пятница, 9 февраля

Это Винамп, великий аудиоплеер из прошлого:

А точнее, его реализация на Джаваскрипте:
https://jordaneldredge.com/projects/winamp2-js/

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

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

Тут все знаки из разных шрифтов, поэтому выглядит корявенько.

И таки что вы думаете? Я вычитал, что в арабском вопросительный знак разворачивают именно так, как я нарисовал. Теперь вот думаю, не оскорбляет ли моя картинка чувства воинственно настроенных израильтян.

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

В общем, есть чему поучиться у арабов.

Ещё мне рассказывали, что реальные живые испанцы не пишут перевёрнутые восклицательные и вопросительные знаки в начале предложений, потому что это жесть.

Но по части вопросительных знаков всех уделывают греки. Вы же знали, что у них вопросительный знак — это ; а точка с запятой — это · ?

Με συγχωρείτε· πού είναι οι τουαλέτες;
Простите; где туалет?

Греческий красивый:

А вы знали, что стороны пластинки можно называть не только A и B или «эта» и «та», но и по названию первого трека? Клёво!

Нате вам спойлер будущего мегасовета про принципы транспортных схем (возможно, разделится на несколько частей):

Моё рабочее место этим вечером — ограждение между набережным тротуаром и пляжем Тель-Авива, расположенное на идеальной высоте для работы стоя:

Alex Lenyashin пишет:

Две палочки сделал новый сайт доставки. Выбор количества персон — кайф

Суббота, 10 февраля

Зашёл в книжный. Симпатично выглядят развороты, где логотипы подписаны:

Статью проглядел по диагонали:
https://www.fastcodesign.com/90159243/no-one-should-care-this-much-about-a-corporations-logo

Но смотрите, какая красивая картинка в начале:

Разбираю работы студентов:

Вот у кнопок тени падают вправо-вниз, а надо — строго вниз.

Настолько же «надо», насколько подчёркивать ссылки или делать звёзды непухлыми. Если точно знаешь, почему именно у тебя не надо — ну делай как знаешь. Но здесь явно не тот случай, когда человек осознанно выбрал такой стиль — такое направление теней больше нигде в макете не используется, и даже соседняя кнопка «Показать ещё» вообще в другом стиле.

Это пример, когда тень должна падать вправо-вниз. Олдскул, Нортон, текстовый режим:

В четырёхзначных суммах не нужно отбивать тысячи от сотен, тем более целым пробелом:

А у подписи к картинке не нужна точка в конце:

Воскресенье, 11 февраля

Сайты Атлассиана, Слэка, Интеркома и Эйртейбла. Может показаться, что они ничем не отличаются. Но Слэк смело расположил иллюстрацию слева от текста. А Атлассиан инновационно покрасил кнопку в зелёный!

Узнайте, что произойдёт в мире ровно через год. Присоединяйтесь к Твиттеру ровно через год!

В меню сайта в студенческой работе текущий раздел выделяется жирностью:

В общем случае это не очень хорошо, потому что при переключении разделов меню будет «прыгать». Конечно, продажи от этого не упадут, но просто неряшливо.

Нормально выделять жирным, если размеры пунктов меню фиксированные и не зависят от самого текста.

У меня на сайте выделяется жирным, потому что у меня шрифт, у которого метрики не меняются при изменении жирности.

Хотя, может, я бы и забил, если бы менялись. Но будьте внимательны всё равно.

Дайджест подготовил Вениамин Векк.

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

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