Это история о том, как можно делать дизайн без дизайна.
Кратко: избавился от избыточного дизайна, сократил сроки реализации в 5 раз и получил больше гибкости.
Предыстория
Одной из первых задач в Craftum, в качестве дизайнера, было добавление Google-шрифтов в конструктор.
Продакт-менеджер обрисовал ситуацию:
- В редакторе есть возможность использовать несколько «стандартных» шрифтов (что оказалось не совсем правдой, потому что «стандартные» не являлись «доступными во всех операционных системах и не требующими загрузки»).
- Есть множество запросов от пользователей на расширение списка шрифтов, клиенты ждут данный функционал больше года.
- Стейкхолдеры недовольны сроками реализации, а в очереди уже есть более приоритетные задачи, которые могут влиять на выручку. Но откладывать нельзя, мы получили нагоняй на последней встрече с фаундерами и шрифты надо запускать в работу в следующем спринте (через 2 недели).
- Есть макеты от предыдущего дизайнера, но на реализацию потребуется больше месяца по оценке разработчиков.
- Нужно «проверить макеты» и «провалидировать решение».
Стало интересно, как можно потратить больше месяца на добавление новых шрифтов в список и в чём заключается сложность.
Анализ макетов и предлагаемого решения выявил проблемы:
- За основу был взят подход популярного конкурента, который не являлся оптимальным: шрифт предлагалось подключать в настройках сайта, а не в редакторе, где пользователь проводил большую часть времени. После подключения шрифт становился доступным для выбора в редакторе страниц. Помимо неочевидного флоу это добавляло технические ограничения: максимум можно было подключить 2 шрифта и они загружались на всех страницах сайта, даже если не использовались, что негативно влияло на скорость загрузки.
- Чтобы не копировать решение подчистую и «улучшить опыт», предлагалось интегрироваться через Google Fonts API и воспроизвести в интерфейсе полноценный Google Fonts с множеством фильтров, поиском, превью и т.д. Это увеличивало сложность и сроки реализации, но давало сомнительные преимущества в виде декоративных интерфейсов, не несущих практической пользы.
Как я решил задачу
Отменил реализацию переусложнённых интерфейсов в настройках сайта. У нас уже был обычный выпадающий список шрифтов в редакторе, к которому оставалось добавить поиск по названию.
Заменил интеграцию Google Fonts API на статический JSON и папку с SVG-превью, которые можно обновлять вручную или по крону, при необходимости. Сначала я хотел написать или найти скрипт для генерации, но наткнулся на готовый, открытый, регулярно обновляющийся репозиторий с готовыми ресурсами.
Список используемых шрифтов предложил хранить в метаданных каждого блока. Список обновляется на клиенте при изменениях в блоке, перед отправкой его на сервер. Опытным путём выяснил, что нагрузки это не вызывает и занимает на клиенте менее 30ms даже в самых огромных блоках на старом железе.
При публикации сервер получает из базы список всех блоков с метаданными, необходимых для рендеринга и формирует единый список шрифтов, которые должны быть загружены именно на этой странице.
Готово!
Результат
Реализация заняла 1 неделю, вместо изначальных 5. Мы высвободили ресурс под более приоритетные задачи.
Новое решение дало гибкость, недоступную в подавляющем большинстве конструкторов: клиент мог использовать любой шрифт из списка Google Fonts в любом месте, на любой странице, в неограниченном количестве. При этом, в отличие от конкурентов, на каждой странице сайта загружались только используемые шрифты, что позитивно повлияло на скорость загрузки страниц.