«Прохладная» стори, как я переверстывал таблицу в конкурсе

Подъем

25 октября 2022 года Игорь Штанг и Михаил Капанага объявили о старте «Радостного табличного конкурса». Чтобы стать обладателем одной из трех подписок на курс «Таблицы и прочие радости», претендентам нужно было переверстать вот эту таблицу:

Исходная таблица из книги В. М. Качашкина «Методика физического воспитания», 1968

Задание было сформулировано так:

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

Я обожаю такие конкурсы, в которых можно тряхнуть стариной и проверить свои силы. Просто мания какая-то: хлебом не корми — дай попереверстывать.

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

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

Ну как тут не принять участие?

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

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

Зарядка

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

Давайте вместе подумаем, как это сделать! Всё, что у нас есть, это задание. В нем можно поискать критерии, которые Игорь и Михаил будут использовать при выставлении оценок. Выделим ключевые слова:

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

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

  • Современный, крутой, нескучный. Дизайн не должен быть слишком минималистичным, должен быть в тренде современных коммуникаций с детьми.
  • Удобный, наглядный. Нужно учесть контекст и сценарий использования, подумать над форматом носителя.
  • Для детей и взрослых. Психология детей и взрослых отличается, однако приоритет в выборе стоит отдавать все же детям. Именно они будут пользоваться расписанием, а взрослые скорее оценят его мельком и более поверхностно: «в хорошее ли место я отдал своего ребенка?»

Имея и постоянно держа в голове такое расширенное описание, можно переходить к Фигме.

Уборка постелей

Первым делом надо перенести текст из исходной таблицы в редактируемые слоя Фигмы.

При переносе я сразу сделал несколько улучшений:

  • Сократил заголовок. Слово «Примерный» не добавляет ясности и может только смущать. «В загородном пионерском лагере» — это указание контекста, который и так очевиден для тех, кто в лагере находится.
  • Выбрал фон с оттенком в желтое. Чисто белый фон — это дурной вкус, поскольку в жизни абсолютно белого не существует и наши глаза это знают. Не стоит теребить бессознательное зрителя по этому поводу.
  • Выбрал шрифт PT Sans. Поскольку расписание это скорее навигационная задача, то и шрифт должен быть навигационным. Да, это не табло в метро или на вокзале, но усложнять основную информационную часть макета акциденцией тоже не стоит. Даже детям, и даже в детском лагере.
  • Поменял столбцы местами. Ребенок смотрит на часы, и отталкиваясь от текущего времени, решает, что ему делать. Логично, что начинать поиск нужной строчки надо со времени, а не названия.
Шаг 1. Заголовок, фон и шрифт.

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

Линейка

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

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

Шаг 2. Время и длительность мероприятий.

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

Отдельно подумал над снижением акцента на колонке с длительностью:

Шаг 2. Сниженный акцент на длительность мероприятий.

Завтрак

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

Будем честны, в детском лагере я никогда не был, если не считать лагерь «Совёнок» из «Бесконечного лета», где визит закончился рутом «вскрываемся».

Поэтому в середине процесса я попробовал примерить к расписанию эстетику «Совёнка».

Шаг 3. Питание, суммы, «Совёнок».

На макете выше я также сделал следующие правки:

  • Жирный заголовок. Для контраста. Согласен, что он получился не большой, но хоть какой-то.
  • Выделил питание. Благодаря «Совёнку» мы все знаем, что в любой непонятной ситуации нужно идти в столовую. Идея, что дети в своей ментальной модели мира отмеряют отрезки дня приемами пищи, мне показалась логичной. Главное в лагере — это покушать.
  • Примерил суммы времени на разные активности. Тут я больше думал о родителях, которые по расписанию могут оценить программу лагеря с высоты птичьего полета. Кусочек промо для тех, кто платит. Далее эта идея мне разонравилась, поскольку уходила далеко от первоначального задания.
  • Немного сократил длинные тексты. Схлопнулись «линейки», «Отбой» получил «сон» и длительность, убрал «и т.д.» и т.д.

Трудовые дела

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

Современные дети обожают смартфоны и умеют ими пользоваться порой лучше родителей. Возможно, надо было сразу делать электронный вариант, а не бумажный. Но насколько это далеко от задачи перевестки таблицы? Опасно.

Тем не менее можно сделать отсылку на этот вариант в виде QR-кода.

Шаг 4. QR-код, сокращение текстов.

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

Обед

На следующем шаге:

  • Убрал суммы времени. Все же это распорядок дня, а не рекламная листовка лагеря.
  • Увеличил размер шрифта заголовка. Макету не доставало контраста.
  • Увеличил размер шрифта основного текста.
  • Поменял позицию и размер второстепенных элементов: лого, QR-код. На то они и второстепенные, чтобы быть дополнением к основному содержанию.
  • Сократил тексты. «Отрядная работа» лишилась уточнений, поскольку они по сути примерные, а не настоящие. Убрал «занятия».
  • Добавил разрядку цифрам в первой колонке для повышения читаемости.
  • Отрядную работу окрасил в красный цвет и добавил дополнительный акцент — звездочку, как графическую рифму к логотипу. Это самое вариативное мероприятия в течении дня, и, наверное, самое важное после питания. Да и сам пункт звучит как-то по-советски, не?
  • Привел формат макета к A5. Для удобства печати.
Шаг 5. Размер шрифта, линейки, акцент на отрядной работе, формат макета.

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

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

Что-то начало вырисовываться… Но тут Остапа понесло.

Чай

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

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

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

Шаг 6. Навигация по карте.

На обратной стороне расписания должна была располагаться карта лагеря с отметками и подписями к ключевым объектам.

Шаг 6. Обратная сторона расписания.

Получалось сложновато. Для нормальной реализации концепта потребовалось бы намного больше времени и сил.

Все взвесив, и учтя исходное задание на конкурс, я выбросил карту в ведро.

Индивидуальное чтение

В следующий присест я осознал, что, несмотря на крепкую таблицу, макет никакой. Что-то странное было в общем образе и он мне не нравился.

Ответ витал в воздухе: от расписания пахло советским союзом. А нам ведь надо современно и круто. Ну не вяжется одно с другим!

Настало время попрощаться с «Совёнком» и пошуршать по сусекам референсов в поисках более смелых решений.

Спустя какое-то время я остановился на вот таком экземпляре, который меня устроил по настроению, цветам и стилистике:

Исходный референс для брендирования.

Я крал как художник. Мозайка была разбита, а из кусочков я собрал «паттерн» вокруг таблицы.

Шаг 7. Финальный вариант.

Бодрый визуал просил живости и от текста! Второстепенные тексты я перенабрал более акцидентным шрифтом Neue Metana Next Free Personal. Им же набран и заголовок «Распорядок дня», который я для пущей динамичности образа сломал и уложил в два стикера.

«Отрядная работа» перестала быть красной, длительность мероприятий — серой. Цветового шума хватает и вокруг таблицы. Спокойствие, только спокойствие. Где твои манеры, табличка?!

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

Я примерил этот вариант к исходными требованиями к задаче:

  • Таблица? Переверстана, не разваливается. Акценты присутствуют.
  • Современно, круто, нескучно? Да. Яркие цвета, все взрывается, веселится, «ад и израиль».
  • Удобно и наглядно? Да. Есть ниточка к мобильной версии и помощь опаздавшим.
  • Для детей и взрослых? Вроде баланс соблюден.

На этом решил закончить и отдавать работу на суд компетентного жюри.

Приготовление ко сну

27 октября 2022 года я залил финальный вариант в ВК и стал ждать у моря погоды. Время тянулось медленно. До конца конкурса было больше двух недель.

Я развлекал себя тем, что периодически просматривал работы других конкурсантов, которые (также как и моя) были отмечены хэш-тегом #радостныйтабличныйконкурс. Кликайте на ссылку и полистайте!

Было интересно сравнивать свой ход мыслей и визуальные приемы с вариантами других участников. И долго думать, а правильно ли я «прочитал мысли» организаторов и судей? В ту ли сторону развивал решение? Насколько был близок к идеальному решению?

Отбой

14 ноября 2022 года были оглашены результаты.

Мое решение попало в номинацию «Прохладно». Ну то есть, по пятибальной системе это твердая тройка :)

Вот работы трех победителей:

Полина Пятинкина
Кирилл Максимук
Александра Кузнецова

Еще двум конкурсантам достались дополнительные призы:

Алексей Афанасович
Дарья Дашкова

Поздравляю победителей! 🎉

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

Вот они:

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

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

2. Разбили список на группы: утро, день, вечер или до и после сончаса, а также добавили соответствующие заголовки.

3. Визуализировали активности иконками, иллюстрациями или цветом.

4. Показали продолжительность занятий с помощью диаграммы.

Давайте-ка займемся самопроверкой и примерим критерии к моему варианту:

  • Выделили ключевые пункты. Завтрак, обед, чай и ужин выделены.
  • Разбили список на группы, а также добавили соответствующие заголовки. Но и в работах победителей (кроме спец-призов) этого нет :)
  • ❌ ✅ Визуализировали активности иконками, иллюстрациями или цветом. Отрядная работа отмечена скромными красными звездочками.
  • Показали продолжительность занятий с помощью диаграммы. Но и в работах победителей этого нет :)

Не менее интересно было посмотреть видео-разбор всех работ от Михаила:

По мнению Михаила мой вариант:

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

Полностью принимаю эти комментарии.

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

Я себе именно так и представлял визуальное оформление расписания — как один из экземпляров в рамках единого брендбука лагеря.

Выводы

Интересный и радостный конкурс! Для себя я вынес из него пару важных уроков:

  1. Надо сильнее прокачивать умение прогнозирования результатов и анализа постановки задачи. Критерии, критерии и еще раз критерии.
  2. Надо сильнее прокачивать графическую составляющую при визуализации табличных данных.

Ждем новых конкурсов и готовимся.

И напоследок — мой фаворит из конкурсных работ, за исключением своей. Чистенько, компактно, тоже из категории «прохладно»:

Zhenya Volkov

--

--

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

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store