Позднее Ctrl + ↑

Подробное видео о Типографской раскладке

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

00:00 Что такое Типографская раскладка?
01:30 Надо ставить парные кавычки, длинное тире, честный апостроф
07:40 Другие полезные символы
10:53 Как вводят символы без Типографской раскладки?
13:49 В Типографской раскладке всё удобнее и логичнее
14:19 Плакат купите
16:04 Кавычки русские и английские, апостроф — логика расположения, как вводить
19:45 Чёрточки: дефис, тире, короткое тире, минус  — логика расположения, как вводить, отступление про стандартную маковскую русскую раскладку
24:15 Другие символы и логика их расположения
30:32 Буквы с акцентами и комбинирующиеся акценты — как вводить и в чём разница между одним и другим

Расскажите о раскладке всем, кого вы знаете.

Бесполезная заставка в начале страницы

Бывает, сайт начинается с большой «красивой» заставки:

Или так:

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

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

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

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

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

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

Что послушать — 34

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

Вот что я слушал в последнее время, что мне понравилось:

  1. Modern Wisdom 050: Daniel Sloss — Jigsaw Explained. Дэниел Слосс клёво рассказывает об отношениях. Если вы не смотрели его стендап, то обязательно надо.
  2. Under the Radar 198: Store Wars. Дэвид Смит высказывает на удивление адекватную точку зрения по поводу эпловских условий пребывания в Апсторе и последних скандалов вокруг Хея, Эпик-геймс и прочего.
  3. Эффективность не работает. Илья Якямсев смешно рассказывает о том, как относиться к работе и себе на работе.

Ютюб за неделю 16—23 августа: вернулся домой, новые главы книги, поезда метро Чикаго, рукописные шрифты

Обзор моего блога и соцсетей за неделю 16—23 августа 2020 года:

00:00 Возвращение на родину
01:19 Инстаграм: аэропорт Бен-Гурион, Алое Поле в Челябинске, пельмени и шиномонтаж
04:02 Твиттер: в России очень быстрый интернет, в челябинском парке Гагарина очень красивые карьеры, лифтхололук
05:57 Новые главы книги «Дизайн транспортных схем»
07:11 ЦСС научится нормальным границам текстовых блоков
10:48 Телеграм: Пробел перед градусами цельсия, наклейки на эпл-сторах, тупой интерфейс Яндекс-входа
13:26 Безголовые стрелки на знаке советского времени,
14:15 Блог: Фотографии поездов метро в Чикаго
17:24 Телеграм: тракторный интерфейс, красивая клавиатура с цветными кнопками
18:21 Как не стоит использовать рукописные шрифты
19:13 Бета Эмси 3.0 и красивые кирпича
19:57 Дизайн-задачка на неделю. Ответы шлите в комментарии, разберём в следующие выходные

Поезда в метро Чикаго

Заканчиваем с метро Чикаго. Поезд с флагом и знаком транспортной системы, как в Нью-Йорке:

Это вроде бы динамик рядом с дверью:

На боку есть экран с направлением — конечной станцией:

Внутри тоже экран показывает конечную. Ховард:

Над одной дверью висит схема системы:

Над другой — этой линии:

Очень нравится формулировка «Название is next»:

Слово «станция», оказывается, необязательно:

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

Ещё Чикаго:

Главы «Пересадки», «Направления» и «Зоны оплаты» четвёртой части книги «Дизайн транспортных схем»

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

Я снял видео с рассказом о новых главах:

Подписывайтесь сами и дарите подписку друзьям, знакомым и коллегам.

Из новости издательства о новых главах:

Пересадки

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

Направления

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

Зоны оплаты

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

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

438

Как кривожопо нарисованы пересадки на официальной парижской схеме и как красиво у Кости Коновалова:

456

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

462

Экономные стрелочки:

477

В главу «Направления» затесался разворот с примерами обозначения ухода линии «за схему»:

481

Когда зоны оплаты слишком сложно выглядят:

487

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

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

Кстати, подписку можно подарить.

См. также:

Плитка в Амстердаме

Плитка в Амстердаме разнообразна и используется для зонирования улиц:

Как достигается такая идеальная укладка — неизвестно:

Бордюр и спуск к проезжей части слева:

Кусок плитки со значком мотороллера или велосипеда может означать парковку:

Смотрите, как плиткой разных цветов обозначены места:

А тут — велодорожка:

Нидерландская разметка чёрточками переменной длины означает подъём проезжей части для выравнивания с тротуаром (у них есть смешное слово «дремпель»):

Островок безопасности:

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

Им не обязательно быть высокими:

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

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

Ещё Амстердам:

Аудио по четвергам: музыка для ночёвки

Саундклауд случайно подсунул мне такое, вообще не мой жанр:

Głós: Music For Sleepovers

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

Саундклауд

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

Тормоза от «высокой производительности»

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

Вот с тех пор как я стал регулярно снимать всякое для Ютюба, я стал намного чаще рендерить и конвертировать видео. И меня просто бесит, что хоть стандартный Квиктайм, хоть Аймуви, хоть Хэндбрейк (графическая оболочка для ffmpeg) забирают все ресурсы компа на свою херню.

Если Хэндбрейку надо 20 минут на конвертацию видоса, то 20 минут мой комп греется как сковородка, пыхтит вентиляторами и почти не пригоден для работы, потому что всё дичайше тормозит. Нахрена мне это надо?

Я бы хотел, чтобы в любой ресурсоёмкой работе был режим «делать незаметно». То есть если я сижу и читаю буквы с экрана, окей, делай там на фоне. А если я сам пытаюсь делать что-то, встань на паузу и подожди. Да и даже если я ничё не делаю, но вот-вот от твоей работы уже заорёт вентилятор — встань на паузу, дай остыть!

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

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

Дизайн-обзор статьи Джорджа Кейва про интерфейс на кубиках Лего

Снял видео по статье The UX of Lego Interface Panels, которую мне кто только не скинул за последнюю неделю.

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

00:00 О чём речь
03:14 Близость и Фиттс. Отличия элементов управления. Слишком похожие элементы рядом — проблема и с точки зрения близости, и с точки зрения Фиттса. Расположение «опасных» кнопок
06:39 Кодирование. Шесть способов кодирования по Кейву. Пять способов кодирования по Лебедеву. Что я думаю о кодировании и некодировании
10:43 Радость взаимодействия с разнообразными физическими элементами управления
12:33 Законы гештальта и графическая организация элементов. Группировка близостью лучше, чем группировка рамочкой, хотя Кейв вроде бы думает иначе
15:30 Консолидированные и неконсолидированные интерфейсы. Борьба с адским количеством кнопочек в современном автомобиле. Управление климат-контролем в Ауди ТТ. Обратная связь при настройке направления обдува
21:02 Проблема с гештальтом и близостью в дизайне самой статьи
21:55 Группировка элементов управления по фичами. Обсуждаем аппарат ИВЛ с крутейшим дизайном. Всё подписано словами. Инструкция — прямо в интерфейсе. Как наклейка на корпусе маскирует технозависимое расположение элементов
32:05 Группировка элементов управления по способу управления. Израильские вентили. Сомневаюсь, что кто-то специально их группировал по какому-либо «принципу»
33:05 Группировка элементов управления по технологии. У нас это называется «технозависимость». Отличная мысль о том, что тачскрин — это современная технозависимость. Игра на виниле против игры на айпаде. Тесла с огромным экраном против машины с нормальными элементами управления. Нет, тачскрины — это не «будущее». Но почему нам так кажется
37:17 Группировка элементов управления по задаче пользователя. Наконец-то. Переход от технозависимости к человечности
39:58 Выводы. Эпловская школа минимализма против интерфейсов с кучей ручек. Какое впечатление должен произвести наш интерфейс на пользователя? Интерфейсы с небольшим числом отличий элементов выглядят аккуратными. Некоторым людям важен внешний порядок, и это касается не только интерфейса

Моя книга об интерфейсе

Ранее Ctrl + ↓