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

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

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

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

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

Телеграм-канал

Телеграм за неделю 4—10 декабря 2017

27 ноя — 3 дек 2017

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

Понедельник, 4 декабря

Иван Акулов (с которым мы делаем Лайкли) показывает клёвые таблички:

Дайджест телеграма за неделю 4–10 декабря 2017

Вторник, 5 декабря

Смотрите, какой логотип:

Дайджест телеграма за неделю 4–10 декабря 2017

И ещё у меня новый совет про схемы метро. Как выбрать формат:
http://bureau.ru/bb/soviet/20171205/

Иконка женского туалета в мэрии Тель-Авива:

Дайджест телеграма за неделю 4–10 декабря 2017

И мужского:

Дайджест телеграма за неделю 4–10 декабря 2017

К моей заметке про иконку человечка читатель Артём задаёт вопрос: «А почему в сете „Секьюриджа“ иконка юзера имеет большую толщину линии, нежели у остальных иконок?»

Речь вот об иконке «Ответственные» в середине этой картинки:

Дайджест телеграма за неделю 4–10 декабря 2017

Ответ: «Потому что она используется рядом с текстом, который набран жирным, и так смотрится лучше»

Вот кусок интерфейса. Тут весь текст набран обычным начертанием, и иконки тонкие:

Дайджест телеграма за неделю 4–10 декабря 2017

А ответственные играют роль заголовка блока, наравне с «Монтажом» и 26 сентября:

Дайджест телеграма за неделю 4–10 декабря 2017

Среда, 6 декабря

У Марка Родионова суперважная мысль о том, что делать, если по ходу большого проекта придумываются всё новые улучшения, хотя уже давно согласовали другой вариант:
https://www.facebook.com/mark.rodionov.9/posts/10211588271322166

Пятница, 8 декабря

Так выглядят автомобильные номера в Иллинойсе:

Дайджест телеграма за неделю 4–10 декабря 2017

Дизайнеры возмутились и нарисовали своих вариантов. Например вот этот ничего:

Дайджест телеграма за неделю 4–10 декабря 2017

Но вообще, совершенно американский дизайн. Невозможно представить, чтобы в Европе автомобильные номера выглядели как упаковка шоколада или туалетной бумаги. А в штатах — легко:
https://medium.com/words-for-life/illinois-has-the-single-worst-license-plate-in-the-country-64018d987e91

Воскресенье, 10 декабря

Знак инвалидной парковки немножко похож на серп и молот:

Дайджест телеграма за неделю 4–10 декабря 2017

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

11 декабря   телеграм-канал

Телеграм за неделю 27 ноября — 3 декабря 2017

20—26 ноя 2017 ← → 4—10 дек 2017

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

Понедельник, 27 ноября

Идёт запись на курс «Пользовательский интерфейс и представление информации» 16—20 декабря в Москве, приходите:
http://bureau.ru/educenter/ui/

Среда, 29 ноября

Оказывается, для Формулы-1 не только новый логотип придумали, но и кучу разных примеров его использования и аж три фирменных шрифта. Одна из особенностей стиля Ф1 в том, что чаще всего логотипу приходится соседствовать с кучей других логотипов. Вместо того, чтобы делать логотип главным действующим лицом, дизайнеры сразу научили его встраиваться во всё подряд.

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

Дайджест телеграма за неделю 27 ноября—3 декабря 2017

На стадионе:

Дайджест телеграма за неделю 27 ноября—3 декабря 2017

Логотип выбирали из кучи вариантов. Собрали целую книжку из них:

Дайджест телеграма за неделю 27 ноября—3 декабря 2017

Статья:
https://www.creativereview.co.uk/formula-1-unveils-new-identity-wieden-kennedy-london/

Разумеется, всё это сразу же попало в мою коллекцию (рассказывал на прошлой неделе) с нужными тегами, не потеряется:

Дайджест телеграма за неделю 27 ноября—3 декабря 2017

Четверг, 30 ноября

Дептранс Москвы вешает бумажки и плакаты такого типа:

Дайджест телеграма за неделю 27 ноября—3 декабря 2017

Они, конечно, молодцы, что придумали и впечатывают в мозг свою красную полосу, но кроме неё тут ничего хорошего нет. Во-первых, в объявлениях и навигации краткость важна как нигде. Люди это всё читают на ходу, между делом. Поэтому:

«Мякинино» закрывается
с 22 августа

Картинку при этом можно сделать и покрупнее. Номер и цвет линии видно на ней, кстати.

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

Дайджест телеграма за неделю 27 ноября—3 декабря 2017

По какому принципу тут выделен «Ленинский проспект», а на предыдущей «Мякинино» выделено не было? Ни по какому, очевидно.

А субботу и воскресенье над картинками вообще сначала не замечаешь. Кажетcя, что если едешь на юг, надо проехать лишнюю станцию, а потом вернуться. И если на север, то же. Но это же замкнутый цикл... (Вот в этот момент замечаешь даты.)

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

Ну и до кучи:

Дайджест телеграма за неделю 27 ноября—3 декабря 2017

Слово «Внимание!» — тоже признак фиговой редактуры. Если написать «18 станций закрываются в выходые», внимание и так будет привлечено.

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

При этом на концах выносок какие-то южные вестибюли, которые никто не понимает, а названия станций не указаны.

Читатель Александр присылает свой вариант:

Дайджест телеграма за неделю 27 ноября—3 декабря 2017

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

Несколько разворотов из новой книги Гордона:
https://img.artlebedev.ru/izdal/o-yazyke-kompozitsii/o-yazyke-kompozitsii-18-25.pdf

Красота:

Дайджест телеграма за неделю 27 ноября—3 декабря 2017

В том числе и тут всё хорошо. Есть чему поучиться:

Дайджест телеграма за неделю 27 ноября—3 декабря 2017

Пятница, 1 декабря

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

Дайджест телеграма за неделю 27 ноября—3 декабря 2017

Если бы это было просто два столбика на графике, это была бы скукотища. А так — интереснейшая, очень информативная и красивая вещь.

Воскресенье, 3 декабря

Здесь в Тель-Авиве есть клуб «Блок», у которого всегда симпатичные афиши в узнаваемом стиле. В пятницу вот хочу сходить на Лена Факи:

Дайджест телеграма за неделю 27 ноября—3 декабря 2017

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

Дайджест телеграма за неделю 27 ноября—3 декабря 2017

Ещё пример их афиши:

Дайджест телеграма за неделю 27 ноября—3 декабря 2017

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

4 декабря   телеграм-канал

Телеграм за неделю 20—26 ноября 2017

13—19 ноя ← → 27 ноября — 3 декабря 2017

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

Понедельник, 20 ноября

Нашёл красоту:

Дайджест телеграма за неделю 20—26 ноября 2017
Дайджест телеграма за неделю 20—26 ноября 2017
Дайджест телеграма за неделю 20—26 ноября 2017

Тут:
http://abduzeedo.com/darling-ceramic-duo-kat-hutton-and-roger-lee

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

Дайджест телеграма за неделю 20—26 ноября 2017

Отсюда:
https://www.anthropologie.com/anthro/product/4130221336110.jsp?color=015

А вот маркизы тоже с полосками, но все с разными. Офигенно:

Дайджест телеграма за неделю 20—26 ноября 2017

А вот обувь:

Дайджест телеграма за неделю 20—26 ноября 2017

Отсюда:
http://heystudio.es/projects/arrels/

Башмаки мечты:

Дайджест телеграма за неделю 20—26 ноября 2017

Отсюда:
http://www.knstrct.com/fashion-blog/2012/04/05/mens-footwear-spring-2012-lineup

Вторник, 21 ноября

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

У меня локально установлена Эгея, которая открывается по адресу http://c/ (у вас не откроется, хе-хе) — это от слова collection.

Если туда зайти, будет так (эти горшки вы уже видели вчера, я их как раз сохранил):

Дайджест телеграма за неделю 20—26 ноября 2017

Если проскролить, то так:

Дайджест телеграма за неделю 20—26 ноября 2017

Я использую Эгею главным образом из-за тегов. Облако тегов в Коллекции выглядит примерно так (это чуть меньше половины всей высоты):

Дайджест телеграма за неделю 20—26 ноября 2017

Хочу я, например, посмотреть обложки — иду в тег «обложка»:

Дайджест телеграма за неделю 20—26 ноября 2017
Дайджест телеграма за неделю 20—26 ноября 2017

Про облако тегов Коллекции есть даже разворот в интерфейсной книге в главе «Навигация», где я рассказываю про силу тегов:

Дайджест телеграма за неделю 20—26 ноября 2017

Подписаться и читать книгу тут:
http://bureau.ru/projects/book-ui/
:-)

Попалась прикольная «карта» Нью-Йорка из кубиков Лего. Положил в Коллекцию, ну вот и вы посмотрите:

Дайджест телеграма за неделю 20—26 ноября 2017

Суббота, 25 ноября

Студент нашей Школы менеджеров Виталий спрашивает:

Дайджест телеграма за неделю 20—26 ноября 2017

Вообще, зависит от того, где она будет использоваться. Но да, чаще всего такая вертикальная колонка будет неудобна, и лучше разбить её на две, а то и на три, в зависимости от формата.

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

Дайджест телеграма за неделю 20—26 ноября 2017

См. 48-е место. Не должна одна Ингрид распирать всю таблицу.

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

Дайджест телеграма за неделю 20—26 ноября 2017

При этом цифры, предполагающие сравнение, важно выравнивать по разрядам (запятые все должны находиться друг под другом):

Дайджест телеграма за неделю 20—26 ноября 2017

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

Ещё, чтобы было почище, скобки «(Екатеринбург)» стоит превратить в запятую «, Екатеринбург». Заметка про это:
https://ilyabirman.ru/meanwhile/all/skobki-prevraschayutsya-v-zapyatuyu/

Воскресенье, 26 ноября

У Формулы-1 новый логотип. Очень понадобилось прилепить справа и снизу говна:

Дайджест телеграма за неделю 20—26 ноября 2017

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

27 ноября   телеграм-канал

Телеграм за неделю 31 июля — 6 августа 2017

24—30 июля 2017

Восстанавливаю архив своего канала в телеграме. Сегодня — неделя 31 июля — 6 августа.

Понедельник, 31 июля

Дайджест телеграма за неделю 31 июля — 6 августа 2017

Не забывайте, что любая сноска-звёздочка в дизайне означает «На самом деле нет».

Смотрите, как красиво:

Дайджест телеграма за неделю 31 июля — 6 августа 2017

Это новая схема метро Минска, которую мы сделали с Иваном Звягиным и Костей Евстратенко. Читайте и смотрите всё тут:
http://ilyabirman.ru/projects/minsk-metro/

Штука, которая меня почему-то особенно радует — изображение строящейся линии растром:

Дайджест телеграма за неделю 31 июля — 6 августа 2017

Вторник, 1 августа

Дайджест телеграма за неделю 31 июля — 6 августа 2017

Рассказал в совете об одном известном мне исключении в лондонской схеме метро:
http://bureau.ru/bb/soviet/20170801/

Кусок ещё невышедшего раздела книги «Пользовательский интерфейс» в процессе сборки. Картинка с поиском, приведённая в пример, случайно оказалась рядом с лупой от настоящего поиска по книге:

Дайджест телеграма за неделю 31 июля — 6 августа 2017

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

Оказалось, что на схеме минского метро мы пропустили пару выходов в город. Сейчас добавляем. Один из них — слева от К в «Купаловской»:

Дайджест телеграма за неделю 31 июля — 6 августа 2017

Раньше были только два других красненьких. Так вот, если этот добавить, слово «Купаловская» отъезжает правее. Но тогда и «Кастрычницкая» («Октябрьская») хочется отодвинуть, чтобы осталось ровно (тут не совсем ровно, но не важно пока). Проблема в том, что при этом надписи отваливаются далеко от пересадки.

Вот если не выравнивать подписи и Кастрычницкая стоит где была:

Дайджест телеграма за неделю 31 июля — 6 августа 2017

«Выглядит как говно», — можете подумать вы, и будете правы. На самом деле можно просто так:

Дайджест телеграма за неделю 31 июля — 6 августа 2017

Мы относимся к обозначению выходов как к части географического слоя. Можно же налезть словом на улицу, реку или дерево? Ну и на выход можно. Так схема в целом выглядит лучше, и информация не теряется.

В совете о пеньках «Смоленских» я объяснял, что общее важнее частного:
http://bureau.ru/bb/soviet/20161122/

Здесь та же идея. Не должен образ всей схемы пострадать из-за маленького выхода.

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

Дайджест телеграма за неделю 31 июля — 6 августа 2017

В географических картах вообще всё на всё налезает, и это нормально:

Дайджест телеграма за неделю 31 июля — 6 августа 2017

Ещё пример на эту тему, но не из транспортных схем. В мобильной навигации «Сенсума», сделанной в бюро, мы используем пунктирный паттерн в стрелках и частях иконок:
http://bureau.ru/projects/sensum-wayfinding/

Дайджест телеграма за неделю 31 июля — 6 августа 2017

Длина штриха и пробела у каждого знака своя, подобранная так, чтобы всё смотрелось хорошо. В «Лекции», очевидно, нужно было, чтобы вокруг выделенной дольки влезало целое число штрихов. А у «Круглого стола» было важно, чтобы дырка не пришлась на резкие изгибы — оба они должны быть явными. А, например, вот тут нам нужно было, чтобы у каждой ступеньки лестницы было одинаковое распределение штрихов:

Дайджест телеграма за неделю 31 июля — 6 августа 2017

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

Размер штриха и пробела — частность. А то, как выглядит иконка в целом и какой формы фигура в целом — более общая и более заметная штука. Если бы мы отталкивались от штрихов, они бы повлияли на размер ступеньки, а правильно — наоборот.

Дайджест телеграма за неделю 31 июля — 6 августа 2017

Не знаю, кто нарисовал этот уродский стикер, но что уж поделаешь, раз он так кстати.

Среда, 2 августа

Дайджест телеграма за неделю 31 июля — 6 августа 2017

Я не знаю ничего о дизайне самолётов, но почему-то угадал. Есть какое-то ощущение более грубого и агрессивного дизайна слева, а значит, наверное, слева американское — так я рассуждал, и угадал (Боинг — американский, Аэробус — европейский).

Кэмерон Бут написал про нашу схему:
http://transitmap.net/post/163696560175/minsk-birman

Читатель Олег присылает макет и спрашивает, какой сделать заголовок — «реквизиты платежа» не нравятся:

Дайджест телеграма за неделю 31 июля — 6 августа 2017

Очень просто: «Номер и сумма»

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

Дайджест телеграма за неделю 31 июля — 6 августа 2017

Четверг, 3 августа

Выкатили апдейт схемы: исправили реку у Первомайской, выходы в город (я вам рассказывал тут) и большинство опечаток —
http://ilyabirman.ru/projects/minsk-metro/

Теперь передаём г как g, а не h (всё-таки ближе и читать проще); шч как sch (чище, чем shch); ц как ts везде

Пятница, 4 августа

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

Дайджест телеграма за неделю 31 июля — 6 августа 2017

Обсуждаем с Артёмом Горбуновым разворот с ним, и Артём говорит: «Слушай-ка, а тебе не кажутся странным его пропорции? Экраны же были 4:3 тогда, а тут больше похоже на 16:9». Хм... Но скриншот точно честный! И тут я вспоминаю, что пиксели тогда не были квадратными. Растягиваем скриншот для пущей честности:

Дайджест телеграма за неделю 31 июля — 6 августа 2017

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

Дайджест телеграма за неделю 31 июля — 6 августа 2017

Воскресенье, 6 августа

Про нюансы поведения элементов интерфейса. Если нажать ⌘Tab на Маке, вы переключитесь в предыдущее приложение. Если нажать и держать, курсор поедет по полосе иконок приложений — и остановится на последней. Но если, продолжая удерживать ⌘, отпустить Tab и нажать снова, то он вернётся в начало.

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

Графика вечеринки «Минимум» в клубе «Рабица» в Москве:

Дайджест телеграма за неделю 31 июля — 6 августа 2017

Линии погнуть можно было и получше, но в целом — круто

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

23 ноября   телеграм-канал

Телеграм за неделю 13—19 ноября 2017

6—12 ноя ← → 20—26 ноя 2017

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

Вторник, 14 ноября

На перекрёстке Дизенгофф и Арлозоров сделали какие-то нестандартные уличные таблички (справа снизу видны стандартные):

Дайджест телеграма за неделю 13—19 ноября 2017

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

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

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

Ну и вместо rehov написали st зачем-то. Правильно всегда родовые слова (улица, бульвар) писать на языке оригинала. Tverskaya ulitsa, а не Tverskaya street.

Среда, 15 ноября

Просто красота:

Дайджест телеграма за неделю 13—19 ноября 2017

Не помню, откуда у меня эта картинка, но я всё хотел показать, что с ней делать:

Дайджест телеграма за неделю 13—19 ноября 2017

Сразу же обращает на себя внимание полный бардак с типографикой. Казалось бы, всего два стиля, а уже полная каша. Во-первых, строки заголовка слиплись. Сравните отступ между ними и в основном тексте:

Дайджест телеграма за неделю 13—19 ноября 2017

Во-вторых, заголовок зачем-то больше в ширину, чем основной текст. В-третьих, после «(ЦА),» зачем-то перенесена строка. Из-за этого весь кусок становится бесформенным.

Вот так — в сто раз лучше:

Дайджест телеграма за неделю 13—19 ноября 2017

Если приклеить отвалившиеся союзы «и», чуток приблизить друг к другу абзацы и ещё на пару пикселей увеличить интерлиньяж заголовка, становится ещё на каплю получше:

Дайджест телеграма за неделю 13—19 ноября 2017

Обращаться с текстом дизайнеру нужно научиться первым делом. Я сейчас не говорю о вёрстке сложных изданий. Но просто написать два абзаца текста и поставить заголовок — нельзя не уметь.

Четверг, 16 ноября

Зацените рождественскую упаковку колы:

Пятница, 17 ноября

Это классический дизайн семисегментного индикатора, который используется в самых разных дисплеях — калькуляторов, видеомагнитофонов, часов на городских зданиях:

Дайджест телеграма за неделю 13—19 ноября 2017

А вот всякие другие удивительные конфигурации подобных индикаторов:

Дайджест телеграма за неделю 13—19 ноября 2017
Дайджест телеграма за неделю 13—19 ноября 2017

Суббота, 18 ноября

Сергей Король высказался по делу:

Дайджест телеграма за неделю 13—19 ноября 2017

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

20 ноября   из Тель-Авива   телеграм-канал

Телеграм за неделю 6—12 ноября 2017

30 окт — 5 ноя ← → 13—19 ноя 2017

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

Понедельник, 6 ноября

О бесконечной ценности пользовательских данных. В 10-й версии «Лайв» запоминает, что ты наиграл, даже если ты не нажал кнопку записи:

Самые тупые программы забывают то, что ты в них сделал. А самые умные стремятся записать всё, что могут — вдруг пригодится.

Один из разворотов в книге «Пользовательский интерфейс» по этой теме:

Дайджест телеграма за неделю 6—12 ноября 2017

Знаю, что эту ошибку Эплы уже починили, но даже не знаю, в какой версии Ай-ОСа. После того, как я потерял пару сообщений, я ей больше не пользовался.

Ещё со страницы анонса новой версии — примеры новой эстетики интерфейса. Кайф:

Дайджест телеграма за неделю 6—12 ноября 2017
Дайджест телеграма за неделю 6—12 ноября 2017

Time / Slope / Value — смотрите, как могут выглядеть табы. То, что это табы, ясно потому, что они интегрированы в рамку. Справа, где форма волны — не табы, а просто радиокнопки.

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

У кого есть книга, речь о вот этих разворотах:

Дайджест телеграма за неделю 6—12 ноября 2017

Вторник, 7 ноября

Дайджест телеграма за неделю 6—12 ноября 2017

Написал совет о том, в каком порядке ставить линии:
http://bureau.ru/bb/soviet/20171107/

Как выглядят не адаптированные к Айфону 10 приложения на Айфоне 10 (слева):

Дайджест телеграма за неделю 6—12 ноября 2017

Стрелочка «Назад к предыдущему приложению» показывается вон где:

Дайджест телеграма за неделю 6—12 ноября 2017

Что довольно тупо, учитывая, что теперь к предыдущему приложению ведёт свайп по хоум-индикатору снизу. Там бы и обозначили как-то. Эта стрелочка всегда была какой-то недодуманной, и тут был шанс привести в порядок. Видимо, в Ай-ОСе 12.

Даниил Соколовский:

К теме о бесконечной ценности пользовательских данных и десятом «Лайве». Теперь при сохранении проекта он автоматически сохраняет версии, к которым в любой момент можно откатиться, но самый кайф, что он ещё и помнит историю анду (undo). То есть можно открыть прошлую версию и в ней ещё протыкать ⌘+Z на несколько шагов назад.

Среда, 8 ноября

Дайджест телеграма за неделю 6—12 ноября 2017

Невероятно, но факт. Книга «Пользовательский интерфейс» дописана, но подписка всё ещё не тикает. Лучшего времени для того, чтобы начать читать, не будет. Это тут:
http://bureau.ru/projects/book-ui/

Четверг, 9 ноября

Дайджест телеграма за неделю 6—12 ноября 2017
Красивая иконка вайфая в Эль-Але

Суббота, 11 ноября

Шаббат шалом!

Одна из тупейших ошибок, которые допускают большинство сайтов — это забывание почты на экране восстановления пароля.

Я ввожу почту и пароль; выясняется, что пароль неверный. Я жму «забыли пароль» и попадаю сюда:

Дайджест телеграма за неделю 6—12 ноября 2017

Ладно я, человек, мог забыть пароль. Но как машина могла себе позволить забыть почту? С фига я её должен заново вводить?

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

Дайджест телеграма за неделю 6—12 ноября 2017

Знак шекеля стоит прямо в числе. А вот такая же фишка из амстердамского аэропорта. Тут расстояние до зоны выходов указано внутри её буквы:

Дайджест телеграма за неделю 6—12 ноября 2017

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

14 ноября   телеграм-канал

Телеграм за неделю 30 октября—5 ноября 2017

23—29 окт ← 30 окт — 5 ноя → 6—12 ноя 2017

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

Понедельник, 30 октября

Kevin is coming out as Double-Spacey:

Дайджест телеграма за неделю 30 октября—5 ноября 2017

Вторник, 31 октября

В сегодняшнем совете показываю пару страниц из Мюллера-Брокмана:
http://bureau.ru/bb/soviet/20171031/

Примеры того, как необязательно выравнивать то, что на плашке с тем, что вокруг:

Дайджест телеграма за неделю 30 октября—5 ноября 2017
Дайджест телеграма за неделю 30 октября—5 ноября 2017

Не в тему, но попалась ещё такая «плашка». Покрасить напофиг — клёвая идея:

Дайджест телеграма за неделю 30 октября—5 ноября 2017

Среда, 1 ноября

Миша Нозик написал продолжение совета про плашки и выравнивание:
http://bureau.ru/bb/soviet/20171101/

Из канала «Что понравилось в картинке»: «Перфорация облегчает конструкцию, понижает ветровую нагрузку. А еще выглядит всегда клёво» —

Дайджест телеграма за неделю 30 октября—5 ноября 2017

Немного о наличии услуг, которые отсутствуют:

Дайджест телеграма за неделю 30 октября—5 ноября 2017

Автор этого сообщения об ошибке очень хотел стать Маяковским.

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

Как изменить тарифный план-то в итоге? Именно это должно быть написано в сообщении.

Проверьте все сообщения в своём продукте. Помогают ли они человеку?

Ещё пример тупости программ:

Дайджест телеграма за неделю 30 октября—5 ноября 2017

Ну вот же я только что заказал, ты ж сам мне написал даже про это. Ты чё как Аэрофлот-то.

Четверг, 2 ноября

Участник прошлого интерфейсного курса разработчик Александр Путилин сделал прикольную штуку — интерактивную подбиралку наиболее выгодного билета на метро:
http://sdp.flynn.sexdrugsandprogramming.com/demos/mosmetro/index.html

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

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

Следующий курс будет в декабре, приходите:
http://bureau.ru/educenter/ui/

Сдизайнил интерфейс охранного приложения «Варяга»:
https://ilyabirman.ru/projects/variag/

По ссылке — видосик и ещё несколько картинок.

Самая важная тут штука — это устройство первого экрана. Большинство дизайнеров сделали бы снизу табы «Объекты», «Договоры», «История» или что-то такое. Формально.

А скроллинг намного круче: всё выглядит проще без ущерба для функциональности.

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

Ну и с объектами тоже. У большинства клиентов объектов мало, и городить для них экран со «списком» из одного или двух объектов нет никакого смысла. Объекты можно листать в тулбаре сверху. Но если их становится много, появляется кнопка поиска, которая ведёт на список со всякими фильтрами.

Вадим Юмадилов: «СПАСИБО БОЛЬШОЕ(((((» —

Дайджест телеграма за неделю 30 октября—5 ноября 2017

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

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

Вот бы там кто-нибудь прочитал советы А.Г. про эволюцию и революцию.

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

Дайджест телеграма за неделю 30 октября—5 ноября 2017

Пятница, 3 ноября

Читатель Алексей спрашивает насчёт «Варяга»: «А расскажи почему в кнопке „Вызвать охрану“ выравнивание по левому краю? Я понял, что это кнопка, только по глаголу» —

Дайджест телеграма за неделю 30 октября—5 ноября 2017

Я недавно как раз писал, что в кнопках в зависимости от моды меняется много что, но центровка текста остаётся. А у меня не так.

Действительно, это решение на грани. И да, спасает правильная форма глагола: инфинитив, совершенный вид. Мы привыкли, что так называются команды: Сохранить, Отправить, Купить. Думаю, никто не растеряется.

Но почему всё же не поставить по центру? Потому что в фирстиле «Варяга» нет центровки. Зато есть такие красные рамки с текстом по левому краю.

Подписывайтесь на канал.

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

5 ноября   телеграм-канал

Телеграм за неделю 24—30 июля 2017

17—23 июля ← → 31 июля — 6 августа 2017

Восстанавливаю архив своего канала в телеграме. Сегодня — неделя 24—30 июля.

Понедельник, 24 июля

Искал букву бета, а случайно обнаружил тибетскую письменность. Смотрите, какая красота:

Дайджест телеграма за неделю 24—30 июля 2017

У Артёма сегодня вышел крутой совет про согласование. Так вышло, что самая большая картинка в нём — моя схема метро:
http://bureau.ru/bb/soviet/20170724/

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

Дайджест телеграма за неделю 24—30 июля 2017

Во-вторых — дружба кнопки хоум и кнопки съёмки в приложении камеры:

Дайджест телеграма за неделю 24—30 июля 2017

А, ещё в Айфонах 1—4 камера стояла красиво — в центре скругления корпуса:

Дайджест телеграма за неделю 24—30 июля 2017

Потом это сломали, и айфон несколько лет был похож на кусок говна (у меня сейчас как раз такой), а починили только в семёрке. Про это была заметка в английском блоге:
http://ilyabirman.net/meanwhile/all/the-design-of-iphone-7/

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

Дайджест телеграма за неделю 24—30 июля 2017

Вторник, 25 июля

У рекорд-лейбла (или как?) «Мелодия» отличный логотип:

Дайджест телеграма за неделю 24—30 июля 2017

Склоняемые бренды <3

Дайджест телеграма за неделю 24—30 июля 2017

В «Советы» прислали такую форму:

Дайджест телеграма за неделю 24—30 июля 2017

Автор утверждает, что начал учиться дизайну три дня назад. Неплохо. Разобрал по кусочкам:
http://bureau.ru/bb/soviet/20170725/

Серж Николаев нарисовал новый флаг России:

Дайджест телеграма за неделю 24—30 июля 2017

И объяснился в Фейсбуке:
https://www.facebook.com/kefiijrw/posts/10215423554206428

Стандартизируем уведомления и формочки на «Квартирке». Они вот такие лапоньки все:

Дайджест телеграма за неделю 24—30 июля 2017

Дошло до такого:

Дайджест телеграма за неделю 24—30 июля 2017

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

(Крестики в ПВУ станут крупнее, чтобы Фиттс не расстраивался, и перестанут быть синими, потому что их кликабельность и так очевидна)

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

Дайджест телеграма за неделю 24—30 июля 2017

Когда позднее появилась возможность перемещать иконки, Айтюнс-стор стал ноткой:

Дайджест телеграма за неделю 24—30 июля 2017

Оказалось, что английское слово blueprint, которое, я думал, значит «чертёж», содержит корень blue потому что оно синего цвета. И на русском есть слово «синька», означающее копию, сделанную по той же технологии:
https://ru.wikipedia.org/wiki/Синька_(копия_чертежа)

Это я написал только для того, чтобы был повод показать такую красивую картинку:

Дайджест телеграма за неделю 24—30 июля 2017

Пытаюсь кое-что оплатить. Кнопка «Отказаться от оплаты» выглядит как поле:

Дайджест телеграма за неделю 24—30 июля 2017

Чуть не ткнул туда, пока заполнял. Не надо так. Кнопка должна быть похожа на кнопку. Или хотя бы на другие кнопки в интерфейсе.

Среда, 26 июля

Немного ночной мудрости от Ильяхова и Нозика:

Дайджест телеграма за неделю 24—30 июля 2017

Ну и пока ночь, ссылки по теме (18+):

Совет Нозика о трусах:
http://bureau.ru/bb/soviet/20160203/

Совет Нозика о лифчиках:
http://bureau.ru/bb/soviet/20151104/

Дайджест телеграма за неделю 24—30 июля 2017

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

Ещё — это другие разделы поиска:

Дайджест телеграма за неделю 24—30 июля 2017

Можно было бы просто поставить их поближе к предыдущим ребятам, чтобы связать через близость. Или даже заменить иконкой:

Дайджест телеграма за неделю 24—30 июля 2017

В «Настройках» живёт вообще свалка непойми чего, а в «Инструментах» — тюнинг выдачи:

Дайджест телеграма за неделю 24—30 июля 2017

Думаю, отчасти помогло бы переименование «Инструментов» в «Фильтры». Техническое слово конечно, но это всё равно уже продвинутый уровень — так хотя бы точнее.

Помните вчерашнее окно про недействительную ссылку? Обсуждаем, как сделать лучше — так или сяк:

Дайджест телеграма за неделю 24—30 июля 2017

Очевидно, второй вариант лучше: человек перешёл по ссылке, чтобы поменять почту, значит основное действие и должно быть на почётном месте.

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

Остаётся ещё один хитрый случай: допустим, человек поменял почту на 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 июля

Игорь Штанг комментирует заметку «Прямоугольнее»:

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

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

Способ сделать круто с крупным текстом — набрать всё крупным текстом. Плакат из коллекции Артёма Горбунова:

Дайджест телеграма за неделю 24—30 июля 2017
Дайджест телеграма за неделю 24—30 июля 2017

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

Дайджест телеграма за неделю 24—30 июля 2017

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

Дайджест телеграма за неделю 24—30 июля 2017

Это несколько дней назад. Серёга и Володя снимают видос про Серёгин курс про пиктограммы:

Дайджест телеграма за неделю 24—30 июля 2017

А это сегодня. Видос вышел:
http://bureau.ru/educenter/icons/

Воскресенье, 30 июля

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

Дайджест телеграма за неделю 24—30 июля 2017

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

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

1 ноября   телеграм-канал

Телеграм за неделю 23—29 октября 2017

30 окт — 5 ноя 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/

Если вам понадобится нарисовать заглавную версию знака @, то можно так:

Дайджест телеграма за неделю 23-29 октября 2017

Среда, 25 октября

Вот мой прошлогодний совет об увеличении фоток. «Если бы я мог дать один универсальный совет веб-дизайнерам, который подойдёт наверняка, я бы дал такой: увеличьте фотографии» —
http://bureau.ru/bb/soviet/20160614/

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

А тут Макс Ильяхов подогнал отличный пример из своего диалога со студентом Школы редакторов:

«У тебя сейчас так:

Дайджест телеграма за неделю 23-29 октября 2017

А надо так:

Дайджест телеграма за неделю 23-29 октября 2017

С соблюдением теории близости, конечно:

Дайджест телеграма за неделю 23-29 октября 2017

В натуральную величину:

Дайджест телеграма за неделю 23-29 октября 2017

Блин, а вот это, кстати, шикарная идея:

Дайджест телеграма за неделю 23-29 октября 2017

Вот, охуенно»

Дайджест телеграма за неделю 23-29 октября 2017

Когда вам кажется, что дальше увеличить картинки уже просто невозможно, увеличьте ещё в два раза, и будет как раз ок.

Когда-то вышла очередная версия Эверноута под айфон, и выглядела она примерно так:

Дайджест телеграма за неделю 23-29 октября 2017

Я тогда отметил себе, что клёво смотрится, когда на цветном фоне что-то написано и белым, и чёрным (статус-строка тут чёрная).

Дайджест телеграма за неделю 23-29 октября 2017

(Это, кстати, очень крутой сайт https://work.co/.)

Вот подобную штуку мы использовали на «Квартирке» (чёрный крестик):

Дайджест телеграма за неделю 23-29 октября 2017

Вот какая-то картинка участника интерфейсного курса. Вроде ничё особенного, но эффект есть:

Дайджест телеграма за неделю 23-29 октября 2017

А вот не на цветном, а на сером. У меня на сайте в разделе «Музыка». Особенно мне нравится в мобильной версии с чёрными стрелочками:

Дайджест телеграма за неделю 23-29 октября 2017

Пятница, 27 октября

Илья Синельников справедливо напоминает ещё один пример чёрного и белого на цветном — обложку нашей Школы менеджеров:

Дайджест телеграма за неделю 23-29 октября 2017

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

Но есть одно свойство кнопки, которое пережило весь флет-дизайн: выравнивание текста по центру. Реально, если на плашке написать слово по левому краю, то за кнопку её уже никто не признает.

Дайджест телеграма за неделю 23-29 октября 2017

Суббота, 28 октября

Мой троюродный брат Дима Бирман прислал офигенное немецкое автобусное расписание. Оно очень красивое, но понять в нём нельзя вообще ничего:

Дайджест телеграма за неделю 23-29 октября 2017

Это скриншот «Медузы» с моего рабочего стола. Пример случайного совпадения, искажающего смысл:

Дайджест телеграма за неделю 23-29 октября 2017

Галочка читается как «выполнено», «готово», «успех». Закрыли тудушечку.

Это не упрёк «Медузе», конечно. Так бывает. У меня в курсе даже тема есть небольшая «Случайные искажения информации» про такие эффекты.

А вот Вика прислала безумную-прекрасную афишу из Будапешта:

Дайджест телеграма за неделю 23-29 октября 2017

Никто не умеет делать как венгры. Вроде всё суперуродское и кривое, но выглядит обалденно. Если вы не были в Будапеште, езжайте обязательно.

Кстати, среда по-венгерски — «серда» (смотрите на картинке).

Папа привёз из Китая туалетные пиктограммы:

Дайджест телеграма за неделю 23-29 октября 2017

(Спасибо, пап!)

Воскресенье, 29 октября

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

Дайджест телеграма за неделю 23-29 октября 2017

Олег Мохов пишет: «Невероятно, что в России так могут» —

Дайджест телеграма за неделю 23-29 октября 2017

В России могут очень круто. Если выгнать из России наших чиновников, то получится клёвая страна.

Вот московское архитектурное бюро спроектировало небоскрёб для Манхэттена.

С дайджестом помог Иван Ветошкин.

29 октября   дизайн   телеграм-канал

Телеграм за неделю 11—15 сентября 2017

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

Понедельник, 11 сентября

Илья Страйков показывает невероятно красивую неведомую панель управления:

Смотрите, мы опубликовали карты Московского марафона и других забегов серии:
http://bureau.ru/projects/moscow-marathon/

Обязательно идите смотреть в ведро (кажется, одно из самых длинных на сайте). Начало всегда смотрится особенно страшно:
http://bureau.ru/projects/moscow-marathon/recycled/

И обратите внимание, что это не просто карты, а конструктор и гайдлайны по его использованию, причём гайдлайны клиент нам разрешил опубликовать (ссылка на Гугль-док в конце по первой ссылке). Например, когда мы рисовали карту марафона (в июне), стартовые кластеры должны были ещё выглядеть как-то так:

А в реальности всё изменилось, и сейчас уже выглядит так:

Вторник, 12 сентября

Номер дома можно написать вот так:

Читатель Антон Репушко: «Привет. По поводу номеров домов: так уже делают где-то в России. Не знаю, что за город на фото» —

Ну, не совсем так, конечно. Но тоже можно.

В сегодняшнем совете про транспортные схемы расказываю штуку про планирование маршрутов:
http://bureau.ru/bb/soviet/20170912/

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

Новости веб-дизайна. Эпл осознал, что прокрутка круче карусели, и выпустил нормальную главную страницу:
https://apple.com/

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

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

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

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

О, спасибо всем, кто прислал картинку. Я вот эту имел в виду:

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

Надеюсь, к Ай-ОСу 12 сделают редизайн статус-ушей такой, чтобы смотрелись получше.

Ещё картинка:

Я уверен, что первое ощущение у большинства, что справа лучше (у меня первое ощущение такое же, конечно). Но это не лучше, это лишь привычнее. Помедитируйте над этими картинками, если сомневаетесь. И будьте смелее :-) Если внедряете чё-то новое, внедряйте нагло.

Бонус: видимо, на Айфоне 10 нельзя включить отображение батарейки в процентах. Отлично! А что с остальными индикаторами? Я пока не знаю, но геолокацию, например, можно показывать вместо сигнала, когда она используется. Блокировку поворота можно и не показывать. Блутус должен быть просто всегда включён, и нефиг это показывать.

А вот другая картинка, которая кажется ещё более странной:

Это кадр из видоса Эпла, где они объясняют, как горизонтальным приложениями себя вести (тут речь о полях слева и справа, чтобы текст не подлез под выкус). Тоже сначала кажется, что пипец. Самое некрасивое тут — это как верхняя полоска отрезается скруглениями. Хочется её сделать побольше в высоту, и тогда вроде будет окей.

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

Уверен, после пары дней с Айфоном 10 человек просто перестанет замечать эти скругления и выкус, а будет воспринимать картинку целиком, вместе с «невидимыми» частями.

Читатель Иван Акулов: «А это в новых айфонах ты видел, кстати?».

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

Воскресенье, 17 сентября

Студия Лебедева издала книгу Пола Рэнда «Искусство дизайнера» (я не читал):
https://www.artlebedev.ru/izdal/iskusstvo-dizaynera/

Хочу обратить ваше внимание на этот разворот. Есть книжная традиция — обозначать начало абзаца отступом первой строки. Если вы откроете почти любую недизайнерскую книгу, вы увидите, что такой отступ есть у каждого абзаца, включая первый.

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

Читателю этот излом в абзаце на правой странице в теории должен говорить «это продолжение текста из левой страницы». На практике же он говорит «у верстальщика руки из жопы».

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

Как быть? Есть два железобетонных варианта.

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

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

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

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

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

Выглядит так:

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

Текст справа продолжает текст слева, ну и ладно. Угол выкусывать не надо, потому что и так видно, что это другой кусок текста, чем тот, что слева.

После заголовка абзацу тоже не нужен выкус, только после абзаца (p):

[В развороте Рэнда] если первую строчку правой страницы сдвинуть левее, станет лучше со всех точек зрения. Нужно просто решиться отказаться от фиговой недодуманной традиции в пользу нормальной.

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

Теперь я понял, что я бы хотел, чтобы архив телеграма оставался у меня в блоге. Хорошо бы, чтобы в каждый воскресный вечер выходила заметка. Ну или раз в две недели, если неделя выдалась не очень активная. Собирать такую заметку регулярно мне некогда. Если вы вдруг готовы вечером воскресенья приносить мне заметку, чтобы я просто опубликовал, напишите, пожалуйста. Я вам расскажу, как всё делать. И да, я бы опубликовал задним числом более ранние недели тоже.

18 сентября   Айфон   вёрстка   дизайн   пользовательский интерфейс   телеграм-канал   Эпл
Ранее Ctrl + ↓