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

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

первые две таблички интересны не столько табличностью, сколько своим видом.

красная штучка (хронология дартона, 1815), например, очень маленькая — 5 см в ширину, то есть свиток там около 4 см. это одна из самых маленьких таблиц в мире.

а второй свиток 1844 года, встроенный (внезапно) в футляр в виде книги, в длину — 9 метров!

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

картинка (настроение?) дня

и сегодня-завтра покажу старые таблички, раз уж вы так проголосовали. (практика на последнем месте, ну вы даёте!)

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

Бипиум — конструктор для IT-систем и замена таким сервисам как airtable, excel, google sheets

Основа — 4 конструктора.

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

Конструктор отчетов позволяет из таблиц сделать графики

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

Конструктор автоматизаций — для интеграции с разными системами и БД, выполнять разные логики (наступил дедлайн — пришло уведомление), генерировать документы по шаблонам и т.д.

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

всем нам ребята дают 3 месяца бесплатного доступа и часовую консультацию с инженером.

это не реклама. у вас есть проект — пишите.

береговые и водные знаки из военной энциклопедии сытина (за последние несколько дней видел, кажется, их все). без подписей это просто красиво.

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

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

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

у саши кстати есть канал про вёрстку презентаций, подписывайтесь: @typoslide

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

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

короче я убрал все повторы и весь текст уместился в нижней части.

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

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

вечерний квиз: выберите выравнивание

табличный дизайн pinned a GIF

весенняя 🌷 распродажа 🌺 нашего 🌼 курса 🌸 по 🌹 таблицам!

до конца майcких на курс с практикой скидон 3000 ₽.
если вы давно хотели, но откладывали — вот оно 👏 то 👏 самое 👏 время.

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

конечно, пассивное обучение (чтение) — гораздо лучше, чем ничего. но практика приносит ещё больше.

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

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

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

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

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

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

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

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

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

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

если бы это были карты с точками, описывающими конкретные эпизоды маршрута, было бы не менее интересно. но было бы, конечно, менее смешно (точнее даже совсем не смешно).

упрощение всегда ведёт к спекуляции. но иногда можно.

ищу айос-разработчика.

теперь подробнее:

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

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

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

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

upd: человек нашёлся, всем спасибо за внимание.

признавайтесь: кто под каким углом это увидел?

недавно получили сообщение:

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

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

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

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

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

в качестве примера приведу отчётную таблицу по соревнованиям со скакалкой.

я немного знаю матчасть, поэтому поясню что тут происходит. задача соревнования — сделать максимальное кол-во одинарных прыжков за 30 секунд. выглядит это вот так. а победитель, как это часто бывает — тори боггс (не все уверены, что она человек).

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

не верите — проверьте
(не является инвестиционной рекомендацией)

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

что интересного (а также грустного и тревожного) в этой работе:

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

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

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

· уменьшить просвет между колонками до минимума. белый отвлекает.

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

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