{
    "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\/web-design\/",
    "feed_url": "https:\/\/ilyabirman.ru\/meanwhile\/tags\/web-design\/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": "6446",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/potykat-v-interfeys-avtomobilya-onlayn\/",
            "title": "Потыкать в интерфейс автомобиля онлайн",
            "content_html": "<p>Я давно жалуюсь, что <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/task-wanted-mercedes-configurator\/\">все сайты автомобилей — ужасны<\/a>. Из них ничего нельзя понять. Начиная с того, что в интернете нереально даже найти подробную спецификацию. Если очень повезёт, будет бесконечный список пунктов типа «Интеллектуальная система управления бардачком», но нигде не будет объяснено, что конкретно и как она делает.<\/p>\n<p>С одной стороны, не исключено, что это всё специально, чтобы человек в любом случае ехал в салон, и его там уже окучивали. Но с другой стороны, мы знаем, что не нужно объяснять злым умыслом то, что легко объясняется глупостью.<\/p>\n<p>Короче, мне пришла в голову такая идея. У современных машин значительная часть элементов управления находятся на экране. Уж настройка-то всяких систем точно делается через экран. Почему бы не дать на сайте симулятор этого экрана? Вот прям чтобы я походил по меню, посмотрел, какие там есть параметры. Да, если я изменю оттенок подсветки салона, в моей реальной комнате ничё не изменится, но я хотя бы увижу, что там такое есть.<\/p>\n",
            "summary": "Я давно жалуюсь, что все сайты автомобилей — ужасны. Из них ничего нельзя понять. Начиная с того, что в интернете нереально даже найти подробную спецификацию",
            "date_published": "2025-02-26T09:10:09+02:00",
            "date_modified": "2025-02-26T09:10:06+02:00",
            "tags": [
                "автомобиль",
                "веб-дизайн",
                "пользовательский интерфейс"
            ],
            "_date_published_rfc2822": "Wed, 26 Feb 2025 09:10:09 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6446",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "6384",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/pro-solidnost-i-chelovechnost\/",
            "title": "Про солидность и человечность",
            "content_html": "<p>Из моего комментария к работе студентки:<\/p>\n<blockquote>\n<p>Выглядит по-деловому. Как будто компании 20 лет, в офисе у директора висят дипломы и сертификаты всякие. Иногда можно услышать довод, что такой вот «надёжный» вид кого-то привлекает, типа что это не какая-то хипстерская фирма-однодневка, а что-то серьёзное. Но я в это и раньше-то не верил, а уж когда даже все банки отказались от этого казённого вида и стали человечными, совсем верить перестал. Меня-то всё-таки волнует не солидность компании, а довезут ли мою хрупкую вещь. А страница как будто вообще не об этом.<\/p>\n<\/blockquote>\n<p>А то вдруг вы всё ещё солидный сайт хотите.<\/p>\n",
            "summary": "Из моего комментария к работе студентки",
            "date_published": "2024-11-02T09:54:02+02:00",
            "date_modified": "2024-11-02T09:53:55+02:00",
            "tags": [
                "веб-дизайн",
                "человечность"
            ],
            "_date_published_rfc2822": "Sat, 02 Nov 2024 09:54:02 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6384",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "6317",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/unicorn-blitz\/",
            "title": "Блиц-редизайн сайта «Уникорн»",
            "content_html": "<p>Запилили <a href=\"https:\/\/ilyabirman.ru\/unicorn\/\">блиц-редизайн сайта «Уникорн»<\/a>:<\/p>\n<div class=\"e2-text-picture\">\n<a href=\"https:\/\/ilyabirman.ru\/unicorn\/\" class=\"e2-text-picture-link\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/unicorn-blitz-cover.jpg\" width=\"1200\" height=\"936\" alt=\"\" \/>\n<\/a><\/div>\n<p>Повысили конверсию на 20% среди новых покупателей и на 13% среди возвращающихся. Приходите тоже за блиц-редизайном.<\/p>\n",
            "summary": "Запилили блиц-редизайн сайта «Уникорн»",
            "date_published": "2024-07-08T15:21:11+02:00",
            "date_modified": "2024-07-08T15:20:24+02:00",
            "tags": [
                "веб-дизайн",
                "дизайн",
                "проекты",
                "работа"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/unicorn-blitz-cover.jpg",
            "_date_published_rfc2822": "Mon, 08 Jul 2024 15:21:11 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6317",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/unicorn-blitz-cover.jpg"
                ]
            }
        },
        {
            "id": "6221",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/alfa-medical-video\/",
            "title": "Разбор дизайна сайта компании «Альфа-Медикал»",
            "content_html": "<p>Недавно я выложил на сайте рассказ <a href=\"https:\/\/ilyabirman.ru\/alfa-medical\/\">о дизайне сайта компании «Альфа-Медикал»<\/a>. Теперь снял про него более подробное видео. Рассказываю о том, почему он именно такой, что нужно было в нём учесть. Видео будет полезно дизайнерам и интернет-предпринимателям:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/xaEn82FX64A?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<p>\n00:00 Интро и что за компания «Альфа-Медикал»<br \/>\n03:46 Схема «Вы — Мы» — визуализация роли компании<br \/>\n04:24 Информативное главное меню сайта<br \/>\n05:02 Приёмы управления вниманием в большой текстовой странице<br \/>\n05:57 В основе сайта — ситуации<br \/>\n07:44 Этаж про деньги<br \/>\n11:06 Работа над текстом и согласование с клиентом<br \/>\n11:51 Котекстные отзывы как ещё один способ разнообразить  подачу<br \/>\n12:49 Этаж про компетентность<br \/>\n13:23 Плавающая кнопка с телефоном<br \/>\n14:02 Страница ситуации<br \/>\n19:24 Шаблонизация и переиспользование текста в ситуациях<br \/>\n21:36 Зачем каждой ситуации нужна своя страница: забота и сео в одном<br \/>\n23:01 Страница «Команда» тоже не про команду, а про клиента<br \/>\n24:52 Страница «Контакты» помогает решиться обратиться в компанию<br \/>\n26:10 Мобильная версия — полноценная, и даже меню не спрятано<br \/>\n26:54 Итоги и как поработать со мной<br \/>\n<\/p>\n<\/div>\n",
            "summary": "Недавно я выложил на сайте рассказ о дизайне сайта компании «Альфа-Медикал». Теперь снял про него более подробное видео",
            "date_published": "2024-01-23T21:26:52+02:00",
            "date_modified": "2024-01-23T21:29:38+02:00",
            "tags": [
                "веб-дизайн",
                "видео",
                "дизайн сайтов",
                "проекты",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-xaEn82FX64A-cover.jpg",
            "_date_published_rfc2822": "Tue, 23 Jan 2024 21:26:52 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6221",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "jquery\/jquery.js",
                    "jquery\/jquery.js",
                    "media-seek\/media-seek.js"
                ],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-xaEn82FX64A-cover.jpg"
                ]
            }
        },
        {
            "id": "6052",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/dom-toma-video\/",
            "title": "Разбор дизайна интернет-магазина «Дом Тома»",
            "content_html": "<p>Недавно я выложил на сайте рассказ <a href=\"https:\/\/ilyabirman.ru\/dom-toma\/\">о дизайне интернет-магазина «Дом Тома»<\/a>. Теперь снял про него более подробное видео. Рассказываю о том, почему он именно такой, что нужно было в нём учесть. Видео будет полезно дизайнерам и интернет-предпринимателям:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/fuiOIJDT2aQ?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<p>\n00:00 Интро<br \/>\n02:33 Подробное главное меню: навигация и вовлечение<br \/>\n03:55 Внесение разнообразия в списки<br \/>\n06:29 Фотографии товаров в разном стиле<br \/>\n07:48 Товар представляет себя и свой отдел<br \/>\n10:03 Акции и банеры распределены по странице<br \/>\n11:56 Как показать намного больше товаров: этажи отделов<br \/>\n13:57 Строчка того, что люди ищут<br \/>\n15:20 Нестрогое разделение товаров по отделам<br \/>\n16:15 «Новые товары декабря»<br \/>\n17:11 Ещё про меню и подвал<br \/>\n18:40 Дизайн подходит для разработки<br \/>\n19:58 Инстаграм<br \/>\n20:50 Мобильная версия олжна быть полноценной, а не урезанной<br \/>\n22:17 Как поработать со мной<br \/>\n<\/p>\n<\/div>\n",
            "summary": "Недавно я выложил на сайте рассказ о дизайне интернет-магазина «Дом Тома». Теперь снял про него более подробное видео",
            "date_published": "2023-08-03T07:19:41+02:00",
            "date_modified": "2024-01-23T18:29:38+02:00",
            "tags": [
                "веб-дизайн",
                "видео",
                "дизайн сайтов",
                "проекты",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-fuiOIJDT2aQ-cover.jpg",
            "_date_published_rfc2822": "Thu, 03 Aug 2023 07:19:41 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6052",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [
                    "jquery\/jquery.js",
                    "jquery\/jquery.js",
                    "media-seek\/media-seek.js"
                ],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-fuiOIJDT2aQ-cover.jpg"
                ]
            }
        },
        {
            "id": "6044",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/jackson-pollock-website\/",
            "title": "О сайте Джексона Поллока и визуальном богатстве",
            "content_html": "<p>Искал я картины Поллока (рекомендую), и набрёл на некий сайт <a href=\"https:\/\/www.jackson-pollock.org\">jackson-pollock.org<\/a>:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/jackson-pollock-1@2x.jpg\" width=\"1136\" height=\"1137\" alt=\"\" \/>\n<\/div>\n<p>Тут миллион совершенно детских ошибок — и в вёрстке, и в типографике, и в навигации, и в графдизайне элементов интерфейса, и чисто технических. Сложно найти хоть что-то, что сделано хотя бы <i>нормально<\/i>. Но я хочу сказать о другом.<\/p>\n<p>Частая проблема дизайнера — недостаток визуального материала. Делаешь ты сайт про инвестиции, и тебе всю красоту приходится изобретать из цифр и графиков — никакого визуального богатства там сходу не видно. Или про грузоперевозки какие-нибудь — ну контейнеры, ну грузовики, так кто их не видел? А особенно сложно в таких случаях чем-то отличаться от других. Окей, красивые графики и грузовики, но у конкурентов-то точно такие же красивые графики и грузовики.<\/p>\n<p>Но иногда сам предмет настолько богат визуальными деталями, что ничего даже придумывать не надо. Просто бери и не порти. В недавних <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/video-zhivyh-sovetov-iyunya-2023-goda\/\">живых советах<\/a> я тоже об этом говорил. Там девушка сделала приложение про места отдыха на красивом озере, нарисовала монохромную карту с одинаковыми иконками мест и умудрилась не показать фотографии!<\/p>\n<p>Ну и вот наш Поллок несчастный:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/jackson-pollock-2@2x.jpg\" width=\"1136\" height=\"1137\" alt=\"\" \/>\n<\/div>\n<p>Картина показана на уменьшенной и плохой фотографии, не подписана. Снизу — три совсем микроскопических картины в листаемой галерее. Почему нельзя делать листаемые галереи — рассказывал в самом начале <a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/public-consultation-koftyonyshi\/\">одной из публичных консультаций<\/a>. В середине мы видим ту же самую картину, что показана выше, но в других цветах! Получается, автору сайта нельзя доверить и цветопередачу. Но ты ж картины показываешь, а не метизы! Также картина снизу обрезана с краёв — непонятно, по какому праву.<\/p>\n<p>Сравните <a href=\"https:\/\/stamps.vla.so\">с сайтом про марки<\/a>:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/stamps-website@2x.jpg\" width=\"1136\" height=\"1136\" alt=\"\" \/>\n<\/div>\n<p>Кажется, Поллок заслужил уважения хотя бы на уровне почтовых марок?<\/p>\n",
            "summary": "Искал я картины Поллока (рекомендую), и набрёл на некий сайт jackson-pollock.org",
            "date_published": "2023-07-26T08:19:04+02:00",
            "date_modified": "2023-07-26T08:28:49+02:00",
            "tags": [
                "веб-дизайн",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/jackson-pollock-1@2x.jpg",
            "_date_published_rfc2822": "Wed, 26 Jul 2023 08:19:04 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "6044",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/jackson-pollock-1@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/jackson-pollock-2@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/stamps-website@2x.jpg"
                ]
            }
        },
        {
            "id": "5918",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-82\/",
            "title": "На интерфейсном курсе: заранее спросить у клиента про сео и персональные данные",
            "content_html": "<p>Участница подумала, что в дизайне хорошо бы сразу учесть закон о персональных данных. Я дополняю тем, что хорошо бы сразу учесть и требования сеошников. 3 минутки:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/2qV6CCRT6lA?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент № 82 онлайн-курса «Пользовательский интерфейс и представление информации». Записано на курсе 27 мая 2022 года.<\/p>\n<p>До 2 декабря идёт запись на курс, который пройдёт с 3 декабря по 1 января.<\/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": "2022-12-01T09:31:50+02:00",
            "date_modified": "2023-12-26T12:13:12+02:00",
            "tags": [
                "веб-дизайн",
                "веб-разработка",
                "видео",
                "переговоры",
                "студентам",
                "фрагменты курса ПИ"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-2qV6CCRT6lA-cover.jpg",
            "_date_published_rfc2822": "Thu, 01 Dec 2022 09:31:50 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5918",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-2qV6CCRT6lA-cover.jpg"
                ]
            }
        },
        {
            "id": "5917",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/scaling-faces\/",
            "title": "Масштаб лиц в наборе",
            "content_html": "<p>«Политех» пишет про учёных с инвалидностью и показывает такую картинку:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/faces-zoom-1-polytech@2x.jpg\" width=\"540\" height=\"540\" alt=\"\" \/>\n<\/div>\n<p>Распространённый дизайнерский косяк, когда ставят много фоточек рядом, засовывают в одинаковую форму, но при этом сами фотки внутри — в очень разном масштабе.<\/p>\n<p>Аккуратнее, когда все в одинаковом масштабе (цвете, свете). При этом небольшие отличия в ракурсе или головном уборе могут добавить жизни:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/faces-zoom-2@2x.jpg\" width=\"494\" height=\"347\" alt=\"\" \/>\n<\/div>\n<p>«Ваерд» в своё время хакнул систему: нарушил правило масштаба, но зато посадил всех за один стол, одел в чёрное и покрасил в одинаковый киношный тил-оранж:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/faces-zoom-3-wired@2x.jpg\" width=\"1061\" height=\"938\" alt=\"\" \/>\n<\/div>\n",
            "summary": "«Политех» пишет про учёных с инвалидностью и показывает такую картинку",
            "date_published": "2022-11-30T12:46:41+02:00",
            "date_modified": "2022-11-30T12:49:04+02:00",
            "tags": [
                "веб-дизайн",
                "дизайн",
                "информационный дизайн",
                "обработка фото",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/faces-zoom-1-polytech@2x.jpg",
            "_date_published_rfc2822": "Wed, 30 Nov 2022 12:46:41 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5917",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/faces-zoom-1-polytech@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/faces-zoom-2@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/faces-zoom-3-wired@2x.jpg"
                ]
            }
        },
        {
            "id": "5620",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/bureau-school-lecture-systematization\/",
            "title": "Немного юай-китов Ворлд Чесса, Квартирки и Эпла",
            "content_html": "<p>В школах бюро добавилась лекция «Систематизация» про стандарты, гайдлайны, сетки, юай‑киты и дизайн‑системы. О чём речь:<\/p>\n<blockquote>\n<p>Когда сайт состоит из десяти экранов, нет проблем отрисовать и проверить каждый вручную. Но когда экранов сотни, рисовать каждый долго и дорого. Пока всё утвердишь, половина устареет. В таких больших проектах дизайнеров много, и если каждый придумает свою кнопку, то на сайте будет разнобой. Чтобы ускорить и упростить развитие продукта, нужно стандартизировать интерфейс. С подробным юай‑китом или библиотекой компонентов дизайнеру не нужно каждый раз придумывать новые элементы — он берёт готовый и добавляет на страницу.<\/p>\n<p>В лекции Илья Бирман рассказывает, как постепенно стандартизировать дизайнерские решения в продукте — от сетки и кегля подписей до пользовательских сценариев. Вы узнаете, как подойти к созданию дизайн‑системы, чтобы получить не бесполезный набор картинок, а удобный инструмент.<\/p>\n<\/blockquote>\n<p>Вот коротенький фрагмент про юайкиты — показываю Ворлд Чесса, Квартиркe и Эпл:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/y3pjQMfiexE?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Это фрагмент одной из 36 лекций по дисциплине «Интерфейс и информация» в Школах бюро. Набор в школы открыт: чем раньше поступите, тем ниже стоимость и выше шанс на бесплатное место. <a href=\"http:\/\/bureau.ru\/school\/\">Программа школы и как поступить<\/a><\/p>\n<p>Также эти лекции доступны слушателям моего онлайн-курса <a href=\"https:\/\/bureau.ru\/educenter\/ui-online\/\" class=\"nu\">«<u>Пользовательский интерфейс и представление информации<\/u>»<\/a>.<\/p>\n",
            "summary": "В школах бюро добавилась лекция «Систематизация» про стандарты, гайдлайны, сетки, юай‑киты и дизайн‑системы",
            "date_published": "2021-03-24T09:47:11+02:00",
            "date_modified": "2021-03-24T09:46:23+02:00",
            "tags": [
                "веб-дизайн",
                "видео",
                "дизайн продуктов",
                "дизайнерская терминология",
                "курсы",
                "обновление лекций в школах бюро",
                "Школа бюро"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-y3pjQMfiexE-cover.jpg",
            "_date_published_rfc2822": "Wed, 24 Mar 2021 09:47:11 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5620",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-y3pjQMfiexE-cover.jpg"
                ]
            }
        },
        {
            "id": "5594",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/to-the-point\/",
            "title": "Сразу к делу, а не «Перейти»",
            "content_html": "<p>Вот фрагмент студенческой работы:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/inline-vs-goto.jpg\" width=\"1200\" height=\"680\" alt=\"\" \/>\n<\/div>\n<p>Тут кнопка «Перейти к опросу». Ну кому охота переходить к опросу? Никто не прочитает даже уговаривания про «всего несколько минут».<\/p>\n<p>Надо было просто взять и прям тут влепить первый вопрос:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/inline-vs-goto-2.jpg\" width=\"1200\" height=\"680\" alt=\"\" \/>\n<\/div>\n<p>Сразу эффект другой. Как тут не ответить?<\/p>\n<p><b>В общем:<\/b> сразу к делу, а не «Перейти».<\/p>\n",
            "summary": "Тут кнопка «Перейти к опросу». Ну кому охота переходить к опросу?",
            "date_published": "2021-02-19T21:20:23+02:00",
            "date_modified": "2021-02-19T21:17:52+02:00",
            "tags": [
                "веб-дизайн",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/inline-vs-goto.jpg",
            "_date_published_rfc2822": "Fri, 19 Feb 2021 21:20:23 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5594",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/inline-vs-goto.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/inline-vs-goto-2.jpg"
                ]
            }
        },
        {
            "id": "5593",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/ui-course-frag-30\/",
            "title": "На интерфейсном курсе: метод «Например»",
            "content_html": "<p>Когда делаешь любой конструктор, конфигуратор, калькулятор — ставишь перед пользователем препятствие. Человеку уже нужно что-то настраивать, чтобы получить интересующую его информацию. Лучше сразу что-то предположить и предзаполнить, привести пример:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/-np87CaMjKs?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<p>\n00:00 Обсуждение участников<br \/>\n00:39 Метод «Например» в конфигураторе окон<br \/>\n02:29 Метод «Например» в лондоских киосках велопроката<br \/>\n<\/p>\n<\/div>\n<p>Это фрагмент № 30 онлайн-курса «Пользовательский интерфейс и представление информации».<br \/>\nЗаписано на курсе 20 ноября 2020 года.<\/p>\n<p>До 7 марта идёт запись на курс, который пройдёт с 13 марта по 9 апреля:<\/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": "2021-02-19T21:04:04+02:00",
            "date_modified": "2023-12-26T10:46:42+02:00",
            "tags": [
                "веб-дизайн",
                "видео",
                "курсы",
                "метод",
                "пользовательский интерфейс",
                "студентам",
                "фрагменты курса ПИ"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube--np87CaMjKs-cover.jpg",
            "_date_published_rfc2822": "Fri, 19 Feb 2021 21:04:04 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5593",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [
                    "jquery\/jquery.js",
                    "jquery\/jquery.js",
                    "media-seek\/media-seek.js"
                ],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube--np87CaMjKs-cover.jpg"
                ]
            }
        },
        {
            "id": "5411",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/clipart\/",
            "title": "Бесполезная заставка в начале страницы",
            "content_html": "<p>Бывает, сайт начинается с большой «красивой» заставки:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/clipart-1.jpg\" width=\"1112\" height=\"696\" alt=\"\" \/>\n<\/div>\n<p>Или так:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/clipart-2.jpg\" width=\"1088\" height=\"966\" alt=\"\" \/>\n<\/div>\n<p>Это учебные работы из школы бюро, не предназначенные для публикации, поэтому в них могут быть использованы какие-то картинки «из интернета». Но откуда бы ни были эти картинки, первое ощущение от них — это «клипарт», то есть просто левые стоковые фотки, не имеющие отношения к делу и стоящие тут оттого, что дизайнер пытался сделать нарядно.<\/p>\n<p>Ладно ещё у нас клёвые студенты и хотя бы ставят картинки по теме, а в жизни бывает вообще тупость: сайт программы бухучёта, а сверху большая фотография девушки с Макбуком и улыбкой. Видимо, имеется в виду, что девушка счастлива пользоваться такой классной программой.<\/p>\n<p>Проблема таких картинок-заставок в том, что они пассивны: ничего не говорят о самом продукте и не помогают о нём узнать и его купить. Обычно их нужно прокрутить, и тогда тебе уже покажут что-то настоящее. Ты даже не уверен до конца: это просто фотка для настроения или на ней хотя бы продукт, который можно где-то купить на этом сайте. Если же мне удалось-таки поверить и захотеть продукт прямо с первой фотки, то непонятно, почему я не могу его купить сразу, а должен искать где-то ещё.<\/p>\n<p>Если снять фотографии специально для этого места на сайте, они не перестанут быть «клипартом» в этом смысле.<\/p>\n<p>Чтобы сделать полезный этаж, нужно оживить продукт на фотографии: привлечь внимание к важным деталям, добавить кнопку «Купить». Даже простой текстовый ценник уже превращает заставку в карточку продукта:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/non-clipart.jpg\" width=\"1024\" height=\"890\" alt=\"\" \/>\n<\/div>\n<p>Ну, это если продукт на фотографии хотя бы есть, а не как в случае с довольной бухгалтершей.<\/p>\n",
            "summary": "Бывает, сайт начинается с большой «красивой» заставки",
            "date_published": "2020-08-26T11:37:30+02:00",
            "date_modified": "2020-08-26T11:37:08+02:00",
            "tags": [
                "веб-дизайн",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/clipart-1.jpg",
            "_date_published_rfc2822": "Wed, 26 Aug 2020 11:37:30 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5411",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/clipart-1.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/clipart-2.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/non-clipart.jpg"
                ]
            }
        },
        {
            "id": "5116",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/form-validation-videoblog\/",
            "title": "Валидация форм и незаполненные поля",
            "content_html": "<p>Этот выпуск видеоблога-подкаста — для веб-разработчиков. Рассказываю, как нормально валидировать формы и что делать с незаполненными полями. Обязательно покажите коллегам:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/IS_FqA3K_YI?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n<p>Подкаст-версия для тех, кто в дороге:<\/p>\n<div class=\"e2-text-audio\">\n<div class=\"e2-jouele-wrapper\"><a class=\"jouele\" data-space-control=\"true\" data-length=\"873\" href=\"https:\/\/ilyabirman.ru\/meanwhile\/audio\/104-ilya-birman-form-validation.mp3\">Валидация форм и незаполненные поля<\/a><\/div>\n<\/div>\n<p>Сначала — догонка, а тема начинается с 4:56.<\/p>\n<p>Ссылки из выпуска:<\/p>\n<ul>\n  <li><a href=\"https:\/\/ilyabirman.ru\/projects\/moscow-metro\/reloaded\/\">Как нужно назвать линии метро<\/a><\/li>\n  <li><a href=\"http:\/\/bureau.ru\/educenter\/ui\/\">Курс об интерфейсе<\/a>, где говорим, в том числе, про формы<\/li>\n<\/ul>\n<p>Кстати, на подкаст-версию теперь можно подписаться по РСС и слушать в подкастных программах:<\/p>\n<blockquote>\n<p><a href=\"https:\/\/ilyabirman.ru\/meanwhile\/tags\/podcast\/rss\/\">https:\/\/ilyabirman.ru\/meanwhile\/tags\/podcast\/rss\/<\/a><\/p>\n<\/blockquote>\n<p>В Айтюнс-каталог пока не добавил — там надо ещё доработать разное, но по прямому урлу добавляется и работает, попробуйте!<\/p>\n",
            "summary": "Этот выпуск видеоблога-подкаста — для веб-разработчиков. Рассказываю, как нормально валидировать формы и что делать с незаполненными полями...",
            "date_published": "2019-09-13T15:18:42+02:00",
            "date_modified": "2019-12-07T19:02:50+02:00",
            "tags": [
                "веб-дизайн",
                "веб-разработка",
                "видеоблог",
                "подкаст",
                "пользовательский интерфейс"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-IS_FqA3K_YI-cover.jpg",
            "_date_published_rfc2822": "Fri, 13 Sep 2019 15:18:42 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "5116",
            "_rss_enclosures": [
                {
                    "url": "https:\/\/ilyabirman.ru\/meanwhile\/audio\/104-ilya-birman-form-validation.mp3",
                    "type": "audio\/mpeg",
                    "length": 14161689
                }
            ],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [
                    "jquery\/jquery.js",
                    "jouele\/jouele.css",
                    "jouele\/jouele.js"
                ],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-IS_FqA3K_YI-cover.jpg"
                ]
            }
        },
        {
            "id": "4803",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/task-wanted-mercedes-configurator\/",
            "title": "Хочу задачу: конфигуратор Мерседеса",
            "content_html": "<p>Когда-то я писал совет, где сравнил присланный дизайн сайта <a href=\"https:\/\/bureau.ru\/bb\/soviet\/20160614\/\">с дизайном сайта Мерседеса<\/a>. С тех пор сайт Мерседеса изменился, но как был, так и остался удивительной лажей:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/mercedes-benz-ru.jpg\" width=\"1136\" height=\"1525\" alt=\"\" \/>\n<\/div>\n<p>В начале картинка с бессмысленным заголовком и текстом «Перейти к предложению». Сразу-то нельзя предложение сформулировать? В меню видим пункты «Модельный ряд» и «Купить». Куда мне идти, если я хочу купить, выбрав из модельного ряда? Снизу стоят четыре микроскопических машинки и больше ничего нет. Зачем прятать остальные за ссылку «Показать больше»?.. Ну да ладно, тут можно про каждую деталь писать отдельный пост о том, почему это всё бред.<\/p>\n<p>В принципе, такая же история и у Ауди:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/audi-ru.jpg\" width=\"1136\" height=\"1525\" alt=\"\" \/>\n<\/div>\n<p>— В каком браузере вы проверяли вёрстку?<br \/>\n— В смысле, а её надо ещё в браузере проверять?<\/p>\n<p>И у БМВ не лучше:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/bmw-ru.jpg\" width=\"1136\" height=\"1525\" alt=\"\" \/>\n<\/div>\n<p>Удивительно, но все сайты производителей автомобилей сделаны отвратительно, причём чем круче автомобиль, тем хуже сайт.<\/p>\n<p>Так плохо даже студенческие работы делать нельзя, а тут сайты главных автопроизводителей в мире. Такое ощущение, что они считают, что они выше всего этого веба.<\/p>\n<p>Но вернёмся к Мерседесу, это же пост про его конфигуратор. Я хотел попытаться понять, сколько будет стоить подходящая мне машина, и пошёл в конфигуратор. Если вы уже имели дело с конфигураторами, вы уже почувствовали боль уже от одного слова. Автопроизводители делают всё, чтобы там нихрена нельзя было понять и покупатель максимально страдал, выбирая машину.<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/mercedes-benz-ru-cfg.jpg\" width=\"2272\" height=\"3050\" alt=\"\" \/>\n<\/div>\n<p>«Фильтр (0), Сортировать по..., Загрузить онлайн-код» — такое ощущение, что я попал в программу управления складом фанеры, написанную 15 лет назад и с тех пор ни разу не тронутую. Вёрстки нет нигде никакой, особенно посмотрите на прямоугольники с машинами! Полная жесть, основные характеристики вывалили просто из базы данных как есть, как будто это сайт для оптовой закупки метизов в Саратовской области. Хотя чего это я обижаю Саратовскую область? Там бы по-любому сделали сайт получше.<\/p>\n<p>Ткнул в первую тачку, и попал сюда:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/mercedes-benz-ru-cfg-2.jpg\" width=\"1136\" height=\"1525\" alt=\"\" \/>\n<\/div>\n<p>Специальная модель, Специальная модель, Специальная модель! Что специальная модель? Нихрена непонятно: три аббревиатуры, милипусечная картинка, 220 штук. Весь смысл спрятан хрен знает куда. Слева от большой тачки сверху неведомые иконки. Просто мрак какой-то.<\/p>\n<p>Кручу ниже, и там начинается самый смак — опции:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/mercedes-benz-ru-cfg-3.jpg\" width=\"1136\" height=\"1525\" alt=\"\" \/>\n<\/div>\n<p>Это безумие одинаковое у всех. Во-первых, у всех опций максимально тупые, бессмысленно «продающие» названия, из которых нереально понять, в чём суть опции. Во-вторых, картинки нихрена не иллюстрируют и не объясняют. В-третьих, опции уложены по-масонски, чтобы я в них заблудился. И там такой хреноты восемь экранов.<\/p>\n<p>Имеется пакет курильщика, но не пакет здорового человека:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/mercedes-benz-ru-cfg-4.jpg\" width=\"1136\" height=\"1525\" alt=\"\" \/>\n<\/div>\n<p>Видите, целая куча фигни, которая стоит 0. Казалось бы, надо брать? Ну, может, кроме «[SA-634] Отсутствие аптечки». Но нет, дело в том, что на самом деле все указанные тут цены ничего не значат. Вот ставлю я галочку у «[SA-B24] Пульта д. у.», а мне говорят:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/mercedes-benz-ru-cfg-5.jpg\" width=\"1136\" height=\"1525\" alt=\"\" \/>\n<\/div>\n<p>То есть да, пульт-то бесплатный, но это потому что он входит в опцию «Стояночное отопление», которая стоит 117 штук. Ёлки, так нахрена вы мне тогда пульт отдельно предлагаете?<\/p>\n<p>И оно всё так. После включения любой галочки сайт 5 секунд думает, и потом может её включить, а может сказать, что для её включения нужно выключить три других.<\/p>\n<p>Я понимаю, что весь этот мир опций и пакетов — очень сложный. Чтобы всё это распутать и сделать нормальный интерфейс конфигуратора, который ещё и выдержит постоянные изменения, нужно несколько месяцев кропотливой работы. И это не считая разработки, к которой нужно привлекать квалифицированных программистов, которые не будут заставлять человека ждать после каждого клика.<\/p>\n<p>Но я бы вот очень хотел такую задачу. Сделать конфигуратор Мерседеса. Чтобы он сам стал Мерседесом среди конфигураторов. Мне непонятно, почему выбор машины должен быть формой пытки. Я уверен, что с него уже должен начинаться кайф.<\/p>\n<p>Мерседес, давай попробуем сделать?<\/p>\n<p>С одной стороны, Мерседес, конечно, может себе позволить не думать о том, какой у него сайт. С другой стороны, Мерседес может себе позволить и сделать нормальный сайт.<\/p>\n",
            "summary": "Когда-то я писал совет, где сравнил присланный дизайн сайта с дизайном сайта Мерседеса. С тех пор сайт Мерседеса изменился, но как был, так и остался удивительной лажей",
            "date_published": "2018-06-30T08:58:28+02:00",
            "date_modified": "2018-06-30T08:56:16+02:00",
            "tags": [
                "автомобиль",
                "веб-дизайн",
                "хочу задачу"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/mercedes-benz-ru.jpg",
            "_date_published_rfc2822": "Sat, 30 Jun 2018 08:58:28 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "4803",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/mercedes-benz-ru.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/audi-ru.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/bmw-ru.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/mercedes-benz-ru-cfg.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/mercedes-benz-ru-cfg-2.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/mercedes-benz-ru-cfg-3.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/mercedes-benz-ru-cfg-4.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/mercedes-benz-ru-cfg-5.jpg"
                ]
            }
        },
        {
            "id": "4787",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/gray-text\/",
            "title": "Серый текст на белом и на чёрном",
            "content_html": "<p>Сейчас расскажу вам о том, как можно относиться к серому цвету на белом и на чёрном фоне.<\/p>\n<p>Белый фон — это бумага, а текст на нём — это оттиск набора с краской. Поэтому серого текста на белом фоне быть не может: краска-то одна! Серый на белом выглядит компромиссно и поддельно:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/gray-1.png\" width=\"1200\" height=\"630\" alt=\"\" \/>\n<\/div>\n<p>Вместо оттенков серого в типографике используется разная жирность шрифта. Хочется сделать текст легче — возьми более тонкое начертание, но цвет оставь чёрным. Типографично:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/gray-2.png\" width=\"1200\" height=\"630\" alt=\"\" \/>\n<\/div>\n<p>Чёрный фон — это темнота, а текст на нём — это свет. Поэтому серый цвет — это просто приглушённый свет. Серый на чёрном выглядит естественно, потому что яркость света может быть совершенно любой:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/gray-3.png\" width=\"1200\" height=\"630\" alt=\"\" \/>\n<\/div>\n<p>Он как бы не «серый», а просто темнее. А вот жирность на чёрном работает плохо — разницы между заголовком и текстом почти не видно:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/gray-4.png\" width=\"1200\" height=\"630\" alt=\"\" \/>\n<\/div>\n<p>Я ещё в самом тексте одно из слов выделил жирным, но сделал бледнее на четверть — оно полностью растворилось среди соседних.<\/p>\n<p>У меня на сайте на всех страницах на белом фоне заголовки жирные (пример: <a href=\"https:\/\/ilyabirman.ru\/projects\/jouele\/documentation\/\">документация по Жуэлю<\/a>). Но есть несколько страниц на тёмном, и там жирности недостаёт для выделения заголовков. Чтобы они зажглись, приходится делать текст «тусклее» (пример: <a href=\"https:\/\/ilyabirman.ru\/projects\/wireless-dj\/2\/\">Вайрлесс-диджей<\/a>).<\/p>\n<p>Итого: серый на белом — искусственно; тусклый на чёрном — естественно. Это полезное знание на случай, если вы делаете разные светлый и тёмный скины для какой-то программы или сайта. Нужно, чтобы ваша система скинов умела менять и цвета, и жирность.<\/p>\n<p>Ещё про серый текст:<br \/>\n<a href=\"https:\/\/ilyabirman.ru\/meanwhile\/all\/ne-zablednyay\/\">Не забледняй<\/a><\/p>\n",
            "summary": "Сейчас расскажу вам о том, как можно относиться к серому цвету на белом и на чёрном фоне...",
            "date_published": "2018-05-30T14:09:39+02:00",
            "date_modified": "2018-05-30T15:01:06+02:00",
            "tags": [
                "веб-дизайн",
                "дизайн",
                "типографика"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/gray-1.png",
            "_date_published_rfc2822": "Wed, 30 May 2018 14:09:39 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "4787",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/gray-1.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/gray-2.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/gray-3.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/gray-4.png"
                ]
            }
        },
        {
            "id": "4698",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/therules-website-2-stuff\/",
            "title": "Ещё штуки в Зерулсе 2.0",
            "content_html": "<p>Хочу ещё рассказать про пару дизайнерских фокусов <a href=\"http:\/\/therules.ru\/\">в новом Зерулсе<\/a>.<\/p>\n<p>Во-первых, у нас два стиля ссылок: синие для переходов внутри сайта и чёрные-подчёркнутые для уходов наружу. Мы решили не подчёркивать внутренние ссылки, как Википедия. Учитывая, что на сайте нет других цветов, путаницы между ссылкой и не ссылкой не возникнет.<\/p>\n<p>Во-вторых, у сайта нет ни логотипа, ни даже заголовка. Кто бы мог подумать, что так можно? Роль логотипа-заголовка играет поле поиска сверху, в котором написано «Поиск по правилам русского языка». Этот текст работает и как подпись к полю, и как название сайта. Подобные подписи в полях обычно пишут бледно-серым, но мы тут сделали исключение именно из-за второй функции этого текста. Сравните <a href=\"https:\/\/ilyabirman.ru\/projects\/therules\/web\/\">со старым сайтом<\/a> — там я ещё не догадался, что заголовка можно не делать.<\/p>\n<p>В-третьих, смотрите, как это поле подвисает при прокрутке. В Сафари оно становится матово-прозрачным, но при этом в узкой полоске над полем прокручивающийся текст не просвечивает. Это нелогично, но так красивее.<\/p>\n<p>В-четвёртых, смотрите, как ведёт себя этажик ссылок на Эгею-Раскладку-Главред снизу. При растягивании окна он не тянется, а выравнивается по центру. Но в окне 1024 он левым краем выравнивается строго по левой колонке оглавления. Если бы мы просто оставили так, то при ширине, скажем, 1038, этажик бы «почти, но не совсем» выравнивался с левой колонкой, а это отстой. Поэтому на самом деле он выравнивается с ней строго до некоторой ширины, а после этого уже резко прыгает в центровку. Попробуйте поизменять ширину окна.<\/p>\n<p>В-пятых, поводите мышкой по ссылкам на главной. Обратите внимание, что там непрерывная зона клика, между ссылками нет дыр. Это чтобы Фиттс был доволен.<\/p>\n<p>Наверняка что-то забыл.<\/p>\n<p>См. также <a href=\"https:\/\/ilyabirman.ru\/projects\/therules\/web2\/\">страничку о проекте<\/a>.<\/p>\n",
            "summary": "Хочу ещё рассказать про пару дизайнерских фокусов в новом Зерулсе",
            "date_published": "2018-02-07T16:27:30+02:00",
            "date_modified": "2018-02-26T10:21:04+02:00",
            "tags": [
                "веб-дизайн",
                "дизайн",
                "Зерулс",
                "пользовательский интерфейс",
                "продукты",
                "проекты"
            ],
            "_date_published_rfc2822": "Wed, 07 Feb 2018 16:27:30 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "4698",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": []
            }
        },
        {
            "id": "4654",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/adaptivnost-po-kusochkam\/",
            "title": "Адаптивность по кусочкам",
            "content_html": "<p>Рассказал, как заадаптивил этот сайт:<\/p>\n<div class=\"e2-text-video\">\n<iframe src=\"https:\/\/www.youtube.com\/embed\/s94ze0aR_4s?enablejsapi=1\" allow=\"autoplay\" frameborder=\"0\" allowfullscreen><\/iframe>\n<\/div>\n",
            "summary": "Рассказал, как заадаптивил этот сайт",
            "date_published": "2018-01-04T11:00:52+02:00",
            "date_modified": "2018-01-04T11:00:49+02:00",
            "tags": [
                "веб-дизайн",
                "видеоблог",
                "этот сайт"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-s94ze0aR_4s-cover.jpg",
            "_date_published_rfc2822": "Thu, 04 Jan 2018 11:00:52 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "4654",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/remote\/youtube-s94ze0aR_4s-cover.jpg"
                ]
            }
        },
        {
            "id": "4479",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/text-over-photo\/",
            "title": "Текст поверх фотографии",
            "content_html": "<p>Дизайнер иногда ставит текст поверх фотографии, и получается нечитаемо:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-ineligible.jpg\" width=\"920\" height=\"614\" alt=\"Текст поверх фотографии\" \/>\n<\/div>\n<p>Если дизайнер это замечает, он пытается спасти ситуацию. Затемняет фотку под текстом:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-darken.jpg\" width=\"920\" height=\"462\" alt=\"Текст поверх фотографии\" \/>\n<\/div>\n<p>Или кладёт контрастную плашку:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-plaque.jpg\" width=\"920\" height=\"516\" alt=\"Текст поверх фотографии\" \/>\n<\/div>\n<p>Или делает полупрозрачную плашку, но размывает фотографию под ней:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-matte.jpg\" width=\"920\" height=\"482\" alt=\"Текст поверх фотографии\" \/>\n<\/div>\n<p>Это всё костыли: в результате хуже видно и фотку, и текст.<\/p>\n<p>Ставить текст на фотографию можно, когда она специально сделана или подобрана для этого. То есть на ней есть чистые места — голубое небо, тёмная ночь или другой равномерный фон:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-background.jpg\" width=\"920\" height=\"628\" alt=\"Текст поверх фотографии\" \/>\n<\/div>\n<p>Здесь почти весь текст читается нормально без костылей (много других проблем, но сейчас не о них речь):<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-light.jpg\" width=\"920\" height=\"760\" alt=\"Текст поверх фотографии\" \/>\n<\/div>\n<p>Здесь нормально читается всё, что выше горизонта в зоне расфокуса:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-blurry.jpg\" width=\"920\" height=\"406\" alt=\"Текст поверх фотографии\" \/>\n<\/div>\n<p>Здесь фон вполне позволял поставить текст без проблем, но автор сделал его светло-оранжевым, поэтому он всё равно не читается:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-orange.jpg\" width=\"920\" height=\"564\" alt=\"Текст поверх фотографии\" \/>\n<\/div>\n<p><b>Правило:<\/b> если фотография не подходит для размещения текста на ней, то размещать текст на ней не стоит. Поставьте текст под фотографией. Следствие: если вы не контролируете фотографию (скажем, её загружают пользователи вашего сайта), то ставить на ней текст — плохое решение.<\/p>\n<p>Читайте также <a href=\"http:\/\/ilyabirman.ru\/meanwhile\/all\/secret-of-design-rules\/\">секрет дизайнерских правил<\/a>.<\/p>\n<div class=\"caption\"><p>В заметке использованы работы <a href=\"http:\/\/bureau.ru\/school\/28aug2017\/\">студентов-дизайнеров<\/a>.<\/p>\n<\/div>",
            "summary": "Дизайнер иногда ставит текст поверх фотографии, и получается нечитаемо",
            "date_published": "2017-07-24T11:08:49+02:00",
            "date_modified": "2017-07-24T11:08:43+02:00",
            "tags": [
                "веб-дизайн",
                "дизайн",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-ineligible.jpg",
            "_date_published_rfc2822": "Mon, 24 Jul 2017 11:08:49 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "4479",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-ineligible.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-darken.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-plaque.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-matte.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-background.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-light.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-blurry.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/text-on-image-orange.jpg"
                ]
            }
        },
        {
            "id": "4434",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/make-factoids-stand-out\/",
            "title": "Фактоиды должны отличаться от товаров",
            "content_html": "<p>На сайтах, где вы что-то продаёте, клёво ставить «фактоиды»: блоки, рассказывающие о доставке, оплате и гарантии, условиях использования, акциях и скидках, качестве товаров и всём остальном, о чём важно рассказать покупателю. Причём важно их показывать не отдельным тупым этажом с тремя иконками-бенефитами, а интегрировать в перечисление товаров — так они и выглядят интереснее, и прочитают их больше людей.<\/p>\n<p>Дизайнеры, которые уже научились этому, иногда допускают такую ошибку:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/factoid-too-similar.jpg\" width=\"940\" height=\"344\" alt=\"Фактоиды должны отличаться от товаров\" \/>\n<div class=\"e2-text-caption\">Студенческая работа в Школе стажёров<\/div>\n<\/div>\n<p>Они делают фактоиды слишком похожими на товары. Из-за этого оба эффекта ослабляются: вёрстка выглядит однообразнее, а фактоиды не привлекают внимание.<\/p>\n<p>Правильно — делать фактоиды совсем другими, чем товары:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/factoids-getwear.jpg\" width=\"614\" height=\"808\" alt=\"Фактоиды должны отличаться от товаров\" \/>\n<div class=\"e2-text-caption\"><a href=\"http:\/\/bureau.ru\/projects\/getwear-2\/\">Гетвеар<\/a><\/div>\n<\/div>\n",
            "summary": "На сайтах, где вы что-то продаёте, клёво ставить «фактоиды»: блоки, рассказывающие о доставке, оплате и гарантии, условиях использования, акциях и скидках",
            "date_published": "2017-06-11T20:47:47+02:00",
            "date_modified": "2018-02-17T13:46:06+02:00",
            "tags": [
                "веб-дизайн",
                "дизайн сайтов",
                "студентам"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/factoid-too-similar.jpg",
            "_date_published_rfc2822": "Sun, 11 Jun 2017 20:47:47 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "4434",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": true,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/factoid-too-similar.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/factoids-getwear.jpg"
                ]
            }
        },
        {
            "id": "4295",
            "url": "https:\/\/ilyabirman.ru\/meanwhile\/all\/website-news-2017-jan\/",
            "title": "Новости сайта: январь 2017",
            "content_html": "<p>За последний месяц на моём сайте случилось два важных обновления.<\/p>\n<h2>Новый дизайн<\/h2>\n<p>Во-первых, теперь у меня новое двухэтажное меню. В первом этаже всё как раньше: проекты, музыка, мир и блог. А во втором теперь может появиться что угодно, что полезно в данном контексте. В блоге я вынес туда любимые темы, в «Мире» — любимые города. А в «Проектах» там могут появляться проекты, связанные с текущим. Например, если зайти в типографскую раскладку, там появится переключалка «Для тех, кто пишет»:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/i8-menu-2017-typolayout@2x.png\" width=\"1024\" height=\"60\" alt=\"Новости сайта — 2017\" \/>\n<\/div>\n<p>А в «Музыке» — другие релизы того же жанра, например, соседние альбомы:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/i8-menu-2017-music@2x.png\" width=\"1024\" height=\"60\" alt=\"Новости сайта — 2017\" \/>\n<\/div>\n<p>Под заголовком раздела по-прежнему может появиться ещё одна строка меню — эта строка нужна для версий одного и того же, например, схем метро:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/i8-menu-2017-metro@2x.png\" width=\"1024\" height=\"350\" alt=\"Новости сайта — 2017\" \/>\n<\/div>\n<p>Туда же идут всякие подразделы с общим заголовком.<\/p>\n<p>Всякие такие провязки делаются автоматически — см. <a href=\"http:\/\/ilyabirman.ru\/meanwhile\/all\/how-my-website-works\/\">как работает мой сайт<\/a>.<\/p>\n<p>Сайт стал намного лучше вмещаться в маленькие экраны. На телефоне меню прячется за гамбургер, двухэтажное превращается в двухколоночное:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/i8-menu-2017-adaptive@2x.png\" width=\"775\" height=\"425\" alt=\"Новости сайта — 2017\" \/>\n<\/div>\n<p>Картинки в рассказах о поездках, в блоге и в некоторых работах и раньше умели резиниться. Но меню всё время мешало: распирало и ломало страницу. Новое меню заставило меня прошерстить остальной сайт, поэтому теперь весь «Мир», почти весь блог и большинство проектов влезают на телефоне. Я сделал себе всяких инструментов для быстрого обеспечения влезаемости чего угодно. Некоторые страницы, конечно, выглядят не так, как выглядели бы, если бы их изначально верстали для телефона, но, по крайней мере, влезают.<\/p>\n<p>За новое меню огромное спасибо <a href=\"http:\/\/igoradamenko.com\/\">Игорю Адаменко<\/a> — он мужественно всё сверстал, несмотря на то, что я всё время просил невозможное. Даже сделал анимацию гамбургера в крестик как я хотел. Мы ещё заморочились с Фиттсом там: если вы поводите мышкой по новому меню, вы увидите, что области клика всех элементов очень большие.<\/p>\n<p>Раздел проектов стал лучше. Раньше там проекты выводились бессмысленной матрицей, отсортированной по времени добавления. А сейчас проекты разделены на смысловые кучки:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/i8-projects-2017@2x.jpg\" width=\"1024\" height=\"633\" alt=\"Новости сайта — 2017\" \/>\n<\/div>\n<p>Я, конечно, хочу ещё лучше, но пока успел так. Когда-нибудь улучшения доберутся и до «Мира».<\/p>\n<p>А ещё я прикрутил новые шрифты. Ну, вы видели.<\/p>\n<h2>Новый поиск по блогу<\/h2>\n<p>Если вы пробовали пользоваться моим поиском по блогу раньше, вы знаете, что он был не очень. Во-первых, он не умел склонять слова, поэтому искать по-русски было мучительно. Во-вторых, сама выдача была просто лентой найденных заметок, среди которых увидеть нужную (или что она нихрена не нашлась) было нереально.<\/p>\n<p>Новый поиск склоняет слова и учитывает всякие там разные факторы, чтобы нашлись варианты получше. «Берлин»:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/i8-search-2017-berlin@2x.jpg\" width=\"1024\" height=\"620\" alt=\"Новости сайта — 2017\" \/>\n<\/div>\n<p>Выдача поиска тоже переделалась: теперь вместо полных заметок там кусочки найденного текста и картинки пачкой, потому что по ним заметку легко узнать. Как видите по заметке «Трезор и Бергхайн», оно умеет вытаскивать и кадры видосов, и обозначать, что в заметке есть аудио.<\/p>\n<p>Круче всего, когда в заметке много картинок. «Автобан германия»:<\/p>\n<div class=\"e2-text-picture\">\n<img src=\"https:\/\/ilyabirman.ru\/meanwhile\/pictures\/i8-search-2017-autobahn@2x.jpg\" width=\"1024\" height=\"580\" alt=\"Новости сайта — 2017\" \/>\n<\/div>\n<p>Пока там всё равно много что работает не так, как надо. Но уже сильно лучше, чем было, поэтому новый поиск я выкатил.<\/p>\n<p>Про него я ещё напишу отдельно подробнее, пока лишь скажу, что решающую роль в его появлении сыграл <a href=\"https:\/\/written.ru\/\">Роман Парпалак<\/a> — это с ним мы в своё время делали умный поиск для Зерулса.<\/p>\n",
            "summary": "За последний месяц на моём сайте случилось два важных обновления",
            "date_published": "2017-01-04T21:10:35+02:00",
            "date_modified": "2017-03-01T20:27:37+02:00",
            "tags": [
                "веб-дизайн",
                "дизайн",
                "проекты",
                "этот сайт"
            ],
            "image": "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/i8-menu-2017-typolayout@2x.png",
            "_date_published_rfc2822": "Wed, 04 Jan 2017 21:10:35 +0200",
            "_rss_guid_is_permalink": "false",
            "_rss_guid": "4295",
            "_rss_enclosures": [],
            "_e2_data": {
                "is_favourite": false,
                "links_required": [],
                "og_images": [
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/i8-menu-2017-typolayout@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/i8-menu-2017-music@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/i8-menu-2017-metro@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/i8-menu-2017-adaptive@2x.png",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/i8-projects-2017@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/i8-search-2017-berlin@2x.jpg",
                    "https:\/\/ilyabirman.ru\/meanwhile\/pictures\/i8-search-2017-autobahn@2x.jpg"
                ]
            }
        }
    ],
    "_e2_version": 4259,
    "_e2_ua_string": "Aegea 12.0a (v4259e)"
}