Дом Работа Обо мне

Панель управления сети дата-центров Селектел

Панель управления сети дата-центров Селектел

Краткое описание

Компания: Selectel

Роль: разработка интерфейса, дизайн, верстка

Сайт: support.selectel.ru

  • ✤ HTML5 with CSS3
  • ✤ SCSS with Compass
  • ✤ Responsive CSS Frameworks
  • ✤ Retina ready: fontcustom

Задача: Обновить интерфейс панели управления. Предусмотреть новые возможности и ограничения.


Процесс работы

Внимание. Много картинок!
  1. Наброски интерфейса
  2. Прототипирование
  3. Дизайн
    1. Сводная информация
    2. Баланс
    3. Заказ услуг
    4. Облако
    5. Домены
    6. Мониторинг
    7. Облачное хранилище
    8. Служба поддержки
  4. Мобильная версия
  5. Верстка

Наброски интерфейса

У нового интерфейса — новые приоритеты.

  1. Резиновость, интерфейс должен растягиваться на все полотно экрана.
  2. Адаптивность — под любые экраны.
  3. Должна учитываться локализация на несколько иностранных языков.
  4. Новый, свежий дизайн.
  5. Единство оформления всей панели.

Я рассмотрел преимущества вертикального и горизонтального меню. Вертикальное выиграло по всем пунктам:

  1. идеально занимает небольшую часть ширины экрана,
  2. вмещает в себя всю необходимую информацию, а её много,
  3. отлично масштабируется для адаптивной верстки,
  4. разделяет панель на две области.
Наброски вариантов интерфейса

Прототипирование

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

Прототип новой панели был сделан в сервисе moqups.com.

Прототипы нового интерфейса панели управления / Prototypes of the control panel interface Показать подробнее

Часть услуг были спроектированы позже.

Дизайн

Дизайн панели и не плоский, и не объемный — нечно среднее. Основная часть плоская, но элементы управления имеют объем — это важный фактор, определяющий быстрое считывание состояния элемента: обычный, активный, заблокированный и так далее.

Для панели разработаны две темы оформления: светлая и темная.

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

Dashboard

Главная страница панели содержит важную информацию: о новых тикетах и ближайшие оплаты.

Верстка страницы

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

Страница баланса

Верстка страницы

Заказ услуг

Заказ выделенного сервера. Верстка страницы
Заказ произвольной конфигурации. Верстка страницы
Заказ размещения сервера. Верстка страницы
Аренда виртуального выделенного сервера. Верстка страницы

Сделайте паузу и выпейте чаю с печеньками.

Продолжаем.

Облако

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

В раскрытом виде появляются вкладки с различными настройками.

Вкладка настройки памяти виртуальной машины. Верстка страницы

Домены

Список доменов. Верстка страницы
Страница домена. Верстка страницы
Добавление домена.
Редактирование тега для домена.

Мониторинг

Сводная страница мониторинга. Верстка страницы
Информация о проверке. Верстка страницы
Настройки проверки.
Условия для проверки.

Хранилище

Облачное хранилище — это особенная услуга. Я разработал просто интерфейс, он удобен и понятен как Dropbox, но гораздо богаче по функциональности.

Информация об услуге. Верстка страницы . Выполнена в стиле промо-сайта.
Перенос средств между балансами. Верстка страницы

Служба поддержки (тикеты)

Страница тикета. Верстка страницы

Мобильная и планшетная версии

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

Интерфейс для планшетов. Как видите, меню сжалось до иконок, при нажатии оно расширяется до полного размера.

В мобильной версии табы выстраиваются по два пункта в ряд.

Мобильные версии меню и табов.

Верстка

Панель сверстана на HTML5 и SCSS в связке с Compass.

Модули SCSS для сборки финального файла стилей

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

Иконки в элементах управления оптимизированы под экраны сверхвысокого разрешения (Retina). Для этого используется утилита Font Custom.

Верстка форм основывается на фреймворке Bootstrap.

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

Благодарности

Спасибо, что осилили этот объем информации.