Типографика остается одним из ключевых элементов дизайна, влияющих на восприятие информации пользователями. В эпоху цифровых продуктов, где каждая деталь интерфейса важна, внедрение качественной типографической системы становится основополагающей задачей для создания гармоничного и удобного пользовательского опыта. Компания Atlassian, известная своими крупными корпоративными приложениями, такими как Jira и Confluence, является ярким примером того, как можно масштабно и системно подходить к обновлению типографики с минимальными рисками и максимумом пользы для пользователей. История изменений в Atlassian началась с потребности заменить устаревшую типографическую систему, которая включала в себя нечеткие рекомендации, расхождения между дизайном и кодом, а также визуальные несоответствия, связанные с использованием системных шрифтов. Такая ситуация приводила к тому, что в разных приложениях и на разных платформах пользовательский интерфейс выглядел неоднородно, ухудшая общий опыт взаимодействия.
Появилась необходимость создать единый, современный и доступный визуальный стиль, который не только отвечал бы актуальным стандартам, но и стал бы надежной основой для дальнейшего развития продуктов компании. Работа над новой типографической системой затронула огромное количество компонентов и экранов во всех приложениях Atlassian. Это был колоссальный междисциплинарный проект, требующий слаженной работы дизайнеров, инженеров и специалистов по контенту. Команда понимала, что любое неверное решение на начальных этапах может поставить под угрозу целостность системы и привести к сложностям с поддержкой и расширением в дальнейшем. Тем не менее, вместо того чтобы пытаться сделать все сразу, разработчики приняли стратегию постепенных изменений, позволяя внедрять обновления шаг за шагом и обеспечивая постоянную ценность для пользователей и партнеров.
Первой ключевой вехой стало создание фреймворка на основе так называемых «токенов» – базовых единиц типографики, которые позволяют унифицировать стили для всех компонентов и приложений. Поначалу токены были построены так, чтобы максимально точно имитировать старую систему, чтобы визуально для конечных пользователей и создателей не было резких изменений. Это решение позволило проверить и отладить инфраструктуру на стороне кода, успешно протестировать ядро системы и открыло пространство для дизайнеров, которые могли экспериментировать с улучшениями и оценивать их в реальных условиях. Следующий этап был посвящен созданию единой визуальной иерархии, улучшению читаемости и доступности. В первую очередь был разработан масштаб размеров шрифтов и межстрочного интервала, основанный на «minor third scale» – системе, обеспечивающей гармоничное сочетание разных размеров в контексте различных блоков интерфейса.
Благодаря этому удалось устранить ранее существовавшую визуальную разнородность и обеспечить согласованность оформления. Особое внимание уделялось заголовкам – они стали более жирными, что усиливало контраст и улучшало восприятие структурированной информации, особенно на информационно насыщенных экранах. Увеличение минимального размера текста с 11 до 12 пикселей положительно сказалось на доступности интерфейсов, облегчая чтение пользователям с разным зрением. Кроме того, в новом дизайне исчезло использование полностью заглавных букв, что существенно повысило удобочитаемость и снизило визуальный шум. Не меньшее значение имела пересмотренная и упрощенная система наименований для стилей и токенов.
Четкие и интуитивные обозначения упрощают работу для дизайнеров и разработчиков, снижая вероятность ошибок и недопониманий при использовании типографических ресурсов. Одним из главных технических вызовов было отказ от системных шрифтов в пользу собственных. Системные шрифты, используемые на macOS и Windows, существенно отличались по характеристикам – высоте базовой линии, интервалам и толщине. Из-за этого идентичное позиционирование элементов и текста не было достижимо, что сказывалось на консистентности интерфейса на разных платформах. Атласник проектной команды стал поиск шрифтов, адаптированных специально для информационно насыщенных экранов, способных обеспечить высокий уровень легкости восприятия и максимальную доступность.
Так на свет появились Atlassian Sans и Atlassian Mono. Atlassian Sans, производный от широко применяемого Inter Variable, обладает гибкостью настроек – можно изменять количество особенностей шрифта в зависимости от требований конкретного приложения. Это улучшает читабельность, снижает ошибки распознавания символов и отлично сочетается с фирменным шрифтом Charlie, усиливая уникальность визуального бренда. Atlassian Mono, основанный на JetBrains Mono, ориентирован на разработчиков. Он сохраняет равномерную ширину знаков и увеличенную высоту строчных букв, что помогает поддерживать необходимую длину строк кода и улучшает качество отображения при малых размерах.
Такое соответствие важно, поскольку в продуктах Atlassian шрифты пользовательского интерфейса и кода активно используются рядом, и визуальная гармония между ними способствует профессиональному восприятию интерфейса. Благодаря предварительной работе с токенами и компонентами, переход на новые шрифты был технически простым переключателем, что позволило безболезненно обновить внешний вид во всех приложениях и обеспечить свежий, современный облик. Команда, работавшая над проектом, выделила несколько ценных уроков, которые будут полезны для специалистов, планирующих аналогичные изменения в масштабных системах. Важнейшей составляющей успеха стало партнерство и совместное проектирование. Совместные воркшопы с командами из разных продуктов – таких как Jira, Confluence и Atlas – позволяли на ранних этапах проверить эффективность выбранной типографической модели и собрать обратную связь в различных контекстах использования.
Еще одним открытием стала необходимость смелых решений. Так, первоначально в системе предполагалось использование отдельного типа текста «UI text», предназначенного для пользовательского интерфейса с особым соотношением высоты строк и размера шрифта. Однако это привело к путанице и длительным обсуждениям среди создателей контента и дизайнеров. В конечном итоге команда решилась отказаться от этого стиля во имя ясности и целостности системы. Проект подчеркнул важность глубокой интеграции дизайна, инженерии и контента.
Поначалу количество времени, отведенного на дизайн при создании токенов, было слишком скромным, что привело к конфликтам и неясностям. Больше внимания совместному процессу позволило устранить проблемы на раннем этапе, улучшив коллаборацию и качество конечного продукта. Результатом работы стали регулярные сессии по выявлению и устранению багов в различных браузерах и приложениях, что подтвердило работоспособность и постоянство типографической системы во всех средах, а не только в дизайн-макетах. Гибкость планирования, включающая время на итерации, стала ключом к успешному развитию проекта. Несмотря на структурированное разделение на три этапа, команда готова была вносить коррективы в процессе внедрения – будь то корректировка межстрочного интервала заголовков, финальная обработка жирности шрифта или отказ от спорных элементов.
Отдельно стоит упомянуть сложность и важность продуманной системы наименований. Это аспект, который вызывают много вопросов и требует времени и усилий для достижения последовательности и однозначности. Итоговые результаты оказались впечатляющими. Пользователи Atlassian получили обновленную типографическую систему с четкой визуальной иерархией, высокой степенью согласованности и улучшенной доступностью. Кроме того, благодаря поэтапному подходу, внедрение прошло гладко и не вызвало значительных сбоев или неудобств.
Проект Atlassian продемонстрировал, насколько сложные дизайнерские системы можно успешно модернизировать при правильном балансе между стратегией, творчеством и командной работой. Этот опыт вдохновляет другие компании вкладываться в развитие своих визуальных основ, понимая, что системное обновление типографики – это долгосрочная инвестиция в качество пользовательского опыта и брендовый имидж. Для тех, кто заинтересован узнать подробности и поделиться мнением о новой типографике Atlassian, открыт специальный канал обратной связи на их официальном дизайнерском портале. Такой диалог продолжает поддерживать динамичное развитие продукта и делает участников сообщества% активными партнерами в процессе улучшения.
