«Прохладная» стори, как я переверстывал таблицу в конкурсе
Подъем
25 октября 2022 года Игорь Штанг и Михаил Капанага объявили о старте «Радостного табличного конкурса». Чтобы стать обладателем одной из трех подписок на курс «Таблицы и прочие радости», претендентам нужно было переверстать вот эту таблицу:
Задание было сформулировано так:
Представьте, что это расписание для современного крутого детского лагеря. Заказчик попросил сделать дизайн удобным, наглядным и нескучным — чтобы понравилось и детям, и взрослым.
Я обожаю такие конкурсы, в которых можно тряхнуть стариной и проверить свои силы. Просто мания какая-то: хлебом не корми — дай попереверстывать.
К тому же постановка задачи содержала таблицу низкого качества, которая с первого взгляда подсказывала улучшения и подразумевала широкое поле вариантов решения.
Другим фактором были судьи, которых я уважаю и ценю их вклад в дизайн-образование. Любой их вердикт или разбор работы уже награда.
Ну как тут не принять участие?
Свой вариант решения я делал в три присеста. За три непродолжительных подхода по вечерам я одним из первых сделал макет, который затем публично опубликовал для участия в конкурсе на своей странице в ВК.
Ниже я реконструирую и прокомментирую процесс переверстки. После чего мы посмотрим работы победителей и попробуем сделать выводы.
Зарядка
Первое, что нужно сделать — это подумать над формулировкой задания. Ведь ключ к победе в любом конкурсе лежит в осознании критериев оценки и образе идеального решения. Причем не вашего решения, а того, который представляют себе организаторы и судьи. Если вам удастся прочитать их мысли, вы уже на пол пути к успеху.
Давайте вместе подумаем, как это сделать! Всё, что у нас есть, это задание. В нем можно поискать критерии, которые Игорь и Михаил будут использовать при выставлении оценок. Выделим ключевые слова:
Представьте, что это расписание для современного крутого детского лагеря. Заказчик попросил сделать дизайн удобным, наглядным и нескучным — чтобы понравилось и детям, и взрослым.
Таким образом, к базовой задаче переверстки таблицы мы получаем дополнительные требования. Макет должен быть:
- Современный, крутой, нескучный. Дизайн не должен быть слишком минималистичным, должен быть в тренде современных коммуникаций с детьми.
- Удобный, наглядный. Нужно учесть контекст и сценарий использования, подумать над форматом носителя.
- Для детей и взрослых. Психология детей и взрослых отличается, однако приоритет в выборе стоит отдавать все же детям. Именно они будут пользоваться расписанием, а взрослые скорее оценят его мельком и более поверхностно: «в хорошее ли место я отдал своего ребенка?»
Имея и постоянно держа в голове такое расширенное описание, можно переходить к Фигме.
Уборка постелей
Первым делом надо перенести текст из исходной таблицы в редактируемые слоя Фигмы.
При переносе я сразу сделал несколько улучшений:
- Сократил заголовок. Слово «Примерный» не добавляет ясности и может только смущать. «В загородном пионерском лагере» — это указание контекста, который и так очевиден для тех, кто в лагере находится.
- Выбрал фон с оттенком в желтое. Чисто белый фон — это дурной вкус, поскольку в жизни абсолютно белого не существует и наши глаза это знают. Не стоит теребить бессознательное зрителя по этому поводу.
- Выбрал шрифт PT Sans. Поскольку расписание это скорее навигационная задача, то и шрифт должен быть навигационным. Да, это не табло в метро или на вокзале, но усложнять основную информационную часть макета акциденцией тоже не стоит. Даже детям, и даже в детском лагере.
- Поменял столбцы местами. Ребенок смотрит на часы, и отталкиваясь от текущего времени, решает, что ему делать. Логично, что начинать поиск нужной строчки надо со времени, а не названия.
Формат получился так себе. Но я решил отложить вопрос соотношения сторон до более поздней стадии, когда разберусь к содержанием.
Линейка
Следующим шагом стоило понять, что делать со временем. Окончание предыдущего диапазона в таблице совпадает в началом следующего. Очевидно, что его можно сократить.
Вместе с этим появилась довольно очевидная идея снизить когнитивную нагрузку на мозг ребенка и дописать длительность каждого мероприятия. Это поможет заранее оценить, сколько оно займет времени, и как быстро надо действовать.
В первую колонку я также добавил лидирующие (ведущие) нули, чтобы выровнять строчки по двоеточию-разделителю. По идее отсутствие рваного края должно ускорить сканирование столбца глазами.
Отдельно подумал над снижением акцента на колонке с длительностью:
Завтрак
Параллельно переформатированию контента я думал об эстетике и оформлении. О визуальном языке, на котором будет говорить макет.
Будем честны, в детском лагере я никогда не был, если не считать лагерь «Совёнок» из «Бесконечного лета», где визит закончился рутом «вскрываемся».
Поэтому в середине процесса я попробовал примерить к расписанию эстетику «Совёнка».
На макете выше я также сделал следующие правки:
- Жирный заголовок. Для контраста. Согласен, что он получился не большой, но хоть какой-то.
- Выделил питание. Благодаря «Совёнку» мы все знаем, что в любой непонятной ситуации нужно идти в столовую. Идея, что дети в своей ментальной модели мира отмеряют отрезки дня приемами пищи, мне показалась логичной. Главное в лагере — это покушать.
- Примерил суммы времени на разные активности. Тут я больше думал о родителях, которые по расписанию могут оценить программу лагеря с высоты птичьего полета. Кусочек промо для тех, кто платит. Далее эта идея мне разонравилась, поскольку уходила далеко от первоначального задания.
- Немного сократил длинные тексты. Схлопнулись «линейки», «Отбой» получил «сон» и длительность, убрал «и т.д.» и т.д.
Трудовые дела
Расписание на бумаге как инструмент имеет несколько минусов: его можно залить чаем, потерять или сжечь в костре. Бумага марается, мнется, изнашивается, печать стоит денег.
Современные дети обожают смартфоны и умеют ими пользоваться порой лучше родителей. Возможно, надо было сразу делать электронный вариант, а не бумажный. Но насколько это далеко от задачи перевестки таблицы? Опасно.
Тем не менее можно сделать отсылку на этот вариант в виде QR-кода.
Длинные строчки все еще рвут и растягивают формат по ширине. Я попробовал их сократить мягко, добавив уточняющие детали более мелким шрифтом и второй строкой. Это привело к дырам между строк, что не ок.
Обед
На следующем шаге:
- Убрал суммы времени. Все же это распорядок дня, а не рекламная листовка лагеря.
- Увеличил размер шрифта заголовка. Макету не доставало контраста.
- Увеличил размер шрифта основного текста.
- Поменял позицию и размер второстепенных элементов: лого, QR-код. На то они и второстепенные, чтобы быть дополнением к основному содержанию.
- Сократил тексты. «Отрядная работа» лишилась уточнений, поскольку они по сути примерные, а не настоящие. Убрал «занятия».
- Добавил разрядку цифрам в первой колонке для повышения читаемости.
- Отрядную работу окрасил в красный цвет и добавил дополнительный акцент — звездочку, как графическую рифму к логотипу. Это самое вариативное мероприятия в течении дня, и, наверное, самое важное после питания. Да и сам пункт звучит как-то по-советски, не?
- Привел формат макета к A5. Для удобства печати.
Колонка с длительностью мероприятия переехала вправо, на переферию. Чтобы не мешать поиску названия и стать опциональным знанием, когда ребенок уже запомнит, что сколько длится.
В макет вошли линейки, которые должны подкрепить связь двух первых колонок с третьей, а также дополнительно выделить ключевые мероприятия по питанию.
Что-то начало вырисовываться… Но тут Остапа понесло.
Чай
В конце второго присеста я так увлекся контекстом и сценариями использования расписания, что почти создал монстра.
Отталкиваясь от мысли, что загородный лагерь наверняка имеет большую территорию с различными геозонами и постройками, в которых легко запутаться или заблудиться новичку, я решил протянуть навигационную руку помощи детям. В ночи мерещились крики заблудших и зовущих на помощь душ.
Идея заключалась в добавлении четвертой колонки с цифрами, которые подскажут куда именно на карте нужно идти ребенку. Причем цифрами снабжались не все строчки, а только те, что не имеют вариативности в содержании (четко привязаны к месту действия) и не являются корпусом/домиком проживания (у каждого он свой, универсально не сделать).
На обратной стороне расписания должна была располагаться карта лагеря с отметками и подписями к ключевым объектам.
Получалось сложновато. Для нормальной реализации концепта потребовалось бы намного больше времени и сил.
Все взвесив, и учтя исходное задание на конкурс, я выбросил карту в ведро.
Индивидуальное чтение
В следующий присест я осознал, что, несмотря на крепкую таблицу, макет никакой. Что-то странное было в общем образе и он мне не нравился.
Ответ витал в воздухе: от расписания пахло советским союзом. А нам ведь надо современно и круто. Ну не вяжется одно с другим!
Настало время попрощаться с «Совёнком» и пошуршать по сусекам референсов в поисках более смелых решений.
Спустя какое-то время я остановился на вот таком экземпляре, который меня устроил по настроению, цветам и стилистике:
Я крал как художник. Мозайка была разбита, а из кусочков я собрал «паттерн» вокруг таблицы.
Бодрый визуал просил живости и от текста! Второстепенные тексты я перенабрал более акцидентным шрифтом Neue Metana Next Free Personal. Им же набран и заголовок «Распорядок дня», который я для пущей динамичности образа сломал и уложил в два стикера.
«Отрядная работа» перестала быть красной, длительность мероприятий — серой. Цветового шума хватает и вокруг таблицы. Спокойствие, только спокойствие. Где твои манеры, табличка?!
В подвале появилась небольшая просьба о пунктуальности, переходящая в инструкцию-заботу в том случае, если тайминг все же нарушен. Графически подпись как бы отлетает от взрыва хлопушки, которая веселит зрителя.
Я примерил этот вариант к исходными требованиями к задаче:
- Таблица? Переверстана, не разваливается. Акценты присутствуют.
- Современно, круто, нескучно? Да. Яркие цвета, все взрывается, веселится, «ад и израиль».
- Удобно и наглядно? Да. Есть ниточка к мобильной версии и помощь опаздавшим.
- Для детей и взрослых? Вроде баланс соблюден.
На этом решил закончить и отдавать работу на суд компетентного жюри.
Приготовление ко сну
27 октября 2022 года я залил финальный вариант в ВК и стал ждать у моря погоды. Время тянулось медленно. До конца конкурса было больше двух недель.
Я развлекал себя тем, что периодически просматривал работы других конкурсантов, которые (также как и моя) были отмечены хэш-тегом #радостныйтабличныйконкурс. Кликайте на ссылку и полистайте!
Было интересно сравнивать свой ход мыслей и визуальные приемы с вариантами других участников. И долго думать, а правильно ли я «прочитал мысли» организаторов и судей? В ту ли сторону развивал решение? Насколько был близок к идеальному решению?
Отбой
14 ноября 2022 года были оглашены результаты.
Мое решение попало в номинацию «Прохладно». Ну то есть, по пятибальной системе это твердая тройка :)
Вот работы трех победителей:
Еще двум конкурсантам достались дополнительные призы:
Поздравляю победителей! 🎉
Для меня самым ценным и интересным было оглашение критериев, по которым выбирались призеры. Ведь это именно то, что я пытался телепатически прочитать на старте конкурса.
Вот они:
Было непросто выбрать 3 лучших из 49 работ, потому что многие справились с заданием неплохо и сделали главное: упростили колонку времени и поставили ее в начало. В шортлист попали те ребята, которые пошли дальше в сторону удобства и наглядности:
1. Выделили ключевые пункты. Например, еду (завтрак, обед, ужин)или самые интересные для детей занятия (кружки, соревнования, игры).
2. Разбили список на группы: утро, день, вечер или до и после сончаса, а также добавили соответствующие заголовки.
3. Визуализировали активности иконками, иллюстрациями или цветом.
4. Показали продолжительность занятий с помощью диаграммы.
Давайте-ка займемся самопроверкой и примерим критерии к моему варианту:
- ✅ Выделили ключевые пункты. Завтрак, обед, чай и ужин выделены.
- ❌ Разбили список на группы, а также добавили соответствующие заголовки. Но и в работах победителей (кроме спец-призов) этого нет :)
- ❌ ✅ Визуализировали активности иконками, иллюстрациями или цветом. Отрядная работа отмечена скромными красными звездочками.
- ❌ Показали продолжительность занятий с помощью диаграммы. Но и в работах победителей этого нет :)
Не менее интересно было посмотреть видео-разбор всех работ от Михаила:
По мнению Михаила мой вариант:
- Не дотянул в плане иллюстративности и наглядности. Мероприятия не были обыграны иконками или мини-иллюстрациями.
- Визуальный стиль живет отдельно от содержания. Вместо таблицы можно разместить «и меню, и афишу, и все что захочется».
Полностью принимаю эти комментарии.
Однако, по поводу визуального стиля, остаюсь при мнении, что это не минус, а плюс. Если смотреть на предложенный паттерн и графические элементы как на инструмент брендирования различных носителей, то их универсальность играет только на руку при построении консистентной дизайн-системы.
Я себе именно так и представлял визуальное оформление расписания — как один из экземпляров в рамках единого брендбука лагеря.
Выводы
Интересный и радостный конкурс! Для себя я вынес из него пару важных уроков:
- Надо сильнее прокачивать умение прогнозирования результатов и анализа постановки задачи. Критерии, критерии и еще раз критерии.
- Надо сильнее прокачивать графическую составляющую при визуализации табличных данных.
Ждем новых конкурсов и готовимся.
И напоследок — мой фаворит из конкурсных работ, за исключением своей. Чистенько, компактно, тоже из категории «прохладно»:
