Обновили дизайн Calcup: меньше шума, больше рабочего пространства

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

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

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

Калькуляторы стали больше похожи на рабочий инструмент

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

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

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

Результат теперь не прячется

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

Отдельно поправили поведение result panel: на desktop она не должна уезжать вниз, не должна иметь внутренний скролл и не должна перекрываться карточками “встроить на сайт” или кнопками печати. Если результат нужен человеку во время ввода параметров, он должен быть виден, а не жить где-то после формы.

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

Навигация стала полезнее

Левый sidebar теперь показывает текущую категорию и соседние инструменты. Например, рядом с кредитом есть ипотека, вклад, сложный процент, ROI и рефинансирование. Это лучше, чем каждый раз возвращаться в каталог и заново искать похожий расчёт.

Важная мелочь: названия в навигации стали короткими. Не “Калькулятор давления в шинах велосипеда онлайн”, а “Давление в шинах”. Не “Калькулятор обоев”, а “Обои”. Для SEO остаются полные заголовки, а для интерфейса нужны быстрые человеческие подписи.

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

Визуально стало спокойнее

Мы убрали ощущение, что каждая страница собрана отдельно. Карточки, поля, переключатели, подсказки, notice-блоки, таблицы и related cards теперь опираются на общий дизайн-контракт. Это снижает визуальный шум и делает страницы предсказуемее.

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

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

Блог стал частью портала

Блог тоже обновили. Раньше он был ближе к архиву заметок, теперь это нормальный контентный слой Calcup: статьи о формулах, обновлениях, методологии и новых инструментах.

У статьи появился правый rail с оглавлением, связанными калькуляторами и похожими темами. Вверху есть короткий блок “Коротко”, чтобы не читать весь текст ради понимания сути. Это особенно полезно для заметок про формулы и изменения в каталоге.

При этом блог не получил Workbench-sidebar. Для чтения не нужна калькуляторная навигация слева. У калькуляторов свой рабочий layout, у статей свой спокойный article layout. Это разные задачи, и смешивать их не нужно.

Что это даёт дальше

Главный результат редизайна — не новая обложка, а более жёсткий контракт для будущих страниц. Новый калькулятор теперь должен собираться из общих примитивов: Workbench layout, section cards, result panel, scroll-aware tables, CalcNotice и related cards.

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

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