Дизайн интерфейса веб-сервиса
Золотой конкурс - к конкурсу допускаются только отобранные дизайнеры

Веб-инструмент

Нужно сделать красивый дизайн для вебсервиса - автоматизированной системы мониторинга и диагностирования неисправностей, а также восстановления работы офисной техники после сбоев. Это единая платформа для управления абсолютно всей офисной техников (компьютеры, серверы, принтеры и МФУ, АТС, маршрутизаторы и пр.) и программным обеспечением (формирование каталога, выявление расхождений между закупленными и используемыми лицензиями).

Целевая аудитория сервиса:
1) Бизнесмены, руководители компании в малом бизнесе.
2) ИТ-специалисты, технические директора в среднем и крупном бизнесе.

Интерфейс должен быть интуитивно понятным даже для людей, не обладающих специальными знаниями.

С точки зрения юзабилити основные окна системы уже спроектированы (прикреплены к заданию). Также прикрепил примеры интерфейсов, которые мне нравятся.

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

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

Над панелью - логотип. (Логотипа пока нет. Скорее всего будет круглый.)

Список экранов:
1. Сводка
2. Dashboard (Экран компании)
3. Экран задачи
4. Экран компьютера
5. Экран принтера
6. Управление лицензиями.
7. Экран АТС
8. Экран маршрутизатора.
9. Список задач на бирже.

Все экраны, кроме АТС и списка задач на бирже, уже спроектированы, нужно только красиво отрисовать. Прототипы и комментарии к ним приложены.

Экран АТС делаем по аналогии с остальными, на нём показываем
Общая информация:
-IP-адрес
-Mac-адрес
-Внешние линии
-Кол-во абонентов
-ПО


1. Качество канала
• Доступность провайдера (в мс)
• Наличие потерянных данных (в %)
2. Кол-во звонков
3. Общая загрузка CPU (график) и использование CPU процессами Asterisk, MySQL и Apache; (график)
4. Общее использование RAM (график)
Использование RAM процессами Asterisk, MySQL и Apache; (график)
Как выглядят графики - прикладываю ниже.

Экран со списком задач на бирже можно сделать как на youdo.com. Нужно просто вывести заголовок задачи и краткое описание.

Иконки, обозначающие тип оборудования:
1. Компьютер
2. Сервер
3. Принтер/МФУ
4. АТС
5. Роутер/маршрутизатор
6. Телефон
7. Видеокамера
8. Сканер
9. Источник бесперебойного питания

2 иконки, обозначающие, кто обнаружил проблему:
1. Человек (на протитопе обозначен как человечек).
2. Система (на протитопе обозначен как монитор).

Информационные технологии

Простота
Информативность

1258

Описание данных, которые нужно выводить на dashboarde (экран компании).
Содержание:
Вкладки: Dashboard, Контакты, Лицензии, Управление печатью, Сотрудники, История, Карта сети.
Под вкладками: выбранный период (например, 01.10-31.10) и иконка "Скачать" (После нажатия скачивается отчет).
Ниже
Гистограмма доступности в %.
Столбцы:
-инфраструктура
----компьютеры
----серверы
----принтеры и МФУ
----АТС
-Сервисы
----1С
----Почта
----Интернет
Справа от гистограммы средний показатель доступности.

Ниже информация по инцидентам:
-Новые (количество+ изменение по сравнению с предыдущим аналогичным периодом (рост - красная стрелка, снижение - зеленая).
-Закрытые
-Круговая диаграмма по категориям оборудования, на котором произошел сбой (компьютеры, серверы, принтеры и МФУ, АТС)
И показатель удовлетворенности пользователей (по 10-бальной шкале и изменение по сравнению с предыдущим аналогичным периодом (рост - зеленая стрелка, снижение - красная).

Ниже
Гистограмма "Безопасность"
Столбцы:
-Резервное копирование
-Антивирусная защита
-Ограничение прав доступа
-Видеонаблюдение
-Резервирование
-Электропитание

Правее топ-5 загруженных компьютеров и серверов и показатель загрузки. Загружен может быть процессор (CPU), оперативная память (RAM), Жесткий диск (HDD или SSD).

Ниже
Как на картинке: ПО и нагрузка на принтеры и МФУ. Нагрузку на принтеры изображаем в виде тахометра с тремя равными зонами: зеленая, желтая, красная.
Пример приложен.
Количество принтеров, нагрузку на которые мы тут показываем, можно менять. Миниум 3. Можно больше.

Ниже: строка с комментарием.
Ниже: история

Еще несколько интерфейсов, которые мне нравятся:
1. https://www.behance.net/gallery/E-mail-client/8626803
2. https://www.behance.net/gallery/Ecommerce-Website-Analytics/10387403
3. https://dribbble.com/shots/902435-Website-Analytics-Dashboard/attachments/98800

Если будет уместно, нужно прикрепить к задачам, созданным пользователями, аватар и имя пользователя.