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

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

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

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

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

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

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

дойдя до тарифов курса, я заметил, что условия сильно смахивают на табличку:

есть обратная связь / нет обратной связи
ограниченное количество мест / неограниченное количество мест
общий чат со всеми участниками и златой + отдельный чат, где будут личные рекомендации / общий чат с участниками и златой без отдельного чата
ну и т. д.

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

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

расскажу ещё две истории на тему вчерашнего поста.

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

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

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

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

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

читатель нашего канала стас написал мне:

Эпл презентовала новый карандаш для планшета

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

Но кажется что такие таблицы только усложняют выбор — куча галочек и пробелов требуют держать данные в голове

Было бы круто услышать твоё мнение в блоге

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

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

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

канал стаса →

Та-даааам! Дарлинги, перед вами — до/после.

Была задача — перерисовать сводную таблицу проекта дома №1. Сам проект создан в excel, переделывать его я решила в figma (возможно, стоило это делать в miro). Если вы думаете, что тут работы "нефиг делать", то ошибаетесь, потому что...

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

Откровенно говоря, с таблицей мне действительно пришлось поковыряться, потому что пока:
• разобралась в терминологии
• прочитала и осмыслила эту таблицу
• перенесла ее из excel
• ну а далее пошла сама работа по переверстке (с которой, кстати, мне помогли — но об этом будет следующий пост)

А если хотите посмотреть весь процесс изменения, то заглядывайте в комментарии (20-й круг правок).

#работыадмина

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

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

отличный пример наглядности «интерфейса»: не просто написать калорийность, а показать её относительно продукта.

— тебе сколько отрезать?
— 70 калорий пожалуйста.

круто.

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

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

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

такой вот таймлайн.

на фото — гелиограф в териберке и я на фоне куда-то иду.

удивительные срезы данных про людей с ожирением (имт ≥ 30)

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

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

вертикальный монтаж эйзенштейна

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

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

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