Producation

Producation: Образовательная платформа для психологов

Producation: Образовательная платформа для психологов

Producation: Образовательная платформа для психологов

Producation: Образовательная платформа для психологов

  • Конструктор курсов и уроков

  • Аналитика по финансам и обучению

  • 7 видов уроков + итоговые тесты

  • Оплата курсов и выплаты авторам

  • Тикетная система поддержки

  • Конструктор курсов и уроков

  • Аналитика по финансам и обучению

  • 7 видов уроков + итоговые тесты

  • Оплата курсов и выплаты авторам

  • Тикетная система поддержки

  • Конструктор курсов и уроков

  • Аналитика по финансам и обучению

  • 7 видов уроков + итоговые тесты

  • Оплата курсов и выплаты авторам

  • Тикетная система поддержки

  • Конструктор курсов и уроков

  • Аналитика по финансам и обучению

  • 7 видов уроков + итоговые тесты

  • Оплата курсов и выплаты авторам

  • Тикетная система поддержки

Публичная часть

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


Каталог курсов

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


Страница курса

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


Регистрация пользователей

При оплате курса пользователь "по пути" создаёт учётную запись. Все преподаватели обязательно прикрепляют подтверждающие документы и проходят ручную модерацию.


Личный кабинет

ЛК предназначен для регулярного использования, учтены привычные паттерны поведения пользователей и привычное расположение элементов для интуитивного восприятия.


Управление курсами

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


Конструктор уроков

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


Учебные группы

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


Состояния интерфейса

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


Логика и блок-семы

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


Прототипы интерфейса

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


ACL-политики

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


Цветовая палитра

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


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

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


UI-kit

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


Типографика

Определили подходящую шрифтовую пару для заголовков, составили правила типографики для разных размеров экрана, с учётом адаптивности.


Дизайн E-mail уведомлений

Провели работу с текстами, предусмотрели системные ошибки, уведомления и шаблоны email-писем.


Сертификаты об обучении

Сделали дизайн сертификата о прохождении обучения, который генерируется при достижении 100% прохождения курса.

Публичная часть

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


Каталог курсов

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


Страница курса

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


Регистрация пользователей

При оплате курса пользователь "по пути" создаёт учётную запись. Все преподаватели обязательно прикрепляют подтверждающие документы и проходят ручную модерацию.


Личный кабинет

ЛК предназначен для регулярного использования, учтены привычные паттерны поведения пользователей и привычное расположение элементов для интуитивного восприятия.


Управление курсами

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


Конструктор уроков

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


Учебные группы

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


Состояния интерфейса

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


Логика и блок-семы

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


Прототипы интерфейса

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


ACL-политики

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


Цветовая палитра

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


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

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


UI-kit

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


Типографика

Определили подходящую шрифтовую пару для заголовков, составили правила типографики для разных размеров экрана, с учётом адаптивности.


Дизайн E-mail уведомлений

Провели работу с текстами, предусмотрели системные ошибки, уведомления и шаблоны email-писем.


Сертификаты об обучении

Сделали дизайн сертификата о прохождении обучения, который генерируется при достижении 100% прохождения курса.

Публичная часть

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


Каталог курсов

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


Страница курса

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


Регистрация пользователей

При оплате курса пользователь "по пути" создаёт учётную запись. Все преподаватели обязательно прикрепляют подтверждающие документы и проходят ручную модерацию.


Личный кабинет

ЛК предназначен для регулярного использования, учтены привычные паттерны поведения пользователей и привычное расположение элементов для интуитивного восприятия.


Управление курсами

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


Конструктор уроков

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


Учебные группы

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


Состояния интерфейса

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


Логика и блок-семы

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


Прототипы интерфейса

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


ACL-политики

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


Цветовая палитра

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


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

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


UI-kit

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


Типографика

Определили подходящую шрифтовую пару для заголовков, составили правила типографики для разных размеров экрана, с учётом адаптивности.


Дизайн E-mail уведомлений

Провели работу с текстами, предусмотрели системные ошибки, уведомления и шаблоны email-писем.


Сертификаты об обучении

Сделали дизайн сертификата о прохождении обучения, который генерируется при достижении 100% прохождения курса.

Публичная часть

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


Каталог курсов

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


Страница курса

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


Регистрация пользователей

При оплате курса пользователь "по пути" создаёт учётную запись. Все преподаватели обязательно прикрепляют подтверждающие документы и проходят ручную модерацию.


Личный кабинет

ЛК предназначен для регулярного использования, учтены привычные паттерны поведения пользователей и привычное расположение элементов для интуитивного восприятия.


Управление курсами

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


Конструктор уроков

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


Учебные группы

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


Состояния интерфейса

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


Логика и блок-семы

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


Прототипы интерфейса

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


ACL-политики

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


Цветовая палитра

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


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

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


UI-kit

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


Типографика

Определили подходящую шрифтовую пару для заголовков, составили правила типографики для разных размеров экрана, с учётом адаптивности.


Дизайн E-mail уведомлений

Провели работу с текстами, предусмотрели системные ошибки, уведомления и шаблоны email-писем.


Сертификаты об обучении

Сделали дизайн сертификата о прохождении обучения, который генерируется при достижении 100% прохождения курса.

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

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

Ещё кейсы:

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

Хочу заказать UI UX дизайн. Что от меня нужно?

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

Как подготовить начальные требования?

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

Сколько стоит дизайн сайта и что входит в стоимость?

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

Сколько времени потребуется на дизайн?

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

Как выбрать подрядчика на дизайн приложения?

Лучше ищите компанию через отраслевые рейтинги Tagline, RaitingRuneta и Wadline. Это надёжнее. Обращайте внимание на специализацию и примеры работ.

Логотип Wadline
Логотип Wadline
Логотип Wadline

В топ-10 дизайн-студий по мнению Wadline

Логотип Ratingruneta
Логотип Ratingruneta
Логотип Ratingruneta

В топ-10 разработчиков корп. решений по мнению Ratingruneta

Логотип Ratingruneta
Логотип Ratingruneta
Логотип Ratingruneta

№2 среди агенств по поддержке и развитию по мнению Ratingruneta

Аккредитованная IT-компания АО-20220418-4218209153-3

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

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

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

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

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

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

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

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

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