Как мы переделывали Trusty Tools и в итоге поменяли шрифт

Обновление Trusty Tools шло итеративно. Хотелось сделать сайт чище, удобнее и современнее, но не превращать работающий магазин в дизайнерский эксперимент.

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

Визуальным ориентиром был Rothoblaas: минимализм, спокойная типографика, крупные изображения, много внимания самому продукту.

Но Trusty — другой сайт. Это плотный практичный магазин. Человек приходит сюда не полюбоваться композицией, а найти анкер определённого диаметра, посмотреть нагрузку, скачать документацию и купить нужную коробку.

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

Сначала мы приделали новый сайт к старой шапке

Буквально.

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

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

На этом этапе мы, наоборот, добавляли много.

А потом начали удалять.

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

По мере накопления данных новый сайт становился не сложнее, а проще.

Потом добрались до шапки

Когда остальная часть интерфейса устоялась, пересобрали верх сайта.

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

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

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

А потом мы поменяли шрифт

И внезапно переделали сайт ещё раз.

До этого Trusty использовал PT Sans и PT Sans Caption. Для новой версии мы попробовали Golos Text от Paratype.

Это тоже российский гротеск Paratype, но заметно более современный по рисунку. У семейства есть Regular, Medium, DemiBold, Bold и Black, а также variable-начертание. Сам Paratype относит Golos Text в том числе к вебу, интерфейсам, навигации, длинным текстам и мелкому тексту.

И самое приятное для веб-проекта: семейство распространяется бесплатно; у Paratype есть отдельная бесплатная коллекция Golos Text + Golos UI.

Мы подключили Golos Text практически ко всему сайту.

На этом месте выяснилось, что заменить шрифт — это примерно ни разу не заменить шрифт.

Те же 16 пикселей оказались другими 16 пикселями

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

Название товара, которое раньше занимало две строки, может занять три. В кнопку внезапно перестаёт помещаться надпись. Контакты начинают толкаться. Меню переносится. Цена становится заметнее. Заголовок, наоборот, оказывается слишком тяжёлым.

CSS говорит 16px.

Интерфейс говорит: переделывай.

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

Насыщенность — это иерархия, а не украшение

Особенно хорошо разница проявилась на насыщенности.

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

То есть не важно ничего.

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

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

Воздух тоже пришлось вернуть обратно

Следующей очевидной идеей было «дать странице больше воздуха».

Звучит всегда прекрасно.

Пока не начинаешь это делать.

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

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

После длинного абзаца нужен один интервал. После фотографии — другой. В списке расстояние уже создаётся самими пунктами. Карточке товара вообще плевать на правила типографики статьи: у неё собственная композиция.

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

А где не разделяет — убирать.

Таблица должна быть таблицей

То же самое произошло с кастомными элементами статей.

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

Спискам — нормального расстояния между пунктами.

Цитатам — собственного ритма.

Изображениям — места.

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

Чем дальше шла работа, тем меньше специальных дизайнерских решений требовалось.

Проверять дизайн пришлось настоящим магазином

У идеального макета есть неприятное свойство: в нём всё помещается.

У настоящего магазина есть товар:

«Архитектурные саморезы FlatLock Black 7×155 с покрытием Protech Z10 (100 шт)».

Есть длинные артикулы. Цена со скидкой и без неё. Пять документов. Десять характеристик. Фотография на белом фоне, фотография на сером фоне и фотография, которую производитель снимал неизвестно на что.

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

Если компонент переживает длинное название, отсутствие товара, пять строк характеристик и экран шириной 320 пикселей — это компонент.

Если для него каждый раз нужно подобрать правильный текст и правильную фотографию — это картинка в Figma.

Было → стало

Было	Стало
PT Sans + PT Sans Caption	Golos Text
Много элементов одинаковой визуальной массы	Вес шрифта зависит от роли элемента
Экспериментальные блоки	Только те блоки, которыми реально пользуются
Разрозненное оформление таблиц и характеристик	Один визуальный принцип
«Добавим воздуха»	Отступ имеет конкретную функцию
Дизайн проверяется на макете	Дизайн проверяется длинным названием товара
Новый интерфейс поверх старой шапки	Единая система сайта

И что в итоге изменилось

Trusty всё ещё выглядит как Trusty.

Красный остался красным. Каталог остался каталогом. На странице товара по-прежнему много технической информации. Никто не спрятал характеристики за красивой фотографией шурупа на фоне альпийского леса.

Но информация перестала одинаково громко требовать внимания.

Где-то для этого пришлось переделать целый компонент.

Где-то убрать блок.

Где-то изменить четыре пикселя.

А где-то оказалось достаточно поменять форму букв.

Наверное, это и есть главное, что мы вынесли из обновления: хороший редизайн не обязательно должен быть заметен как редизайн.

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

Если ему просто стало чуть проще пользоваться сайтом — значит всё получилось.