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

онлайн-табло внуково.

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

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

сегодня последний день майских скидок на курс по таблицам.

и чтобы два раза не вставать: вместе с другими дизайнерами порассуждал в «журналусе» о плохом дизайне:
https://zhurnalus.artlebedev.ru/longreads/bad-design/

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

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

что в ней не так?

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

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

«score» встроенный в таблицу, тоже путает, словно у пунктов 3 балла снизу, а 15 сверху, к которым нужно прибавлять ещё по баллу, указанному у пункта.

в общем, всё странное.

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

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

в общем, не болейте!

Рубрика #кусочеккурса

Маленький совет о выравнивании узкого столбца. Курс «Таблицы и прочие радости», глава «Выравнивание»

А у нас уже началась майская распродажа. Скидка 1000 ₽ на теорию и 3000 ₽ на теорию с практикой: igorshtang.ru/course/tables

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

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

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

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

до конца майских скидка на теорию — 1000 ₽, а на теорию и практику — 3000 ₽.

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

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

позанимайтесь в праздники!

табличный дизайн pinned «в третьих, моя книжечка про красоту обзавелась международным номером isbn и теперь она считается настоящей, а я считаюсь издателем — меня прямо так и назвали в российской книжной палате, представляете? для меня это, признаюсь, было непросто — разобраться во…»

вернёмся к данным! на днях попался интересный таймлайн про то, какие камни и минералы были в моде в разные династии древнего египта.

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

в комментарии закину инстайты от ии-чатика, тут не помещается.

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

но зато у меня теперь есть вот такая ссылка!
https://ozon.ru/product/2023147098

буду рад, если вы купите! также будут рады и в питерском приюте для кошек @murmurchalkin — туда, как обычно, пойдёт вся прибыль от продажи.

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


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

во-вторых, женя арутюнов перезапустил свой курс «как дизайнить кодом вместо фигмы»:
https://intuition.team/ru/how-to-design-with-code

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

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

(если вы не понимаете, зачем в 2025 вдруг резко учить html, а потом и всякое посложнее, как это связано с нейросетями и дальнейшей работой — вот небольшая серия заметок: https://t.me/e_arutyunov/541)

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

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

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

курс жени — очень хороший старт для такой автономности.

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

записаться можно здесь: https://vk.com/pereverstka_online

я всегда рекомендую этот мастер-класс — сам проходил и остался очень доволен. мои впечатления от 2022 года: https://medium.com/@kapanaga/3c931bb1cbf0

в курсе уделяется внимание и работе с таблицами. вот, например, фрагмент вебинара, посвящённый этой теме: https://vk.com/pereverstka_online?w=wall-194623492_541

влад прислал табличку про то, как работают рейтинги в стиме (первая картинка).

его слова:

Интересно, что это вроде и табличка, а вроде и состоит скорее из зон, чем из строк и столбцов. Особенно вверху.

И еще класно, как наглядно видно асимметрию: для overwhelmingly positive и mostly positive — более строгие условия, чем для overwhelmingly negative и mostly negative. А вот для positive и negative одинаковые

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

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

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

от чего умирают в штатах, что там гуглят, и про что пишут медиа.

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

см. также: от чего умирают люди в разном возрасте