Избранное

Позднее Ctrl + ↑

На интерфейсном курсе: сверхплотная упаковка шапки таблицы и вёрстка карманного словаря

Фрагмент № 8 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе в июне 2020 года. Покажите дизайнерам.

0:00 Фокус в таблице: залезаю заголовком одной колонки на территорию другой, чтобы всё компактнее уместилось
2:08 Пример вёрстки с переносом наверх их карманного словаря

Почитать о курсе

Программа, отзывы, запись

Бристольские часы

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

Часы на бристольской бирже. Фото Стивена Колбурна. Фликр

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

В Бристоле, например, было на десять минут меньше, чем в Лондоне. Это стало вызывать неудобства только с распространением железных дорог и появлением точных расписаний в середине 19 века — тогда придумали «железнодорожное время» — в мире британских железных дорог стали использовать время по Гринвичу. Это никак не мешало всю остальную жизнь вести по «настоящему» времени, принятому в каждом городе.

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

Лондонский транспортный музей. Часть 3

Продолжаю рассказывать про Лондонский транспортный музей.

Автобусы:

1
2

Полазил, где можно было:

3

Элемент управления:

4

Всякие таблички, надписи и наклейки:

5
6
7
8

Прикольный экспонат. Жмёшь кнопку — платформа постепенно наклоняется, а автобус всё не падает:

9

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

Над потолком висят ленты с названиями конечных, которые крутятся спереди. Красота:

10

Ещё таблички:

11
12

Какие-то агрегаты. Мало ли, придётся скеоморфический дэшборд рисовать:

13
14
15
16
17

Фотографии из поездки в июле 2018 года. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Лондон! (Когда дадут)

См. также всё про Лондон.

На интерфейсном курсе: избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки

Фрагмент № 5 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе в июне 2020 года. Покажите дизайнерам:

00:00 Заполнения формы данными из профиля в Яндексе. Избавляемся от рамок и собираем компактнее
03:55 Наводим компактность и порядок в других местах
07:46 Упрощаем группу полей про адрес и время доставки
14:56 Холивар: звёдочки и обязательные поля
20:13 Настраиваем пропорции кнопки «Заказать» в конце

Программа курса и запись

Лондонский транспортный музей. Часть 2

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

Похоже, что там просто какие попало схемы висят, которые удалось найти:

Вот это странно. В одном из купе висела такая:

А в другом — такая:

Прямые линии:

Ромбики как на первой схеме Бека:

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

Неподалёку ящики, где навалено всё подряд:

Открываешь и смотришь:

Примерно так же у меня дома выглядят ящики со всякими бумажками из поездок:

Поезд, в который можно было зайти

Тут уже полноценный вагон, а не купе. Схемы над окнами:

Зацените пересадки тоже:

Ещё вагон:

Ещё схема над дверью:

Костюм кондуктора, видимо:

Билетики:

Ещё какой-то старый вагон:

Объявление:

Другое:

Фотографии из поездки в июле 2018 года. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Лондон! (Когда дадут)

Кстати о музейных экспонатах: Дедушкина схема лондонского метро

См. также всё про Лондон.

Лондонский транспортный музей. Часть 1

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

На стене всякой исторической фигни висит крутая старая табличка:

Сравнение числа вокзалов в Лондоне и Милане:

Я сначала подумал, что могли бы уж для чистоты сравнения один год поставить и там и там. А потом решил, что это можно считать приёмом, такой двойной удар по Милану: сначала видишь, что там одна станция на отшибе, а потом замечаешь, что это ещё только через шесть лет после Лондона. Возьму на вооружение.

Лондон спустя 25 лет:

Рядом стоит конный трамвай:

Куда:

Подписи-таблички:

Чужеродная табличка самого музея:

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

Кондуктор с крутым жетоном:

Через какие остановки едет (правда, это вроде не на нём, а на соседнем было):

Макет стройки метро:

См. лучше Гранд-макет в Санкт-Петербурге.

Название линии метро на локомотиве:

Табличка:

Плакатик:

Вагон поезда в Рикмансуорт, разделённый на отдельные купе:

Женское купе:

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

На боку у вагона — название железнодорожной компании (давшее название этому виду транспорта и одной из линии метро в Лондоне):

Сверху разные таблички висят тоже:

А вот какой страшный, но красивый вагон поезда до Моргейт:

Фотографии из поездки в июле 2018 года. Во всех заметках про путешествия снизу есть поиск дешёвых авиабилетов. Слетайте в Лондон! (Когда дадут)

См. также всё про Лондон.

Джейсон Фрид показывает почтовик Хей

В этом видео Джейсон Фрид показывает Хей, новый почтовик создателей Бейскемпа. Это очень важное видео для дизайнеров продуктов и интерфейсов:

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

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

И, конечно, смотрите как классно он про всё рассказывает! Привычная почта объявлена врагом, и все её недостатки высмеиваются. А «у нас» всё не так, а наоборот. «Бум! — и вот моя ПДФка», — ну прям Стив Джобс. На этом противопоставлении строится дизайн интерфейса, на нём строится идея продукта, на нём строится линия повествования. И классное ещё, что это не какое-то аккуратно смонтированное-заанимированное видео под музычку, где всё бесшовно, а нормальный человеческий рассказ. Я не смог оторваться и посмотрел целиком.

Учитесь делать и презентовать продукты!

Схема метро Санкт-Петербурга — 2020

Обновилась наша схема метро Санкт-Петербурга:

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

А ещё вы просили плакат, и теперь можно купить плакат. Редбабл показывает, как красиво будет, если повесить большую версию над столом:

И ПДФ теперь тоже можно скачать на странице проекта.

Покажите всем.

Кружок, шар и кольцо

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

Зачем слово циркуль, когда есть слово кружок? Зачем слово глобус, когда есть слово шар? Зачем слово рым, когда есть слово кольцо? А вот.

Ранее Ctrl + ↓