Виталий Филатов

о тексте, смысле и красоте

Шаблон инвойса в гугл-таблицах

Переделал шаблон инвойса в гугл-таблицах. У меня периодически бывают такие небольшие задачи, часа на полтора, когда надо что-нибудь без фанатизма причесать средствами встроенных редакторов. Такие задачи интересны ограничениями и очевидным результатом: было неряшливо, стало красиво :3

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

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

Исходный шаблон на печати и в сетке:

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

Для начала подберём шрифт, продумаем набор колонок и добавим логотип.

По брендбуку самый близкий шрифт — Verdana. Он есть у всех, у него красивый рисунок и нормальная кириллица. В оригинале был Arial 8pt, Verdana сделаем 9pt, чтоб было крупнее и легче читалось.

Для красоты и порядка шаблону нужно подобие модульной сетки. Оставим по краям пустые строки и столбцы для полей, накидаем таблицу с перечнем и добавим столбцов в середине для выравнивания. Объединять ячейки проще, чем вставлять новые, поэтому пусть будут лишние.

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

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

Банковские реквизиты перенесём вниз, предполагая, что они потребуются читателю после ознакомления с составом услуг и суммой. Валюту добавим в сразу ячейки через формат чисел, а дисклеймер поставим на плашку с серым фоном. Так мы объединим два абзаца в самостоятельный блок и отделим банковские реквизиты от итогов таблицы.

Оценить результат на экране сложно, поэтому периодически распечатываем получившееся и сравниваем:

Оригинал и промежуточные варианты. Сложная строка итогов всё ещё на месте

Побеждает вариант в одну колонку без подчёркиваний и заливок редактируемых ячеек.

Совет. Чтобы не окрашивать сетку в белый цвет, отключите её отображение в диалоге настройки печати. Снимите галочку в пункте Форматирование → Показать линии сетки и перейдите на следующий экран. Документ запомнит настройки.

Результат и оригинал:

Остаётся проблема с датой документа. Если указывать дату в американском формате месяц-день-год, до 13 числа возможна путаница. Например, 5.10.2019 и 10-5-2019. Чтобы не путать, даты можно писать через слеш в американском и международном английском форматах:

10-5-2019 / 5-10-2019.

Не так элегантно, но логика сохраняется.

 1548   2019   верстка   Девхаб   работа
1 комментарий
Виталий 2019

Превентивно вброшу, что, мол, в следующий раз автор напишет, как нарисовал слайд в Фигме по брифу )