Создаём универсальную админ-панель

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

Нужно создать универсальную панель администратора или менеджера, которую можно безболезненно адаптировать под нужды клиента из опредёленной области.

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

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

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

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

Дизайн лаконичный (чего требует работа с цифровыми данными и графиками) и обтекаемый (потому что нашему дизайнеру так больше нравится).

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

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

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

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

Дашборд такого типа может быть реализован с помощью разных технологий, но мы советуем создавать его на React.js. React — это JavaScript-библиотека для создания пользовательских интерфейсов. JavaScript позволяет создавать интерактивные интерфейсы, где элементы могут изменяться или обновляться без необходимости обновления всей страницы. Это делает веб-приложения более отзывчивыми и приятными для пользователей, а минимизация перерисовок и обращение только к необходимым данным способствуют более быстрой загрузке страниц.

Панель имеет десктопную и мобильную версии.

Читать дальше: Почему работа с внештатным дизайнером может стать чёрной полосой для вашего проекта