Пользуясь случаем, напомню, что ещё открыта запись на февральский (24—28) московский курс об интерфейсе и представлении информации: https://bureau.ru/educenter/ui/
По ссылке программа курса и миллион отзывов. Может сложиться впечатление, что мы публикуем только положительные отзывы, но нет, мы публикуем всё, что разрешают участники. Правда, я еле успеваю их разгребать, поэтому отзывы сильно отстают от реального времени.
Вот какой-то случайный отзыв:
Иконка туалета в местном сёрф-клубе:
Дизайнер Илья Харитонов, уже знакомый моим читателям, кое-что для меня сверстал и сделал себе логотип:
Красная капсула выглядит так, будто плавно ездит по шахте:
Нужно расскруглить ей правые скругления, и тогда всё это станет переключалкой.
Оставьте почту, чтобы узнать, когда выйдет электронная книга Владимира Колпакова «Фотосъёмка автомобилей»
Давайте поговорим об анимации. Анимация в интерфейсе не должна быть навязчивой. Масштабная анимация подойдёт для шоу, но не для того, что ты делаешь сто раз в день. Вот, например, Мак переключает рабочие столы, сдвигая одним другой прямо перед тобой. Это перебор.
По крайней мере, у него хватает ума не показывать все промежуточные рабочие столы, если их там несколько между. Но по-нормальному надо было делать вот так. Достаточно лишь намекнуть на направление движения, а не показывать весь путь.
Этот приём можно использовать много где в интерфейсе. Если у вас какая-то фигня должна улететь с экрана, можно дать ей пролететь 20 пикселей и одновременно увести её в полную прозрачность. Чаще всего этого будет достаточно.
При этом, конечно, важно экспериментировать и развлекаться. Например, вот кто-то попробовал учитывать направление наведения в ховер-эффектах. Это клёво, где-нибудь пригодится, но точно не как дефолтное поведение всего: https://css-tricks.com/direction-aware-hover-effects/
Маленький секрет Мака. С некоторых пор зелёная кнопка в светофоре окна стала переводить окно в фулскрин (который многих бесит своей изолированностью и тормознутой анимацией):
Если вы хотите просто увеличить окно «по-старому», не превращая его в полноэкранное приложение (т. е. сделать zoom, а не full screen в терминах Мака), то надо жать зелёную кнопку с альтом. Тогда в зелёной кнопке будет старый добрый плюсик. Заскриншотить это чуть сложнее, так что скриншота не будет.
Читатель Александр прислал пешеходный светофор из Дрездена:
Верхняя секция информирует, что кто-то уже нажал на кнопку вызова зелёного света.
Дизайн иконки приложения — суперважная штука. Это единственное, что будет мозолить мне глаза на телефоне, даже если я не буду ваше приложение запускать. Поэтому ей нужно быть офигенной, даже если само приложение просто «ОК». Более того, красивую иконку просто хочется поставить, даже если сама прога за ней — не очень. Вот Апстор мне на днях показал какую-то игру:
Пофиг, что за игра — я сразу установил, просто потому что хочу такую красивую штуку видеть. (Игра оказалась тоже неплохой вроде бы.)
А вот как выглядят иконки приложений от моего фотоаппарата. Какими бы полезными они ни были, они уезжают в дальнюю папку, причём даже не на первый её экран:
Насчёт иконок
Мне полностью плевать на них — 110 (14%)
Рад хорошей иконке, но она не влияет на то, как я расположу приложения на экране — 376 (46%)
Слишком страшную иконку спрячу с первого экрана, если это не суперважное приложение, нужное сто раз в день, конечно — 240 (30%)
Я вообще могу поставить приложение специально ради клёвой иконки или снести из-за плохой — 54 (7%)
У меня айфон висит в раме на стене, и на нём — тщательно выбранные приложения с лучшими иконками; я их никогда не запускаю — 31 (4%)
811 человек проголосовало.
Гениальное обозначение анального и вагинального секса:
Хорошая аналогия в «Бизнес-линче» месячной давности:
Про чистку от ошмётков. Бывает, вам надо показать фрагмент чего-то, как вот мне, например, схемы метро Осло. Я вырезаю нужный кусок из большой картинки:
Перед тем, как сохранить, нужно убрать вот это говно:
Вот это убрать нельзя, потому что там зарубки станции видны, и без подписи будет выглядеть странно:
Но вот этот хвостик от буквы можно и грохнуть:
Однажды я опубликовал на Ютюбе видео, которое набрало уже 12 миллионов просмотров и 1,5 тысячи комментариев, в половине из которых выражается недоумение по поводу происходящего в кадре. Фрагмент полуфинала чемпионата Великобритании по снукеру, играют Хиггинс и О’Салливан, 13-й фрейм:
Как написать короче, используя цвет (было и стало):
Я когда на днях добавил в проектах новые титры с фотографиями и ссылками, забыл обратить ваше внимание на то, что:
Если есть ссылка, то фотка тоже обязательно кликается. Это прям правило: картинка, относящаяся к ссылке, должна тоже кликаться. Например, какая-нибудь фоточка про новость рядом с заголовком новости.
Кликабельность не пропадает между именем и фоткой. Веб-разработчики всё время забывают это настроить, получаются дырявые ссылки. Не забывайте:
По всей России висят такие таблички разной степени уродства. Лев Владов как-то прислал мне эту (из Челябинска) и спросил, как можно улучшить:
Если честно, сама идея повесить мини-табличку на высоте светофора — чушь собачья; нужен нормальный плакат перед глазами. Но если представить, что можно что-то делать только внутри этой таблички, то, например, так:
Это, кстати, те самые трамваи, которых схема. Присылайте свои варианты тоже (@ilyabirman_chat).
В Челябинске из-за обилия заводов особенная топонимика: ЧМК, ЧЭМК, ЧГРЭС, АМЗ, ЧТЗ, КБС... При этом я понятия не имею, как некоторые из них расшифровываются. Это как JPG: плевать, как расшифровывается, но все знают.
Когда я показывал свою давнюю схему Тёме Лебедеву, его первый комментарий был: «Пиздец, город аббревиатур».
На новой схеме мы постарались хоть чуть-чуть снизить градус жести и написали словами то, что можно («Парк Гагарина» вместо ПКиО; «Педагогический» и «Аграрный» университеты вместо набора букв, который я не смогу воспроизвести):
ЮУрГУ (Южно-Уральский государственный университет) оставили, потому что его все так и называют. Аграрный все называют «сельхознавоз»; этот факт мы приняли решение не отражать на схеме.
Обложка номера о женской сексуальности:
Ещё красиво свёрстан правый верхний угол
Логотип Открытого университета Каталонии (тех же ребят):
На сайте Стокгольмской дизайн-лаборатории очень круто сделан поиск в меню. Единственное, что отличает поле от ссылки — мигающий курсор:
В школе дизайнеров одно из стандартных заданий по моему предмету — сайт про валенки. Вы видели сто раз разные огрызки разных работ. Там одна из штук в том, что нужно как-то развеять мнение, будто валенки — для бабушек в деревне.
Кто вообще поймёт, что это надо сделать, и хотя бы напишет «Валенки — это модно» — уже молодец. Настоящий молодец тот, кто нароет и как-нибудь их расставит клёвых фотографий красивых молодых людей в городе — в валенках.
Но круче всех ребята, которые передают ощущение крутости валенок всей вёрсткой. Вот, например, сейчас у меня перед глазами такая работа:
Про «Ещё 50 моделей» я сегодня уже писал.
Но зато смотрите, в чём фокус. Тут не сказано ничего про модность, не показаны «луки» (пока). Но уже есть ощущение, что валенки крутые (хотя сами валенки на картинке обычные). Просто сайт выглядит не по-деревенски.
Это вот дизайн. Когда мы используем не только слова и фотографии для передачи сообщения, но все доступные выразительные средства. Теперь если в макете нигде не будет ни слова про модность и ни одной фотографии человека, я всё равно буду считать эту задачу решённой.
(Работа Александры Ещенко)
Небольшое улучшение в подвале моего сайта. Было:
Стало:
Нижнюю иконку нужно отразить, чтобы смотрела в сторону убежища (кстати, убежища тут на каждом углу и в каждом дворе, и по идее ты должен знать ближайшее к дому, куда тебе бежать, если что):
Про иврит всё не доходят написать, насколько это офигенный язык. Когда смотришь текст, кажется, что это какая-то жесть, в которой невозможно разобраться. Но по мере того, как нейронные связи строятся, становится всё понятно. Язык логичный и иногда просто математически предсказуемый.
Вот убежище с фотки выше. Я не знаю, как на иврите убежище. Написано מקלט (мклт). Но какие там гласные? Маклит? Миклет? Мкалот? Я предположил, что миклат, потому что убежище — это место. И оказался прав. Это магия.
Как-нибудь всё-таки напишу.
П. С. Другие места с тем же паттерном гласных, которые я уже знаю: мизрах (восток), мисрад (кабинет), митбах (кухня), мифъаль (завод).
Андрей Бочкарев спрашивает в «Советах» о сайте магазина, который не продаёт через интернет, какое там целевое действие. Ответ: https://bureau.ru/bb/soviet/20180206/
Кампусы объединены в сеть номеров. Возможно, линии — это физические дорожки. Каждый номер в кружочке имеет физический носитель в виде номера в кружочке. А могли бы просто воткнуть скучную стелу.
Вот как выглядел Зерулс до редизайна, кстати. С 2010 года, олдскул. Тогда я ещё не догадался, что заголовок можно не делать.
Среда, 7 февраля
Это макет, который я недавно комментировал в рамках платной скайп-консультации. С разрешения клиента публикую тут, и сейчас расскажу, что здесь не так:
Кстати, это ещё одна причина не писать своё имя задом наперёд. У многих людей это трамва детства, они прям представляются так, как их Мариванна в школьном журнале писала: «Здравствуйте, меня зовут Андреев Илья». Как язык поворачивается? Какой нахрен Андреев Илья, когда ты Илья Андреев?
Понятно, что полностью от таких ошибок это не спасёт, но думаю, что сократит их количество. Главное, самоуважение повысится: перестанешь чувствовать себя оправдывающимся у доски.
В иврите нет гласных букв, поэтому обычно всякие слова выглядят короче. По-английски на гостинице написано Renaissance, а на иврите — רנסנס (рнснс). Но иногда бывает наоборот:
Ink превратился в אינק (айнк, в углу). Почему буква алеф считается согласной — я пока не постиг. Очень часто она не читается вообще никак и сочетание אי просто передаёт «и» в заимствованных словах.
Я сразу заметил прокол, конечно — 58 (17%)
Я сначала не заметил, но когда ты спросил, подумал, и понял, в чём проблема — 71 (21%)
Понял, в чём прокол, только когда дочитал у тебя — 99 (29%)
Так и не понял, в чём прокол — 38 (11%)
Вообще не читал заметку — 72 (21%)
Девушки, простите, что тут в мужском роде варианты ответа. Не такой уж и могучий русский язык, как нам пытаются внушить. Голосуйте тоже, пожалуйста <3
В продолжение сегодняшнего поста про выпадайки — смотрите, что творит Сафари. Если ты дошёл стрелочкой до найденного варианта, который не начинается на введённые тобой буквы, то он дописывает только остаток, а на то, что было перед этим — просто забивает. Потому что тут пофиг: при нажатии на Энтер просто откроется страница из букмарок, сам текст из поля никуда не пойдёт. А дёрганий меньше:
Самая нелепость в ивритской типографике — это то, что они пишут справа налево, но при этом пунктуацию пишут так же, как мы. Вот передо мной какая-то газета лежит:
Тут нет вопросительных знаков, но их они тоже ставят спиной к тексту, что выглядит как глюк. Казалось бы, сам бог велел всё развернуть, вот так:
Тут все знаки из разных шрифтов, поэтому выглядит корявенько.
И таки что вы думаете? Я вычитал, что в арабском вопросительный знак разворачивают именно так, как я нарисовал. Теперь вот думаю, не оскорбляет ли моя картинка чувства воинственно настроенных израильтян.
Я причём сначала думал, что они пишут «обычные» запятые и вопросы, просто потому что компьютеры не умеют или плохо умеют отражать, или потому что в шрифтах такого нет. А потом увидел, что от руки они пишут так же, так что дело не в компьютерах.
В общем, есть чему поучиться у арабов.
Ещё мне рассказывали, что реальные живые испанцы не пишут перевёрнутые восклицательные и вопросительные знаки в начале предложений, потому что это жесть.
Но по части вопросительных знаков всех уделывают греки. Вы же знали, что у них вопросительный знак — это ; а точка с запятой — это · ?
Με συγχωρείτε· πού είναι οι τουαλέτες;
Простите; где туалет?
Греческий красивый:
А вы знали, что стороны пластинки можно называть не только A и B или «эта» и «та», но и по названию первого трека? Клёво!
Нате вам спойлер будущего мегасовета про принципы транспортных схем (возможно, разделится на несколько частей):
Моё рабочее место этим вечером — ограждение между набережным тротуаром и пляжем Тель-Авива, расположенное на идеальной высоте для работы стоя:
Alex Lenyashin пишет:
Две палочки сделал новый сайт доставки. Выбор количества персон — кайф
Суббота, 10 февраля
Зашёл в книжный. Симпатично выглядят развороты, где логотипы подписаны:
Вот у кнопок тени падают вправо-вниз, а надо — строго вниз.
Настолько же «надо», насколько подчёркивать ссылки или делать звёзды непухлыми. Если точно знаешь, почему именно у тебя не надо — ну делай как знаешь. Но здесь явно не тот случай, когда человек осознанно выбрал такой стиль — такое направление теней больше нигде в макете не используется, и даже соседняя кнопка «Показать ещё» вообще в другом стиле.
Это пример, когда тень должна падать вправо-вниз. Олдскул, Нортон, текстовый режим:
В четырёхзначных суммах не нужно отбивать тысячи от сотен, тем более целым пробелом:
А у подписи к картинке не нужна точка в конце:
Воскресенье, 11 февраля
Сайты Атлассиана, Слэка, Интеркома и Эйртейбла. Может показаться, что они ничем не отличаются. Но Слэк смело расположил иллюстрацию слева от текста. А Атлассиан инновационно покрасил кнопку в зелёный!
Узнайте, что произойдёт в мире ровно через год. Присоединяйтесь к Твиттеру ровно через год!
В меню сайта в студенческой работе текущий раздел выделяется жирностью:
В общем случае это не очень хорошо, потому что при переключении разделов меню будет «прыгать». Конечно, продажи от этого не упадут, но просто неряшливо.
Нормально выделять жирным, если размеры пунктов меню фиксированные и не зависят от самого текста.
У меня на сайте выделяется жирным, потому что у меня шрифт, у которого метрики не меняются при изменении жирности.
Хотя, может, я бы и забил, если бы менялись. Но будьте внимательны всё равно.
Оказывается, фавыконка нового Зерулса случайно была на белом фоне. Если у вас есть картинка на белом фоне, и его надо сделать прозрачным, при этом сохранив весь антиалиасинг (пиксели промежуточных цветов по краям контура), то это делается вот так:
На самом деле вдвое быстрее, но я тут ещё комментирую.
Есть такая засада, когда вёрстка пытается использовать прямоугольность фоток, а фотки этому сопротивляются, потому что пересвеченые:
Конечно, лучше всего такие фотки заменить нормальными. Но предположим, что это почему-то невозможно. Фотограф в отпуске, открываться нужно через 15 минут.
Можно попробовать взять такие фотки в рамки:
Но это выглядит фигово. Особенно, если соседствуют и такие и такие:
Намного лучше немного подтемнить фотку с нужной стороны. Я тут ещё и подсинил чуток, так как это снег:
Можно ещё попытаться вытянуть хоть какую-то текстуру снега, чтобы он не выглядел таким плоским, но это уже не касается вёрстки, а касается обработки фото.
Это копипейст из канала в телеграме. Это бы попало в стенограмму за 5—11 февраля, но я выкусил и делаю отдельной заметкой. Заметку помог подготовить Вениамин Векк.
Понравилось место под названием «Покешоп» (Фришман × Ибн Гвироль). Там тебе дают миску риса, на который сверху насыпают разных прекрасных продуктов и наливают соусов. У меня тут свежий несолёный лосось, миндаль, авокадо, тхина. Остальное и так видно. Это обожрака, при этом очень вкусная.
Звёзды не надо делать пухлыми. Они выглядят дебильно:
Вот эта штука должна быть прямой линией:
Звезда здорового человека, короче, такая:
Понятно, что стилистическая задача может требовать чего-то там. Но я говорю о виде звезды по умолчанию. Это как «ссылка должна быть подчёркнута».
Сергей Чикин пишет: «Если ты Энгрибердс, то пухленькие — норм».
Это копипейст из канала в телеграме. Это бы попало в стенограмму за 5—11 февраля, но я выкусил и делаю отдельной заметкой. Заметку помог подготовить Вениамин Векк.
Полтора года назад я выпустил схему московского метро с Окружной линией — вам она известна под дебильным названием МЦК. Так вышло, что пока я рисовал схему, считалось, что Октябрьское Поле и Панфиловская никак не связаны, ну я так и нарисовал:
Но когда МЦК запустили, их вдруг решили считать пересадкой (там 750 метров по улице).
С тех пор открывались новые отрезки Марьина Роща — Петровско-Разумовская (Люблинская линия), Парк Победы — Раменки (Солнцевская линия), и я их добавлял на схему. Но это место не трогал, потому что там надо было всё взорвать, чтобы эту пересадку нарисовать.
А потом пришёл Илья Харитонов и буквально за годик всё сделал (пришлось даже Тверскую чуточку подвинуть):
Да ещё и алфавитный указатель заверстал:
В указателе используется система, которую я изобрёл пять лет назад:
Вместо антигуманной координатной сетки, тут просто показано на какой линии станция и в какой части схемы её искать. Ничего более удобного никто в мире не придумал.
Мы анонсировали, но пока не выпустили английскую версию книги Артёма Горбунова «Типографика и вёрстка». Ещё не анонсировали, но работаем и над английской версией моей книги об интерфейсе. И хотим в будущем делать другие книги на английском.
С одной стороны, коллективно у нас нормальный английский — можем написать заметку в блоге или рассказ о проекте в портфолио. С другой, книга — это всё-таки книга, за книгу другой спрос. Поэтому я хочу найти человека, который бы помог довести книги до ума.
Мы ориентируемся не только на ту аудиторию, у которой английский — родной. Наши книги должны быть понятны всем, кто в принципе читает по-английски. Поэтому витиеватый тафтианский язык нам не подойдёт. Но когда книгу будет читать американец, ему не должен слышаться русский акцент.
Я не ищу переводчика. Скорее, мне нужен пишущий нейтив-спикер, которому было бы интересны наши книги, и который мог бы их прочитать, подчеркнуть все корявые места и предложить другие формулировки. Хорошо бы, чтобы это был прям человек из дизайна, знакомый с типографической и интерфейсной терминологией, чтобы не получалось, что вещи, которые Мюллер-Брокман или Раскин называют так, мы вдруг называем сяк.
Как бы вы искали такого человека? Или как бы вы решали такую задачу?
