Редизайн игрового портала 101XP.com, часть вторая

В первой части нашего материала мы рассказали об инструментах, которые использовали при редизайне Игрового портала 101XP.com. Настала пора рассказать о методах работы над дизайном: модульной сетке, шрифтах, UI Kit, палитре цветов.

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

Поэтому мы сделали все с чистого листа в прямом смысле этого слова.

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

Модульная сетка, расположение элементов

Использование модульной сетки позволило нам высчитать комфортные параметры для всех популярных размеров экранов.

Брейк-поинты получились следующими: 1280, 1024, 640, 480, 320 px.

Таким образом верстка сайта получилась адаптивной. Эталонный брейкпоинт — 1024 px. Как раз на нем и строился процесс отрисовки дизайна в Sketch.

Мы использовали модульную сетку с колонками в количестве 12 штук. Каждая колонка имеет ширину 60px, а расстояние между колонками — 12px. Таким образом, общая ширина сетки получается 940px. Оставшейся же частью будут два отступа слева и справа по 32px каждый. Итого 940 + 32 * 2 = 1024px.

Вертикальный ритм

Для выравнивания и позиционирования элементов в дизайне, определения их точных размеров мы пользовались не только колонками, но также и техникой вертикального ритма. Вкратце: она позволяет правильно выравнивать элементы по вертикали (подробнее http://typecast.com/blog/4-simple-steps-to-vertical-rhythm).

Каждая строчка — 12px высотой. Откуда такая цифра? Все просто: базовый шрифт у нас размером 16px, межстрочный интервал 1.5 (perfect-fifth). Высота строки получается: 16px * 1.5 = 24px. Для более точного позиционирования мы сделали строки в два раза меньше по высоте — 12px каждая.

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

Использование колонок и строк позволило нашему отделу front-end разработки забыть про подгонку верстки по пикселям. В целом вся верстка происходит следующим образом:

• Все параметры модульной сетки, а также шрифтов и других базовых размеров задаются в SASS
• Размеры элементов и блоков, их отступы задаются не в пикселях, а в строках и колонках. Например, кнопка в слайдере имеет высоту в 4 строки, ширину в 2 колонки. Изображения игр в каталоге имеют высоту в 7 строк и т.д.
• Для удобства генерируется виртуальная сетка, которая позволяет быстрее проверять результат прямо в браузере.

Таким образом, верстальщик сразу указывает габариты и отступы в визуальных строках.

Использование вертикального ритма дает множество преимуществ:

• Выравнивание элементов по определенным правилами. Это дает более правильное восприятие контента.
• Более быстрая, удобная и точная верстка со стороны разработчика.
• При разных размерах экрана все элементы дизайна имеют ширину и высоту в дискретных значениях.

UI Kit

При проектировании мы старались не плодить множество уникальных элементов дизайна, делать компоненты интерфейса универсальными, чтобы их можно было задействовать практически везде. Портал состоит из простых повторяющихся элементов. Использование и развитие UI Kit в продукте дает преимущество не только для отдела UI/UX, а также и для отдела front-end разработки — в обоих отделах все собирается из компонентов, как конструктор.

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

UI Kit значительно ускорил разработку портала, а также помог с новыми проектами, которые необходимо отрисовывать в едином стиле.

Помимо портала мы планируем обновить дизайн форума, страницы поддержки и остальных продуктов 101XP (текущих и будущих), поэтому UI Kit очень полезен: он помогает сохранять и выдерживать единый стиль.

Шрифты — правильная ширина и интерлиньяж текста

«Читателю должно быть легко и удобно воспринимать текстовую информацию. Это зависит во многом от размера шрифта, длины строк и расстояния между ними (интерлиньяжа). Для комфортного чтения длинного текста в строке должно быть примерно 7–10 слов. Правильная ширина полосы набора задает равномерный и удобный ритм чтения, дает возможность читать без напряжения и полностью концентрироваться на смысле текста». — «Модульные системы в графическом дизайне. Пособие для графиков, типографов и оформителей выставок», Йозеф Мюллер-Брокманн.

Мы подобрали для набора больших текстов (новостей) 16 кегль текста, интерлиньяж 24px (высчитали по формуле n*0,5+n).

Определили базовый шрифт (16 кегль), высчитали от базового шрифта остальные размеры. Для дизайна портала мы подобрали размеры шрифтов: 24, 21, 16 и 14 кегль.

Цвета

Когда мы приступили к отрисовке портала, нам было важно сохранить корпоративные цвета (фиолетовый и зеленый).

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

Идея сделать портал в темных тонах нам показалась отличной, во-первых, на портале большое количество визуального контента, который лучше “читается” на темном фоне, во-вторых, портал в темных оттенках выглядит более игровым.