Город для велосипедов — это жесть. Ещё один видосик из Амстердама:
Наземный транспорт в Берлине
И ещё Берлин.
Трамвайчик:
Вход:
Поворачивает весь в рекламе такой:
Экран внутри довольно мусорный:
Билеты::
Валидатор:
Остановка и тотем как в «Долине монументов»:
Тотем светится по ночам:
Автобусная остановка. Экран ближайших маршрутов:
Элемент навигации такой же формы:
Информация о маршрутах на большой автобусной станции:
Экран внутри автобуса:
999-й:
Карта:
Школьный автобус с обозначением школьников в духе уродского берлинского человечка со светофора:
Велопрокат:
Очень красивые штуки, в которые вставлять велосипед:
Фотографии из поездок в марте и мае 2016.
Ещё Берлин:
- Метро (добавил туда ещё одну фотку)
- Названия на станциях метро Берлина
- Железная дорога
- Уличные таблички
- Знаки, вывески, плакаты
- Кофе
- Магазин «Планета Модулор»
- Рассказы в «Мире»
Под каждой заметкой с тегом «мир» — поиск дешёвых авиабилетов.
Что почитать на выходных — 162
Вот:
- Как стать дизайнером. Женя Арутюнов объяснил.
- Вероломные методы хедхантинга в соцсетях.
- Courage. Марко Армент комментирует форму экрана Айфона 10: «This is the new shape of the iPhone. As long as the notch is clearly present and of approximately these proportions, it’s unique, simple, and recognizable».
- Thoughts and Observations on the Products Announced at This Week’s iPhone X Introductory Event. Грубер: «They stopped pursuing Touch ID under the display not because they couldn’t do it, but because they decided they didn’t need it».
Хотите стать спонсором рубрики? Пишите: ilyabirman@ilyabirman.ru
Интерфейс охранного приложения «Варяга»
Сдизайнил интерфейс охранного приложения «Варяга». Смотрите там видосик и читайте о проекте.
Аудио по четвергам: «Плохо танцевать»
Группа «Айова» отличается тем, что я пока не нашёл у неё ни одной плохой песни.
Особенно хорош здесь в 2:31 переход на вдвое медленнее со сдвигом по фазе. Люблю, когда в попсе не ленятся и делают интересно. А ещё она клёво произносит «де» в слове «раздетым» на 1:33.
Ну и по смыслу песня глубоко правильная, конечно.
Просмотр картинок в браузере
Все облачные сервисы бесят тем, что при просмотре картинок заменяют стандартный интерфейс браузера своим калечным говном. Вокруг картинки, которую я пытаюсь посмотреть, развешивают целые гирлянды из бессмысленного шлака.
У Дропбокса и Яндекса вообще треть экрана справа отъедает неведомая панель, смысла которой я не знаю, потому что всё, что меня в ней интересует — это как её нахрен убрать.
А вот у Гугля какой-то принтер, скачивалка, многоточие — нахрена это всё? Снизу целых три кнопки для зума, хотя и на компьютере, и на телефоне и так для этого есть все элементы управления.
Но самая жесть, что все эти тупые сервисы на кой-то хрен заменяют стандартную прокрутку на зум. Это похоже на эксперимент с велосипедом, у которого руль работает в противоположную сторону — я просто не могу этим говном пользоваться. Я пытаюсь скролить, тупица, нахрена ты мне увеличил картинку и сдвинул её левее окна?
Дроплер всегда вёл себя лучше всех, но в последнее время стал картинку показывать не тегом img, а фоном, поэтому я теперь не могу её из браузера затащить в Фотошоп или сохранить по правой кнопке. Спрашивается, нахрена было ломать то, что работает?
Мало того, что это всё полное говно, так это ж ещё куча человеко-часов потрачена на то, чтобы весь этот ад запрограммировать.
Между тем, браузеры уже больше двадцати лет прекрасно справляются с тем, чтобы открыть картинку. Для этого не нужны не только скрипты, но и даже ХТМЛ — просто дайте прямую ссылку на файл. И там можно и сохранить, и распечатать, и зазумить, и проскролить — и всё работает стандартно и привычно.
Телеграм за неделю 24—30 июля 2017
17—23 июля ← → 31 июля — 6 августа 2017
Восстанавливаю архив своего канала в телеграме. Сегодня — неделя 24—30 июля.
Понедельник, 24 июля
Искал букву бета, а случайно обнаружил тибетскую письменность. Смотрите, какая красота:
У Артёма сегодня вышел крутой совет про согласование. Так вышло, что самая большая картинка в нём — моя схема метро:
http://bureau.ru/bb/soviet/20170724/
Вспомнил по этому поводу пару примеров — оба про камеру айфона. Во-первых, иконка камеры на айфоне — правая верхняя, то есть максимально близко к тому, где камера расположена физически (с другой стороны от иконки как бы). Так было уже на первом айфоне, когда ещё нельзя было самому двигать иконки:
Во-вторых — дружба кнопки хоум и кнопки съёмки в приложении камеры:
А, ещё в Айфонах 1—4 камера стояла красиво — в центре скругления корпуса:
Потом это сломали, и айфон несколько лет был похож на кусок говна (у меня сейчас как раз такой), а починили только в семёрке. Про это была заметка в английском блоге:
http://ilyabirman.net/meanwhile/all/the-design-of-iphone-7/
Закулисы. Как-то так выглядит неопубликованный и недовёрстанный разворот книги «Пользовательский интерфейс» (сейчас работаю над заключительной четвёртой частью, первые три уже можно читать):
Вторник, 25 июля
У рекорд-лейбла (или как?) «Мелодия» отличный логотип:
Склоняемые бренды <3
В «Советы» прислали такую форму:
Автор утверждает, что начал учиться дизайну три дня назад. Неплохо. Разобрал по кусочкам:
http://bureau.ru/bb/soviet/20170725/
Серж Николаев нарисовал новый флаг России:
И объяснился в Фейсбуке:
https://www.facebook.com/kefiijrw/posts/10215423554206428
Стандартизируем уведомления и формочки на «Квартирке». Они вот такие лапоньки все:
Дошло до такого:
Это окно показывается, если человек пытался сменить почту, и только через месяц перешёл по подтверждающей ссылке из письма. Тут проблема со «взглядом новичка»: уже непонятно, где и как получить новую ссылку. Нужно объяснить прямо тут, да так, чтобы человек не утонул в тексте.
(Крестики в ПВУ станут крупнее, чтобы Фиттс не расстраивался, и перестанут быть синими, потому что их кликабельность и так очевидна)
Ко вчерашней теме про согласованность и домашний экран айфона. Первая иконка Айтюнс-стора была стрелкой вниз и указывала на иконку Айпода:
Когда позднее появилась возможность перемещать иконки, Айтюнс-стор стал ноткой:
Оказалось, что английское слово blueprint, которое, я думал, значит «чертёж», содержит корень blue потому что оно синего цвета. И на русском есть слово «синька», означающее копию, сделанную по той же технологии:
https://ru.wikipedia.org/wiki/Синька_(копия_чертежа)
Это я написал только для того, чтобы был повод показать такую красивую картинку:
Пытаюсь кое-что оплатить. Кнопка «Отказаться от оплаты» выглядит как поле:
Чуть не ткнул туда, пока заполнял. Не надо так. Кнопка должна быть похожа на кнопку. Или хотя бы на другие кнопки в интерфейсе.
Среда, 26 июля
Немного ночной мудрости от Ильяхова и Нозика:
Ну и пока ночь, ссылки по теме (18+):
Совет Нозика о трусах:
http://bureau.ru/bb/soviet/20160203/
Совет Нозика о лифчиках:
http://bureau.ru/bb/soviet/20151104/
Последние три пункта в меню Гугля называются «Ещё», «Настройки» и «Инструменты». Угадать, за каким из них что скрывается, невозможно.
Ещё — это другие разделы поиска:
Можно было бы просто поставить их поближе к предыдущим ребятам, чтобы связать через близость. Или даже заменить иконкой:
В «Настройках» живёт вообще свалка непойми чего, а в «Инструментах» — тюнинг выдачи:
Думаю, отчасти помогло бы переименование «Инструментов» в «Фильтры». Техническое слово конечно, но это всё равно уже продвинутый уровень — так хотя бы точнее.
Помните вчерашнее окно про недействительную ссылку? Обсуждаем, как сделать лучше — так или сяк:
Очевидно, второй вариант лучше: человек перешёл по ссылке, чтобы поменять почту, значит основное действие и должно быть на почётном месте.
Но возникает вопрос: а зачем вообще это окно, почему ссылка устаревает? Ну перешёл человек по ссылке через год, всё равно можно спокойно поменять почту. Решаем так и сделать, если для этого не придётся что-то сильно менять на бекенде. А если придётся, то это не так важно, и проще подкрутить окно.
Остаётся ещё один хитрый случай: допустим, человек поменял почту на X, не перешёл по ссылке из письма, потом поменял на Y, а потом перешёл по ссылке из первого письма. В этом-то случае та ссылка про X точно устарела, и нужно как-то об этом сказать. Причём второй вариант уже не прокатит — непонятно, на подтверждение какой почты слать ссылку пользователю.
Решаем, что это пофиг, и любая ссылка подтверждает свою почту, даже если после этого указали другую. В нашем сценарии человек подтвердит почту X. (Снова, если не придётся делать больших изменений на бекенде.)
Канал «Ворчание и нытьё»:
Тут пишут, что если УРЛ читается как предложение, то это высший пилотаж.
На самом деле нет: структура URL-а предполагает, что он иерархичный, тут же слэш используется как обычный разделитель в предложении. Ссылка yasobe.ru/na не имеет смысла ни иерархически, ни даже как текст.
Гораздо лучше — что-то вроде https://wpdev.uservoice.com/forums/257854/suggestions/6509607. Если следовать логике про предложение, то он должен выглядеть как https://wpdev.uservoice.com/suggestion/6509607/in/forum/257854. Ну бред же
Приведённый тут в пример в качестве хорошего урл — вероятнее всего, тоже плохой. Критерий хорошего урла — справа можно откусывать по одному сегменту, и по новому адресу что-то будет предсказуемое.
Дальше там у Никиты рассуждения про языки программирования, похожие на естественные, и почему это плохо (идите к нему в канал). Самый главный пример для меня — SQL. Расшифровывается Structured Query Language. Более неструктурированного языка я не видел. Ну, может, ещё Эплскрипт.
Четверг, 27 июля
Игорь Штанг комментирует заметку «Прямоугольнее»:
Вёрстка да. Но кажется, ты не очень попал в жанр: это больше похоже на плакат, чем на утилитарную табличку. В частности шрифт стал мельче и тоньше, чем на оригинале.
Мне часто на курсе приносят такие театральные расписания: какая-нибудь смелая модернистская компоновка, много воздуха, а текст про спектакли очень мелкий. Я говорю: а теперь сделай круто с крупным текстом.
Способ сделать круто с крупным текстом — набрать всё крупным текстом. Плакат из коллекции Артёма Горбунова:
Прямоугольность в рекламе Королевской академии художеств в Лондоне. Всё по углам, ничего в центре. Точнее, центральное место занимают собственно художества:
Можно круто сверстать и без прямоугольников, но это магия. Никто не знает, как они это делают:
Это несколько дней назад. Серёга и Володя снимают видос про Серёгин курс про пиктограммы:
А это сегодня. Видос вышел:
http://bureau.ru/educenter/icons/
Воскресенье, 30 июля
Как намекнуть посетителям кофе-бара, что взять кофе и сидеть три часа в вайфае — идея не очень? Можно так. Остроумно, хотя иметь дело с такими чуваками больше не захочется:
Вместо запретов и ограничений, всегда лучше просто создавать среду. Если хозяин предпочитает, чтобы в его кофе-баре не сидели с ноутбуками, можно ставить маленькие столики на уровне колен и не давать вайфая вообще. Такое место будет притягивать тех, кто просто хочет выпить кофе и поболтать 15-20 минут.
Дайджест подготовил Вениамин Векк.
Видео по вторникам: дрон и поезд
Чувак развлекается:
А поезд длинный капец.
Как работает обучение
Умники всё время победоносно приводят примеры хорошего дизайна, в котором нарушаются правила: «А вот крутой плакат, где не соблюдается правило внутреннего и внешнего! А вот удобный сайт, где ссылки не подчёркнуты! А вот красивая и понятная таблица с чересполосицей!»
Это как прийти на занятие по карате, и начать рассказывать: «А я видел, как во дворе один чувак другого сильно побил, не крича „кия“!» Причём рассказывать с искренней убеждённостью, что тренер не в курсе, что так бывает.
Задача преподавателя — научить и повысить разрешение. Для этого и нужны законы и правила. А если объявить: «Можно делать всё, что угодно, лишь бы был хороший результат», будет честно, но совершенно бесполезно.
См. также:
- Секрет дизайнерских правил
- Делать, как говорят (Женя Арутюнов)
Телеграм за неделю 23—29 октября 2017
Вот как выглядела прошедшая неделя в моём канале в телеграме:
Понедельник, 23 октября
Куаркоды в музеях — отстой и мусор. Когда сканируешь куаркод, чтобы узнать про картину, никакой магии нет.
Я сто лет назад сказал, что магия будет тогда, когда телефон будет картины и без куаркода узнавать, и вот оно, наконец, случилось:
https://smartify.org/
Вторник, 24 октября
Остроумно: чуваки используют камеру на айпаде в качестве кнопки —
https://medium.com/astro-hq/camera-button-ba3d8c493cbd
Николай Лисов спрашивает в Советах: «На днях пересел за Мак с „ретиной“, и не могу разобраться с разрешением в Фотошопе. Делаю скриншот — макеты получаются в два раза больше. Какой ставить Resolution в макетах (72, 96, 144)? Или нужно где-то ещё в настройке Фотошопа что-то сделать, чтобы масштаб был 1:1 и у меня, и на других компах?»
Отвечаю:
http://bureau.ru/bb/soviet/20171024/
А ещё я продаю машину (в Челябинске):
https://auto.ru/cars/used/sale/opel/astra/1060254540-9568e/
Если вам понадобится нарисовать заглавную версию знака @, то можно так:
Среда, 25 октября
Вот мой прошлогодний совет об увеличении фоток. «Если бы я мог дать один универсальный совет веб-дизайнерам, который подойдёт наверняка, я бы дал такой: увеличьте фотографии» —
http://bureau.ru/bb/soviet/20160614/
Я постоянно прошу всех дизайнеров увеличивать картинки товаров, которые человеку предстоит трогать, нюхать или, тем более, есть.
А тут Макс Ильяхов подогнал отличный пример из своего диалога со студентом Школы редакторов:
«У тебя сейчас так:
А надо так:
С соблюдением теории близости, конечно:
В натуральную величину:
Блин, а вот это, кстати, шикарная идея:
Вот, охуенно»
Когда вам кажется, что дальше увеличить картинки уже просто невозможно, увеличьте ещё в два раза, и будет как раз ок.
Когда-то вышла очередная версия Эверноута под айфон, и выглядела она примерно так:
Я тогда отметил себе, что клёво смотрится, когда на цветном фоне что-то написано и белым, и чёрным (статус-строка тут чёрная).
(Это, кстати, очень крутой сайт https://work.co/.)
Вот подобную штуку мы использовали на «Квартирке» (чёрный крестик):
Вот какая-то картинка участника интерфейсного курса. Вроде ничё особенного, но эффект есть:
А вот не на цветном, а на сером. У меня на сайте в разделе «Музыка». Особенно мне нравится в мобильной версии с чёрными стрелочками:
Пятница, 27 октября
Илья Синельников справедливо напоминает ещё один пример чёрного и белого на цветном — обложку нашей Школы менеджеров:
Раньше кнопки делали объёмными с помощью бликов и теней, потом стали градиентом обозначать выпуклость. Сейчас всё чаще достаточно просто плашки под словом, чтобы оно стало кнопкой. Края такой плашке, конечно, хочется скруглить, но в особых случаях можно и не скруглять.
Но есть одно свойство кнопки, которое пережило весь флет-дизайн: выравнивание текста по центру. Реально, если на плашке написать слово по левому краю, то за кнопку её уже никто не признает.
Суббота, 28 октября
Мой троюродный брат Дима Бирман прислал офигенное немецкое автобусное расписание. Оно очень красивое, но понять в нём нельзя вообще ничего:
Это скриншот «Медузы» с моего рабочего стола. Пример случайного совпадения, искажающего смысл:
Галочка читается как «выполнено», «готово», «успех». Закрыли тудушечку.
Это не упрёк «Медузе», конечно. Так бывает. У меня в курсе даже тема есть небольшая «Случайные искажения информации» про такие эффекты.
А вот Вика прислала безумную-прекрасную афишу из Будапешта:
Никто не умеет делать как венгры. Вроде всё суперуродское и кривое, но выглядит обалденно. Если вы не были в Будапеште, езжайте обязательно.
Кстати, среда по-венгерски — «серда» (смотрите на картинке).
Папа привёз из Китая туалетные пиктограммы:
(Спасибо, пап!)
Воскресенье, 29 октября
Каждый раз ставят в тупик эти меню в интернет-банках. Вот мне надо перевести в другому клиенту в другой банк и в валюте. Причём перевести деньги, а не что-то ещё. Куда мне блин жать?
Олег Мохов пишет: «Невероятно, что в России так могут» —
В России могут очень круто. Если выгнать из России наших чиновников, то получится клёвая страна.
Вот московское архитектурное бюро спроектировало небоскрёб для Манхэттена.
С дайджестом помог Иван Ветошкин.