табличный дизайн
6.96K subscribers
486 photos
17 videos
1 file
195 links
канал @kapanaga по мотивам курса igorshtang.ru/course/tables/

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

http://blog.yumadilov.com/all/ibinom-report/
🔥102
иногда сомневаюсь: стоит ли рассказывать про банальные вещи?
а потом выхожу на улицу и смотрю на реальный мир.

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

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

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

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

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

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

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

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

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

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

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

что не очень:

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

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

см. также таблицу пробелов кирилла беляева
11😁2
с апрелем! посмотрим вместе, что было в марте:

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

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

потому что:
— это приятно!
30👍4🥰2
половина постов на канале о таблицах про то, как из таблицы сделать что-то другое — это конечно ваще.

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

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

заголовки можно дублировать, а можно сверху написать (но тогда надо их залипать при скроле). я бы продублировал, вроде не мешают.
🔥37🆒4👍3
таблицы дня — биатлонтайм

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

на что стоит обратить внимание:

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

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

почитайте о проекте (и посмотрите как сафари выглядел десять лет назад)
28💘5🔥1
однажды увидел на столе у астрофизика безумно красивые таблицы. думал, что это конфиденциальная информация, поэтому никому не показывал.

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

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

что именно сделал:

· убрал таблицу. тут нет смысла сравнивать. графики поэтому тоже не очень нужны.

· добавил комментарии прямо к симптомам. да, повторяются, ну и что? на мой взгляд человек не читает все симптомы. он найдёт свой и узнает всё сразу.

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

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

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

спасибо всем, кто попробовал переделать таблицу вместе со мной и особенно тем, кто прислал свой вариант! вы молодцы!
20👍10🔥5