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

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

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

короче вот тут таблица была бы удобнее: и сравнивать проще, и компактнее в разы.

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

с апрелем! посмотрим вместе, что было в марте:

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

отдельное спасибо:
— что подписались
— ставите лайки
— пишете комментарии
— делитесь постами

потому что:
— это приятно!

эту таблицу прислал нам читатель дмитрий.

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

что тут интересного:

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

что не очень:

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

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

см. также таблицу пробелов кирилла беляева

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

таблица дня: памятка с новыми наименованиями блюд (вроде бы 1928 год)

что интересного в этой таблице:

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

с новым законом о запрете иностранных слов мы скоро снова всё это увидим.

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

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

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

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

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

(в честь тысячи подписчиков включил комменты)

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

http://blog.yumadilov.com/all/ibinom-report/

Расписание поездов в Галле, Шри-Ланка

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

Это обычные цифербалты, просто в них дублируются подписи для 24-часового формата. Если поезда нет, циферблат закрывают (лучше бы не белым, а в цвет фона, конечно). Потом задержка, тип состава и платформа. А цвет таблички, кажется, ничего не значит.

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

Это пример дизайна, которые сам по себе довольно хаотичен — Миша мог бы переверстать это как положено. Но здесь можно много чего украсть. Ребята посмотрят и скажут «ну надо же! как можно было до такого догадаться?» А просто надо уметь воровать дизайн.

Это красиво, а это нет ↗

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

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

ему слово:

тарифы авиакомпании «эр канада» с код-шером «аэрофлота» 1968/69 из канала ссср

что хорошего в этой таблице:

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

но есть интересное:

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

эту телефонную книгу сив (союзное исполнительное вече югославии) #прислал нам читатель ильнур

что интересного в этих таблицах:

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

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

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

что интересного в этой таблице:

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

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

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