СКСР

СКСР: Корпоративный портал для сотрудников

СКСР: Корпоративный портал для сотрудников

СКСР: Корпоративный портал для сотрудников

СКСР: Корпоративный портал для сотрудников

  • Дашборд сотрудника

  • Задачи и Проекты

  • Календарь и Уведомления

  • Чаты и База знаний

  • Профили и Достижения

  • Дашборд сотрудника

  • Задачи и Проекты

  • Календарь и Уведомления

  • Чаты и База знаний

  • Профили и Достижения

  • Дашборд сотрудника

  • Задачи и Проекты

  • Календарь и Уведомления

  • Чаты и База знаний

  • Профили и Достижения

  • Дашборд сотрудника

  • Задачи и Проекты

  • Календарь и Уведомления

  • Чаты и База знаний

  • Профили и Достижения

Дизайн-концепт

Определили недостатки готовых решений (Битрикс, amoCRM, МегаПлан). Составили список, чего не хватает и что нужно перенести со старой версии портала.

Дизайн-концепт


Стартовая страница

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

Стартовая страница


Альтернативная навигация

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

Альтернативная навигация


Профиль сотрудника

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

Профиль сотрудника


Быстрые диалоги

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

Быстрые диалоги


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

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

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


Тёмная тема

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

Тёмная тема


Альтернативный вариант

Так как дизайн собран на компонентах и переменных в Figma, создание тёмной темы занимает всего пару дней. Системный подход ускоряет не только создание тёмной темы, но и сборку макетов для масштабирования проекта в будущем.

Альтернативный вариант


Палитра и точки контраста

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

Палитра и точки контраста


Типографика проекта

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

Типографика проекта


UI-kit

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

UI-kit корпоративного портала


Состояния UI компонентов

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

Состояния UI компонентов


Системный подход в дизайне

Макеты собираем на autolayout. В Figma добавлены переменные размерностей и цветов.

Системный подход в дизайне: Проектирование интерфейса интернет-магазина продуктов питания


Дизайн-концепт

Определили недостатки готовых решений (Битрикс, amoCRM, МегаПлан). Составили список, чего не хватает и что нужно перенести со старой версии портала.

Дизайн-концепт


Стартовая страница

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

Стартовая страница


Альтернативная навигация

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

Альтернативная навигация


Профиль сотрудника

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

Профиль сотрудника


Быстрые диалоги

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

Быстрые диалоги


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

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

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


Тёмная тема

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

Тёмная тема


Альтернативный вариант

Так как дизайн собран на компонентах и переменных в Figma, создание тёмной темы занимает всего пару дней. Системный подход ускоряет не только создание тёмной темы, но и сборку макетов для масштабирования проекта в будущем.

Альтернативный вариант


Палитра и точки контраста

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

Палитра и точки контраста


Типографика проекта

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

Типографика проекта


UI-kit

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

UI-kit корпоративного портала


Состояния UI компонентов

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

Состояния UI компонентов


Системный подход в дизайне

Макеты собираем на autolayout. В Figma добавлены переменные размерностей и цветов.

Системный подход в дизайне: Проектирование интерфейса интернет-магазина продуктов питания


Дизайн-концепт

Определили недостатки готовых решений (Битрикс, amoCRM, МегаПлан). Составили список, чего не хватает и что нужно перенести со старой версии портала.

Дизайн-концепт


Стартовая страница

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

Стартовая страница


Альтернативная навигация

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

Альтернативная навигация


Профиль сотрудника

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

Профиль сотрудника


Быстрые диалоги

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

Быстрые диалоги


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

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

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


Тёмная тема

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

Тёмная тема


Альтернативный вариант

Так как дизайн собран на компонентах и переменных в Figma, создание тёмной темы занимает всего пару дней. Системный подход ускоряет не только создание тёмной темы, но и сборку макетов для масштабирования проекта в будущем.

Альтернативный вариант


Палитра и точки контраста

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

Палитра и точки контраста


Типографика проекта

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

Типографика проекта


UI-kit

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

UI-kit корпоративного портала


Состояния UI компонентов

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

Состояния UI компонентов


Системный подход в дизайне

Макеты собираем на autolayout. В Figma добавлены переменные размерностей и цветов.

Системный подход в дизайне: Проектирование интерфейса интернет-магазина продуктов питания


Дизайн-концепт

Определили недостатки готовых решений (Битрикс, amoCRM, МегаПлан). Составили список, чего не хватает и что нужно перенести со старой версии портала.

Дизайн-концепт


Стартовая страница

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

Стартовая страница


Альтернативная навигация

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

Альтернативная навигация


Профиль сотрудника

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

Профиль сотрудника


Быстрые диалоги

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

Быстрые диалоги


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

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

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


Тёмная тема

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

Тёмная тема


Альтернативный вариант

Так как дизайн собран на компонентах и переменных в Figma, создание тёмной темы занимает всего пару дней. Системный подход ускоряет не только создание тёмной темы, но и сборку макетов для масштабирования проекта в будущем.

Альтернативный вариант


Палитра и точки контраста

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

Палитра и точки контраста


Типографика проекта

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

Типографика проекта


UI-kit

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

UI-kit корпоративного портала


Состояния UI компонентов

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

Состояния UI компонентов


Системный подход в дизайне

Макеты собираем на autolayout. В Figma добавлены переменные размерностей и цветов.

Системный подход в дизайне: Проектирование интерфейса интернет-магазина продуктов питания


В результате:

Сделали необходимые предпроектные работы. Согласовали дизайн-концепт, подготовили проект к разработке. За счёт аккуратной организации проекта в Figma, у команды разработки не было лишних вопросов.

Ещё кейсы:

Частые вопросы

Нужен дизайн. Что от меня требуется?

Отправьте имеющиеся требования на почту или в телеграм. Мы изучим информацию и сообщим, сможем ли помочь.

Нужен дизайн. Что от меня требуется?

Отправьте имеющиеся требования на почту или в телеграм. Мы изучим информацию и сообщим, сможем ли помочь.

Нужен дизайн. Что от меня требуется?

Отправьте имеющиеся требования на почту или в телеграм. Мы изучим информацию и сообщим, сможем ли помочь.

Сколько это стоит?

Ставка студии 2500 руб / час. Стоимость команды 600 тыс. руб. в месяц. Срок зависит от объёма проекта. В стоимость входит прототип, UI-kit, цветовые палитры, типографика, макеты в Figma для 3-5 разрешений.

Сколько это стоит?

Ставка студии 2500 руб / час. Стоимость команды 600 тыс. руб. в месяц. Срок зависит от объёма проекта. В стоимость входит прототип, UI-kit, цветовые палитры, типографика, макеты в Figma для 3-5 разрешений.

Сколько это стоит?

Ставка студии 2500 руб / час. Стоимость команды 600 тыс. руб. в месяц. Срок зависит от объёма проекта. В стоимость входит прототип, UI-kit, цветовые палитры, типографика, макеты в Figma для 3-5 разрешений.

Сколько времени нужно на дизайн?

Для больших проектов обычно требуется 2 месяца. По небольшим задачам — оценка от нескольких дней.

Сколько времени нужно на дизайн?

Для больших проектов обычно требуется 2 месяца. По небольшим задачам — оценка от нескольких дней.

Сколько времени нужно на дизайн?

Для больших проектов обычно требуется 2 месяца. По небольшим задачам — оценка от нескольких дней.

С чего начать?

Составьте список ролей пользователей, список нужного функционала и список разделов сайта и личного кабинета. Этого достаточно для оценки.

С чего начать?

Составьте список ролей пользователей, список нужного функционала и список разделов сайта и личного кабинета. Этого достаточно для оценки.

С чего начать?

Составьте список ролей пользователей, список нужного функционала и список разделов сайта и личного кабинета. Этого достаточно для оценки.

Делаем дизайн интерфейсов

Опишите задачу в свободной форме, чтобы оценить трудозатраты. Пишите, будем рады оказаться полезными.

Делаем дизайн интерфейсов

Опишите задачу в свободной форме, чтобы оценить трудозатраты. Пишите, будем рады оказаться полезными.

Делаем дизайн интерфейсов

Опишите задачу в свободной форме, чтобы оценить трудозатраты. Пишите, будем рады оказаться полезными.

SPAR
SPAR
Biocad
Biocad
Senior Group
Senior Group
Moscow Digital School
Moscow Digital School
TRNR
TRNR

и ещё 25+ компаний заказывали у нас дизайн интерфейсов

и ещё 25+ компаний заказывали у нас дизайн интерфейсов