вернёмся к данным! на днях попался интересный таймлайн про то, какие камни и минералы были в моде в разные династии древнего египта.

удивлён, что мой любимый лазурит (lapis lazuli) занимает всего ничего. видимо, месторождение было совсем небольшим, плюс везли издалека. если не ошибаюсь, что сейчас, что тогда, основная добыча — в афганистане.

в комментарии закину инстайты от ии-чатика, тут не помещается.

в третьих, моя книжечка про красоту обзавелась международным номером isbn и теперь она считается настоящей, а я считаюсь издателем — меня прямо так и назвали в российской книжной палате, представляете? для меня это, признаюсь, было непросто — разобраться во всех этих анкетах, правилах, отчётностях…

но зато у меня теперь есть вот такая ссылка!
https://ozon.ru/product/2023147098

буду рад, если вы купите! также будут рады и в питерском приюте для кошек @murmurchalkin — туда, как обычно, пойдёт вся прибыль от продажи.

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


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

во-вторых, женя арутюнов перезапустил свой курс «как дизайнить кодом вместо фигмы»:
https://intuition.team/ru/how-to-design-with-code

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

курс состоит из 14 тщательно подготовленных уроков, которые доступны в записи. есть два тарифа, с вопросами и без.

(если вы не понимаете, зачем в 2025 вдруг резко учить html, а потом и всякое посложнее, как это связано с нейросетями и дальнейшей работой — вот небольшая серия заметок: https://t.me/e_arutyunov/541)

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

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

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

курс жени — очень хороший старт для такой автономности.

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

записаться можно здесь: https://vk.com/pereverstka_online

я всегда рекомендую этот мастер-класс — сам проходил и остался очень доволен. мои впечатления от 2022 года: https://medium.com/@kapanaga/3c931bb1cbf0

в курсе уделяется внимание и работе с таблицами. вот, например, фрагмент вебинара, посвящённый этой теме: https://vk.com/pereverstka_online?w=wall-194623492_541

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

его слова:

Интересно, что это вроде и табличка, а вроде и состоит скорее из зон, чем из строк и столбцов. Особенно вверху.

И еще класно, как наглядно видно асимметрию: для overwhelmingly positive и mostly positive — более строгие условия, чем для overwhelmingly negative и mostly negative. А вот для positive и negative одинаковые

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

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

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

от чего умирают в штатах, что там гуглят, и про что пишут медиа.

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

см. также: от чего умирают люди в разном возрасте

глава сортировка и группировка, победившая в голосовании, открыта для всех на месяц.

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

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

см. также на девушек в стадии овуляции

две картинки на тему давления в позвоночнике в зависимости от позы человека и его отягощения.

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

первая картинка красивее, но корректные данные от тех же исследователей — во второй картинке.

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

см. также вес головы в зависимости от наклона:
https://t.me/thisisnotatable/228

рубрика #кусочеккурса

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

в фигме, например, это делается в настройке шрифта:
type settings → details → numbers → style.

в css табличные цифры задаются с помощью свойства:
font-variant-numeric: tabular-nums;

курс «таблицы и прочие радости», глава «шрифт»: igorshtang.ru/course/tables

пост сдал, пост принял. теперь ваша очередь.

на картинке — состояние человека до и после 15-дневного голодания на воде.
как бы вы улучшили эту картинку? показывайте свой вариант, текстом не пишите — так все могут.

салават снова прислал интересную табличку, даже три:

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

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

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

если формат не подходит, то лучше вместо него использовать другой, а не какой-то похожий.

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

а ещё можно можно разбивать большие блоки на блоки поменьше.

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

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

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

такие перевёрстки напоминают волшебные рассказы. сравните предыдущую цитату вот с этой:

Harry bent down, ducked under the tent flap, and felt his jaw drop. He had walked into what looked like an old-fashioned, three room flat, complete with bathroom and kitchen.

нам часто пишут хорошие отзывы о курсе по таблицам, а мы почему-то скромничаем и не рассказываем об этом.
так что добавили несколько новых.

если задумываетесь о прохождении, почитайте, что говорят те, кто уже прошёл:
https://www.igorshtang.ru/course/tables/#reviews

а тем, кто пишет отзывы (не только нам, а вообще) — большое спасибо, это важно.

рой землетрясений недалеко от санторини с конца января по сегодняшний день.

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

источник (там ещё другие картинки, посмотрите):
https://emsc-csem.org/Special_reports/?id=351

попалась реклама фитнес-приложения, которая напомнила о двухгодичном посте, в котором я считал сколько нужно пройти, чтобы сжечь калории выпитого алкоголя: https://telegra.ph/alcoroute-03-10

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

эволюция алфавита,
мэт бейкер
https://www.youtube.com/watch?v=3kGuN8WIGNc

пунктир можно было бы заменить на спрошную линию, или немного приглушить — так буквы стали бы заметнее.

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

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

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

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

результат — на соседней картинке, с учётом исправления нескольких неточностей. сравните насколько меньше она занимает места.

подробнее о псевдотаблице — в бесплатной главе нашего табличного курса:
https://www.igorshtang.ru/course/tables/lessons/tabulation/