салават снова прислал интересную табличку, даже три:
и я полностью согласен с ним. дизайнерские паттерны — это вообще очень здорово: человек научился чему-то в одном месте, а в другом использует знание на автомате, не задумываясь. удобно!
но когда тебя чему-то научили, а рядом вроде такое же, а устроено по-другому, то сразу зависаешь и хочется спросить: вы меня зачем учили, если сами этими знаниями не пользуетесь?
если формат не подходит, то лучше вместо него использовать другой, а не какой-то похожий.
в общем, можно смело дублировать тут цены, а группировка похожего далеко не всегда упрощает восприятие.
а ещё можно можно разбивать большие блоки на блоки поменьше.
читайте также заметку игоря штанга польза повторов, в ней есть картинки как мы переделывали как-то инструкцию к лекарствам.
Вот с одной стороны прикольно, что дубликация минимизирована.
С другой стороны начинаешь тормозить, когда хочешь выбрать, а натыкаешься на пустоту.
и я полностью согласен с ним. дизайнерские паттерны — это вообще очень здорово: человек научился чему-то в одном месте, а в другом использует знание на автомате, не задумываясь. удобно!
но когда тебя чему-то научили, а рядом вроде такое же, а устроено по-другому, то сразу зависаешь и хочется спросить: вы меня зачем учили, если сами этими знаниями не пользуетесь?
если формат не подходит, то лучше вместо него использовать другой, а не какой-то похожий.
в общем, можно смело дублировать тут цены, а группировка похожего далеко не всегда упрощает восприятие.
а ещё можно можно разбивать большие блоки на блоки поменьше.
читайте также заметку игоря штанга польза повторов, в ней есть картинки как мы переделывали как-то инструкцию к лекарствам.
👍23❤12
рубрика #кусочеккурса
одно из самых простых изменений, которое сразу сделает таблицу более аккуратной и читаемой — это замена текстовых цифр на табличные: цифры подравняются по вертикали, и таблица станет визуально более упорядоченной.
в фигме, например, это делается в настройке шрифта:
type settings → details → numbers → style.
в css табличные цифры задаются с помощью свойства:
font-variant-numeric: tabular-nums;
курс «таблицы и прочие радости», глава «шрифт»: igorshtang.ru/course/tables
одно из самых простых изменений, которое сразу сделает таблицу более аккуратной и читаемой — это замена текстовых цифр на табличные: цифры подравняются по вертикали, и таблица станет визуально более упорядоченной.
в фигме, например, это делается в настройке шрифта:
type settings → details → numbers → style.
в css табличные цифры задаются с помощью свойства:
font-variant-numeric: tabular-nums;
курс «таблицы и прочие радости», глава «шрифт»: igorshtang.ru/course/tables
❤34🔥18👍6❤🔥3🤯2🐳1
две картинки на тему давления в позвоночнике в зависимости от позы человека и его отягощения.
фактически весь график работает на двух элементах: пиктограмме и длине столбика, и это очень наглядно.
первая картинка красивее, но корректные данные от тех же исследователей — во второй картинке.
отдельно можно сравнить сортировку: в первой картинке сортировка на основе позы (стоя, сидя), во второй — на основе давления.
см. также вес головы в зависимости от наклона:
https://t.me/thisisnotatable/228
фактически весь график работает на двух элементах: пиктограмме и длине столбика, и это очень наглядно.
первая картинка красивее, но корректные данные от тех же исследователей — во второй картинке.
отдельно можно сравнить сортировку: в первой картинке сортировка на основе позы (стоя, сидя), во второй — на основе давления.
см. также вес головы в зависимости от наклона:
https://t.me/thisisnotatable/228
❤🔥27🔥11👍2❤1
в нашем табличном курсе для всех открыта первая глава — табличное представление.
какую главу ещё открыть? опрос до конца недели, победившую главу откроем для всех на месяц.
какую главу ещё открыть? опрос до конца недели, победившую главу откроем для всех на месяц.
Final Results
9%
линейки
26%
наглядность
48%
сортировка и группировка
18%
направление чтения и поиска
🔥13❤7
табличный дизайн pinned «в нашем табличном курсе для всех открыта первая глава — табличное представление.
какую главу ещё открыть? опрос до конца недели, победившую главу откроем для всех на месяц.»
какую главу ещё открыть? опрос до конца недели, победившую главу откроем для всех на месяц.»
пока выше идёт голосование за то, какую главу табличного курса открыть для всех, проведём ещё одно — не менее важное — голосование в комментариях.
не лишним будет обратить внимание на дизайнерскую сторону картинки: даны не просто типы ступней, а ещё к ним добавлены линии, упрощающие рисунок до самого главного отличия этого типа.
см. также на девушек в стадии овуляции
не лишним будет обратить внимание на дизайнерскую сторону картинки: даны не просто типы ступней, а ещё к ним добавлены линии, упрощающие рисунок до самого главного отличия этого типа.
см. также на девушек в стадии овуляции
❤22👍2
табличный дизайн
в нашем табличном курсе для всех открыта первая глава — табличное представление.
какую главу ещё открыть? опрос до конца недели, победившую главу откроем для всех на месяц.
какую главу ещё открыть? опрос до конца недели, победившую главу откроем для всех на месяц.
глава сортировка и группировка, победившая в голосовании, открыта для всех на месяц.
1❤34🎉14👍5
от чего умирают в штатах, что там гуглят, и про что пишут медиа.
прекрасный пример, работающий исключительно в связке. любой график по отдельности вызвал бы реакцию типа «ну да, всё так», но вместе они создают новую историю, показывая, что есть три совершенно разных мира.
см. также: от чего умирают люди в разном возрасте
прекрасный пример, работающий исключительно в связке. любой график по отдельности вызвал бы реакцию типа «ну да, всё так», но вместе они создают новую историю, показывая, что есть три совершенно разных мира.
см. также: от чего умирают люди в разном возрасте
❤51👍9🔥5
влад прислал табличку про то, как работают рейтинги в стиме (первая картинка).
его слова:
отлично сказал, всё так и есть. картинка хорошо показывает зоны и взаимосвязь между рейтингом и количеством соответствующих отзывов.
я бы только её чуть упростил, сделав группировку не по проценту, а по названию (картинка 2), потому что видно, сколько в первой табличке ненужных повторов, насколько она пуста в одних местах, и как почти не справляется со своим форматом в других.
но вообще эта таблица одна из тех, что переделываются в разные хорошие варианты. думаю, тут штучек пять минимум можно ещё придумать.
его слова:
Интересно, что это вроде и табличка, а вроде и состоит скорее из зон, чем из строк и столбцов. Особенно вверху.
И еще класно, как наглядно видно асимметрию: для overwhelmingly positive и mostly positive — более строгие условия, чем для overwhelmingly negative и mostly negative. А вот для positive и negative одинаковые
отлично сказал, всё так и есть. картинка хорошо показывает зоны и взаимосвязь между рейтингом и количеством соответствующих отзывов.
я бы только её чуть упростил, сделав группировку не по проценту, а по названию (картинка 2), потому что видно, сколько в первой табличке ненужных повторов, насколько она пуста в одних местах, и как почти не справляется со своим форматом в других.
но вообще эта таблица одна из тех, что переделываются в разные хорошие варианты. думаю, тут штучек пять минимум можно ещё придумать.
🔥17❤5👍2👎2💩1
сегодня будет день новостей. во-первых, у игоря штанга с 5 по 24 мая пройдёт «большая перевёрстка» — онлайновый мастер-класс с практикой. это отличная возможность прокачать навыки вёрстки текста. курс подойдёт и для новичков, и для тех, кто уже многое умеет, но хочет систематизировать знания или прокачать отдельные аспекты.
записаться можно здесь: https://vk.com/pereverstka_online
я всегда рекомендую этот мастер-класс — сам проходил и остался очень доволен. мои впечатления от 2022 года: https://medium.com/@kapanaga/3c931bb1cbf0
в курсе уделяется внимание и работе с таблицами. вот, например, фрагмент вебинара, посвящённый этой теме: https://vk.com/pereverstka_online?w=wall-194623492_541
записаться можно здесь: https://vk.com/pereverstka_online
я всегда рекомендую этот мастер-класс — сам проходил и остался очень доволен. мои впечатления от 2022 года: https://medium.com/@kapanaga/3c931bb1cbf0
в курсе уделяется внимание и работе с таблицами. вот, например, фрагмент вебинара, посвящённый этой теме: https://vk.com/pereverstka_online?w=wall-194623492_541
❤13🔥3😍1
во-вторых, женя арутюнов перезапустил свой курс «как дизайнить кодом вместо фигмы»:
https://intuition.team/ru/how-to-design-with-code
от себя скажу так: я вообще не представляю свою работу без хотя бы базовых навыков веб-вёрстки. потому что а как тогда, кхм, верстать? как запускать свои проекты? нанимать верстальщика? это его ещё надо найти, сработаться, ставить задачи, платить. это время, деньги, отвлечение от сути. зачем, если многое можно сделать самому? вёрстка — это продолжение работы с дизайном.
но даже если проект сложный и без разработчика не обойтись — как делать макеты, не зная, устройства веба? без этого фигма превращается в джипег: блоки разбросаны кирпичами без свзяей, отступы не настроены, всё на auto, которое в браузерах ведёт себя как попало. без понимания вёрстки даже не подумаешь, что всё это важно. веб-вёрстка — это такой же инструмент дизайнера, как типографика, композиция или цвет.
конечно, и по джипегу можно сверстать хорошо — но тогда всё держится на разработчике. а если он крутой, то он получает больше, чем дизайнер. а можно просто потратить несколько вечеров, разобраться — и стать самостоятельнее и круче.
курс жени — очень хороший старт для такой автономности.
https://intuition.team/ru/how-to-design-with-code
женя говорит, что этот курс подойдёт для:
— коммуникационных дизайнеров, которые хотят сделать первые шаги в кодинге (начать с веб-вёрстки это норм, инфа 100%);
— дизайнеров взаимодействия, которые хотят сделать первые шаги к хтмл-прототипированию с последующим вайб-кодингом (в программу курса он не входит, но подскажем, как начать);
— редакторов, которые хотят соскочить с конструкторов (курс не учит дизайну, но собрать несложный лонгрид на хтмл должно получиться);
— всех, кому любопытно, на чём стоит веб.
курс состоит из 14 тщательно подготовленных уроков, которые доступны в записи. есть два тарифа, с вопросами и без.
(если вы не понимаете, зачем в 2025 вдруг резко учить html, а потом и всякое посложнее, как это связано с нейросетями и дальнейшей работой — вот небольшая серия заметок: https://t.me/e_arutyunov/541)
от себя скажу так: я вообще не представляю свою работу без хотя бы базовых навыков веб-вёрстки. потому что а как тогда, кхм, верстать? как запускать свои проекты? нанимать верстальщика? это его ещё надо найти, сработаться, ставить задачи, платить. это время, деньги, отвлечение от сути. зачем, если многое можно сделать самому? вёрстка — это продолжение работы с дизайном.
но даже если проект сложный и без разработчика не обойтись — как делать макеты, не зная, устройства веба? без этого фигма превращается в джипег: блоки разбросаны кирпичами без свзяей, отступы не настроены, всё на auto, которое в браузерах ведёт себя как попало. без понимания вёрстки даже не подумаешь, что всё это важно. веб-вёрстка — это такой же инструмент дизайнера, как типографика, композиция или цвет.
конечно, и по джипегу можно сверстать хорошо — но тогда всё держится на разработчике. а если он крутой, то он получает больше, чем дизайнер. а можно просто потратить несколько вечеров, разобраться — и стать самостоятельнее и круче.
курс жени — очень хороший старт для такой автономности.
❤21👎3👍1