{
    "version": "https:\/\/jsonfeed.org\/version\/1.1",
    "title": "Блог Ильи Бирмана: заметки с тегом представление информации",
    "_rss_description": "Блог Ильи Бирмана о дизайне, городах, музыке и жизни.",
    "_rss_language": "ru",
    "_itunes_email": "ilyabirman@ilyabirman.ru",
    "_itunes_categories_xml": "<itunes:category text=\"Arts\"><itunes:category text=\"Design\" \/><\/itunes:category>\r\n<itunes:category text=\"Society &amp; Culture\"><itunes:category text=\"Personal Journals\" \/><\/itunes:category>\r\n<itunes:category text=\"Technology\" \/>\r\n",
    "_itunes_image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic-square@2x.jpg?1573933764",
    "_itunes_explicit": "no",
    "home_page_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/predstavlenie-informacii\/",
    "feed_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/predstavlenie-informacii\/json\/",
    "icon": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764",
    "authors": [
        {
            "name": "Илья Бирман",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/",
            "avatar": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/userpic\/userpic@2x.jpg?1573933764"
        }
    ],
    "items": [
        {
            "id": "6580",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/paging-public-displays\/",
            "title": "Листание информации на табло",
            "content_html": "<p>В аэропортах и на остановках общественного транспорта встречаются экраны, на которых нужно показать больше, чем в них влезает. В этом случае прибегают к листанию, что очень плохо.<\/p>\n<p>Разберём экстремально плохой пример из аэропорта Гонконга. Сейчас 13:22, но мне показывают примерно часовую порцию рейсов начиная с 17:30 (как видим в углу, это страница 5):<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/airport-screen-1-IMG_7689.jpg\" width=\"1200\" height=\"800\" alt=\"\" \/>\n<\/div>\n<p>Раз в десять секунд экран переключается на следующий, но там не следующая порция рейсов, а те же на китайском:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/airport-screen-2-IMG_7690.jpg\" width=\"1200\" height=\"800\" alt=\"\" \/>\n<\/div>\n<p>И только ещё через десять секунд включается следующая порция.<\/p>\n<p>Листание продолжается вплоть до рейсов, отправляющихся глубокой ночью. Последний экран имеет номер 16, то есть на полный цикл уходит больше пяти минут! Я ждал своего экрана почти три минуты. Это недопустимо долго для аэропорта, где каждая минута может быть решающей. При этом на большей части экранов о рейсах нет вообще никакой информации, даже гейт не назначен; они просто перечислены. Даже на нашем пятом экране уже осталось только две рейса с гейтом.<\/p>\n<p>Чтобы задизайнить такой экран хорошо, достаточно подумать хотя бы минутку, но проблема в мире дизайна в том, что этого почти никто не делает. В какой ситуации люди обращаются к этому экрану и какую информацию ищут? Очевидно, что те, кому вот-вот лететь, больше нуждаются в информации, чем те, чей рейс через пять часов.<\/p>\n<p>Во-первых, нужно объединить языки. Места достаточно, чтобы показать оба, а если будет недостаточно, можно сократить.<\/p>\n<p>Во-вторых, нужно разделить экран на две части: в верхней постоянно видны ближайшие рейсы, а в нижней листаются более поздние. Кроме того, начиная с некоторого рейса больше ни одному пока не назначен гейт — из таких есть смысл оставить только те, которые были отменены или перенесены, а остальные вообще убрать из списка (графически нужно будет показать пропуски, конечно).<\/p>\n<p>В-третьих, листающейся части нужно дать явную графическую индикацию того, какая это страница из скольки, причём чтобы секции плавно заполнялись и было ясно, когда произойдёт переключение.<\/p>\n<p>\u2028В-четвёртых, рядом с каждым таким табло должен быть куаркод, который мгновенно открывает его же тебе на телефоне, чтобы ты мог идти дальше и всегда знать статус своего рейса. Ну типа <a href=\"https:\/\/ilyabirman.ru\/wb\/suppliers\/\">как мы в Вайлберрисе сделали<\/a>. Я только сейчас заметил, что на экране он даже есть, но заметить его в подвале почти невозможно из-за банерной слепоты и дурацкой подписи.<\/p>\n<p>С удовольствием переделаю навигацию и все табло в вашем аэропорту.<\/p>\n",
            "summary": "В аэропортах и на остановках общественного транспорта встречаются экраны, на которых нужно показать больше, чем в них влезает",
            "date_published": "2025-11-12T13:43:57+08:00",
            "date_modified": "2025-11-13T13:51:17+08:00",
            "tags": [
                "аэропорт",
                "Гонконг",
                "информационный дизайн",
                "навигация",
                "полёты",
                "представление информации",
                "сценарный подход",
                "таблицы"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/airport-screen-1-IMG_7689.jpg",
            "_date_published_rfc2822": "Wed, 12 Nov 2025 13:43:57 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6580",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/airport-screen-1-IMG_7689.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/airport-screen-2-IMG_7690.jpg"
                ]
            }
        },
        {
            "id": "6558",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-183\/",
            "title": "На интерфейсном курсе: дедубликация элементов",
            "content_html": "<p>В интерфейсе участницы курса я заметил, что список выбранных окон встречается в двух местах в разной роли. Сразу же приходит в голову использовать его в одном месте в обоих смыслах. Ну и это вообще рабочий ход мысли на все случаи жизни. 4 минуты:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/laiarbyW__Y?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент № 183 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 5 апреля 2024 года.<\/p>\n<p>Открыта запись на курс, который пройдёт 8 ноября — 7 декабря. Сейчас −30% из-за ранней записи, а в рассрочку вообще получается 5530 ₽ \/ мес.<\/p>\n<p><a href=\"http:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "В интерфейсе участницы курса я заметил, что список выбранных окон встречается в двух местах в разной роли",
            "date_published": "2025-10-07T18:09:07+08:00",
            "date_modified": "2025-10-07T18:08:28+08:00",
            "tags": [
                "видео",
                "пользовательский интерфейс",
                "представление информации",
                "студентам",
                "фрагменты курса ПИ"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-laiarbyW__Y-cover.jpg",
            "_date_published_rfc2822": "Tue, 07 Oct 2025 18:09:07 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6558",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-laiarbyW__Y-cover.jpg"
                ]
            }
        },
        {
            "id": "6504",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frags-1-175\/",
            "title": "Фрагменты интерфейсного курса",
            "content_html": "<p>За те годы, что <a href=\"https:\/\/bureau.ru\/educenter\/ui-online\/\">мой интерфейсный курс<\/a> идёт в онлайне, я выложил уже <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/ui-course-frags\/\">почти две сотни фрагментов с наших семинаров<\/a>. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Пришло время навести хотя бы немного порядка.<\/p>\n<p>Разобрал 175 фрагментов.<\/p>\n<p>Сборная солянка:<\/p>\n<ul>\n  <li>№ 1. <a href=\"https:\/\/www.youtube.com\/watch?v=xzUNC_VGNFk\">Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму<\/a><\/li>\n  <li>№ 2. <a href=\"https:\/\/www.youtube.com\/watch?v=_Jv9dT2B7Nc\">Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа<\/a><\/li>\n  <li>№ 19. <a href=\"https:\/\/www.youtube.com\/watch?v=5VCi1KN7WdE\">Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе<\/a><\/li>\n  <li>№ 26. <a href=\"https:\/\/www.youtube.com\/watch?v=Pc0GryUpCgM\">ФИО как в паспорте и эффект японской квартиры<\/a><\/li>\n  <li>№ 89. <a href=\"https:\/\/www.youtube.com\/watch?v=eLOGLY3_h7U\">Прямоугольнизация дизайна и свобода, которую даёт фотошоп<\/a><\/li>\n  <li>№ 119. <a href=\"https:\/\/www.youtube.com\/watch?v=Hwi6ddaRZ38\">О дизайне переключателя (segmented control) и положении кнопки<\/a><\/li>\n  <li>№ 138. <a href=\"https:\/\/www.youtube.com\/watch?v=GNxf6DAZR-Q\">Разное про кассу в магазине<\/a><\/li>\n  <li>№ 146. <a href=\"https:\/\/www.youtube.com\/watch?v=CSvgFqJ8p1Q\">Разбор конфигуратора окон и как классифицировать сообщения об ошибках<\/a><\/li>\n<\/ul>\n<p>Почти самостоятельные лекции:<\/p>\n<ul>\n  <li>№ 3. <a href=\"https:\/\/www.youtube.com\/watch?v=LBBWjtEHLxU\">Папочка comparisons, листаю и комментирую после лекций об информационном дизайне<\/a> (это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне)<\/li>\n  <li>№ 33. <a href=\"https:\/\/www.youtube.com\/watch?v=du6SqjjLEzQ\">Физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм<\/a><\/li>\n  <li>№ 37. <a href=\"https:\/\/www.youtube.com\/watch?v=SwyTvRljimM\">Блиц-пересказ куска питерского доклада про интерфейсы и Ворлд-Чесс<\/a><\/li>\n  <li>№ 46. <a href=\"https:\/\/www.youtube.com\/watch?v=JTqRG_7e3O8\">Про сложное цветовое кодирование и триаду Мейксенара<\/a><\/li>\n  <li>№ 55. <a href=\"https:\/\/www.youtube.com\/watch?v=3q0HH7mUMYA\">Соответствие между логической структурой и выразительными средствами и дизайн-системы<\/a><\/li>\n  <li>№ 167. <a href=\"https:\/\/www.youtube.com\/watch?v=V5StnSF_7sc\">Опрятность прячет проблемы<\/a><\/li>\n<\/ul>\n<p>Метод:<\/p>\n<ul>\n  <li>№ 30. <a href=\"https:\/\/www.youtube.com\/watch?v=-np87CaMjKs\">Метод «Например»<\/a><\/li>\n  <li>№ 40. <a href=\"https:\/\/www.youtube.com\/watch?v=MuDea0wOabA\">Сценка со звонком в пиццерию<\/a><\/li>\n  <li>№ 126. <a href=\"https:\/\/www.youtube.com\/watch?v=ro4EBiCJ1iE\">Решение существует<\/a><\/li>\n<\/ul>\n<p>Формы:<\/p>\n<ul>\n  <li>№ 4. <a href=\"https:\/\/www.youtube.com\/watch?v=bPSaKS1bbsE\">Двигаем простенькую форму регистрации, чтобы стало поаккуратнее<\/a><\/li>\n  <li>№ 5. <a href=\"https:\/\/www.youtube.com\/watch?v=OMJV8exdbnU\">Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки<\/a><\/li>\n  <li>№ 11. <a href=\"https:\/\/www.youtube.com\/watch?v=how0mkG7ui4\">Первое впечатление, синтаксис и язык формы заказа с доставкой<\/a><\/li>\n  <li>№ 15. <a href=\"https:\/\/www.youtube.com\/watch?v=c91KziF01sQ\">Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму<\/a><\/li>\n  <li>№ 28. <a href=\"https:\/\/www.youtube.com\/watch?v=GrkuX84kKeo\">Улучшаем форму обратной связи Букинг.кома<\/a><\/li>\n  <li>№ 35. <a href=\"https:\/\/www.youtube.com\/watch?v=dckw7tqm1M4\">Первое впечатление от формы<\/a><\/li>\n  <li>№ 50. <a href=\"https:\/\/www.youtube.com\/watch?v=oepQvJtNgUU\">Упорядочиваем вёрстку формы<\/a><\/li>\n  <li>№ 52. <a href=\"https:\/\/www.youtube.com\/watch?v=hPGiFsdTKa8\">Расстояние между полями и сокращение подписей<\/a><\/li>\n  <li>№ 53. <a href=\"https:\/\/www.youtube.com\/watch?v=IR0zLLBf65Y\">Редизайним форму настройки сложной логики<\/a><\/li>\n  <li>№ 63. <a href=\"https:\/\/www.youtube.com\/watch?v=KbZAeVFaEcU\">Добавление нескольких телефонов в форме<\/a><\/li>\n  <li>№ 84. <a href=\"https:\/\/www.youtube.com\/watch?v=phraobT9Ufk\">Разбираем мелочи в форме регистрации<\/a><\/li>\n  <li>№ 85. <a href=\"https:\/\/www.youtube.com\/watch?v=DnTeUK1OqLQ\">Исправляем форму формы, ну и немножко содержание<\/a><\/li>\n  <li>№ 103.<a href=\"https:\/\/www.youtube.com\/watch?v=b4NPKYiT9n4\">Плейсхолдеры в каждом поле — это как иконки у каждого пункта меню<\/a><\/li>\n  <li>№ 104. <a href=\"https:\/\/www.youtube.com\/watch?v=dqnYrhXSMms\">Подробный разбор сложной формы<\/a><\/li>\n  <li>№ 108. <a href=\"https:\/\/www.youtube.com\/watch?v=9RUUtqehkyU\">Кирпичная кладка и другие недостатки формы<\/a><\/li>\n  <li>№ 118. <a href=\"https:\/\/www.youtube.com\/watch?v=9kB6CfCE0aM\">Обозначение обязательных и необязательных полей<\/a><\/li>\n  <li>№ 130. <a href=\"https:\/\/www.youtube.com\/watch?v=ublwi2BmrH0\">Как сделать сетку в форме<\/a><\/li>\n  <li>№ 143. <a href=\"https:\/\/www.youtube.com\/watch?v=VlEbVJGgGXw\">Не надо ставить элементы формы под главную кнопку<\/a><\/li>\n  <li>№ 145. <a href=\"https:\/\/www.youtube.com\/watch?v=WjX759lGaHI\">У Гугля плохой дизайн<\/a><\/li>\n  <li>№ 154. <a href=\"https:\/\/www.youtube.com\/watch?v=YIwCjtdp5Y4\">Форма слишком сложная<\/a><\/li>\n  <li>№ 156. <a href=\"https:\/\/www.youtube.com\/watch?v=5gxBJOV4yzA\">Размеры и кнопка в форме<\/a><\/li>\n  <li>№ 159. <a href=\"https:\/\/www.youtube.com\/watch?v=rMnnM3o_JXo\">Поле поиска — это не часть полей формы<\/a><\/li>\n<\/ul>\n<p class=\"foot\">См. также тег: <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/web-forms\/\">веб-формы<\/a><\/p>\n<p>Элементы интерфейса:<\/p>\n<ul>\n  <li>№ 60. <a href=\"https:\/\/www.youtube.com\/watch?v=NdBt_Oqydk4\">Рассуждения о текстовых кнопках<\/a><\/li>\n  <li>№ 67. <a href=\"https:\/\/www.youtube.com\/watch?v=WqFfT7yDMJg\">Меняем табы на переключалку и настраиваем вёрстку<\/a><\/li>\n  <li>№ 72. <a href=\"https:\/\/www.youtube.com\/watch?v=IV2nVMcaQ7U\">Представляем выбор внятно радиокнопками<\/a><\/li>\n  <li>№ 76. <a href=\"https:\/\/www.youtube.com\/watch?v=wihXJHHK3yo\">Так это кнопка или ссылка? Оказывается, это радиокнопка!<\/a><\/li>\n  <li>№ 114. <a href=\"https:\/\/www.youtube.com\/watch?v=n4Cb774L2_U\">Что не так с аккордеоном<\/a><\/li>\n  <li>№ 116. <a href=\"https:\/\/www.youtube.com\/watch?v=9tewBcFm-1M\">Как назвать чупа-чупс<\/a><\/li>\n  <li>№ 144. <a href=\"https:\/\/www.youtube.com\/watch?v=ZFLMkM02lp8\">Три вида серенького текста в поле<\/a><\/li>\n  <li>№ 147. <a href=\"https:\/\/www.youtube.com\/watch?v=FusPcntg-oI\">Показываю старинные радиокнопку и чекбокс<\/a><\/li>\n  <li>№ 151. <a href=\"https:\/\/www.youtube.com\/watch?v=mMTivJldcAQ\">Про хоум-индикатор<\/a><\/li>\n  <li>№ 169. <a href=\"https:\/\/www.youtube.com\/watch?v=hpnt4JyiU2o\">У прямоугольника недостаточно признаков поля<\/a><\/li>\n<\/ul>\n<p>Интерфейс:<\/p>\n<ul>\n  <li>№ 9. <a href=\"https:\/\/www.youtube.com\/watch?v=gUklbkeDdYg\">Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование<\/a><\/li>\n  <li>№ 16. <a href=\"https:\/\/www.youtube.com\/watch?v=99o_4c7HTUk\">О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки<\/a><\/li>\n  <li>№ 44. <a href=\"https:\/\/www.youtube.com\/watch?v=2aQnKL5nLUw\">Упрощаем экран успешного заказа пиццы<\/a><\/li>\n  <li>№ 61. <a href=\"https:\/\/www.youtube.com\/watch?v=-zzLglJ9bEc\">Упрощаем первый экран кассы самообслуживания, добавляем кнопку «У меня булка»<\/a><\/li>\n  <li>№ 74. <a href=\"https:\/\/www.youtube.com\/watch?v=aLETIvOafg0\">Так это форма или мастер?<\/a><\/li>\n  <li>№ 75. <a href=\"https:\/\/www.youtube.com\/watch?v=zngun6Kw1q4\">Точно описываем поведение интерфейса для разработчиков<\/a><\/li>\n  <li>№ 77. <a href=\"https:\/\/www.youtube.com\/watch?v=U_9t3-mJXp0\">Жму синюю кнопку на автомате, не читая<\/a><\/li>\n  <li>№ 83. <a href=\"https:\/\/www.youtube.com\/watch?v=D0zKnGG10tY\">Уважать ли интерфейсные традиции разных платформ?<\/a><\/li>\n  <li>№ 86. <a href=\"https:\/\/www.youtube.com\/watch?v=wq4MQNpFrbg\">Не надо ничего активировать<\/a><\/li>\n  <li>№ 97. <a href=\"https:\/\/www.youtube.com\/watch?v=jwbEj5v3bu8\">Ширина и прокрутка на десктопе<\/a><\/li>\n  <li>№ 101. <a href=\"https:\/\/www.youtube.com\/watch?v=pn_X2x_8XPo\">Елена Семёновна и валидация ввода<\/a><\/li>\n  <li>№ 105. <a href=\"https:\/\/www.youtube.com\/watch?v=Ew75feYtGMs\">Как именно работает взаимодействие?<\/a><\/li>\n  <li>№ 107. <a href=\"https:\/\/www.youtube.com\/watch?v=GBj17b4l10s\">Как делать, чтобы программа не тормозила<\/a><\/li>\n  <li>№ 109. <a href=\"https:\/\/www.youtube.com\/watch?v=-8neywtnhT8\">Двухпанельный интерфейс<\/a><\/li>\n  <li>№ 115. <a href=\"https:\/\/www.youtube.com\/watch?v=Tq8Rh7GPqhM\">Мир пользователя<\/a><\/li>\n  <li>№ 121. <a href=\"https:\/\/www.youtube.com\/watch?v=xKPaH3XiW-4\">О связях сущностей в сложных системах<\/a><\/li>\n  <li>№ 122. <a href=\"https:\/\/www.youtube.com\/watch?v=XvPjm7mQ0n8\">Думать из мира пользователя<\/a> (продолжение из 115)<\/li>\n  <li>№ 149. <a href=\"https:\/\/www.youtube.com\/watch?v=UENZW1gNjpU\">Двойная обратная связь<\/a><\/li>\n  <li>№ 150. <a href=\"https:\/\/www.youtube.com\/watch?v=crgZi_CW6xU\">Зелёный значит «всё хорошо»<\/a><\/li>\n  <li>№ 153. <a href=\"https:\/\/www.youtube.com\/watch?v=9E-iYfjEqg0\">В играх всё иначе<\/a><\/li>\n  <li>№ 155. <a href=\"https:\/\/www.youtube.com\/watch?v=cG6jewXdWL4\">Кнопка «Сохранить» — плохой знак<\/a><\/li>\n  <li>№ 168. <a href=\"https:\/\/www.youtube.com\/watch?v=ax1BrxWlcOw\">Что делать, пока ЭВМ думает медленно?<\/a><\/li>\n<\/ul>\n<p>Таблицы:<\/p>\n<ul>\n  <li>№ 8. <a href=\"https:\/\/www.youtube.com\/watch?v=IvzDUzH-Sk0\">Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря<\/a><\/li>\n  <li>№ 10. <a href=\"https:\/\/www.youtube.com\/watch?v=mE0pZIVgJLE\">Что не позволено базе данных, то позволено обычной таблице<\/a><\/li>\n  <li>№ 29. <a href=\"https:\/\/www.youtube.com\/watch?v=N2LINRApqmg\">Круговая диаграмма для красоты, табличка для пользы дела<\/a><\/li>\n  <li>№ 39. <a href=\"https:\/\/www.youtube.com\/watch?v=MgwYwu3wkk4\">Дизайн универсальных таблиц с непредсказуемым содержимым<\/a><\/li>\n  <li>№ 65. <a href=\"https:\/\/www.youtube.com\/watch?v=oz571oi6w24\">Живые спарклайны в таблице<\/a><\/li>\n  <li>№ 102. <a href=\"https:\/\/www.youtube.com\/watch?v=QyHEWiMR_0A\">Как выравнивать цифры в таблицах<\/a><\/li>\n  <li>№ 112. <a href=\"https:\/\/www.youtube.com\/watch?v=zSJijCINU58\">Собираем табличку с диапазоном и разной точностью<\/a><\/li>\n  <li>№ 113. <a href=\"https:\/\/www.youtube.com\/watch?v=ZDvDnJ1HSP0\">Рекомендую жирную, а не бледную шапку в таблице<\/a><\/li>\n  <li>№ 117. <a href=\"https:\/\/www.youtube.com\/watch?v=PBzl0pIUqk0\">Горизонтальная прокрутка в таблицах<\/a><\/li>\n  <li>№ 142. <a href=\"https:\/\/www.youtube.com\/watch?v=tOiNW_F_PH4\">Про динамические таблицы<\/a><\/li>\n  <li>№ 157. <a href=\"https:\/\/www.youtube.com\/watch?v=36V12nuC0kY\">Иерархия в таблице<\/a><\/li>\n  <li>№ 171. <a href=\"https:\/\/www.youtube.com\/watch?v=0F-zmFtcWwI\">Повышаем плотность таблиц<\/a><\/li>\n<\/ul>\n<p class=\"foot\">См. также тег: <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/tables\/\">таблицы<\/a><\/p>\n<p>Графики, диаграммы, инфографика:<\/p>\n<ul>\n  <li>№ 34. <a href=\"https:\/\/www.youtube.com\/watch?v=u682Zi8_FBk\">Визуализация помогает увидеть закономерности<\/a><\/li>\n  <li>№ 43. <a href=\"https:\/\/www.youtube.com\/watch?v=BvugvUfyXmg\">Объясняю про тафтианские 45 градусов на графике<\/a><\/li>\n  <li>№ 94. <a href=\"https:\/\/www.youtube.com\/watch?v=8986vOikHRk\">Если данных мало, то и график не нужен<\/a><\/li>\n  <li>№ 95. <a href=\"https:\/\/www.youtube.com\/watch?v=WSXYgIwdziI\">Рассуждения про инфографику и её задачи<\/a><\/li>\n  <li>№ 98. <a href=\"https:\/\/www.youtube.com\/watch?v=9pf94f8Mz7Q\">Когда визуализация потрачена впустую<\/a><\/li>\n  <li>№ 110. <a href=\"https:\/\/www.youtube.com\/watch?v=qsDWBf-xcVs\">В чём проблема интерактивных графиков<\/a><\/li>\n  <li>№ 111. <a href=\"https:\/\/www.youtube.com\/watch?v=wJJdSn4Vk-Q\">Нужны не круговые диаграммы, а таблица<\/a><\/li>\n  <li>№ 132. <a href=\"https:\/\/www.youtube.com\/watch?v=Urn9TDalPg4\">Дискуссия о задачах инфографики<\/a><\/li>\n  <li>№ 134. <a href=\"https:\/\/www.youtube.com\/watch?v=zMmO0bWqELQ\">Музыкальная нотация и чтение с листа<\/a><\/li>\n  <li>№ 172. <a href=\"https:\/\/www.youtube.com\/watch?v=Oz3A44Em8ms\">Толщина — носитель цвета<\/a><\/li>\n<\/ul>\n<p>Редактура в дизайне:<\/p>\n<ul>\n  <li>№ 7. <a href=\"https:\/\/www.youtube.com\/watch?v=1DdsndXWHSE\">Механически редактируем примечание к таблице<\/a><\/li>\n  <li>№ 24. <a href=\"https:\/\/www.youtube.com\/watch?v=bxSu-Vx0Nz8\">Отступления от синтаксиса интерфейса и линейки в таблицах<\/a><\/li>\n  <li>№ 49. <a href=\"https:\/\/www.youtube.com\/watch?v=H3UvwkQH8_o\">Редактура привела к радиокнопке<\/a><\/li>\n  <li>№ 66. <a href=\"https:\/\/www.youtube.com\/watch?v=-6LaXViTWzc\">Исследование о тексте в интерфейсе Эпла (1980-е)<\/a><\/li>\n  <li>№ 70. <a href=\"https:\/\/www.youtube.com\/watch?v=Zphn9ixcd0U\">Показать примечание в контексте и заодно сократить<\/a><\/li>\n  <li>№ 80. <a href=\"https:\/\/www.youtube.com\/watch?v=AmuCRWsSdpA\">Редактируем интерфейс конфигуратора окон<\/a><\/li>\n  <li>№ 92. <a href=\"https:\/\/www.youtube.com\/watch?v=bYk0_q6tWLA\">Поле «Комментарий для курьера»<\/a><\/li>\n  <li>№ 96. <a href=\"https:\/\/www.youtube.com\/watch?v=1l35NtOBogE\">Жирный против курсива<\/a><\/li>\n  <li>№ 120. <a href=\"https:\/\/www.youtube.com\/watch?v=H-tk4IhJWnA\">Непонятный выбор и названия кнопок<\/a><\/li>\n  <li>№ 127. <a href=\"https:\/\/www.youtube.com\/watch?v=oJkMBxIeLE0\">Редактируем регистрацию на вымышленном сайте<\/a><\/li>\n  <li>№ 129. <a href=\"https:\/\/www.youtube.com\/watch?v=5e2pwuF8raQ\">Формулировки ошибок в форме<\/a><\/li>\n  <li>№ 135. <a href=\"https:\/\/www.youtube.com\/watch?v=ERNjOfUbXZY\">Сокращаем текст про почту<\/a><\/li>\n<\/ul>\n<p>Вёрстка:<\/p>\n<ul>\n  <li>№ 17. <a href=\"https:\/\/www.youtube.com\/watch?v=td6deeU-7kU\">Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально<\/a><\/li>\n  <li>№ 42. <a href=\"https:\/\/www.youtube.com\/watch?v=sXRWQ05cO3I\">Улучшаем эстетику с помощью контраста и прямоугольности<\/a><\/li>\n  <li>№ 73. <a href=\"https:\/\/www.youtube.com\/watch?v=49DSUMomhNE\">Верстаем интерфейс конструктора окон<\/a><\/li>\n  <li>№ 78. <a href=\"https:\/\/www.youtube.com\/watch?v=JFKJHdQJvNQ\">Неудачные выравнивательные связи<\/a><\/li>\n  <li>№ 99. <a href=\"https:\/\/www.youtube.com\/watch?v=yj5dFy9HQ-Y\">Комментирую вёрстку окна<\/a><\/li>\n  <li>№ 160. <a href=\"https:\/\/www.youtube.com\/watch?v=UeSCu7MFeAw\">Двигаем иконки в виджете<\/a><\/li>\n  <li>№ 161. <a href=\"https:\/\/www.youtube.com\/watch?v=a0HYHigmUx8\">Вписываем кусок карты в виджет<\/a><\/li>\n  <li>№ 162. <a href=\"https:\/\/www.youtube.com\/watch?v=cbpDb3k_t5k\">Чистим виджет от шума<\/a><\/li>\n  <li>№ 164. <a href=\"https:\/\/www.youtube.com\/watch?v=AebU9xyd-QI\">Виджет умного дома с иконками<\/a><\/li>\n  <li>№ 173. <a href=\"https:\/\/www.youtube.com\/watch?v=EaSKacTWobU\">Срисовываем большой круг для виджета<\/a><\/li>\n  <li>№ 174. <a href=\"https:\/\/www.youtube.com\/watch?v=aV65V1H4w3I\">Срисовываем виджет погоды<\/a><\/li>\n<\/ul>\n<p>Эстетика:<\/p>\n<ul>\n  <li>№ 12. <a href=\"https:\/\/www.youtube.com\/watch?v=kmlb272BAdo\">Как делать градиенты в инфографике<\/a><\/li>\n  <li>№ 13. <a href=\"https:\/\/www.youtube.com\/watch?v=29GAdT6dXBA\">Упаковка таблицы, симультанный контраст и борьба за красоту цветов<\/a><\/li>\n  <li>№ 27. <a href=\"https:\/\/www.youtube.com\/watch?v=X1v54YA8g7c\">Cкруглённое поле поиска и ужасный шрифт Мирьяд-про<\/a><\/li>\n  <li>№ 79. <a href=\"https:\/\/www.youtube.com\/watch?v=58GldX-JZig\">Улучшаем дизайн кнопки<\/a><\/li>\n  <li>№ 81. <a href=\"https:\/\/www.youtube.com\/watch?v=rlCxhBCxJww\">Классические признаки поля ввода и кнопки<\/a><\/li>\n  <li>№ 87. <a href=\"https:\/\/www.youtube.com\/watch?v=ox38_G9lQuo\">Вспомогательные линии — тоньше и скромнее<\/a><\/li>\n  <li>№ 91. <a href=\"https:\/\/www.youtube.com\/watch?v=hieOe3wu-7E\">Аналогия между элементами интерфейса и буквами шрифта, которые можно взять готовые<\/a><\/li>\n  <li>№ 93. <a href=\"https:\/\/www.youtube.com\/watch?v=hh1oSLA0XaE\">Задисейбленность кнопки<\/a><\/li>\n  <li>№ 140. <a href=\"https:\/\/www.youtube.com\/watch?v=Z8C1RMcR2fk\">Выбор цветов для интерфейса<\/a><\/li>\n  <li>№ 141. <a href=\"https:\/\/www.youtube.com\/watch?v=E40xHhr73Ig\">Шрифты с засечками в интерфейсе<\/a><\/li>\n  <li>№ 148. <a href=\"https:\/\/www.youtube.com\/watch?v=X7mBhTG08xA\">Настраиваем толщины линий<\/a><\/li>\n  <li>№ 152. <a href=\"https:\/\/www.youtube.com\/watch?v=hvv_ohLK1xU\">Много стилей и плохие тени<\/a><\/li>\n<\/ul>\n<p>Ход:<\/p>\n<ul>\n  <li>№ 6. <a href=\"https:\/\/www.youtube.com\/watch?v=BKu6wqOvgfg\">Ставим красную блямбу рядом с таблицей<\/a><\/li>\n  <li>№ 20. <a href=\"https:\/\/www.youtube.com\/watch?v=CaiDj7OOUbc\">Изображаем нестандартную конструкцию окна символом<\/a><\/li>\n  <li>№ 25. <a href=\"https:\/\/www.youtube.com\/watch?v=N2Qk697fe24\">Чтобы пользователь нажал, можно написать «Жми!» <\/a><\/li>\n  <li>№ 71. <a href=\"https:\/\/www.youtube.com\/watch?v=TAg6cnGIsh4\">Запрещаю выравнивание по центру<\/a><\/li>\n<\/ul>\n<p>Бизнесовое и продуктовое:<\/p>\n<ul>\n  <li>№ 23. <a href=\"https:\/\/www.youtube.com\/watch?v=xq7ntaU6FTU\">Как продать подписку на «Афишу»<\/a><\/li>\n  <li>№ 32. <a href=\"https:\/\/www.youtube.com\/watch?v=qeyRl3IVSGQ\">Закоулки интерфейса можно просто не делать<\/a><\/li>\n  <li>№ 38. <a href=\"https:\/\/www.youtube.com\/watch?v=k6iyy4vJ1Co\">Продаём окна, объясняя разницу профилей<\/a><\/li>\n  <li>№ 47. <a href=\"https:\/\/www.youtube.com\/watch?v=6rDKRg6SlVc\">Аккуратное внедрение нового дизайна без ущерба привычкам<\/a><\/li>\n  <li>№ 48. <a href=\"https:\/\/www.youtube.com\/watch?v=MhdZzXw_Tzc\">Что, если на реализацию хорошего интерфейса нет времени<\/a><\/li>\n  <li>№ 56. <a href=\"https:\/\/www.youtube.com\/watch?v=3polv_KHa5g\">Разделяем сценарии оплаты частично, ровно по счёту и впрок<\/a><\/li>\n  <li>№ 57. <a href=\"https:\/\/www.youtube.com\/watch?v=TeolvcH5f_8\">Соблазняем человека пиццей, а не текстом «Ваша корзина пуста»<\/a><\/li>\n  <li>№ 59. <a href=\"https:\/\/www.youtube.com\/watch?v=UcIjtMreNHA\">Постоянные напоминания о цене могут мешать покупать<\/a><\/li>\n  <li>№ 64. <a href=\"https:\/\/www.youtube.com\/watch?v=PQzVzgYfvfQ\">Вопросы клиента к интерфейсу кассы самообслуживания<\/a><\/li>\n  <li>№ 82. <a href=\"https:\/\/www.youtube.com\/watch?v=2qV6CCRT6lA\">Заранее спросить у клиента про сео и персональные данные<\/a><\/li>\n  <li>№ 88. <a href=\"https:\/\/www.youtube.com\/watch?v=Mt45AuwOnvA\">Убрал шум — добавь сигнал!<\/a><\/li>\n  <li>№ 90. <a href=\"https:\/\/www.youtube.com\/watch?v=-GHjDFHWrBA\">Классно упростить себе задачу<\/a><\/li>\n  <li>№ 100. <a href=\"https:\/\/www.youtube.com\/watch?v=yTIrl1jnEHU\">Программисты могли бы подумать о пользе для бизнеса<\/a><\/li>\n  <li>№ 106. <a href=\"https:\/\/www.youtube.com\/watch?v=3fzeLHVhvy0\">Оговорка, что интерфейс — это не всё<\/a><\/li>\n  <li>№ 136. <a href=\"https:\/\/www.youtube.com\/watch?v=qh5BmDJ48yI\">Дисейблить ли кнопку с точки зрения канонов интерфейса и бизнеса?<\/a><\/li>\n  <li>№ 175. <a href=\"https:\/\/www.youtube.com\/watch?v=NqKDGROn8AQ\">Работа дизайнера — разобраться в теме<\/a><\/li>\n<\/ul>\n<p>Инструмент:<\/p>\n<ul>\n  <li>№ 18. <a href=\"https:\/\/www.youtube.com\/watch?v=vHCy9izr0v4\">Последовательное волшебство в интерфейсе Фотошопа<\/a><\/li>\n  <li>№ 41. <a href=\"https:\/\/www.youtube.com\/watch?v=NF8fC2Cp8iU\">Перерисовываю и улучшаю кусок интерфейса в Фигме с помощью компонентов<\/a><\/li>\n  <li>№ 45. <a href=\"https:\/\/www.youtube.com\/watch?v=H3CF-RG9lIc\">Режимы наложения слоёв с овощами и фруктами<\/a><\/li>\n  <li>№ 54. <a href=\"https:\/\/www.youtube.com\/watch?v=uILlCs5L_mY\">Секреты встроенной скриншотилки на Маке<\/a><\/li>\n<\/ul>\n<p>Работа над дизайном и подача:<\/p>\n<ul>\n  <li>№ 36. <a href=\"https:\/\/www.youtube.com\/watch?v=czu2l7RfEWs\">Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру<\/a><\/li>\n  <li>№ 58. <a href=\"https:\/\/www.youtube.com\/watch?v=2tANVy6u2TQ\">Не описывайте макеты и не делайте «невозможные» макеты<\/a><\/li>\n  <li>№ 128. <a href=\"https:\/\/www.youtube.com\/watch?v=zCldGigmk04\">Что не так с ваерфреймами<\/a><\/li>\n  <li>№ 139. <a href=\"https:\/\/www.youtube.com\/watch?v=tqfe5-w0VPo\">Сначала презентуйте линейно, а потом уже рисуйте диаграммы<\/a><\/li>\n  <li>№ 158. <a href=\"https:\/\/www.youtube.com\/watch?v=WjHJhh6K7dk\">Важность подачи дизайна<\/a><\/li>\n  <li>№ 165. <a href=\"https:\/\/www.youtube.com\/watch?v=uCssgVrDCqM\">Крутой интерфейс кассы и крутая его презентация<\/a><\/li>\n  <li>№ 170. <a href=\"https:\/\/www.youtube.com\/watch?v=mlqnrYCBqr0\">Дизайн дизайна, или как расположить макеты на холсте<\/a><\/li>\n<\/ul>\n<p>Разное интересное:<\/p>\n<ul>\n  <li>№ 14. <a href=\"https:\/\/www.youtube.com\/watch?v=tYJMrY5zWlo\">Как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10<\/a><\/li>\n  <li>№ 21. <a href=\"https:\/\/www.youtube.com\/watch?v=fPVmyMbixXw\">Что бы я поменял в дизайне Бёрдвью спустя девять лет<\/a><\/li>\n  <li>№ 22. <a href=\"https:\/\/www.youtube.com\/watch?v=7Mc6IaaXNsc\">Технические ограничения и дизайн для будущего<\/a><\/li>\n  <li>№ 31. <a href=\"https:\/\/www.youtube.com\/watch?v=bCMAOeqapDI\">Двусмысленная иконка и проверка венгерским языком<\/a><\/li>\n  <li>№ 51. <a href=\"https:\/\/www.youtube.com\/watch?v=SQQLWeCaHs8\">Глючная обработка ввода пользователя в интерфейсе Сафари<\/a><\/li>\n  <li>№ 62. <a href=\"https:\/\/www.youtube.com\/watch?v=4JzD6d9V0nU\">Что делать, если клиент хочет фигню?<\/a><\/li>\n  <li>№ 68. <a href=\"https:\/\/www.youtube.com\/watch?v=x6RbJD24N6o\">Благодарности и в чём польза теории<\/a><\/li>\n  <li>№ 69. <a href=\"https:\/\/www.youtube.com\/watch?v=JoA5JZcBoS0\">Что делать дизайнеру, если разработчики напрограммили всю магию?<\/a><\/li>\n  <li>№ 123. <a href=\"https:\/\/www.youtube.com\/watch?v=zoN15-R2gQ8\">Благодарности<\/a><\/li>\n  <li>№ 124. <a href=\"https:\/\/www.youtube.com\/watch?v=gCTCA_dQOp4\">Мастрид ли Тафти?<\/a><\/li>\n  <li>№ 125. <a href=\"https:\/\/www.youtube.com\/watch?v=35uwvF6SZb8\">Как я отношусь к войсикам и кружочкам<\/a><\/li>\n  <li>№ 131. <a href=\"https:\/\/www.youtube.com\/watch?v=2PC5L3tv6fA\">Когда нужны моноширинные цифры<\/a><\/li>\n  <li>№ 133. <a href=\"https:\/\/www.youtube.com\/watch?v=o2DjvI6nVts\">Плакаты и бумага, которая горит<\/a><\/li>\n  <li>№ 137. <a href=\"https:\/\/www.youtube.com\/watch?v=dfe9kO0a054\">Почему я не могу дать список дизайнеров, за которыми надо следить<\/a><\/li>\n  <li>№ 163. <a href=\"https:\/\/www.youtube.com\/watch?v=K98thEFlCng\">Про компасную стрелку, стороны света и смелость<\/a><\/li>\n  <li>№ 166. <a href=\"https:\/\/www.youtube.com\/watch?v=GLfjVm4Douk\">Как быть с пустой лепёшкой<\/a><\/li>\n<\/ul>\n<p>Потом разберу ещё. А вы пока приходите на следующий курс, который пройдёт 30 августа — 28 сентября.<\/p>\n<p><a href=\"https:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "За те годы, что мой интерфейсный курс идёт в онлайне, я выложил уже почти две сотни фрагментов с наших семинаров",
            "date_published": "2025-07-21T22:21:32+08:00",
            "date_modified": "2025-07-21T22:24:14+08:00",
            "tags": [
                "курсы",
                "пользовательский интерфейс",
                "представление информации"
            ],
            "_date_published_rfc2822": "Mon, 21 Jul 2025 22:21:32 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6504",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "6366",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frags-1-150\/",
            "title": "Фрагменты интерфейсного курса (1—150)",
            "content_html": "<p>За те три года, что <a href=\"https:\/\/bureau.ru\/educenter\/ui-online\/\">мой интерфейсный курс<\/a> идёт в онлайне, я выложил уже <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/ui-course-frags\/\">полторы сотни фрагментов с наших семинаров<\/a>. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Пришло время навести хотя бы немного порядка.<\/p>\n<p>Разобрал 150 фрагментов, <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frags-1-175\/\">потом разберу ещё<\/a>.<\/p>\n<p>Сборная солянка:<\/p>\n<ul>\n  <li>№ 1. <a href=\"https:\/\/www.youtube.com\/watch?v=xzUNC_VGNFk\">Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму<\/a><\/li>\n  <li>№ 2. <a href=\"https:\/\/www.youtube.com\/watch?v=_Jv9dT2B7Nc\">Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа<\/a><\/li>\n  <li>№ 19. <a href=\"https:\/\/www.youtube.com\/watch?v=5VCi1KN7WdE\">Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе<\/a><\/li>\n  <li>№ 26. <a href=\"https:\/\/www.youtube.com\/watch?v=Pc0GryUpCgM\">ФИО как в паспорте и эффект японской квартиры<\/a><\/li>\n  <li>№ 89. <a href=\"https:\/\/www.youtube.com\/watch?v=eLOGLY3_h7U\">Прямоугольнизация дизайна и свобода, которую даёт фотошоп<\/a><\/li>\n  <li>№ 119. <a href=\"https:\/\/www.youtube.com\/watch?v=Hwi6ddaRZ38\">О дизайне переключателя (segmented control) и положении кнопки<\/a><\/li>\n  <li>№ 138. <a href=\"https:\/\/www.youtube.com\/watch?v=GNxf6DAZR-Q\">Разное про кассу в магазине<\/a><\/li>\n  <li>№ 146. <a href=\"https:\/\/www.youtube.com\/watch?v=CSvgFqJ8p1Q\">Разбор конфигуратора окон и как классифицировать сообщения об ошибках<\/a><\/li>\n<\/ul>\n<p>Почти самостоятельные лекции:<\/p>\n<ul>\n  <li>№ 3. <a href=\"https:\/\/www.youtube.com\/watch?v=LBBWjtEHLxU\">Папочка comparisons, листаю и комментирую после лекций об информационном дизайне<\/a> (это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне)<\/li>\n  <li>№ 33. <a href=\"https:\/\/www.youtube.com\/watch?v=du6SqjjLEzQ\">Физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм<\/a><\/li>\n  <li>№ 37. <a href=\"https:\/\/www.youtube.com\/watch?v=SwyTvRljimM\">Блиц-пересказ куска питерского доклада про интерфейсы и Ворлд-Чесс<\/a><\/li>\n  <li>№ 46. <a href=\"https:\/\/www.youtube.com\/watch?v=JTqRG_7e3O8\">Про сложное цветовое кодирование и триаду Мейксенара<\/a><\/li>\n  <li>№ 55. <a href=\"https:\/\/www.youtube.com\/watch?v=3q0HH7mUMYA\">Соответствие между логической структурой и выразительными средствами и дизайн-системы<\/a><\/li>\n<\/ul>\n<p>Метод:<\/p>\n<ul>\n  <li>№ 30. <a href=\"https:\/\/www.youtube.com\/watch?v=-np87CaMjKs\">Метод «Например»<\/a><\/li>\n  <li>№ 40. <a href=\"https:\/\/www.youtube.com\/watch?v=MuDea0wOabA\">Сценка со звонком в пиццерию<\/a><\/li>\n  <li>№ 126. <a href=\"https:\/\/www.youtube.com\/watch?v=ro4EBiCJ1iE\">Решение существует<\/a><\/li>\n<\/ul>\n<p>Формы:<\/p>\n<ul>\n  <li>№ 4. <a href=\"https:\/\/www.youtube.com\/watch?v=bPSaKS1bbsE\">Двигаем простенькую форму регистрации, чтобы стало поаккуратнее<\/a><\/li>\n  <li>№ 5. <a href=\"https:\/\/www.youtube.com\/watch?v=OMJV8exdbnU\">Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки<\/a><\/li>\n  <li>№ 11. <a href=\"https:\/\/www.youtube.com\/watch?v=how0mkG7ui4\">Первое впечатление, синтаксис и язык формы заказа с доставкой<\/a><\/li>\n  <li>№ 15. <a href=\"https:\/\/www.youtube.com\/watch?v=c91KziF01sQ\">Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму<\/a><\/li>\n  <li>№ 28. <a href=\"https:\/\/www.youtube.com\/watch?v=GrkuX84kKeo\">Улучшаем форму обратной связи Букинг.кома<\/a><\/li>\n  <li>№ 35. <a href=\"https:\/\/www.youtube.com\/watch?v=dckw7tqm1M4\">Первое впечатление от формы<\/a><\/li>\n  <li>№ 50. <a href=\"https:\/\/www.youtube.com\/watch?v=oepQvJtNgUU\">Упорядочиваем вёрстку формы<\/a><\/li>\n  <li>№ 52. <a href=\"https:\/\/www.youtube.com\/watch?v=hPGiFsdTKa8\">Расстояние между полями и сокращение подписей<\/a><\/li>\n  <li>№ 53. <a href=\"https:\/\/www.youtube.com\/watch?v=IR0zLLBf65Y\">Редизайним форму настройки сложной логики<\/a><\/li>\n  <li>№ 63. <a href=\"https:\/\/www.youtube.com\/watch?v=KbZAeVFaEcU\">Добавление нескольких телефонов в форме<\/a><\/li>\n  <li>№ 84. <a href=\"https:\/\/www.youtube.com\/watch?v=phraobT9Ufk\">Разбираем мелочи в форме регистрации<\/a><\/li>\n  <li>№ 85. <a href=\"https:\/\/www.youtube.com\/watch?v=DnTeUK1OqLQ\">Исправляем форму формы, ну и немножко содержание<\/a><\/li>\n  <li>№ 103.<a href=\"https:\/\/www.youtube.com\/watch?v=b4NPKYiT9n4\">Плейсхолдеры в каждом поле — это как иконки у каждого пункта меню<\/a><\/li>\n  <li>№ 104. <a href=\"https:\/\/www.youtube.com\/watch?v=dqnYrhXSMms\">Подробный разбор сложной формы<\/a><\/li>\n  <li>№ 108. <a href=\"https:\/\/www.youtube.com\/watch?v=9RUUtqehkyU\">Кирпичная кладка и другие недостатки формы<\/a><\/li>\n  <li>№ 118. <a href=\"https:\/\/www.youtube.com\/watch?v=9kB6CfCE0aM\">Обозначение обязательных и необязательных полей<\/a><\/li>\n  <li>№ 130. <a href=\"https:\/\/www.youtube.com\/watch?v=ublwi2BmrH0\">Как сделать сетку в форме<\/a><\/li>\n  <li>№ 143. <a href=\"https:\/\/www.youtube.com\/watch?v=VlEbVJGgGXw\">Не надо ставить элементы формы под главную кнопку<\/a><\/li>\n  <li>№ 145. <a href=\"https:\/\/www.youtube.com\/watch?v=WjX759lGaHI\">У Гугля плохой дизайн<\/a><\/li>\n<\/ul>\n<p class=\"foot\">См. также тег: <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/web-forms\/\">веб-формы<\/a><\/p>\n<p>Элементы интерфейса:<\/p>\n<ul>\n  <li>№ 60. <a href=\"https:\/\/www.youtube.com\/watch?v=NdBt_Oqydk4\">Рассуждения о текстовых кнопках<\/a><\/li>\n  <li>№ 67. <a href=\"https:\/\/www.youtube.com\/watch?v=WqFfT7yDMJg\">Меняем табы на переключалку и настраиваем вёрстку<\/a><\/li>\n  <li>№ 72. <a href=\"https:\/\/www.youtube.com\/watch?v=IV2nVMcaQ7U\">Представляем выбор внятно радиокнопками<\/a><\/li>\n  <li>№ 76. <a href=\"https:\/\/www.youtube.com\/watch?v=wihXJHHK3yo\">Так это кнопка или ссылка? Оказывается, это радиокнопка!<\/a><\/li>\n  <li>№ 114. <a href=\"https:\/\/www.youtube.com\/watch?v=n4Cb774L2_U\">Что не так с аккордеоном<\/a><\/li>\n  <li>№ 116. <a href=\"https:\/\/www.youtube.com\/watch?v=9tewBcFm-1M\">Как назвать чупа-чупс<\/a><\/li>\n  <li>№ 144. <a href=\"https:\/\/www.youtube.com\/watch?v=ZFLMkM02lp8\">Три вида серенького текста в поле<\/a><\/li>\n  <li>№ 147. <a href=\"https:\/\/www.youtube.com\/watch?v=FusPcntg-oI\">Показываю старинные радиокнопку и чекбокс<\/a><\/li>\n<\/ul>\n<p>Интерфейс:<\/p>\n<ul>\n  <li>№ 9. <a href=\"https:\/\/www.youtube.com\/watch?v=gUklbkeDdYg\">Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование<\/a><\/li>\n  <li>№ 16. <a href=\"https:\/\/www.youtube.com\/watch?v=99o_4c7HTUk\">О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки<\/a><\/li>\n  <li>№ 44. <a href=\"https:\/\/www.youtube.com\/watch?v=2aQnKL5nLUw\">Упрощаем экран успешного заказа пиццы<\/a><\/li>\n  <li>№ 61. <a href=\"https:\/\/www.youtube.com\/watch?v=-zzLglJ9bEc\">Упрощаем первый экран кассы самообслуживания, добавляем кнопку «У меня булка»<\/a><\/li>\n  <li>№ 74. <a href=\"https:\/\/www.youtube.com\/watch?v=aLETIvOafg0\">Так это форма или мастер?<\/a><\/li>\n  <li>№ 75. <a href=\"https:\/\/www.youtube.com\/watch?v=zngun6Kw1q4\">Точно описываем поведение интерфейса для разработчиков<\/a><\/li>\n  <li>№ 77. <a href=\"https:\/\/www.youtube.com\/watch?v=U_9t3-mJXp0\">Жму синюю кнопку на автомате, не читая<\/a><\/li>\n  <li>№ 83. <a href=\"https:\/\/www.youtube.com\/watch?v=D0zKnGG10tY\">Уважать ли интерфейсные традиции разных платформ?<\/a><\/li>\n  <li>№ 86. <a href=\"https:\/\/www.youtube.com\/watch?v=wq4MQNpFrbg\">Не надо ничего активировать<\/a><\/li>\n  <li>№ 97. <a href=\"https:\/\/www.youtube.com\/watch?v=jwbEj5v3bu8\">Ширина и прокрутка на десктопе<\/a><\/li>\n  <li>№ 101. <a href=\"https:\/\/www.youtube.com\/watch?v=pn_X2x_8XPo\">Елена Семёновна и валидация ввода<\/a><\/li>\n  <li>№ 105. <a href=\"https:\/\/www.youtube.com\/watch?v=Ew75feYtGMs\">Как именно работает взаимодействие?<\/a><\/li>\n  <li>№ 107. <a href=\"https:\/\/www.youtube.com\/watch?v=GBj17b4l10s\">Как делать, чтобы программа не тормозила<\/a><\/li>\n  <li>№ 109. <a href=\"https:\/\/www.youtube.com\/watch?v=-8neywtnhT8\">Двухпанельный интерфейс<\/a><\/li>\n  <li>№ 115. <a href=\"https:\/\/www.youtube.com\/watch?v=Tq8Rh7GPqhM\">Мир пользователя<\/a><\/li>\n  <li>№ 121. <a href=\"https:\/\/www.youtube.com\/watch?v=xKPaH3XiW-4\">О связях сущностей в сложных системах<\/a><\/li>\n  <li>№ 122. <a href=\"https:\/\/www.youtube.com\/watch?v=XvPjm7mQ0n8\">Думать из мира пользователя<\/a> (продолжение из 115)<\/li>\n  <li>№ 149. <a href=\"https:\/\/www.youtube.com\/watch?v=UENZW1gNjpU\">Двойная обратная связь<\/a><\/li>\n  <li>№ 150. <a href=\"https:\/\/www.youtube.com\/watch?v=crgZi_CW6xU\">Зелёный значит «всё хорошо»<\/a><\/li>\n<\/ul>\n<p>Таблицы:<\/p>\n<ul>\n  <li>№ 8. <a href=\"https:\/\/www.youtube.com\/watch?v=IvzDUzH-Sk0\">Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря<\/a><\/li>\n  <li>№ 10. <a href=\"https:\/\/www.youtube.com\/watch?v=mE0pZIVgJLE\">Что не позволено базе данных, то позволено обычной таблице<\/a><\/li>\n  <li>№ 29. <a href=\"https:\/\/www.youtube.com\/watch?v=N2LINRApqmg\">Круговая диаграмма для красоты, табличка для пользы дела<\/a><\/li>\n  <li>№ 39. <a href=\"https:\/\/www.youtube.com\/watch?v=MgwYwu3wkk4\">Дизайн универсальных таблиц с непредсказуемым содержимым<\/a><\/li>\n  <li>№ 65. <a href=\"https:\/\/www.youtube.com\/watch?v=oz571oi6w24\">Живые спарклайны в таблице<\/a><\/li>\n  <li>№ 102. <a href=\"https:\/\/www.youtube.com\/watch?v=QyHEWiMR_0A\">Как выравнивать цифры в таблицах<\/a><\/li>\n  <li>№ 112. <a href=\"https:\/\/www.youtube.com\/watch?v=zSJijCINU58\">Собираем табличку с диапазоном и разной точностью<\/a><\/li>\n  <li>№ 113. <a href=\"https:\/\/www.youtube.com\/watch?v=ZDvDnJ1HSP0\">Рекомендую жирную, а не бледную шапку в таблице<\/a><\/li>\n  <li>№ 117. <a href=\"https:\/\/www.youtube.com\/watch?v=PBzl0pIUqk0\">Горизонтальная прокрутка в таблицах<\/a><\/li>\n  <li>№ 142. <a href=\"https:\/\/www.youtube.com\/watch?v=tOiNW_F_PH4\">Про динамические таблицы<\/a><\/li>\n<\/ul>\n<p class=\"foot\">См. также тег: <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/tables\/\">таблицы<\/a><\/p>\n<p>Графики, диаграммы, инфографика:<\/p>\n<ul>\n  <li>№ 34. <a href=\"https:\/\/www.youtube.com\/watch?v=u682Zi8_FBk\">Визуализация помогает увидеть закономерности<\/a><\/li>\n  <li>№ 43. <a href=\"https:\/\/www.youtube.com\/watch?v=BvugvUfyXmg\">Объясняю про тафтианские 45 градусов на графике<\/a><\/li>\n  <li>№ 94. <a href=\"https:\/\/www.youtube.com\/watch?v=8986vOikHRk\">Если данных мало, то и график не нужен<\/a><\/li>\n  <li>№ 95. <a href=\"https:\/\/www.youtube.com\/watch?v=WSXYgIwdziI\">Рассуждения про инфографику и её задачи<\/a><\/li>\n  <li>№ 98. <a href=\"https:\/\/www.youtube.com\/watch?v=9pf94f8Mz7Q\">Когда визуализация потрачена впустую<\/a><\/li>\n  <li>№ 110. <a href=\"https:\/\/www.youtube.com\/watch?v=qsDWBf-xcVs\">В чём проблема интерактивных графиков<\/a><\/li>\n  <li>№ 111. <a href=\"https:\/\/www.youtube.com\/watch?v=wJJdSn4Vk-Q\">Нужны не круговые диаграммы, а таблица<\/a><\/li>\n  <li>№ 132. <a href=\"https:\/\/www.youtube.com\/watch?v=Urn9TDalPg4\">Дискуссия о задачах инфографики<\/a><\/li>\n  <li>№ 134. <a href=\"https:\/\/www.youtube.com\/watch?v=zMmO0bWqELQ\">Музыкальная нотация и чтение с листа<\/a><\/li>\n<\/ul>\n<p>Редактура в дизайне:<\/p>\n<ul>\n  <li>№ 7. <a href=\"https:\/\/www.youtube.com\/watch?v=1DdsndXWHSE\">Механически редактируем примечание к таблице<\/a><\/li>\n  <li>№ 24. <a href=\"https:\/\/www.youtube.com\/watch?v=bxSu-Vx0Nz8\">Отступления от синтаксиса интерфейса и линейки в таблицах<\/a><\/li>\n  <li>№ 49. <a href=\"https:\/\/www.youtube.com\/watch?v=H3UvwkQH8_o\">Редактура привела к радиокнопке<\/a><\/li>\n  <li>№ 66. <a href=\"https:\/\/www.youtube.com\/watch?v=-6LaXViTWzc\">Исследование о тексте в интерфейсе Эпла (1980-е)<\/a><\/li>\n  <li>№ 70. <a href=\"https:\/\/www.youtube.com\/watch?v=Zphn9ixcd0U\">Показать примечание в контексте и заодно сократить<\/a><\/li>\n  <li>№ 80. <a href=\"https:\/\/www.youtube.com\/watch?v=AmuCRWsSdpA\">Редактируем интерфейс конфигуратора окон<\/a><\/li>\n  <li>№ 92. <a href=\"https:\/\/www.youtube.com\/watch?v=bYk0_q6tWLA\">Поле «Комментарий для курьера»<\/a><\/li>\n  <li>№ 96. <a href=\"https:\/\/www.youtube.com\/watch?v=1l35NtOBogE\">Жирный против курсива<\/a><\/li>\n  <li>№ 120. <a href=\"https:\/\/www.youtube.com\/watch?v=H-tk4IhJWnA\">Непонятный выбор и названия кнопок<\/a><\/li>\n  <li>№ 127. <a href=\"https:\/\/www.youtube.com\/watch?v=oJkMBxIeLE0\">Редактируем регистрацию на вымышленном сайте<\/a><\/li>\n  <li>№ 129. <a href=\"https:\/\/www.youtube.com\/watch?v=5e2pwuF8raQ\">Формулировки ошибок в форме<\/a><\/li>\n  <li>№ 135. <a href=\"https:\/\/www.youtube.com\/watch?v=ERNjOfUbXZY\">Сокращаем текст про почту<\/a><\/li>\n<\/ul>\n<p>Вёрстка:<\/p>\n<ul>\n  <li>№ 17. <a href=\"https:\/\/www.youtube.com\/watch?v=td6deeU-7kU\">Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально<\/a><\/li>\n  <li>№ 42. <a href=\"https:\/\/www.youtube.com\/watch?v=sXRWQ05cO3I\">Улучшаем эстетику с помощью контраста и прямоугольности<\/a><\/li>\n  <li>№ 73. <a href=\"https:\/\/www.youtube.com\/watch?v=49DSUMomhNE\">Верстаем интерфейс конструктора окон<\/a><\/li>\n  <li>№ 78. <a href=\"https:\/\/www.youtube.com\/watch?v=JFKJHdQJvNQ\">Неудачные выравнивательные связи<\/a><\/li>\n  <li>№ 99. <a href=\"https:\/\/www.youtube.com\/watch?v=yj5dFy9HQ-Y\">Комментирую вёрстку окна<\/a><\/li>\n<\/ul>\n<p>Эстетика:<\/p>\n<ul>\n  <li>№ 12. <a href=\"https:\/\/www.youtube.com\/watch?v=kmlb272BAdo\">Как делать градиенты в инфографике<\/a><\/li>\n  <li>№ 13. <a href=\"https:\/\/www.youtube.com\/watch?v=29GAdT6dXBA\">Упаковка таблицы, симультанный контраст и борьба за красоту цветов<\/a><\/li>\n  <li>№ 27. <a href=\"https:\/\/www.youtube.com\/watch?v=X1v54YA8g7c\">Cкруглённое поле поиска и ужасный шрифт Мирьяд-про<\/a><\/li>\n  <li>№ 79. <a href=\"https:\/\/www.youtube.com\/watch?v=58GldX-JZig\">Улучшаем дизайн кнопки<\/a><\/li>\n  <li>№ 81. <a href=\"https:\/\/www.youtube.com\/watch?v=rlCxhBCxJww\">Классические признаки поля ввода и кнопки<\/a><\/li>\n  <li>№ 87. <a href=\"https:\/\/www.youtube.com\/watch?v=ox38_G9lQuo\">Вспомогательные линии — тоньше и скромнее<\/a><\/li>\n  <li>№ 91. <a href=\"https:\/\/www.youtube.com\/watch?v=hieOe3wu-7E\">Аналогия между элементами интерфейса и буквами шрифта, которые можно взять готовые<\/a><\/li>\n  <li>№ 93. <a href=\"https:\/\/www.youtube.com\/watch?v=hh1oSLA0XaE\">Задисейбленность кнопки<\/a><\/li>\n  <li>№ 140. <a href=\"https:\/\/www.youtube.com\/watch?v=Z8C1RMcR2fk\">Выбор цветов для интерфейса<\/a><\/li>\n  <li>№ 141. <a href=\"https:\/\/www.youtube.com\/watch?v=E40xHhr73Ig\">Шрифты с засечками в интерфейсе<\/a><\/li>\n  <li>№ 148. <a href=\"https:\/\/www.youtube.com\/watch?v=X7mBhTG08xA\">Настраиваем толщины линий<\/a><\/li>\n<\/ul>\n<p>Ход:<\/p>\n<ul>\n  <li>№ 6. <a href=\"https:\/\/www.youtube.com\/watch?v=BKu6wqOvgfg\">Ставим красную блямбу рядом с таблицей<\/a><\/li>\n  <li>№ 20. <a href=\"https:\/\/www.youtube.com\/watch?v=CaiDj7OOUbc\">Изображаем нестандартную конструкцию окна символом<\/a><\/li>\n  <li>№ 25. <a href=\"https:\/\/www.youtube.com\/watch?v=N2Qk697fe24\">Чтобы пользователь нажал, можно написать «Жми!» <\/a><\/li>\n  <li>№ 71. <a href=\"https:\/\/www.youtube.com\/watch?v=TAg6cnGIsh4\">Запрещаю выравнивание по центру<\/a><\/li>\n<\/ul>\n<p>Бизнесовое и продуктовое:<\/p>\n<ul>\n  <li>№ 23. <a href=\"https:\/\/www.youtube.com\/watch?v=xq7ntaU6FTU\">Как продать подписку на «Афишу»<\/a><\/li>\n  <li>№ 32. <a href=\"https:\/\/www.youtube.com\/watch?v=qeyRl3IVSGQ\">Закоулки интерфейса можно просто не делать<\/a><\/li>\n  <li>№ 38. <a href=\"https:\/\/www.youtube.com\/watch?v=k6iyy4vJ1Co\">Продаём окна, объясняя разницу профилей<\/a><\/li>\n  <li>№ 47. <a href=\"https:\/\/www.youtube.com\/watch?v=6rDKRg6SlVc\">Аккуратное внедрение нового дизайна без ущерба привычкам<\/a><\/li>\n  <li>№ 48. <a href=\"https:\/\/www.youtube.com\/watch?v=MhdZzXw_Tzc\">Что, если на реализацию хорошего интерфейса нет времени<\/a><\/li>\n  <li>№ 56. <a href=\"https:\/\/www.youtube.com\/watch?v=3polv_KHa5g\">Разделяем сценарии оплаты частично, ровно по счёту и впрок<\/a><\/li>\n  <li>№ 57. <a href=\"https:\/\/www.youtube.com\/watch?v=TeolvcH5f_8\">Соблазняем человека пиццей, а не текстом «Ваша корзина пуста»<\/a><\/li>\n  <li>№ 59. <a href=\"https:\/\/www.youtube.com\/watch?v=UcIjtMreNHA\">Постоянные напоминания о цене могут мешать покупать<\/a><\/li>\n  <li>№ 64. <a href=\"https:\/\/www.youtube.com\/watch?v=PQzVzgYfvfQ\">Вопросы клиента к интерфейсу кассы самообслуживания<\/a><\/li>\n  <li>№ 82. <a href=\"https:\/\/www.youtube.com\/watch?v=2qV6CCRT6lA\">Заранее спросить у клиента про сео и персональные данные<\/a><\/li>\n  <li>№ 88. <a href=\"https:\/\/www.youtube.com\/watch?v=Mt45AuwOnvA\">Убрал шум — добавь сигнал!<\/a><\/li>\n  <li>№ 90. <a href=\"https:\/\/www.youtube.com\/watch?v=-GHjDFHWrBA\">Классно упростить себе задачу<\/a><\/li>\n  <li>№ 100. <a href=\"https:\/\/www.youtube.com\/watch?v=yTIrl1jnEHU\">Программисты могли бы подумать о пользе для бизнеса<\/a><\/li>\n  <li>№ 106. <a href=\"https:\/\/www.youtube.com\/watch?v=3fzeLHVhvy0\">Оговорка, что интерфейс — это не всё<\/a><\/li>\n  <li>№ 136. <a href=\"https:\/\/www.youtube.com\/watch?v=qh5BmDJ48yI\">Дисейблить ли кнопку с точки зрения канонов интерфейса и бизнеса?<\/a><\/li>\n<\/ul>\n<p>Инструмент:<\/p>\n<ul>\n  <li>№ 18. <a href=\"https:\/\/www.youtube.com\/watch?v=vHCy9izr0v4\">Последовательное волшебство в интерфейсе Фотошопа<\/a><\/li>\n  <li>№ 41. <a href=\"https:\/\/www.youtube.com\/watch?v=NF8fC2Cp8iU\">Перерисовываю и улучшаю кусок интерфейса в Фигме с помощью компонентов<\/a><\/li>\n  <li>№ 45. <a href=\"https:\/\/www.youtube.com\/watch?v=H3CF-RG9lIc\">Режимы наложения слоёв с овощами и фруктами<\/a><\/li>\n  <li>№ 54. <a href=\"https:\/\/www.youtube.com\/watch?v=uILlCs5L_mY\">Секреты встроенной скриншотилки на Маке<\/a><\/li>\n<\/ul>\n<p>Работа над дизайном и подача:<\/p>\n<ul>\n  <li>№ 36. <a href=\"https:\/\/www.youtube.com\/watch?v=czu2l7RfEWs\">Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру<\/a><\/li>\n  <li>№ 58. <a href=\"https:\/\/www.youtube.com\/watch?v=2tANVy6u2TQ\">Не описывайте макеты и не делайте «невозможные» макеты<\/a><\/li>\n  <li>№ 128. <a href=\"https:\/\/www.youtube.com\/watch?v=zCldGigmk04\">Что не так с ваерфреймами<\/a><\/li>\n  <li>№ 139. <a href=\"https:\/\/www.youtube.com\/watch?v=tqfe5-w0VPo\">Сначала презентуйте линейно, а потом уже рисуйте диаграммы<\/a><\/li>\n<\/ul>\n<p>Разное интересное:<\/p>\n<ul>\n  <li>№ 14. <a href=\"https:\/\/www.youtube.com\/watch?v=tYJMrY5zWlo\">Как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10<\/a><\/li>\n  <li>№ 21. <a href=\"https:\/\/www.youtube.com\/watch?v=fPVmyMbixXw\">Что бы я поменял в дизайне Бёрдвью спустя девять лет<\/a><\/li>\n  <li>№ 22. <a href=\"https:\/\/www.youtube.com\/watch?v=7Mc6IaaXNsc\">Технические ограничения и дизайн для будущего<\/a><\/li>\n  <li>№ 31. <a href=\"https:\/\/www.youtube.com\/watch?v=bCMAOeqapDI\">Двусмысленная иконка и проверка венгерским языком<\/a><\/li>\n  <li>№ 51. <a href=\"https:\/\/www.youtube.com\/watch?v=SQQLWeCaHs8\">Глючная обработка ввода пользователя в интерфейсе Сафари<\/a><\/li>\n  <li>№ 62. <a href=\"https:\/\/www.youtube.com\/watch?v=4JzD6d9V0nU\">Что делать, если клиент хочет фигню?<\/a><\/li>\n  <li>№ 68. <a href=\"https:\/\/www.youtube.com\/watch?v=x6RbJD24N6o\">Благодарности и в чём польза теории<\/a><\/li>\n  <li>№ 69. <a href=\"https:\/\/www.youtube.com\/watch?v=JoA5JZcBoS0\">Что делать дизайнеру, если разработчики напрограммили всю магию?<\/a><\/li>\n  <li>№ 123. <a href=\"https:\/\/www.youtube.com\/watch?v=zoN15-R2gQ8\">Благодарности<\/a><\/li>\n  <li>№ 124. <a href=\"https:\/\/www.youtube.com\/watch?v=gCTCA_dQOp4\">Мастрид ли Тафти?<\/a><\/li>\n  <li>№ 125. <a href=\"https:\/\/www.youtube.com\/watch?v=35uwvF6SZb8\">Как я отношусь к войсикам и кружочкам<\/a><\/li>\n  <li>№ 131. <a href=\"https:\/\/www.youtube.com\/watch?v=2PC5L3tv6fA\">Когда нужны моноширинные цифры<\/a><\/li>\n  <li>№ 133. <a href=\"https:\/\/www.youtube.com\/watch?v=o2DjvI6nVts\">Плакаты и бумага, которая горит<\/a><\/li>\n  <li>№ 137. <a href=\"https:\/\/www.youtube.com\/watch?v=dfe9kO0a054\">Почему я не могу дать список дизайнеров, за которыми надо следить<\/a><\/li>\n<\/ul>\n<p>Потом разберу ещё. А вы пока приходите на следующий курс, который пройдёт 12 октября — 10 ноября.<\/p>\n<p><a href=\"https:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "За те три года, что мой интерфейсный курс идёт в онлайне, я выложил уже полторы сотни фрагментов с наших семинаров",
            "date_published": "2024-10-11T14:21:14+08:00",
            "date_modified": "2025-07-21T22:23:19+08:00",
            "tags": [
                "курсы",
                "пользовательский интерфейс",
                "представление информации"
            ],
            "_date_published_rfc2822": "Fri, 11 Oct 2024 14:21:14 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6366",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "6339",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-148\/",
            "title": "На интерфейсном курсе: настраиваем толщины линий",
            "content_html": "<p>Осмысленно выбранные толщины линий делают иллюстрацию понятнее и красивее. Исправляем на примере окна. 3 минуты с семинара курса:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/X7mBhTG08xA?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Также есть <a href=\"https:\/\/vk.com\/video286049442_456239413\">на ВК-видео<\/a>.<\/p>\n<p>Это фрагмент № 148 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 27 октября 2023 года.<\/p>\n<p>Сегодня — последний день записи на курс, который пройдёт с 31 августа по 29 сентября.<\/p>\n<p><a href=\"http:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "Осмысленно выбранные толщины линий делают иллюстрацию понятнее и красивее. Исправляем на примере окна",
            "date_published": "2024-08-30T14:21:26+08:00",
            "date_modified": "2024-08-30T14:22:02+08:00",
            "tags": [
                "видео",
                "представление информации",
                "студентам",
                "фрагменты курса ПИ"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-X7mBhTG08xA-cover.jpg",
            "_date_published_rfc2822": "Fri, 30 Aug 2024 14:21:26 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6339",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-X7mBhTG08xA-cover.jpg"
                ]
            }
        },
        {
            "id": "6248",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/two-positions-in-longform\/",
            "title": "Две позиции в длинном содержимом: прогресс и положение прокрутки",
            "content_html": "<p>Бывает, читаешь электронную книгу, перешёл куда-то по ссылке внутри неё, и потом случайно теряешь, где читал. Или смотришь длинное видео, по ошибке куда-то ткнул не туда, и потом уже фиг найдёшь, где же ты смотрел на самом деле. Хочется, чтобы таких проблем не возникало: хороший интерфейс должен прощать ошибки пользователю.<\/p>\n<p>При чтении документа есть текущая позиция прокрутки, при просмотре видеоролика — текущая позиция воспроизведения. В длинных документах и видеороликах, таких как книги и кино, текущая позиция — это не просто «куда сейчас смотрим», а нечто более весомое: это докуда я дочитал или досмотрел. Эта позиция не должна теряться из-за того, что я ткнул куда-то из любопытства.<\/p>\n<p>Компьютер должен отличать для себя две позиции в длинном содержимом: прогресс и положение прокрутки. Но как это должно работать? Пользователя этим обременять не стоит — компьютер должен сам всё понимать.<\/p>\n<p>На первый взгляд, имеет значение непрерывность и длительность. Если я смотрю на страницы по очереди друг за другом и провожу на каждой более нескольких секунд, можно предположить, что я читаю книгу. Если непрерывно-длительную последовательность составляют страницы до 58-й, но кроме этого я ещё бывал на 158-й, а сейчас на 258-й, то можно считать, что дочитал я лишь до 58-й, и давать мне способ туда вернуться. Если я непрерывно смотрел видео от начала и до 58-й минуты, а сейчас на 25-й, то можно полагать, что я просто отмотал что-то пересмотреть, но глобально я всё ещё на 58-й минуте, и давать мне способ туда вернуться.<\/p>\n<p>Однако и непрерывность, и длительность — вещи условные. В книге я могу пропустить предисловие, потом пролистать где-то несколько скучных страниц или даже целую главу, и продолжать читать, сдвигая свою «весомую» позицию. В видео я могу промотать неприятные сцены или рекламу, также продолжая внимательно смотреть. Кроме того, я мог решить перечитать книгу или отдельную главу с начала; аналогично с видео. В общем случае сложно угадать, что я мог бы иметь в виду. Хочется учесть всю эту недискретность, визуализировать её для пользователя.<\/p>\n<p>Лет десять назад Артём Горбунов придумал идею «термоскроллера». Типа лифт в полосе прокрутки «греет» шахту. Чем дольше мы находимся в какой-то месте, тем горячее она становится. Применим идею к визуализации положения в книге или видеоролике:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/two-positions-in-longform@2x.jpg\" width=\"1000\" height=\"20\" alt=\"\" \/>\n<\/div>\n<p>Отлично видно, что мы прочитали больше половины книги, пропустив предисловие, ну и много чего ещё полистали из любопытства, а сейчас увлеклись разглядыванием чего-то там ближе к концу. Дальше уже можно придумать какую-то эвристику, чтобы определить место, докуда я дочитал, и дать способ к нему быстро прыгнуть. Но главное, что если даже не угадали, то пользователь и сам сориентируется.<\/p>\n",
            "summary": "Бывает, читаешь электронную книгу, перешёл куда-то по ссылке внутри неё, и потом случайно теряешь, где читал",
            "date_published": "2024-03-06T00:59:50+08:00",
            "date_modified": "2024-03-06T20:26:33+08:00",
            "tags": [
                "пользовательский интерфейс",
                "представление информации"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/two-positions-in-longform@2x.jpg",
            "_date_published_rfc2822": "Wed, 06 Mar 2024 00:59:50 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6248",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/two-positions-in-longform@2x.jpg"
                ]
            }
        },
        {
            "id": "6246",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-139\/",
            "title": "На интерфейсном курсе: сначала презентуйте линейно, а потом уже рисуйте диаграммы",
            "content_html": "<p>На курсе о пользовательском интерфейсе комментирую то, как участница показала свой интерфейс то есть, фактически, презентацию. Вообще, о презентации у нас есть отдельный курс, так что это видео можно считать относящимся и туда, и туда. 6 минут:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/tqfe5-w0VPo?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент № 139 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 22 сентября 2023 года.<\/p>\n<p>До 15 марта идёт запись на курс, который пройдёт с 16 марта по 14 апреля. Сейчас дешевле на 10% из-за ранней записи.<\/p>\n<p><a href=\"http:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n<p>Кстати, одновременно идёт и запись <a href=\"https:\/\/bureau.ru\/courses\/presentation-online\/\">на мартовский курс презентаций<\/a> (11⁠—31 марта).<\/p>\n",
            "summary": "На курсе о пользовательском интерфейсе комментирую то, как участница показала свой интерфейс то есть, фактически, презентацию",
            "date_published": "2024-03-04T14:32:39+08:00",
            "date_modified": "2024-03-04T14:32:30+08:00",
            "tags": [
                "видео",
                "курсы",
                "представление информации",
                "презентации и выступления",
                "студентам",
                "фрагменты курса ПИ"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-tqfe5-w0VPo-cover.jpg",
            "_date_published_rfc2822": "Mon, 04 Mar 2024 14:32:39 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6246",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-tqfe5-w0VPo-cover.jpg"
                ]
            }
        },
        {
            "id": "6226",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-134\/",
            "title": "На интерфейсном курсе: музыкальная нотация и чтение с листа",
            "content_html": "<p>Участник курса играл в духовом оркестре и против того, чтобы делать линии нотного стана тоньше линий нот. Обсуждаем разницу между тетрадью в клетку и нотным станом и общий подход к экспериментам с профессиональными нотациями. 8 минут:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/zMmO0bWqELQ?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент № 134 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 15 сентября 2023 года.<\/p>\n<p>До 2 февраля идёт запись на курс, который пройдёт с 3 февраля по 3 марта.<\/p>\n<p><a href=\"http:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "Участник курса играл в духовом оркестре и против того, чтобы делать линии нотного стана тоньше линий нот",
            "date_published": "2024-01-30T01:28:32+08:00",
            "date_modified": "2024-01-30T01:28:20+08:00",
            "tags": [
                "видео",
                "классическая музыка",
                "музыка",
                "представление информации",
                "фрагменты курса ПИ"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-zMmO0bWqELQ-cover.jpg",
            "_date_published_rfc2822": "Tue, 30 Jan 2024 01:28:32 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6226",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-zMmO0bWqELQ-cover.jpg"
                ]
            }
        },
        {
            "id": "6215",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frags-1-125\/",
            "title": "Фрагменты интерфейсного курса (1—125)",
            "content_html": "<p>За те три года, что <a href=\"https:\/\/bureau.ru\/educenter\/ui-online\/\">мой интерфейсный курс<\/a> идёт в онлайне, я выложил уже <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/ui-course-frags\/\">больше сотни фрагментов с наших семинаров<\/a>. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Пришло время навести хотя бы немного порядка.<\/p>\n<p>Разобрал 125 фрагментов, <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frags-1-150\/\">потом разберу ещё<\/a>.<\/p>\n<p>Сборная солянка:<\/p>\n<ul>\n  <li>№ 1. <a href=\"https:\/\/www.youtube.com\/watch?v=xzUNC_VGNFk\">Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму<\/a><\/li>\n  <li>№ 2. <a href=\"https:\/\/www.youtube.com\/watch?v=_Jv9dT2B7Nc\">Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа<\/a><\/li>\n  <li>№ 19. <a href=\"https:\/\/www.youtube.com\/watch?v=5VCi1KN7WdE\">Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе<\/a><\/li>\n  <li>№ 26. <a href=\"https:\/\/www.youtube.com\/watch?v=Pc0GryUpCgM\">ФИО как в паспорте и эффект японской квартиры<\/a><\/li>\n  <li>№ 89. <a href=\"https:\/\/www.youtube.com\/watch?v=eLOGLY3_h7U\">Прямоугольнизация дизайна и свобода, которую даёт фотошоп<\/a><\/li>\n  <li>№ 119. <a href=\"https:\/\/www.youtube.com\/watch?v=Hwi6ddaRZ38\">О дизайне переключателя (segmented control) и положении кнопки<\/a><\/li>\n<\/ul>\n<p>Почти самостоятельные лекции:<\/p>\n<ul>\n  <li>№ 3. <a href=\"https:\/\/www.youtube.com\/watch?v=LBBWjtEHLxU\">Папочка comparisons, листаю и комментирую после лекций об информационном дизайне<\/a> (это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне)<\/li>\n  <li>№ 33. <a href=\"https:\/\/www.youtube.com\/watch?v=du6SqjjLEzQ\">Физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм<\/a><\/li>\n  <li>№ 37. <a href=\"https:\/\/www.youtube.com\/watch?v=SwyTvRljimM\">Блиц-пересказ куска питерского доклада про интерфейсы и Ворлд-Чесс<\/a><\/li>\n  <li>№ 46. <a href=\"https:\/\/www.youtube.com\/watch?v=JTqRG_7e3O8\">Про сложное цветовое кодирование и триаду Мейксенара<\/a><\/li>\n  <li>№ 55. <a href=\"https:\/\/www.youtube.com\/watch?v=3q0HH7mUMYA\">Соответствие между логической структурой и выразительными средствами и дизайн-системы<\/a><\/li>\n<\/ul>\n<p>Метод:<\/p>\n<ul>\n  <li>№ 30. <a href=\"https:\/\/www.youtube.com\/watch?v=-np87CaMjKs\">Метод «Например»<\/a><\/li>\n  <li>№ 40. <a href=\"https:\/\/www.youtube.com\/watch?v=MuDea0wOabA\">Сценка со звонком в пиццерию<\/a><\/li>\n<\/ul>\n<p>Формы:<\/p>\n<ul>\n  <li>№ 4. <a href=\"https:\/\/www.youtube.com\/watch?v=bPSaKS1bbsE\">Двигаем простенькую форму регистрации, чтобы стало поаккуратнее<\/a><\/li>\n  <li>№ 5. <a href=\"https:\/\/www.youtube.com\/watch?v=OMJV8exdbnU\">Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки<\/a><\/li>\n  <li>№ 11. <a href=\"https:\/\/www.youtube.com\/watch?v=how0mkG7ui4\">Первое впечатление, синтаксис и язык формы заказа с доставкой<\/a><\/li>\n  <li>№ 15. <a href=\"https:\/\/www.youtube.com\/watch?v=c91KziF01sQ\">Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму<\/a><\/li>\n  <li>№ 28. <a href=\"https:\/\/www.youtube.com\/watch?v=GrkuX84kKeo\">Улучшаем форму обратной связи Букинг.кома<\/a><\/li>\n  <li>№ 35. <a href=\"https:\/\/www.youtube.com\/watch?v=dckw7tqm1M4\">Первое впечатление от формы<\/a><\/li>\n  <li>№ 50. <a href=\"https:\/\/www.youtube.com\/watch?v=oepQvJtNgUU\">Упорядочиваем вёрстку формы<\/a><\/li>\n  <li>№ 52. <a href=\"https:\/\/www.youtube.com\/watch?v=hPGiFsdTKa8\">Расстояние между полями и сокращение подписей<\/a><\/li>\n  <li>№ 53. <a href=\"https:\/\/www.youtube.com\/watch?v=IR0zLLBf65Y\">Редизайним форму настройки сложной логики<\/a><\/li>\n  <li>№ 63. <a href=\"https:\/\/www.youtube.com\/watch?v=KbZAeVFaEcU\">Добавление нескольких телефонов в форме<\/a><\/li>\n  <li>№ 84. <a href=\"https:\/\/www.youtube.com\/watch?v=phraobT9Ufk\">Разбираем мелочи в форме регистрации<\/a><\/li>\n  <li>№ 85. <a href=\"https:\/\/www.youtube.com\/watch?v=DnTeUK1OqLQ\">Исправляем форму формы, ну и немножко содержание<\/a><\/li>\n  <li>№ 103.<a href=\"https:\/\/www.youtube.com\/watch?v=b4NPKYiT9n4\">Плейсхолдеры в каждом поле — это как иконки у каждого пункта меню<\/a><\/li>\n  <li>№ 104. <a href=\"https:\/\/www.youtube.com\/watch?v=dqnYrhXSMms\">Подробный разбор сложной формы<\/a><\/li>\n  <li>№ 108. <a href=\"https:\/\/www.youtube.com\/watch?v=9RUUtqehkyU\">Кирпичная кладка и другие недостатки формы<\/a><\/li>\n  <li>№ 118. <a href=\"https:\/\/www.youtube.com\/watch?v=9kB6CfCE0aM\">Обозначение обязательных и необязательных полей<\/a><\/li>\n<\/ul>\n<p class=\"foot\">См. также тег: <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/web-forms\/\">веб-формы<\/a><\/p>\n<p>Элементы интерфейса:<\/p>\n<ul>\n  <li>№ 60. <a href=\"https:\/\/www.youtube.com\/watch?v=NdBt_Oqydk4\">Рассуждения о текстовых кнопках<\/a><\/li>\n  <li>№ 67. <a href=\"https:\/\/www.youtube.com\/watch?v=WqFfT7yDMJg\">Меняем табы на переключалку и настраиваем вёрстку<\/a><\/li>\n  <li>№ 72. <a href=\"https:\/\/www.youtube.com\/watch?v=IV2nVMcaQ7U\">Представляем выбор внятно радиокнопками<\/a><\/li>\n  <li>№ 76. <a href=\"https:\/\/www.youtube.com\/watch?v=wihXJHHK3yo\">Так это кнопка или ссылка? Оказывается, это радиокнопка!<\/a><\/li>\n  <li>№ 114. <a href=\"https:\/\/www.youtube.com\/watch?v=n4Cb774L2_U\">Что не так с аккордеоном<\/a><\/li>\n  <li>№ 116. <a href=\"https:\/\/www.youtube.com\/watch?v=9tewBcFm-1M\">Как назвать чупа-чупс<\/a><\/li>\n<\/ul>\n<p>Интерфейс:<\/p>\n<ul>\n  <li>№ 9. <a href=\"https:\/\/www.youtube.com\/watch?v=gUklbkeDdYg\">Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование<\/a><\/li>\n  <li>№ 16. <a href=\"https:\/\/www.youtube.com\/watch?v=99o_4c7HTUk\">О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки<\/a><\/li>\n  <li>№ 44. <a href=\"https:\/\/www.youtube.com\/watch?v=2aQnKL5nLUw\">Упрощаем экран успешного заказа пиццы<\/a><\/li>\n  <li>№ 61. <a href=\"https:\/\/www.youtube.com\/watch?v=-zzLglJ9bEc\">Упрощаем первый экран кассы самообслуживания, добавляем кнопку «У меня булка»<\/a><\/li>\n  <li>№ 74. <a href=\"https:\/\/www.youtube.com\/watch?v=aLETIvOafg0\">Так это форма или мастер?<\/a><\/li>\n  <li>№ 75. <a href=\"https:\/\/www.youtube.com\/watch?v=zngun6Kw1q4\">Точно описываем поведение интерфейса для разработчиков<\/a><\/li>\n  <li>№ 77. <a href=\"https:\/\/www.youtube.com\/watch?v=U_9t3-mJXp0\">Жму синюю кнопку на автомате, не читая<\/a><\/li>\n  <li>№ 83. <a href=\"https:\/\/www.youtube.com\/watch?v=D0zKnGG10tY\">Уважать ли интерфейсные традиции разных платформ?<\/a><\/li>\n  <li>№ 86. <a href=\"https:\/\/www.youtube.com\/watch?v=wq4MQNpFrbg\">Не надо ничего активировать<\/a><\/li>\n  <li>№ 97. <a href=\"https:\/\/www.youtube.com\/watch?v=jwbEj5v3bu8\">Ширина и прокрутка на десктопе<\/a><\/li>\n  <li>№ 101. <a href=\"https:\/\/www.youtube.com\/watch?v=pn_X2x_8XPo\">Елена Семёновна и валидация ввода<\/a><\/li>\n  <li>№ 105. <a href=\"https:\/\/www.youtube.com\/watch?v=Ew75feYtGMs\">Как именно работает взаимодействие?<\/a><\/li>\n  <li>№ 107. <a href=\"https:\/\/www.youtube.com\/watch?v=GBj17b4l10s\">Как делать, чтобы программа не тормозила<\/a><\/li>\n  <li>№ 109. <a href=\"https:\/\/www.youtube.com\/watch?v=-8neywtnhT8\">Двухпанельный интерфейс<\/a><\/li>\n  <li>№ 115. <a href=\"https:\/\/www.youtube.com\/watch?v=Tq8Rh7GPqhM\">Мир пользователя<\/a><\/li>\n  <li>№ 121. <a href=\"https:\/\/www.youtube.com\/watch?v=xKPaH3XiW-4\">О связях сущностей в сложных системах<\/a><\/li>\n  <li>№ 122. <a href=\"https:\/\/www.youtube.com\/watch?v=XvPjm7mQ0n8\">Думать из мира пользователя<\/a> (продолжение из 115)<\/li>\n<\/ul>\n<p>Таблицы:<\/p>\n<ul>\n  <li>№ 8. <a href=\"https:\/\/www.youtube.com\/watch?v=IvzDUzH-Sk0\">Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря<\/a><\/li>\n  <li>№ 10. <a href=\"https:\/\/www.youtube.com\/watch?v=mE0pZIVgJLE\">Что не позволено базе данных, то позволено обычной таблице<\/a><\/li>\n  <li>№ 29. <a href=\"https:\/\/www.youtube.com\/watch?v=N2LINRApqmg\">Круговая диаграмма для красоты, табличка для пользы дела<\/a><\/li>\n  <li>№ 39. <a href=\"https:\/\/www.youtube.com\/watch?v=MgwYwu3wkk4\">Дизайн универсальных таблиц с непредсказуемым содержимым<\/a><\/li>\n  <li>№ 65. <a href=\"https:\/\/www.youtube.com\/watch?v=oz571oi6w24\">Живые спарклайны в таблице<\/a><\/li>\n  <li>№ 102. <a href=\"https:\/\/www.youtube.com\/watch?v=QyHEWiMR_0A\">Как выравнивать цифры в таблицах<\/a><\/li>\n  <li>№ 112. <a href=\"https:\/\/www.youtube.com\/watch?v=zSJijCINU58\">Собираем табличку с диапазоном и разной точностью<\/a><\/li>\n  <li>№ 113. <a href=\"https:\/\/www.youtube.com\/watch?v=ZDvDnJ1HSP0\">Рекомендую жирную, а не бледную шапку в таблице<\/a><\/li>\n  <li>№ 117. <a href=\"https:\/\/www.youtube.com\/watch?v=PBzl0pIUqk0\">Горизонтальная прокрутка в таблицах<\/a><\/li>\n<\/ul>\n<p class=\"foot\">См. также тег: <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/tables\/\">таблицы<\/a><\/p>\n<p>Графики и диаграммы:<\/p>\n<ul>\n  <li>№ 34. <a href=\"https:\/\/www.youtube.com\/watch?v=u682Zi8_FBk\">Визуализация помогает увидеть закономерности<\/a><\/li>\n  <li>№ 43. <a href=\"https:\/\/www.youtube.com\/watch?v=BvugvUfyXmg\">Объясняю про тафтианские 45 градусов на графике<\/a><\/li>\n  <li>№ 94. <a href=\"https:\/\/www.youtube.com\/watch?v=8986vOikHRk\">Если данных мало, то и график не нужен<\/a><\/li>\n  <li>№ 95. <a href=\"https:\/\/www.youtube.com\/watch?v=WSXYgIwdziI\">Рассуждения про инфографику и её задачи<\/a><\/li>\n  <li>№ 98. <a href=\"https:\/\/www.youtube.com\/watch?v=9pf94f8Mz7Q\">Когда визуализация потрачена впустую<\/a><\/li>\n  <li>№ 110. <a href=\"https:\/\/www.youtube.com\/watch?v=qsDWBf-xcVs\">В чём проблема интерактивных графиков<\/a><\/li>\n  <li>№ 111. <a href=\"https:\/\/www.youtube.com\/watch?v=wJJdSn4Vk-Q\">Нужны не круговые диаграммы, а таблица<\/a><\/li>\n<\/ul>\n<p>Редактура в дизайне:<\/p>\n<ul>\n  <li>№ 7. <a href=\"https:\/\/www.youtube.com\/watch?v=1DdsndXWHSE\">Механически редактируем примечание к таблице<\/a><\/li>\n  <li>№ 24. <a href=\"https:\/\/www.youtube.com\/watch?v=bxSu-Vx0Nz8\">Отступления от синтаксиса интерфейса и линейки в таблицах<\/a><\/li>\n  <li>№ 49. <a href=\"https:\/\/www.youtube.com\/watch?v=H3UvwkQH8_o\">Редактура привела к радиокнопке<\/a><\/li>\n  <li>№ 66. <a href=\"https:\/\/www.youtube.com\/watch?v=-6LaXViTWzc\">Исследование о тексте в интерфейсе Эпла (1980-е)<\/a><\/li>\n  <li>№ 70. <a href=\"https:\/\/www.youtube.com\/watch?v=Zphn9ixcd0U\">Показать примечание в контексте и заодно сократить<\/a><\/li>\n  <li>№ 80. <a href=\"https:\/\/www.youtube.com\/watch?v=AmuCRWsSdpA\">Редактируем интерфейс конфигуратора окон<\/a><\/li>\n  <li>№ 92. <a href=\"https:\/\/www.youtube.com\/watch?v=bYk0_q6tWLA\">Поле «Комментарий для курьера»<\/a><\/li>\n  <li>№ 96. <a href=\"https:\/\/www.youtube.com\/watch?v=1l35NtOBogE\">Жирный против курсива<\/a><\/li>\n  <li>№ 120. <a href=\"https:\/\/www.youtube.com\/watch?v=H-tk4IhJWnA\">Непонятный выбор и названия кнопок<\/a><\/li>\n<\/ul>\n<p>Вёрстка:<\/p>\n<ul>\n  <li>№ 17. <a href=\"https:\/\/www.youtube.com\/watch?v=td6deeU-7kU\">Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально<\/a><\/li>\n  <li>№ 42. <a href=\"https:\/\/www.youtube.com\/watch?v=sXRWQ05cO3I\">Улучшаем эстетику с помощью контраста и прямоугольности<\/a><\/li>\n  <li>№ 73. <a href=\"https:\/\/www.youtube.com\/watch?v=49DSUMomhNE\">Верстаем интерфейс конструктора окон<\/a><\/li>\n  <li>№ 78. <a href=\"https:\/\/www.youtube.com\/watch?v=JFKJHdQJvNQ\">Неудачные выравнивательные связи<\/a><\/li>\n  <li>№ 99. <a href=\"https:\/\/www.youtube.com\/watch?v=yj5dFy9HQ-Y\">Комментирую вёрстку окна<\/a><\/li>\n<\/ul>\n<p>Эстетика:<\/p>\n<ul>\n  <li>№ 12. <a href=\"https:\/\/www.youtube.com\/watch?v=kmlb272BAdo\">Как делать градиенты в инфографике<\/a><\/li>\n  <li>№ 13. <a href=\"https:\/\/www.youtube.com\/watch?v=29GAdT6dXBA\">Упаковка таблицы, симультанный контраст и борьба за красоту цветов<\/a><\/li>\n  <li>№ 27. <a href=\"https:\/\/www.youtube.com\/watch?v=X1v54YA8g7c\">Cкруглённое поле поиска и ужасный шрифт Мирьяд-про<\/a><\/li>\n  <li>№ 79. <a href=\"https:\/\/www.youtube.com\/watch?v=58GldX-JZig\">Улучшаем дизайн кнопки<\/a><\/li>\n  <li>№ 81. <a href=\"https:\/\/www.youtube.com\/watch?v=rlCxhBCxJww\">Классические признаки поля ввода и кнопки<\/a><\/li>\n  <li>№ 87. <a href=\"https:\/\/www.youtube.com\/watch?v=ox38_G9lQuo\">Вспомогательные линии — тоньше и скромнее<\/a><\/li>\n  <li>№ 91. <a href=\"https:\/\/www.youtube.com\/watch?v=hieOe3wu-7E\">Аналогия между элементами интерфейса и буквами шрифта, которые можно взять готовые<\/a><\/li>\n  <li>№ 93. <a href=\"https:\/\/www.youtube.com\/watch?v=hh1oSLA0XaE\">Задисейбленность кнопки<\/a><\/li>\n<\/ul>\n<p>Ход:<\/p>\n<ul>\n  <li>№ 6. <a href=\"https:\/\/www.youtube.com\/watch?v=BKu6wqOvgfg\">Ставим красную блямбу рядом с таблицей<\/a><\/li>\n  <li>№ 20. <a href=\"https:\/\/www.youtube.com\/watch?v=CaiDj7OOUbc\">Изображаем нестандартную конструкцию окна символом<\/a><\/li>\n  <li>№ 25. <a href=\"https:\/\/www.youtube.com\/watch?v=N2Qk697fe24\">Чтобы пользователь нажал, можно написать «Жми!» <\/a><\/li>\n  <li>№ 71. <a href=\"https:\/\/www.youtube.com\/watch?v=TAg6cnGIsh4\">Запрещаю выравнивание по центру<\/a><\/li>\n<\/ul>\n<p>Бизнесовое и продуктовое:<\/p>\n<ul>\n  <li>№ 23. <a href=\"https:\/\/www.youtube.com\/watch?v=xq7ntaU6FTU\">Как продать подписку на «Афишу»<\/a><\/li>\n  <li>№ 32. <a href=\"https:\/\/www.youtube.com\/watch?v=qeyRl3IVSGQ\">Закоулки интерфейса можно просто не делать<\/a><\/li>\n  <li>№ 38. <a href=\"https:\/\/www.youtube.com\/watch?v=k6iyy4vJ1Co\">Продаём окна, объясняя разницу профилей<\/a><\/li>\n  <li>№ 47. <a href=\"https:\/\/www.youtube.com\/watch?v=6rDKRg6SlVc\">Аккуратное внедрение нового дизайна без ущерба привычкам<\/a><\/li>\n  <li>№ 48. <a href=\"https:\/\/www.youtube.com\/watch?v=MhdZzXw_Tzc\">Что, если на реализацию хорошего интерфейса нет времени<\/a><\/li>\n  <li>№ 56. <a href=\"https:\/\/www.youtube.com\/watch?v=3polv_KHa5g\">Разделяем сценарии оплаты частично, ровно по счёту и впрок<\/a><\/li>\n  <li>№ 57. <a href=\"https:\/\/www.youtube.com\/watch?v=TeolvcH5f_8\">Соблазняем человека пиццей, а не текстом «Ваша корзина пуста»<\/a><\/li>\n  <li>№ 59. <a href=\"https:\/\/www.youtube.com\/watch?v=UcIjtMreNHA\">Постоянные напоминания о цене могут мешать покупать<\/a><\/li>\n  <li>№ 64. <a href=\"https:\/\/www.youtube.com\/watch?v=PQzVzgYfvfQ\">Вопросы клиента к интерфейсу кассы самообслуживания<\/a><\/li>\n  <li>№ 82. <a href=\"https:\/\/www.youtube.com\/watch?v=2qV6CCRT6lA\">Заранее спросить у клиента про сео и персональные данные<\/a><\/li>\n  <li>№ 88. <a href=\"https:\/\/www.youtube.com\/watch?v=Mt45AuwOnvA\">Убрал шум — добавь сигнал!<\/a><\/li>\n  <li>№ 90. <a href=\"https:\/\/www.youtube.com\/watch?v=-GHjDFHWrBA\">Классно упростить себе задачу<\/a><\/li>\n  <li>№ 100. <a href=\"https:\/\/www.youtube.com\/watch?v=yTIrl1jnEHU\">Программисты могли бы подумать о пользе для бизнеса<\/a><\/li>\n  <li>№ 106. <a href=\"https:\/\/www.youtube.com\/watch?v=3fzeLHVhvy0\">Оговорка, что интерфейс — это не всё<\/a><\/li>\n<\/ul>\n<p>Инструмент:<\/p>\n<ul>\n  <li>№ 18. <a href=\"https:\/\/www.youtube.com\/watch?v=vHCy9izr0v4\">Последовательное волшебство в интерфейсе Фотошопа<\/a><\/li>\n  <li>№ 41. <a href=\"https:\/\/www.youtube.com\/watch?v=NF8fC2Cp8iU\">Перерисовываю и улучшаю кусок интерфейса в Фигме с помощью компонентов<\/a><\/li>\n  <li>№ 45. <a href=\"https:\/\/www.youtube.com\/watch?v=H3CF-RG9lIc\">Режимы наложения слоёв с овощами и фруктами<\/a><\/li>\n  <li>№ 54. <a href=\"https:\/\/www.youtube.com\/watch?v=uILlCs5L_mY\">Секреты встроенной скриншотилки на Маке<\/a><\/li>\n<\/ul>\n<p>Работа над дизайном и подача:<\/p>\n<ul>\n  <li>№ 36. <a href=\"https:\/\/www.youtube.com\/watch?v=czu2l7RfEWs\">Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру<\/a><\/li>\n  <li>№ 58. <a href=\"https:\/\/www.youtube.com\/watch?v=2tANVy6u2TQ\">Не описывайте макеты и не делайте «невозможные» макеты<\/a><\/li>\n<\/ul>\n<p>Разное интересное:<\/p>\n<ul>\n  <li>№ 14. <a href=\"https:\/\/www.youtube.com\/watch?v=tYJMrY5zWlo\">Как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10<\/a><\/li>\n  <li>№ 21. <a href=\"https:\/\/www.youtube.com\/watch?v=fPVmyMbixXw\">Что бы я поменял в дизайне Бёрдвью спустя девять лет<\/a><\/li>\n  <li>№ 22. <a href=\"https:\/\/www.youtube.com\/watch?v=7Mc6IaaXNsc\">Технические ограничения и дизайн для будущего<\/a><\/li>\n  <li>№ 31. <a href=\"https:\/\/www.youtube.com\/watch?v=bCMAOeqapDI\">Двусмысленная иконка и проверка венгерским языком<\/a><\/li>\n  <li>№ 51. <a href=\"https:\/\/www.youtube.com\/watch?v=SQQLWeCaHs8\">Глючная обработка ввода пользователя в интерфейсе Сафари<\/a><\/li>\n  <li>№ 62. <a href=\"https:\/\/www.youtube.com\/watch?v=4JzD6d9V0nU\">Что делать, если клиент хочет фигню?<\/a><\/li>\n  <li>№ 68. <a href=\"https:\/\/www.youtube.com\/watch?v=x6RbJD24N6o\">Благодарности и в чём польза теории<\/a><\/li>\n  <li>№ 69. <a href=\"https:\/\/www.youtube.com\/watch?v=JoA5JZcBoS0\">Что делать дизайнеру, если разработчики напрограммили всю магию?<\/a><\/li>\n  <li>№ 123. <a href=\"https:\/\/www.youtube.com\/watch?v=zoN15-R2gQ8\">Благодарности<\/a><\/li>\n  <li>№ 124. <a href=\"https:\/\/www.youtube.com\/watch?v=gCTCA_dQOp4\">Мастрид ли Тафти?<\/a><\/li>\n  <li>№ 125. <a href=\"https:\/\/www.youtube.com\/watch?v=35uwvF6SZb8\">Как я отношусь к войсикам и кружочкам<\/a><\/li>\n<\/ul>\n<p>Потом разберу ещё. А вы пока приходите на следующий курс, который пройдёт 3 февраля — 3 марта.<\/p>\n<p><a href=\"https:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "За те три года, что мой интерфейсный курс идёт в онлайне, я выложил уже больше сотни фрагментов с наших семинаров",
            "date_published": "2024-01-19T15:00:00+08:00",
            "date_modified": "2024-10-11T14:21:34+08:00",
            "tags": [
                "курсы",
                "пользовательский интерфейс",
                "представление информации"
            ],
            "_date_published_rfc2822": "Fri, 19 Jan 2024 15:00:00 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6215",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "6209",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frags-1-100\/",
            "title": "Фрагменты интерфейсного курса (1—100)",
            "content_html": "<p>За те три года, что <a href=\"https:\/\/bureau.ru\/educenter\/ui-online\/\">мой интерфейсный курс<\/a> идёт в онлайне, я выложил уже <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/ui-course-frags\/\">больше сотни фрагментов с наших семинаров<\/a>. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Пришло время навести хотя бы немного порядка.<\/p>\n<p>Разобрал 100 фрагментов, <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frags-1-125\/\">потом разберу ещё<\/a>.<\/p>\n<p>Сборная солянка:<\/p>\n<ul>\n  <li>№ 1. <a href=\"https:\/\/www.youtube.com\/watch?v=xzUNC_VGNFk\">Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму<\/a><\/li>\n  <li>№ 2. <a href=\"https:\/\/www.youtube.com\/watch?v=_Jv9dT2B7Nc\">Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа<\/a><\/li>\n  <li>№ 19. <a href=\"https:\/\/www.youtube.com\/watch?v=5VCi1KN7WdE\">Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе<\/a><\/li>\n  <li>№ 26. <a href=\"https:\/\/www.youtube.com\/watch?v=Pc0GryUpCgM\">ФИО как в паспорте и эффект японской квартиры<\/a><\/li>\n  <li>№ 89. <a href=\"https:\/\/www.youtube.com\/watch?v=eLOGLY3_h7U\">Прямоугольнизация дизайна и свобода, которую даёт фотошоп<\/a><\/li>\n<\/ul>\n<p>Почти самостоятельные лекции:<\/p>\n<ul>\n  <li>№ 3. <a href=\"https:\/\/www.youtube.com\/watch?v=LBBWjtEHLxU\">Папочка comparisons, листаю и комментирую после лекций об информационном дизайне<\/a> (это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне)<\/li>\n  <li>№ 33. <a href=\"https:\/\/www.youtube.com\/watch?v=du6SqjjLEzQ\">Физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм<\/a><\/li>\n  <li>№ 37. <a href=\"https:\/\/www.youtube.com\/watch?v=SwyTvRljimM\">Блиц-пересказ куска питерского доклада про интерфейсы и Ворлд-Чесс<\/a><\/li>\n  <li>№ 46. <a href=\"https:\/\/www.youtube.com\/watch?v=JTqRG_7e3O8\">Про сложное цветовое кодирование и триаду Мейксенара<\/a><\/li>\n  <li>№ 55. <a href=\"https:\/\/www.youtube.com\/watch?v=3q0HH7mUMYA\">Соответствие между логической структурой и выразительными средствами и дизайн-системы<\/a><\/li>\n<\/ul>\n<p>Метод:<\/p>\n<ul>\n  <li>№ 30. <a href=\"https:\/\/www.youtube.com\/watch?v=-np87CaMjKs\">Метод «Например»<\/a><\/li>\n  <li>№ 40. <a href=\"https:\/\/www.youtube.com\/watch?v=MuDea0wOabA\">Сценка со звонком в пиццерию<\/a><\/li>\n<\/ul>\n<p>Формы:<\/p>\n<ul>\n  <li>№ 4. <a href=\"https:\/\/www.youtube.com\/watch?v=bPSaKS1bbsE\">Двигаем простенькую форму регистрации, чтобы стало поаккуратнее<\/a><\/li>\n  <li>№ 5. <a href=\"https:\/\/www.youtube.com\/watch?v=OMJV8exdbnU\">Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки<\/a><\/li>\n  <li>№ 11. <a href=\"https:\/\/www.youtube.com\/watch?v=how0mkG7ui4\">Первое впечатление, синтаксис и язык формы заказа с доставкой<\/a><\/li>\n  <li>№ 15. <a href=\"https:\/\/www.youtube.com\/watch?v=c91KziF01sQ\">Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму<\/a><\/li>\n  <li>№ 28. <a href=\"https:\/\/www.youtube.com\/watch?v=GrkuX84kKeo\">Улучшаем форму обратной связи Букинг.кома<\/a><\/li>\n  <li>№ 35. <a href=\"https:\/\/www.youtube.com\/watch?v=dckw7tqm1M4\">Первое впечатление от формы<\/a><\/li>\n  <li>№ 50. <a href=\"https:\/\/www.youtube.com\/watch?v=oepQvJtNgUU\">Упорядочиваем вёрстку формы<\/a><\/li>\n  <li>№ 52. <a href=\"https:\/\/www.youtube.com\/watch?v=hPGiFsdTKa8\">Расстояние между полями и сокращение подписей<\/a><\/li>\n  <li>№ 53. <a href=\"https:\/\/www.youtube.com\/watch?v=IR0zLLBf65Y\">Редизайним форму настройки сложной логики<\/a><\/li>\n  <li>№ 63. <a href=\"https:\/\/www.youtube.com\/watch?v=KbZAeVFaEcU\">Добавление нескольких телефонов в форме<\/a><\/li>\n  <li>№ 84. <a href=\"https:\/\/www.youtube.com\/watch?v=phraobT9Ufk\">Разбираем мелочи в форме регистрации<\/a><\/li>\n  <li>№ 85. <a href=\"https:\/\/www.youtube.com\/watch?v=DnTeUK1OqLQ\">Исправляем форму формы, ну и немножко содержание<\/a><\/li>\n<\/ul>\n<p class=\"foot\">См. также тег: <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/web-forms\/\">веб-формы<\/a><\/p>\n<p>Таблицы:<\/p>\n<ul>\n  <li>№ 8. <a href=\"https:\/\/www.youtube.com\/watch?v=IvzDUzH-Sk0\">Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря<\/a><\/li>\n  <li>№ 10. <a href=\"https:\/\/www.youtube.com\/watch?v=mE0pZIVgJLE\">Что не позволено базе данных, то позволено обычной таблице<\/a><\/li>\n  <li>№ 29. <a href=\"https:\/\/www.youtube.com\/watch?v=N2LINRApqmg\">Круговая диаграмма для красоты, табличка для пользы дела<\/a><\/li>\n  <li>№ 39. <a href=\"https:\/\/www.youtube.com\/watch?v=MgwYwu3wkk4\">Дизайн универсальных таблиц с непредсказуемым содержимым<\/a><\/li>\n  <li>№ 65. <a href=\"https:\/\/www.youtube.com\/watch?v=oz571oi6w24\">Живые спарклайны в таблице<\/a><\/li>\n<\/ul>\n<p class=\"foot\">См. также тег: <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/tables\/\">таблицы<\/a><\/p>\n<p>Графики и диаграммы:<\/p>\n<ul>\n  <li>№ 34. <a href=\"https:\/\/www.youtube.com\/watch?v=u682Zi8_FBk\">Визуализация помогает увидеть закономерности<\/a><\/li>\n  <li>№ 43. <a href=\"https:\/\/www.youtube.com\/watch?v=BvugvUfyXmg\">Объясняю про тафтианские 45 градусов на графике<\/a><\/li>\n  <li>№ 94. <a href=\"https:\/\/www.youtube.com\/watch?v=8986vOikHRk\">Если данных мало, то и график не нужен<\/a><\/li>\n  <li>№ 95. <a href=\"https:\/\/www.youtube.com\/watch?v=WSXYgIwdziI\">Рассуждения про инфографику и её задачи<\/a><\/li>\n  <li>№ 98. <a href=\"https:\/\/www.youtube.com\/watch?v=9pf94f8Mz7Q\">Когда визуализация потрачена впустую<\/a><\/li>\n<\/ul>\n<p>Интерфейс:<\/p>\n<ul>\n  <li>№ 9. <a href=\"https:\/\/www.youtube.com\/watch?v=gUklbkeDdYg\">Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование<\/a><\/li>\n  <li>№ 16. <a href=\"https:\/\/www.youtube.com\/watch?v=99o_4c7HTUk\">О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки<\/a><\/li>\n  <li>№ 44. <a href=\"https:\/\/www.youtube.com\/watch?v=2aQnKL5nLUw\">Упрощаем экран успешного заказа пиццы<\/a><\/li>\n  <li>№ 60. <a href=\"https:\/\/www.youtube.com\/watch?v=NdBt_Oqydk4\">Рассуждения о текстовых кнопках<\/a><\/li>\n  <li>№ 61. <a href=\"https:\/\/www.youtube.com\/watch?v=-zzLglJ9bEc\">Упрощаем первый экран кассы самообслуживания, добавляем кнопку «У меня булка»<\/a><\/li>\n  <li>№ 67. <a href=\"https:\/\/www.youtube.com\/watch?v=WqFfT7yDMJg\">Меняем табы на переключалку и настраиваем вёрстку<\/a><\/li>\n  <li>№ 72. <a href=\"https:\/\/www.youtube.com\/watch?v=IV2nVMcaQ7U\">Представляем выбор внятно радиокнопками<\/a><\/li>\n  <li>№ 74. <a href=\"https:\/\/www.youtube.com\/watch?v=aLETIvOafg0\">Так это форма или мастер?<\/a><\/li>\n  <li>№ 75. <a href=\"https:\/\/www.youtube.com\/watch?v=zngun6Kw1q4\">Точно описываем поведение интерфейса для разработчиков<\/a><\/li>\n  <li>№ 76. <a href=\"https:\/\/www.youtube.com\/watch?v=wihXJHHK3yo\">Так это кнопка или ссылка? Оказывается, это радиокнопка!<\/a><\/li>\n  <li>№ 77. <a href=\"https:\/\/www.youtube.com\/watch?v=U_9t3-mJXp0\">Жму синюю кнопку на автомате, не читая<\/a><\/li>\n  <li>№ 83. <a href=\"https:\/\/www.youtube.com\/watch?v=D0zKnGG10tY\">Уважать ли интерфейсные традиции разных платформ?<\/a><\/li>\n  <li>№ 86. <a href=\"https:\/\/www.youtube.com\/watch?v=wq4MQNpFrbg\">Не надо ничего активировать<\/a><\/li>\n  <li>№ 97. <a href=\"https:\/\/www.youtube.com\/watch?v=jwbEj5v3bu8\">Ширина и прокрутка на десктопе<\/a><\/li>\n<\/ul>\n<p>Редактура в дизайне:<\/p>\n<ul>\n  <li>№ 7. <a href=\"https:\/\/www.youtube.com\/watch?v=1DdsndXWHSE\">Механически редактируем примечание к таблице<\/a><\/li>\n  <li>№ 24. <a href=\"https:\/\/www.youtube.com\/watch?v=bxSu-Vx0Nz8\">Отступления от синтаксиса интерфейса и линейки в таблицах<\/a><\/li>\n  <li>№ 49. <a href=\"https:\/\/www.youtube.com\/watch?v=H3UvwkQH8_o\">Редактура привела к радиокнопке<\/a><\/li>\n  <li>№ 66. <a href=\"https:\/\/www.youtube.com\/watch?v=-6LaXViTWzc\">Исследование о тексте в интерфейсе Эпла (1980-е)<\/a><\/li>\n  <li>№ 70. <a href=\"https:\/\/www.youtube.com\/watch?v=Zphn9ixcd0U\">Показать примечание в контексте и заодно сократить<\/a><\/li>\n  <li>№ 80. <a href=\"https:\/\/www.youtube.com\/watch?v=AmuCRWsSdpA\">Редактируем интерфейс конфигуратора окон<\/a><\/li>\n  <li>№ 92. <a href=\"https:\/\/www.youtube.com\/watch?v=bYk0_q6tWLA\">Поле «Комментарий для курьера»<\/a><\/li>\n  <li>№ 96. <a href=\"https:\/\/www.youtube.com\/watch?v=1l35NtOBogE\">Жирный против курсива<\/a><\/li>\n<\/ul>\n<p>Вёрстка:<\/p>\n<ul>\n  <li>№ 17. <a href=\"https:\/\/www.youtube.com\/watch?v=td6deeU-7kU\">Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально<\/a><\/li>\n  <li>№ 42. <a href=\"https:\/\/www.youtube.com\/watch?v=sXRWQ05cO3I\">Улучшаем эстетику с помощью контраста и прямоугольности<\/a><\/li>\n  <li>№ 73. <a href=\"https:\/\/www.youtube.com\/watch?v=49DSUMomhNE\">Верстаем интерфейс конструктора окон<\/a><\/li>\n  <li>№ 78. <a href=\"https:\/\/www.youtube.com\/watch?v=JFKJHdQJvNQ\">Неудачные выравнивательные связи<\/a><\/li>\n  <li>№ 99. <a href=\"https:\/\/www.youtube.com\/watch?v=yj5dFy9HQ-Y\">Комментирую вёрстку окна<\/a><\/li>\n<\/ul>\n<p>Эстетика:<\/p>\n<ul>\n  <li>№ 12. <a href=\"https:\/\/www.youtube.com\/watch?v=kmlb272BAdo\">Как делать градиенты в инфографике<\/a><\/li>\n  <li>№ 13. <a href=\"https:\/\/www.youtube.com\/watch?v=29GAdT6dXBA\">Упаковка таблицы, симультанный контраст и борьба за красоту цветов<\/a><\/li>\n  <li>№ 27. <a href=\"https:\/\/www.youtube.com\/watch?v=X1v54YA8g7c\">Cкруглённое поле поиска и ужасный шрифт Мирьяд-про<\/a><\/li>\n  <li>№ 79. <a href=\"https:\/\/www.youtube.com\/watch?v=58GldX-JZig\">Улучшаем дизайн кнопки<\/a><\/li>\n  <li>№ 81. <a href=\"https:\/\/www.youtube.com\/watch?v=rlCxhBCxJww\">Классические признаки поля ввода и кнопки<\/a><\/li>\n  <li>№ 87. <a href=\"https:\/\/www.youtube.com\/watch?v=ox38_G9lQuo\">Вспомогательные линии — тоньше и скромнее<\/a><\/li>\n  <li>№ 91. <a href=\"https:\/\/www.youtube.com\/watch?v=hieOe3wu-7E\">Аналогия между элементами интерфейса и буквами шрифта, которые можно взять готовые<\/a><\/li>\n  <li>№ 93. <a href=\"https:\/\/www.youtube.com\/watch?v=hh1oSLA0XaE\">Задисейбленность кнопки<\/a><\/li>\n<\/ul>\n<p>Ход:<\/p>\n<ul>\n  <li>№ 6. <a href=\"https:\/\/www.youtube.com\/watch?v=BKu6wqOvgfg\">Ставим красную блямбу рядом с таблицей<\/a><\/li>\n  <li>№ 20. <a href=\"https:\/\/www.youtube.com\/watch?v=CaiDj7OOUbc\">Изображаем нестандартную конструкцию окна символом<\/a><\/li>\n  <li>№ 25. <a href=\"https:\/\/www.youtube.com\/watch?v=N2Qk697fe24\">Чтобы пользователь нажал, можно написать «Жми!» <\/a><\/li>\n  <li>№ 71. <a href=\"https:\/\/www.youtube.com\/watch?v=TAg6cnGIsh4\">Запрещаю выравнивание по центру<\/a><\/li>\n<\/ul>\n<p>Бизнесовое и продуктовое:<\/p>\n<ul>\n  <li>№ 23. <a href=\"https:\/\/www.youtube.com\/watch?v=xq7ntaU6FTU\">Как продать подписку на «Афишу»<\/a><\/li>\n  <li>№ 32. <a href=\"https:\/\/www.youtube.com\/watch?v=qeyRl3IVSGQ\">Закоулки интерфейса можно просто не делать<\/a><\/li>\n  <li>№ 38. <a href=\"https:\/\/www.youtube.com\/watch?v=k6iyy4vJ1Co\">Продаём окна, объясняя разницу профилей<\/a><\/li>\n  <li>№ 47. <a href=\"https:\/\/www.youtube.com\/watch?v=6rDKRg6SlVc\">Аккуратное внедрение нового дизайна без ущерба привычкам<\/a><\/li>\n  <li>№ 48. <a href=\"https:\/\/www.youtube.com\/watch?v=MhdZzXw_Tzc\">Что, если на реализацию хорошего интерфейса нет времени<\/a><\/li>\n  <li>№ 56. <a href=\"https:\/\/www.youtube.com\/watch?v=3polv_KHa5g\">Разделяем сценарии оплаты частично, ровно по счёту и впрок<\/a><\/li>\n  <li>№ 57. <a href=\"https:\/\/www.youtube.com\/watch?v=TeolvcH5f_8\">Соблазняем человека пиццей, а не текстом «Ваша корзина пуста»<\/a><\/li>\n  <li>№ 59. <a href=\"https:\/\/www.youtube.com\/watch?v=UcIjtMreNHA\">Постоянные напоминания о цене могут мешать покупать<\/a><\/li>\n  <li>№ 64. <a href=\"https:\/\/www.youtube.com\/watch?v=PQzVzgYfvfQ\">Вопросы клиента к интерфейсу кассы самообслуживания<\/a><\/li>\n  <li>№ 82. <a href=\"https:\/\/www.youtube.com\/watch?v=2qV6CCRT6lA\">Заранее спросить у клиента про сео и персональные данные<\/a><\/li>\n  <li>№ 88. <a href=\"https:\/\/www.youtube.com\/watch?v=Mt45AuwOnvA\">Убрал шум — добавь сигнал!<\/a><\/li>\n  <li>№ 90. <a href=\"https:\/\/www.youtube.com\/watch?v=-GHjDFHWrBA\">Классно упростить себе задачу<\/a><\/li>\n  <li>№ 100. <a href=\"https:\/\/www.youtube.com\/watch?v=yTIrl1jnEHU\">Программисты могли бы подумать о пользе для бизнеса<\/a><\/li>\n<\/ul>\n<p>Инструмент:<\/p>\n<ul>\n  <li>№ 18. <a href=\"https:\/\/www.youtube.com\/watch?v=vHCy9izr0v4\">Последовательное волшебство в интерфейсе Фотошопа<\/a><\/li>\n  <li>№ 41. <a href=\"https:\/\/www.youtube.com\/watch?v=NF8fC2Cp8iU\">Перерисовываю и улучшаю кусок интерфейса в Фигме с помощью компонентов<\/a><\/li>\n  <li>№ 45. <a href=\"https:\/\/www.youtube.com\/watch?v=H3CF-RG9lIc\">Режимы наложения слоёв с овощами и фруктами<\/a><\/li>\n  <li>№ 54. <a href=\"https:\/\/www.youtube.com\/watch?v=uILlCs5L_mY\">Секреты встроенной скриншотилки на Маке<\/a><\/li>\n<\/ul>\n<p>Работа над дизайном и подача:<\/p>\n<ul>\n  <li>№ 36. <a href=\"https:\/\/www.youtube.com\/watch?v=czu2l7RfEWs\">Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру<\/a><\/li>\n  <li>№ 58. <a href=\"https:\/\/www.youtube.com\/watch?v=2tANVy6u2TQ\">Не описывайте макеты и не делайте «невозможные» макеты<\/a><\/li>\n<\/ul>\n<p>Разное интересное:<\/p>\n<ul>\n  <li>№ 14. <a href=\"https:\/\/www.youtube.com\/watch?v=tYJMrY5zWlo\">Как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10<\/a><\/li>\n  <li>№ 21. <a href=\"https:\/\/www.youtube.com\/watch?v=fPVmyMbixXw\">Что бы я поменял в дизайне Бёрдвью спустя девять лет<\/a><\/li>\n  <li>№ 22. <a href=\"https:\/\/www.youtube.com\/watch?v=7Mc6IaaXNsc\">Технические ограничения и дизайн для будущего<\/a><\/li>\n  <li>№ 31. <a href=\"https:\/\/www.youtube.com\/watch?v=bCMAOeqapDI\">Двусмысленная иконка и проверка венгерским языком<\/a><\/li>\n  <li>№ 51. <a href=\"https:\/\/www.youtube.com\/watch?v=SQQLWeCaHs8\">Глючная обработка ввода пользователя в интерфейсе Сафари<\/a><\/li>\n  <li>№ 62. <a href=\"https:\/\/www.youtube.com\/watch?v=4JzD6d9V0nU\">Что делать, если клиент хочет фигню?<\/a><\/li>\n  <li>№ 68. <a href=\"https:\/\/www.youtube.com\/watch?v=x6RbJD24N6o\">Благодарности и в чём польза теории<\/a><\/li>\n  <li>№ 69. <a href=\"https:\/\/www.youtube.com\/watch?v=JoA5JZcBoS0\">Что делать дизайнеру, если разработчики напрограммили всю магию?<\/a><\/li>\n<\/ul>\n<p>Потом разберу ещё. А вы пока приходите на следующий курс, который пройдёт 3 февраля — 3 марта.<\/p>\n<p><a href=\"https:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "За те три года, что мой интерфейсный курс идёт в онлайне, я выложил уже больше сотни фрагментов с наших семинаров",
            "date_published": "2024-01-15T14:25:34+08:00",
            "date_modified": "2024-01-19T14:05:10+08:00",
            "tags": [
                "курсы",
                "пользовательский интерфейс",
                "представление информации"
            ],
            "_date_published_rfc2822": "Mon, 15 Jan 2024 14:25:34 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6209",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "6196",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frags-1-75\/",
            "title": "Фрагменты интерфейсного курса (1—75)",
            "content_html": "<p>За те три года, что <a href=\"https:\/\/bureau.ru\/educenter\/ui-online\/\">мой интерфейсный курс<\/a> идёт в онлайне, я выложил уже <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/ui-course-frags\/\">больше сотни фрагментов с наших семинаров<\/a>. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Пришло время навести хотя бы немного порядка.<\/p>\n<p>Пока разобрал первые 75 фрагментов, <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frags-1-100\/\">потом разберу ещё<\/a>.<\/p>\n<p>Сборная солянка:<\/p>\n<ul>\n  <li>№ 1. <a href=\"https:\/\/www.youtube.com\/watch?v=xzUNC_VGNFk\">Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму<\/a><\/li>\n  <li>№ 2. <a href=\"https:\/\/www.youtube.com\/watch?v=_Jv9dT2B7Nc\">Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа<\/a><\/li>\n  <li>№ 19. <a href=\"https:\/\/www.youtube.com\/watch?v=5VCi1KN7WdE\">Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе<\/a><\/li>\n  <li>№ 26. <a href=\"https:\/\/www.youtube.com\/watch?v=Pc0GryUpCgM\">ФИО как в паспорте и эффект японской квартиры<\/a><\/li>\n<\/ul>\n<p>Почти самостоятельные лекции:<\/p>\n<ul>\n  <li>№ 3. <a href=\"https:\/\/www.youtube.com\/watch?v=LBBWjtEHLxU\">Папочка comparisons, листаю и комментирую после лекций об информационном дизайне<\/a> (это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне)<\/li>\n  <li>№ 33. <a href=\"https:\/\/www.youtube.com\/watch?v=du6SqjjLEzQ\">Физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм<\/a><\/li>\n  <li>№ 37. <a href=\"https:\/\/www.youtube.com\/watch?v=SwyTvRljimM\">Блиц-пересказ куска питерского доклада про интерфейсы и Ворлд-Чесс<\/a><\/li>\n  <li>№ 46. <a href=\"https:\/\/www.youtube.com\/watch?v=JTqRG_7e3O8\">Про сложное цветовое кодирование и триаду Мейксенара<\/a><\/li>\n  <li>№ 55. <a href=\"https:\/\/www.youtube.com\/watch?v=3q0HH7mUMYA\">Соответствие между логической структурой и выразительными средствами и дизайн-системы<\/a><\/li>\n<\/ul>\n<p>Метод:<\/p>\n<ul>\n  <li>№ 30. <a href=\"https:\/\/www.youtube.com\/watch?v=-np87CaMjKs\">Метод «Например»<\/a><\/li>\n  <li>№ 40. <a href=\"https:\/\/www.youtube.com\/watch?v=MuDea0wOabA\">Сценка со звонком в пиццерию<\/a><\/li>\n<\/ul>\n<p>Формы:<\/p>\n<ul>\n  <li>№ 4. <a href=\"https:\/\/www.youtube.com\/watch?v=bPSaKS1bbsE\">Двигаем простенькую форму регистрации, чтобы стало поаккуратнее<\/a><\/li>\n  <li>№ 5. <a href=\"https:\/\/www.youtube.com\/watch?v=OMJV8exdbnU\">Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки<\/a><\/li>\n  <li>№ 11. <a href=\"https:\/\/www.youtube.com\/watch?v=how0mkG7ui4\">Первое впечатление, синтаксис и язык формы заказа с доставкой<\/a><\/li>\n  <li>№ 15. <a href=\"https:\/\/www.youtube.com\/watch?v=c91KziF01sQ\">Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму<\/a><\/li>\n  <li>№ 28. <a href=\"https:\/\/www.youtube.com\/watch?v=GrkuX84kKeo\">Улучшаем форму обратной связи Букинг.кома<\/a><\/li>\n  <li>№ 35. <a href=\"https:\/\/www.youtube.com\/watch?v=dckw7tqm1M4\">Первое впечатление от формы<\/a><\/li>\n  <li>№ 50. <a href=\"https:\/\/www.youtube.com\/watch?v=oepQvJtNgUU\">Упорядочиваем вёрстку формы<\/a><\/li>\n  <li>№ 52. <a href=\"https:\/\/www.youtube.com\/watch?v=hPGiFsdTKa8\">Расстояние между полями и сокращение подписей<\/a><\/li>\n  <li>№ 53. <a href=\"https:\/\/www.youtube.com\/watch?v=IR0zLLBf65Y\">Редизайним форму настройки сложной логики<\/a><\/li>\n  <li>№ 63. <a href=\"https:\/\/www.youtube.com\/watch?v=KbZAeVFaEcU\">Добавление нескольких телефонов в форме<\/a><\/li>\n<\/ul>\n<p class=\"foot\">См. также тег: <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/web-forms\/\">веб-формы<\/a><\/p>\n<p>Таблицы, графики и диаграммы:<\/p>\n<ul>\n  <li>№ 8. <a href=\"https:\/\/www.youtube.com\/watch?v=IvzDUzH-Sk0\">Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря<\/a><\/li>\n  <li>№ 10. <a href=\"https:\/\/www.youtube.com\/watch?v=mE0pZIVgJLE\">Что не позволено базе данных, то позволено обычной таблице<\/a><\/li>\n  <li>№ 29. <a href=\"https:\/\/www.youtube.com\/watch?v=N2LINRApqmg\">Круговая диаграмма для красоты, табличка для пользы дела<\/a><\/li>\n  <li>№ 34. <a href=\"https:\/\/www.youtube.com\/watch?v=u682Zi8_FBk\">Визуализация помогает увидеть закономерности<\/a><\/li>\n  <li>№ 39. <a href=\"https:\/\/www.youtube.com\/watch?v=MgwYwu3wkk4\">Дизайн универсальных таблиц с непредсказуемым содержимым<\/a><\/li>\n  <li>№ 43. <a href=\"https:\/\/www.youtube.com\/watch?v=BvugvUfyXmg\">Объясняю про тафтианские 45 градусов на графике<\/a><\/li>\n  <li>№ 65. <a href=\"https:\/\/www.youtube.com\/watch?v=oz571oi6w24\">Живые спарклайны в таблице<\/a><\/li>\n<\/ul>\n<p class=\"foot\">См. также тег: <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/tables\/\">таблицы<\/a><\/p>\n<p>Интерфейс:<\/p>\n<ul>\n  <li>№ 9. <a href=\"https:\/\/www.youtube.com\/watch?v=gUklbkeDdYg\">Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование<\/a><\/li>\n  <li>№ 16. <a href=\"https:\/\/www.youtube.com\/watch?v=99o_4c7HTUk\">О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки<\/a><\/li>\n  <li>№ 44. <a href=\"https:\/\/www.youtube.com\/watch?v=2aQnKL5nLUw\">Упрощаем экран успешного заказа пиццы<\/a><\/li>\n  <li>№ 60. <a href=\"https:\/\/www.youtube.com\/watch?v=NdBt_Oqydk4\">Рассуждения о текстовых кнопках<\/a><\/li>\n  <li>№ 61. <a href=\"https:\/\/www.youtube.com\/watch?v=-zzLglJ9bEc\">Упрощаем первый экран кассы самообслуживания, добавляем кнопку «У меня булка»<\/a><\/li>\n  <li>№ 67. <a href=\"https:\/\/www.youtube.com\/watch?v=WqFfT7yDMJg\">Меняем табы на переключалку и настраиваем вёрстку<\/a><\/li>\n  <li>№ 72. <a href=\"https:\/\/www.youtube.com\/watch?v=IV2nVMcaQ7U\">Представляем выбор внятно радиокнопками<\/a><\/li>\n  <li>№ 74. <a href=\"https:\/\/www.youtube.com\/watch?v=aLETIvOafg0\">Так это форма или мастер?<\/a><\/li>\n  <li>№ 75. <a href=\"https:\/\/www.youtube.com\/watch?v=zngun6Kw1q4\">Точно описываем поведение интерфейса для разработчиков<\/a><\/li>\n<\/ul>\n<p>Редактура в дизайне:<\/p>\n<ul>\n  <li>№ 7. <a href=\"https:\/\/www.youtube.com\/watch?v=1DdsndXWHSE\">Механически редактируем примечание к таблице<\/a><\/li>\n  <li>№ 24. <a href=\"https:\/\/www.youtube.com\/watch?v=bxSu-Vx0Nz8\">Отступления от синтаксиса интерфейса и линейки в таблицах<\/a><\/li>\n  <li>№ 49. <a href=\"https:\/\/www.youtube.com\/watch?v=H3UvwkQH8_o\">Редактура привела к радиокнопке<\/a><\/li>\n  <li>№ 66. <a href=\"https:\/\/www.youtube.com\/watch?v=-6LaXViTWzc\">Исследование о тексте в интерфейсе Эпла (1980-е)<\/a><\/li>\n  <li>№ 70. <a href=\"https:\/\/www.youtube.com\/watch?v=Zphn9ixcd0U\">Показать примечание в контексте и заодно сократить<\/a><\/li>\n<\/ul>\n<p>Эстетика:<\/p>\n<ul>\n  <li>№ 12. <a href=\"https:\/\/www.youtube.com\/watch?v=kmlb272BAdo\">Как делать градиенты в инфографике<\/a><\/li>\n  <li>№ 13. <a href=\"https:\/\/www.youtube.com\/watch?v=29GAdT6dXBA\">Упаковка таблицы, симультанный контраст и борьба за красоту цветов<\/a><\/li>\n  <li>№ 17. <a href=\"https:\/\/www.youtube.com\/watch?v=td6deeU-7kU\">Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально<\/a><\/li>\n  <li>№ 27. <a href=\"https:\/\/www.youtube.com\/watch?v=X1v54YA8g7c\">Cкруглённое поле поиска и ужасный шрифт Мирьяд-про<\/a><\/li>\n  <li>№ 42. <a href=\"https:\/\/www.youtube.com\/watch?v=sXRWQ05cO3I\">Улучшаем эстетику с помощью контраста и прямоугольности<\/a><\/li>\n  <li>№ 73. <a href=\"https:\/\/www.youtube.com\/watch?v=49DSUMomhNE\">Верстаем интерфейс конструктора окон<\/a><\/li>\n<\/ul>\n<p>Ход:<\/p>\n<ul>\n  <li>№ 6. <a href=\"https:\/\/www.youtube.com\/watch?v=BKu6wqOvgfg\">Ставим красную блямбу рядом с таблицей<\/a><\/li>\n  <li>№ 20. <a href=\"https:\/\/www.youtube.com\/watch?v=CaiDj7OOUbc\">Изображаем нестандартную конструкцию окна символом<\/a><\/li>\n  <li>№ 25. <a href=\"https:\/\/www.youtube.com\/watch?v=N2Qk697fe24\">Чтобы пользователь нажал, можно написать «Жми!» <\/a><\/li>\n  <li>№ 71. <a href=\"https:\/\/www.youtube.com\/watch?v=TAg6cnGIsh4\">Запрещаю выравнивание по центру<\/a><\/li>\n<\/ul>\n<p>Бизнесовое и продуктовое:<\/p>\n<ul>\n  <li>№ 23. <a href=\"https:\/\/www.youtube.com\/watch?v=xq7ntaU6FTU\">Как продать подписку на «Афишу»<\/a><\/li>\n  <li>№ 32. <a href=\"https:\/\/www.youtube.com\/watch?v=qeyRl3IVSGQ\">Закоулки интерфейса можно просто не делать<\/a><\/li>\n  <li>№ 38. <a href=\"https:\/\/www.youtube.com\/watch?v=k6iyy4vJ1Co\">Продаём окна, объясняя разницу профилей<\/a><\/li>\n  <li>№ 47. <a href=\"https:\/\/www.youtube.com\/watch?v=6rDKRg6SlVc\">Аккуратное внедрение нового дизайна без ущерба привычкам<\/a><\/li>\n  <li>№ 48. <a href=\"https:\/\/www.youtube.com\/watch?v=MhdZzXw_Tzc\">Что, если на реализацию хорошего интерфейса нет времени<\/a><\/li>\n  <li>№ 56. <a href=\"https:\/\/www.youtube.com\/watch?v=3polv_KHa5g\">Разделяем сценарии оплаты частично, ровно по счёту и впрок<\/a><\/li>\n  <li>№ 57. <a href=\"https:\/\/www.youtube.com\/watch?v=TeolvcH5f_8\">Соблазняем человека пиццей, а не текстом «Ваша корзина пуста»<\/a><\/li>\n  <li>№ 59. <a href=\"https:\/\/www.youtube.com\/watch?v=UcIjtMreNHA\">Постоянные напоминания о цене могут мешать покупать<\/a><\/li>\n  <li>№ 64. <a href=\"https:\/\/www.youtube.com\/watch?v=PQzVzgYfvfQ\">Вопросы клиента к интерфейсу кассы самообслуживания<\/a><\/li>\n<\/ul>\n<p>Инструмент:<\/p>\n<ul>\n  <li>№ 18. <a href=\"https:\/\/www.youtube.com\/watch?v=vHCy9izr0v4\">Последовательное волшебство в интерфейсе Фотошопа<\/a><\/li>\n  <li>№ 41. <a href=\"https:\/\/www.youtube.com\/watch?v=NF8fC2Cp8iU\">Перерисовываю и улучшаю кусок интерфейса в Фигме с помощью компонентов<\/a><\/li>\n  <li>№ 45. <a href=\"https:\/\/www.youtube.com\/watch?v=H3CF-RG9lIc\">Режимы наложения слоёв с овощами и фруктами<\/a><\/li>\n  <li>№ 54. <a href=\"https:\/\/www.youtube.com\/watch?v=uILlCs5L_mY\">Секреты встроенной скриншотилки на Маке<\/a><\/li>\n<\/ul>\n<p>Работа над дизайном и подача:<\/p>\n<ul>\n  <li>№ 36. <a href=\"https:\/\/www.youtube.com\/watch?v=czu2l7RfEWs\">Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру<\/a><\/li>\n  <li>№ 58. <a href=\"https:\/\/www.youtube.com\/watch?v=2tANVy6u2TQ\">Не описывайте макеты и не делайте «невозможные» макеты<\/a><\/li>\n<\/ul>\n<p>Разное интересное:<\/p>\n<ul>\n  <li>№ 14. <a href=\"https:\/\/www.youtube.com\/watch?v=tYJMrY5zWlo\">Как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10<\/a><\/li>\n  <li>№ 21. <a href=\"https:\/\/www.youtube.com\/watch?v=fPVmyMbixXw\">Что бы я поменял в дизайне Бёрдвью спустя девять лет<\/a><\/li>\n  <li>№ 22. <a href=\"https:\/\/www.youtube.com\/watch?v=7Mc6IaaXNsc\">Технические ограничения и дизайн для будущего<\/a><\/li>\n  <li>№ 31. <a href=\"https:\/\/www.youtube.com\/watch?v=bCMAOeqapDI\">Двусмысленная иконка и проверка венгерским языком<\/a><\/li>\n  <li>№ 51. <a href=\"https:\/\/www.youtube.com\/watch?v=SQQLWeCaHs8\">Глючная обработка ввода пользователя в интерфейсе Сафари<\/a><\/li>\n  <li>№ 62. <a href=\"https:\/\/www.youtube.com\/watch?v=4JzD6d9V0nU\">Что делать, если клиент хочет фигню?<\/a><\/li>\n  <li>№ 68. <a href=\"https:\/\/www.youtube.com\/watch?v=x6RbJD24N6o\">Благодарности и в чём польза теории<\/a><\/li>\n  <li>№ 69. <a href=\"https:\/\/www.youtube.com\/watch?v=JoA5JZcBoS0\">Что делать дизайнеру, если разработчики напрограммили всю магию?<\/a><\/li>\n<\/ul>\n<p>Потом разберу ещё. А вы пока приходите на следующий курс, который пройдёт 3 февраля — 3 марта.<\/p>\n<p><a href=\"https:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "За те три года, что мой интерфейсный курс идёт в онлайне, я выложил уже больше сотни фрагментов с наших семинаров",
            "date_published": "2024-01-09T15:28:12+08:00",
            "date_modified": "2024-01-15T14:26:23+08:00",
            "tags": [
                "курсы",
                "пользовательский интерфейс",
                "представление информации"
            ],
            "_date_published_rfc2822": "Tue, 09 Jan 2024 15:28:12 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6196",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "6191",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-132\/",
            "title": "На интерфейсном курсе: дискуссия о задачах инфографики",
            "content_html": "<p>С участником курса обсуждаем представление данных в виде круговой диаграммы или таблицы. Я жалуюсь, что сложно понять, как данные взаимосвязаны, а участник говорит, что ему наоборот легко понять. В итоге получается дискуссия о задачах инфографики, и я рассказываю о том, чему мы в этом смысле учим на курсе. 10 минут:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/Urn9TDalPg4?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент № 132 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 8 сентября 2023 года.<\/p>\n<p>До 2 февраля идёт запись на курс, который пройдёт с 3 февраля по 3 марта.<\/p>\n<p><a href=\"http:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "С участником курса обсуждаем представление данных в виде круговой диаграммы или таблицы. Я жалуюсь, что сложно понять, как данные взаимосвязаны, а участник говорит",
            "date_published": "2024-01-01T23:15:21+08:00",
            "date_modified": "2024-01-01T23:15:06+08:00",
            "tags": [
                "видео",
                "инфографика",
                "круговые диаграммы",
                "представление информации",
                "фрагменты курса ПИ"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-Urn9TDalPg4-cover.jpg",
            "_date_published_rfc2822": "Mon, 01 Jan 2024 23:15:21 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6191",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-Urn9TDalPg4-cover.jpg"
                ]
            }
        },
        {
            "id": "6188",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frags-1-50\/",
            "title": "Фрагменты интерфейсного курса (1—50)",
            "content_html": "<p>За те три года, что <a href=\"https:\/\/bureau.ru\/educenter\/ui-online\/\">мой интерфейсный курс<\/a> идёт в онлайне, я выложил уже <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/ui-course-frags\/\">больше сотни фрагментов с наших семинаров<\/a>. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Пришло время навести хотя бы немного порядка.<\/p>\n<p>Пока разобрал первые 50 фрагментов, <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frags-1-75\/\">потом разберу ещё<\/a>. Считайте, что это вам вместо сериальчиков на новогодние каникулы.<\/p>\n<p>Сборная солянка:<\/p>\n<ul>\n  <li>№ 1. <a href=\"https:\/\/www.youtube.com\/watch?v=xzUNC_VGNFk\">Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму<\/a><\/li>\n  <li>№ 2. <a href=\"https:\/\/www.youtube.com\/watch?v=_Jv9dT2B7Nc\">Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа<\/a><\/li>\n  <li>№ 9. <a href=\"https:\/\/www.youtube.com\/watch?v=gUklbkeDdYg\">Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование<\/a><\/li>\n  <li>№ 16. <a href=\"https:\/\/www.youtube.com\/watch?v=99o_4c7HTUk\">О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки<\/a><\/li>\n  <li>№ 19. <a href=\"https:\/\/www.youtube.com\/watch?v=5VCi1KN7WdE\">Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе<\/a><\/li>\n  <li>№ 26. <a href=\"https:\/\/www.youtube.com\/watch?v=Pc0GryUpCgM\">ФИО как в паспорте и эффект японской квартиры<\/a><\/li>\n<\/ul>\n<p>Почти самостоятельные лекции:<\/p>\n<ul>\n  <li>№ 3. <a href=\"https:\/\/www.youtube.com\/watch?v=LBBWjtEHLxU\">Папочка comparisons, листаю и комментирую после лекций об информационном дизайне<\/a> (это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне)<\/li>\n  <li>№ 33. <a href=\"https:\/\/www.youtube.com\/watch?v=du6SqjjLEzQ\">Физические радиокнопки, рукоятки в самолёте, фотоаппарат Фуджифильм<\/a><\/li>\n  <li>№ 37. <a href=\"https:\/\/www.youtube.com\/watch?v=SwyTvRljimM\">Блиц-пересказ куска питерского доклада про интерфейсы и Ворлд-Чесс<\/a><\/li>\n  <li>№ 46. <a href=\"https:\/\/www.youtube.com\/watch?v=JTqRG_7e3O8\">Про сложное цветовое кодирование и триаду Мейксенара<\/a><\/li>\n<\/ul>\n<p>Метод:<\/p>\n<ul>\n  <li>№ 30. <a href=\"https:\/\/www.youtube.com\/watch?v=-np87CaMjKs\">Метод «Например»<\/a><\/li>\n  <li>№ 40. <a href=\"https:\/\/www.youtube.com\/watch?v=MuDea0wOabA\">Сценка со звонком в пиццерию<\/a><\/li>\n<\/ul>\n<p>Формы:<\/p>\n<ul>\n  <li>№ 4. <a href=\"https:\/\/www.youtube.com\/watch?v=bPSaKS1bbsE\">Двигаем простенькую форму регистрации, чтобы стало поаккуратнее<\/a><\/li>\n  <li>№ 5. <a href=\"https:\/\/www.youtube.com\/watch?v=OMJV8exdbnU\">Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки<\/a><\/li>\n  <li>№ 11. <a href=\"https:\/\/www.youtube.com\/watch?v=how0mkG7ui4\">Первое впечатление, синтаксис и язык формы заказа с доставкой<\/a><\/li>\n  <li>№ 15. <a href=\"https:\/\/www.youtube.com\/watch?v=c91KziF01sQ\">Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму<\/a><\/li>\n  <li>№ 28. <a href=\"https:\/\/www.youtube.com\/watch?v=GrkuX84kKeo\">Улучшаем форму обратной связи Букинг.кома<\/a><\/li>\n  <li>№ 35. <a href=\"https:\/\/www.youtube.com\/watch?v=dckw7tqm1M4\">Первое впечатление от формы<\/a><\/li>\n  <li>№ 50. <a href=\"https:\/\/www.youtube.com\/watch?v=oepQvJtNgUU\">Упорядочиваем вёрстку формы<\/a><\/li>\n<\/ul>\n<p class=\"foot\">См. также тег: <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/web-forms\/\">веб-формы<\/a><\/p>\n<p>Таблицы, графики и диаграммы:<\/p>\n<ul>\n  <li>№ 8. <a href=\"https:\/\/www.youtube.com\/watch?v=IvzDUzH-Sk0\">Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря<\/a><\/li>\n  <li>№ 10. <a href=\"https:\/\/www.youtube.com\/watch?v=mE0pZIVgJLE\">Что не позволено базе данных, то позволено обычной таблице<\/a><\/li>\n  <li>№ 29. <a href=\"https:\/\/www.youtube.com\/watch?v=N2LINRApqmg\">Круговая диаграмма для красоты, табличка для пользы дела<\/a><\/li>\n  <li>№ 34. <a href=\"https:\/\/www.youtube.com\/watch?v=u682Zi8_FBk\">Визуализация помогает увидеть закономерности<\/a><\/li>\n  <li>№ 39. <a href=\"https:\/\/www.youtube.com\/watch?v=MgwYwu3wkk4\">Дизайн универсальных таблиц с непредсказуемым содержимым<\/a><\/li>\n  <li>№ 43. <a href=\"https:\/\/www.youtube.com\/watch?v=BvugvUfyXmg\">Объясняю про тафтианские 45 градусов на графике<\/a><\/li>\n<\/ul>\n<p class=\"foot\">См. также тег: <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/tables\/\">таблицы<\/a><\/p>\n<p>Редактура в дизайне:<\/p>\n<ul>\n  <li>№ 7. <a href=\"https:\/\/www.youtube.com\/watch?v=1DdsndXWHSE\">Механически редактируем примечание к таблице<\/a><\/li>\n  <li>№ 24. <a href=\"https:\/\/www.youtube.com\/watch?v=bxSu-Vx0Nz8\">Отступления от синтаксиса интерфейса и линейки в таблицах<\/a><\/li>\n  <li>№ 49. <a href=\"https:\/\/www.youtube.com\/watch?v=H3UvwkQH8_o\">Редактура привела к радиокнопке<\/a><\/li>\n<\/ul>\n<p>Эстетика:<\/p>\n<ul>\n  <li>№ 12. <a href=\"https:\/\/www.youtube.com\/watch?v=kmlb272BAdo\">Как делать градиенты в инфографике<\/a><\/li>\n  <li>№ 13. <a href=\"https:\/\/www.youtube.com\/watch?v=29GAdT6dXBA\">Упаковка таблицы, симультанный контраст и борьба за красоту цветов<\/a><\/li>\n  <li>№ 17. <a href=\"https:\/\/www.youtube.com\/watch?v=td6deeU-7kU\">Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально<\/a><\/li>\n  <li>№ 27. <a href=\"https:\/\/www.youtube.com\/watch?v=X1v54YA8g7c\">Cкруглённое поле поиска и ужасный шрифт Мирьяд-про<\/a><\/li>\n  <li>№ 42. <a href=\"https:\/\/www.youtube.com\/watch?v=sXRWQ05cO3I\">Улучшаем эстетику с помощью контраста и прямоугольности<\/a><\/li>\n<\/ul>\n<p>Ход:<\/p>\n<ul>\n  <li>№ 6. <a href=\"https:\/\/www.youtube.com\/watch?v=BKu6wqOvgfg\">Ставим красную блямбу рядом с таблицей<\/a><\/li>\n  <li>№ 20. <a href=\"https:\/\/www.youtube.com\/watch?v=CaiDj7OOUbc\">Изображаем нестандартную конструкцию окна символом<\/a><\/li>\n  <li>№ 25. <a href=\"https:\/\/www.youtube.com\/watch?v=N2Qk697fe24\">Чтобы пользователь нажал, можно написать «Жми!» <\/a><\/li>\n<\/ul>\n<p>Инструмент:<\/p>\n<ul>\n  <li>№ 18. <a href=\"https:\/\/www.youtube.com\/watch?v=vHCy9izr0v4\">Последовательное волшебство в интерфейсе Фотошопа<\/a><\/li>\n  <li>№ 41. <a href=\"https:\/\/www.youtube.com\/watch?v=NF8fC2Cp8iU\">Перерисовываю и улучшаю кусок интерфейса в Фигме с помощью компонентов<\/a><\/li>\n  <li>№ 45. <a href=\"https:\/\/www.youtube.com\/watch?v=H3CF-RG9lIc\">Режимы наложения слоёв с овощами и фруктами<\/a><\/li>\n<\/ul>\n<p>Бизнесовое и продуктовое:<\/p>\n<ul>\n  <li>№ 23. <a href=\"https:\/\/www.youtube.com\/watch?v=xq7ntaU6FTU\">Как продать подписку на «Афишу»<\/a><\/li>\n  <li>№ 32. <a href=\"https:\/\/www.youtube.com\/watch?v=qeyRl3IVSGQ\">Закоулки интерфейса можно просто не делать<\/a><\/li>\n  <li>№ 38. <a href=\"https:\/\/www.youtube.com\/watch?v=k6iyy4vJ1Co\">Продаём окна, объясняя разницу профилей<\/a><\/li>\n  <li>№ 47. <a href=\"https:\/\/www.youtube.com\/watch?v=6rDKRg6SlVc\">Аккуратное внедрение нового дизайна без ущерба привычкам<\/a><\/li>\n  <li>№ 48. <a href=\"https:\/\/www.youtube.com\/watch?v=MhdZzXw_Tzc\">Что, если на реализацию хорошего интерфейса нет времени<\/a><\/li>\n<\/ul>\n<p>Разное интересное:<\/p>\n<ul>\n  <li>№ 14. <a href=\"https:\/\/www.youtube.com\/watch?v=tYJMrY5zWlo\">Как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10<\/a><\/li>\n  <li>№ 21. <a href=\"https:\/\/www.youtube.com\/watch?v=fPVmyMbixXw\">Что бы я поменял в дизайне Бёрдвью спустя девять лет<\/a><\/li>\n  <li>№ 22. <a href=\"https:\/\/www.youtube.com\/watch?v=7Mc6IaaXNsc\">Технические ограничения и дизайн для будущего<\/a><\/li>\n  <li>№ 31. <a href=\"https:\/\/www.youtube.com\/watch?v=bCMAOeqapDI\">Двусмысленная иконка и проверка венгерским языком<\/a><\/li>\n  <li>№ 36. <a href=\"https:\/\/www.youtube.com\/watch?v=czu2l7RfEWs\">Оставляйте введённый запрос в поле поиска и рисуйте клавиатуру<\/a><\/li>\n  <li>№ 44. <a href=\"https:\/\/www.youtube.com\/watch?v=2aQnKL5nLUw\">Упрощаем экран успешного заказа пиццы<\/a><\/li>\n<\/ul>\n<p>Потом разберу ещё. А вы пока приходите на следующий курс, который пройдёт 3 февраля — 3 марта.<\/p>\n<p><a href=\"https:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "За те три года, что мой интерфейсный курс идёт в онлайне, я выложил уже больше сотни фрагментов с наших семинаров",
            "date_published": "2023-12-28T21:38:27+08:00",
            "date_modified": "2024-01-09T15:28:22+08:00",
            "tags": [
                "пользовательский интерфейс",
                "представление информации"
            ],
            "_date_published_rfc2822": "Thu, 28 Dec 2023 21:38:27 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6188",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "6185",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frags-1-25\/",
            "title": "Фрагменты интерфейсного курса (1—25)",
            "content_html": "<p>За те три года, что <a href=\"https:\/\/bureau.ru\/educenter\/ui-online\/\">мой интерфейсный курс<\/a> идёт в онлайне, я выложил уже <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/ui-course-frags\/\">больше сотни фрагментов с наших семинаров<\/a>. Они уже сами представляют собой неплохую базу материала, правда, не очень структурированного. Пришло время навести хотя бы немного порядка.<\/p>\n<p>Пока разобрал первые 25 фрагментов, <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frags-1-50\/\">потом разберу ещё<\/a>. Считайте, что это вам вместо сериальчиков на новогодние каникулы.<\/p>\n<p>Сборная солянка:<\/p>\n<ul>\n  <li>№ 1. <a href=\"https:\/\/www.youtube.com\/watch?v=xzUNC_VGNFk\">Разбираем пару таблиц, заглядываем к Мильчину, потом смотрим и двигаем форму<\/a><\/li>\n  <li>№ 2. <a href=\"https:\/\/www.youtube.com\/watch?v=_Jv9dT2B7Nc\">Обсуждаем тафтианские точки во времени в расписаниях, разбираем кусок формы для Ай-ОСа<\/a><\/li>\n  <li>№ 9. <a href=\"https:\/\/www.youtube.com\/watch?v=gUklbkeDdYg\">Незаконно упрощаем, упаковываем несколько полей в одно и обсуждаем тестирование<\/a><\/li>\n  <li>№ 16. <a href=\"https:\/\/www.youtube.com\/watch?v=99o_4c7HTUk\">О важности дефолтных значений в калькуляторе, о нежелательных связях из-за сетки<\/a><\/li>\n  <li>№ 19 <a href=\"https:\/\/www.youtube.com\/watch?v=5VCi1KN7WdE\">Чёткие края фоток, выбор стеклопакетов и нелинейное анду в Фотошопе<\/a><\/li>\n<\/ul>\n<p>Это впоследствие превратилось в самостоятельную лекцию в блоке об информационном дизайне:<\/p>\n<ul>\n  <li>№ 3. <a href=\"https:\/\/www.youtube.com\/watch?v=LBBWjtEHLxU\">Папочка comparisons, листаю и комментирую после лекций об информационном дизайне<\/a><\/li>\n<\/ul>\n<p>Формы:<\/p>\n<ul>\n  <li>№ 4. <a href=\"https:\/\/www.youtube.com\/watch?v=bPSaKS1bbsE\">Двигаем простенькую форму регистрации, чтобы стало поаккуратнее<\/a><\/li>\n  <li>№ 5. <a href=\"https:\/\/www.youtube.com\/watch?v=OMJV8exdbnU\">Избавляемся от рамки, наводим порядок в корзине, упрощаем поля адреса, мочим звёздочки<\/a><\/li>\n  <li>№ 11. <a href=\"https:\/\/www.youtube.com\/watch?v=how0mkG7ui4\">Первое впечатление, синтаксис и язык формы заказа с доставкой<\/a><\/li>\n  <li>№ 15. <a href=\"https:\/\/www.youtube.com\/watch?v=c91KziF01sQ\">Верстаем, сокращаем, верстаем, сокращаем, верстаем, сокращаем форму<\/a><\/li>\n<\/ul>\n<p class=\"foot\">См. также тег: <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/web-forms\/\">веб-формы<\/a>.<\/p>\n<p>Таблицы:<\/p>\n<ul>\n  <li>№ 8. <a href=\"https:\/\/www.youtube.com\/watch?v=IvzDUzH-Sk0\">Сверхплотная упаковка шапки таблицы и вёрстка карманного словаря<\/a><\/li>\n  <li>№ 10. <a href=\"https:\/\/www.youtube.com\/watch?v=mE0pZIVgJLE\">Что не позволено базе данных, то позволено обычной таблице<\/a><\/li>\n<\/ul>\n<p class=\"foot\">См. также тег: <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/tables\/\">таблицы<\/a>.<\/p>\n<p>Редактура в дизайне:<\/p>\n<ul>\n  <li>№ 7. <a href=\"https:\/\/www.youtube.com\/watch?v=1DdsndXWHSE\">Механически редактируем примечание к таблице<\/a><\/li>\n  <li>№ 24. <a href=\"https:\/\/www.youtube.com\/watch?v=bxSu-Vx0Nz8\">Отступления от синтаксиса интерфейса и линейки в таблицах<\/a><\/li>\n<\/ul>\n<p>Эстетика:<\/p>\n<ul>\n  <li>№ 12. <a href=\"https:\/\/www.youtube.com\/watch?v=kmlb272BAdo\">Как делать градиенты в инфографике<\/a><\/li>\n  <li>№ 13. <a href=\"https:\/\/www.youtube.com\/watch?v=29GAdT6dXBA\">Упаковка таблицы, симультанный контраст и борьба за красоту цветов<\/a><\/li>\n  <li>№ 17. <a href=\"https:\/\/www.youtube.com\/watch?v=td6deeU-7kU\">Срисовываем экран интерфейса у Эпла, чтобы выглядело нормально<\/a><\/li>\n<\/ul>\n<p>Ход:<\/p>\n<ul>\n  <li>№ 6. <a href=\"https:\/\/www.youtube.com\/watch?v=BKu6wqOvgfg\">Ставим красную блямбу рядом с таблицей<\/a><\/li>\n  <li>№ 20. <a href=\"https:\/\/www.youtube.com\/watch?v=CaiDj7OOUbc\">Изображаем нестандартную конструкцию окна символом<\/a><\/li>\n  <li>№ 25. <a href=\"https:\/\/www.youtube.com\/watch?v=N2Qk697fe24\">Чтобы пользователь нажал, можно написать «Жми!» <\/a><\/li>\n<\/ul>\n<p>Инструмент:<\/p>\n<ul>\n  <li>№ 18. <a href=\"https:\/\/www.youtube.com\/watch?v=vHCy9izr0v4\">Последовательное волшебство в интерфейсе Фотошопа<\/a><\/li>\n<\/ul>\n<p>Разное:<\/p>\n<ul>\n  <li>№ 14. <a href=\"https:\/\/www.youtube.com\/watch?v=tYJMrY5zWlo\">Как работает автоматическая вёрстка рекомендаций в будущей Эгее 2.10<\/a><\/li>\n  <li>№ 21. <a href=\"https:\/\/www.youtube.com\/watch?v=fPVmyMbixXw\">Что бы я поменял в дизайне Бёрдвью спустя девять лет<\/a><\/li>\n  <li>№ 22. <a href=\"https:\/\/www.youtube.com\/watch?v=7Mc6IaaXNsc\">Технические ограничения и дизайн для будущего<\/a><\/li>\n  <li>№ 23. <a href=\"https:\/\/www.youtube.com\/watch?v=xq7ntaU6FTU\">Как продать подписку на «Афишу»<\/a><\/li>\n<\/ul>\n<p>А вы пока приходите на следующий курс, который пройдёт 3 февраля — 3 марта.<\/p>\n<p><a href=\"https:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "За те три года, что мой интерфейсный курс идёт в онлайне, я выложил уже больше сотни фрагментов с наших семинаров",
            "date_published": "2023-12-26T18:46:10+08:00",
            "date_modified": "2024-01-09T14:59:18+08:00",
            "tags": [
                "пользовательский интерфейс",
                "представление информации"
            ],
            "_date_published_rfc2822": "Tue, 26 Dec 2023 18:46:10 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6185",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "6180",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-131\/",
            "title": "На интерфейсном курсе: когда нужны моноширинные цифры",
            "content_html": "<p>Рассказываю на курсе, что моноширинные цифры нужны в таблицах и в случае динамических данных, показываю примеры. 3 минутки:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/2PC5L3tv6fA?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент № 131 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 8 сентября 2023 года.<\/p>\n<p>До 22 декабря идёт запись на курс, который пройдёт с 23 декабря по 21 января.<\/p>\n<p>Дед Мороз принесёт вам мешок новых знаний!<\/p>\n<p><a href=\"http:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "Рассказываю на курсе, что моноширинные цифры нужны в таблицах и в случае динамических данных, показываю примеры",
            "date_published": "2023-12-21T16:47:59+08:00",
            "date_modified": "2023-12-21T16:47:17+08:00",
            "tags": [
                "видео",
                "представление информации",
                "студентам",
                "таблицы",
                "фрагменты курса ПИ",
                "шрифты"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-2PC5L3tv6fA-cover.jpg",
            "_date_published_rfc2822": "Thu, 21 Dec 2023 16:47:59 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6180",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-2PC5L3tv6fA-cover.jpg"
                ]
            }
        },
        {
            "id": "6132",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/solar-system-model-melbourne-video\/",
            "title": "Видео по вторникам: модель Солнечной системы в Мельбурне",
            "content_html": "<p>Модель Солнечной системы в масштабе 1 к миллиарду в Мельбурне:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/ry122Jqpxu4?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Захотелось слетать в Мельбурн и посмотреть своими глазами. Очень мощное сравнение.<\/p>\n",
            "summary": "Модель Солнечной системы в масштабе 1 к миллиарду в Мельбурне",
            "date_published": "2023-10-31T14:47:35+08:00",
            "date_modified": "2023-10-31T03:35:42+08:00",
            "tags": [
                "видео",
                "представление информации",
                "сравнение"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-ry122Jqpxu4-cover.jpg",
            "_date_published_rfc2822": "Tue, 31 Oct 2023 14:47:35 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6132",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-ry122Jqpxu4-cover.jpg"
                ]
            }
        },
        {
            "id": "6107",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-117\/",
            "title": "На интерфейсном курсе: горизонтальная прокрутка в таблицах",
            "content_html": "<p>Что делать, если без горизонтальной прокрутки таблица не влезает? Может быть, всё-таки упихнуть. Может быть, дать частичную прокрутку, чтобы нужные вещи оставались в поле зрения. 4 минуты:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/PBzl0pIUqk0?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент № 117 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 4 мая 2023 года.<\/p>\n<p>До 6 октября идёт запись на курс, который пройдёт с 7 октября по 5 ноября.<\/p>\n<p><a href=\"http:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "Что делать, если без горизонтальной прокрутки таблица не влезает? Может быть, всё-таки упихнуть. Может быть, дать частичную прокрутку, чтобы нужные вещи оставались в поле зрения",
            "date_published": "2023-09-29T22:46:40+08:00",
            "date_modified": "2023-12-26T18:10:19+08:00",
            "tags": [
                "видео",
                "листание и прокрутка",
                "представление информации",
                "студентам",
                "таблицы",
                "фрагменты курса ПИ"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-PBzl0pIUqk0-cover.jpg",
            "_date_published_rfc2822": "Fri, 29 Sep 2023 22:46:40 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6107",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-PBzl0pIUqk0-cover.jpg"
                ]
            }
        },
        {
            "id": "6065",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-111\/",
            "title": "На интерфейсном курсе: нужны не круговые диаграммы, а таблица",
            "content_html": "<p>Небольшой кусочек, где я говорю, почему круговые диаграммы мешают въехать в данные, и почему тут нужна обычная таблица. 3 минуты:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/wJJdSn4Vk-Q?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент № 111 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 24 марта 2023 года.<\/p>\n<p>До 25 августа идёт запись на курс, который пройдёт с 26 августа по 24 сентября. Сейчас действует скидка 10% из-за ранней записи.<\/p>\n<p><a href=\"http:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "Небольшой кусочек, где я говорю, почему круговые диаграммы мешают въехать в данные, и почему тут нужна обычная таблица",
            "date_published": "2023-08-12T14:35:57+08:00",
            "date_modified": "2023-08-14T22:16:43+08:00",
            "tags": [
                "видео",
                "информационный дизайн",
                "круговые диаграммы",
                "представление информации",
                "студентам",
                "таблицы",
                "фрагменты курса ПИ"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-wJJdSn4Vk-Q-cover.jpg",
            "_date_published_rfc2822": "Sat, 12 Aug 2023 14:35:57 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6065",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-wJJdSn4Vk-Q-cover.jpg"
                ]
            }
        },
        {
            "id": "6058",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-110\/",
            "title": "На интерфейсном курсе: в чём проблема интерактивных графиков",
            "content_html": "<p>Участник курса нарисовал график, но он оказался интерактивным — разные данные на нём появляются в зависимости от того, куда кликнул пользователь. Рассказываю, почему это проблема даже на уровне подхода, но ещё разбираем и конкретные проблемы в самом интерфейсе. 6 минут:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/qsDWBf-xcVs?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент № 110 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 24 марта 2023 года.<\/p>\n<p>До 25 августа идёт запись на курс, который пройдёт с 26 августа по 24 сентября. Сейчас действует скидка 10% из-за ранней записи.<\/p>\n<p><a href=\"http:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "Участник курса нарисовал график, но он оказался интерактивным — разные данные на нём появляются в зависимости от того, куда кликнул пользователь",
            "date_published": "2023-08-08T14:27:55+08:00",
            "date_modified": "2023-08-14T22:16:33+08:00",
            "tags": [
                "видео",
                "информационный дизайн",
                "представление информации",
                "студентам",
                "фрагменты курса ПИ"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-qsDWBf-xcVs-cover.jpg",
            "_date_published_rfc2822": "Tue, 08 Aug 2023 14:27:55 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6058",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-qsDWBf-xcVs-cover.jpg"
                ]
            }
        },
        {
            "id": "5996",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-102\/",
            "title": "На интерфейсном курсе: как выравнивать цифры в таблицах",
            "content_html": "<p>Снова борюсь с заблуждением, что цифры надо выравнивать по правому краю. Цифры надо выравнивать по разрядам! Если у них в результате этого сравняются правые края — ну хорошо, но это побочный эффект, а не самоцель. А то, что все любят выравнивать по правому — так это потому что так быстрее напрограммировать. 3 минутки:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/QyHEWiMR_0A?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент № 102 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 16 декабря 2022 года.<\/p>\n<p>До 26 мая идёт запись на курс, который пройдёт с 27 мая по 25 июня.<\/p>\n<p><a href=\"http:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"button buy-button big-button\">Почитать о курсе<\/a><\/p>\n<p class=\"foot\">Программа, отзывы, запись<\/p>\n",
            "summary": "Снова борюсь с заблуждением, что цифры надо выравнивать по правому краю. Цифры надо выравнивать по разрядам",
            "date_published": "2023-05-20T15:17:06+08:00",
            "date_modified": "2023-08-14T22:14:03+08:00",
            "tags": [
                "видео",
                "представление информации",
                "студентам",
                "таблицы",
                "фрагменты курса ПИ"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-QyHEWiMR_0A-cover.jpg",
            "_date_published_rfc2822": "Sat, 20 May 2023 15:17:06 +0800",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5996",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-QyHEWiMR_0A-cover.jpg"
                ]
            }
        }
    ],
    "_e2_version": 4269,
    "_e2_ua_string": "Aegea 12.0a (v4269e)"
}