табличный дизайн

две картинки на тему давления в позвоночнике в зависимости от позы человека и его отягощения. фактически весь график работает на двух элементах: пиктограмме и длине столбика, и это очень наглядно. первая картинка красивее, но корректные данные от тех же исследователей — во второй картинке. отдельно можно сравнить сортировку: в первой картинке сортировка на основе позы (стоя, сидя), во второй — на основе давления. см. также вес головы в зависимости от наклона: 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/

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