Исправляем типографику в Steam

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

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

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

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

Посмотрим на список игр
Здесь полная каша: кнопки и иконки малого того, что разного размера, так еще и разного стиля. Унифицируем все кнопки и иконки, а настройки фильтрации и сортировки прячем под единой кнопкой:

Элементы управления игрой
Здесь у нас кнопки управления игрой разнесены по разным частям экрана, во всем блоке используются иконки разных стилей, а контрастность горизонтального блока с ссылками оставляет желать лучшего. А еще все подзаголовки в блоке (как и много где еще) набраны прописными буквами, для этого нет причин. Приведем все в порядок: сконцентрируем все управление в левой части блока, унифицируем иконки, приведем в порядок контрастность текста:

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

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

Напишите в комментариях — стало лучше или нет? Я не касался здесь (только если чуть-чуть) UX, так как его проектирование займет год исследований и понимания глубинных проблем и решений. Короче, напиши мне, норм или не?