Редизайн игрового портала 101XP.com

Компания 101XP — международный издатель онлайн-игр. Мы развиваем собственный игровой портал 101XP.com, на котором размещены несколько десятков браузерных, мобильных и клиентских игр. Портал стартовал полтора года назад, и за это время количество проектов выросло на порядок, что вынудило нас приступить к процессу редизайна портала, привести его к современному виду и улучшить юзабилити.

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

Зачем менять дизайн?

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

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

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

Начальные этапы работы

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

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

Теперь наш Игровой портал выглядит так:

Новая версия Игрового портала 101XP.com

Почему же мы выбрали темное цветовое решение для портала?

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

Так выглядела старая версия нашего портала:

Старая версия портала 101XP.com

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

Для создания новой версии дизайна портала мы использовали три инструмента: Sketch, InVision и Zeplin

Sketch

По сравнению с традиционным инструментов для дизайна интерфейсов Adobe Photoshop, Sketch имеет ряд преимуществ.

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

Artboards

Sketch имеет систему артбордов (Artboards), с помощью которой можно расположить несколько страниц и состояний интерфейса на одном экране. Это удобно тем, что весь дизайн визуально виден на одном экране, он всегда под рукой и можно видеть картину в целом. Артборды позволяет не переключаться между группами слоев как в Photoshop (или вообще между разными psd-файлами).

Для структуризации артборды разместили на нескольких листах (Pages): Main, Forms, Profile, UIKit. К примеру, на листе Main находятся артборды основных страниц портала: главная, страница новостей, страница игры. В Profile — все страницы профиля игрока.

Symbols

В Sketch удобно работать с динамическими объекта — символами (Symbols). Это объекты, которые можно клонировать в любом количестве и располагать в любых местах. Изменив одну копию объекта (например, поменять цвет кнопки) — все копии этого объекта также автоматически обновятся.

В Photoshop такие объекты тоже существуют и называются они Смарт-объекты. Но, в Photoshop их нужно редактировать на отдельной странице, что не очень удобно. В Sketch же, такие объекты можно изменять прямо на “живую”.

Покажем это на примере простой кнопки. Сохраняем её как “символ”, и теперь её можно использовать как эталонный объект в интерфейсе. Эту кнопку можно добавлять на любой артборд без необходимости перерисовывать, а если её немного изменить (например, поменять градиент или размер), то изменения автоматически применяться на другие копии кнопки во всех артбордах.

Возникает вопрос: если я хочу, чтобы кнопка была одинаковой на всех страницах, но текст на ней был разным? Есть очень удобная фича: поставить в параметрах символа «Exclude Text Value from Symbol», и тогда при изменении текста в одном символе в других он меняться не будет.

Экономия времени

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

Рассмотрим на примере той же кнопки.

Как это делается в Photoshop:

• Ставим прямоугольник с закругленными углами.
• Расставляем параметры (градиент, обводка).
• Подгоняем размер.
• Меняем, при необходимости, закругление углов.

Для достижения необходимо результата нам необходимо открыть минимум три дополнительных окна

Как это делается в Sketch:

• Ставим прямоугольник с закругленными углами.
• Расставляем параметры (градиент, обводка, радиус закругления углов, размеры).
• Кнопка готова.

Все инструменты на виду, в одном окне.

Создание кнопки возможно в одном окне

Интерфейс Sketch интуитивен, и порог вхождения минимален.

Хочется добавить, что Sketch удобно использовать исключительно для работы с вектором. Для работы с растром лучше использовать привычный Photoshop.

InVision —интерактивные прототипы

После первой итерации отрисовки интерфейса его нужно согласовать и утвердить. Проверить логику построения, юзабилити, протестировать все возможные действия пользователя. Различные предложения и вопросы мы должны решить до отправки дизайна на верстку. Иначе существует риск “утонуть” в процессе постоянного перевёрстывания, что занимает немало времени.

Было необходимо быстрое и удобное решение для создания интерактивных прототипов. Им стал InVision. Это простой в использовании веб-сервис. Имеет бесплатную версию (три прототипа можно создать бесплатно, за большее количество необходимо заплатить — при этом стоимость подписки более чем приемлемая). Бесплатная версия, например, отлично подойдет для стартапов и небольших компаний.

InVision App. Как это работает

InVision App автоматически синхронизируется со Sketch и заливает к себе все страницы проекта (в нашем случае это главная, страница новостей, страница игры и различные формы регистрации). Это огромная экономия времени для “доставки” изменений в дизайне сразу в интерактивный прототип.

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

Повторить для всех страниц проекта.

Готово! Можно рассылать ссылку на прототип тестировщикам, пользователям, коллегам.

Рабочий интерфейс InVision App

Возможности InVision App

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

InVision App поддерживает работу с Retina. Для этого достаточно указать в названии файла @2x (например, name@2x.png), и он будет корректно отображаться на Retina-дисплеях.

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

Совместное комментирование дизайна. Можно шарить страницы, отправлять интерактивные прототипы сотрудникам, наблюдать за процессом тестирования. Это помогает выявлять проблемы и оперативно их решать.

В итоге создание интерактивного прототипа заняло всего лишь пол часа рабочего времени. Это помогло нам решить много вопросов и проблем еще до отдачи дизайна в верстку.

Zeplin

Для совместной работы дизайнеров интерфейса и front-end разработчиков мы использовали Zeplin. Этот проект мы нашли случайно на ProductHunt. Сейчас Zeplin находится в beta-тестировании.

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

В достоинствах сервиса — приятный интерфейс и простота в использовании, наличие как десктопной, так и web-версии. Сейчас Zeplin находится в beta-версии и доступна по инвайтам.

Как работает Zeplin

1. Выбираем артборд в Sketch.

2. Выбираем в меню Plugins -> Zeplin -> Export.

Экспортирование артборда из Sketch в Zeplin

3. Артборд экспортируется в Zeplin.

4. Экспортируем таким образом все артборды.

Огромным плюсом является то, что верстальщику не нужно покупать и устанавливать Photoshop или Sketch — достаточно открыть страницу проекта в Zeplin, и вся информация о дизайне интерфейса у него на виду.

Возможности Zeplin

• Синхронизация со Sketch.
• Измерение расстояний между объектами.
• Информация о визуальных параметрах (цвет, градиент, размер, шрифт и т.д.) отображается в один клик на объекте.

• Генерация названий цветовой палитры. Часто используемый цвет, например, белый #FFE400, отображается как #turbo. Это упрощает совместную работу, так как не приходится часто используемые цвета называть по индексу.

• Артборды с одинаковыми именами обновляются при повторной синхронизации со Sketch.

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

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

Конечно, это еще не всё. Нам предстояло решить еще ряд дополнительных задач:

• Создание и поддержка UIKit, который включает в себя компоненты и элементы интерфейса портала, типографику, палитру и состояние элементов
• Типографика — подбор основных размеров шрифтов, использование золотого сечения
• Модульная сетка для адаптивного дизайна. Настройка сетки в Sketch, передача параметров сетки верстальщику. Брейкпоинты.
• Адаптация под мобильные устройства.

Об этом и многом другом мы расскажем в следующих статьях.