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

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

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

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

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

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

если уж переделывать во что-то нормальное, я бы:
· повернул таблицу, чтобы сравнивать можно было нормально по вертикали
· убрал усреднённые значения
· вместо столбиков показал бы распределение заливкой
· «extra» и «tricks» объединил, потому что они про одинаковое
· на счёт фоток не уверен: можно и убрать — они как будто похожие все, но жалко

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

а за таблицу спасибо огромное александре!

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

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

вы пока посмотрите на картинку, а я чуть позже покажу антипример.

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

обратите внимание на это меню, оно достаточно нестандартное и даже, я бы сказал, рискованное.

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

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

такое вот красивое и непростое меню!

курс «типографика и вёрстка» начинается на следующей неделе — записывайтесь, ещё есть пара свободных мест:
https://www.igorshtang.ru/course/verstka#buy

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

курс «типографика и вёрстка» скоро начинается — записывайтесь, стартуем через неделю:
https://www.igorshtang.ru/course/verstka#buy

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

ближайший курс типографики и вёрстки начнётся 3 августа, присоединяйтесь:
https://www.igorshtang.ru/course/verstka/#buy

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

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

также: продолжается набор на августовский онлайновый курс типографика и вёрстка — присоединяйтесь.

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

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

все вот эти факторы в голове дают тот эффект, который мы и испытваем при просмотре.

как можно улучшить?
1. убрать двоеточие в заголовке.
2. в диапазоне поставить вместо дефиса тире без пробелов.

всем хорошей второй половины лета!

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

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

ближайший курс типографики и вёрстки начнётся 3 августа, присоединяйтесь:
https://www.igorshtang.ru/course/verstka/#buy