UX-UI дизайн — удалённая работа в Москве

СР-5. Проектирование UI/UX дашборда безопасности и интерактивное прототипирование. Продукт: ЧАСТЬ 1 (Первая пара): Десктоп и Страницы ошибок Задание 1. Дашборд безопасности Создайте фрейм (размер Desktop 1440 x 1024). Нарисуйте интерфейс страницы «Настройки безопасности». Боковое меню (Sidebar): Слева расположите навигацию (Мой профиль, Безопасность, Уведомления). Раздел “Безопасность“ должен быть подсвечен. Блок “Смена пароля“: 3 поля ввода (Старый, Новый, Подтверждение) и кнопка «Обновить пароль». Блок “Двухфакторная аутентификация (2FA)“: Плашка со статусом (включено/отключено) и кнопка «Настроить 2FA». Блок “Активные сессии“: Список из 2-3 устройств (например: Windows 11 / Chrome и iPhone 14 / Safari). Укажите IP-адреса и добавьте красную кнопку «Выйти со всех других устройств». Задание 2. Дизайн страниц ошибок Когда срабатывает защита Laravel (Rate Limiting или Gate), пользователь видит системный текст. В хорошем продукте страницы ошибок оформляют в стиле сайта. Создайте еще два фрейма (Desktop) для следующих ошибок: Страница 403 Forbidden (Доступ запрещен): Пользователь попытался удалить чужую тему. Нарисуйте иконку/иллюстрацию (например, замок или полицейского), крупный текст “403 - Доступ запрещен“ и синюю кнопку “Вернуться на главную“. Страница 429 Too Many Requests (Защита от спама): Пользователь отправлял формы слишком часто. Нарисуйте иконку (часы или щит), текст “Ого, полегче! Вы отправляете запросы слишком быстро. Подождите пару минут“ и кнопку “Обновить страницу“. ЧАСТЬ 2 (Вторая пара): Адаптивность и Прототипирование Задание 3. Мобильная адаптация Современные сайты чаще открывают с телефонов. Нам нужно оптимизировать ваш широкий дашборд безопасности под узкий экран. Создайте фрейм размером iPhone 14 (или любой другой телефон из списка). Скопируйте элементы из вашего Десктоп-дашборда в мобильный фрейм и перестройте их: Боковое меню должно исчезнуть. Вместо него вверху нарисуйте “Гамбургер“ (иконку из трех полосок). Блоки “Пароль“, “2FA“ и “Сессии“ должны выстроиться строго друг под другом в одну колонку. Убедитесь, что текст не слишком мелкий (не меньше 14px), а кнопки достаточно большие, чтобы в них было удобно попадать пальцем. Задание 4. Модальное окно Что происходит при нажатии на кнопку «Настроить 2FA»? Должно открыться всплывающее окно. Создайте небольшой фрейм (например, 400 x 500 пикселей). Нарисуйте внутри схематичный QR-код (просто черно-белые квадраты), поле для ввода 6-значного кода из приложения и кнопку “Подтвердить“. Добавьте крестик в правом верхнем углу для закрытия окна. Задание 5. Интерактивный прототип Теперь мы “оживим“ ваши макеты, чтобы они кликались как настоящий сайт. В правом верхнем меню Figma переключитесь со вкладки Design на вкладку Prototype. Выделите кнопку «Настроить 2FA» на вашем десктопном макете. У неё появится кружочек сбоку. Потяните стрелку от этого кружочка к фрейму вашего Модального окна. В настройках стрелки (справа) выберите действие: On Click -> Open Overlay (Открыть поверх). Поставьте галочку Add background behind overlay (чтобы фон затемнялся). Протяните стрелку от крестика в модальном окне — выберите действие Close overlay. На страницах ошибок (403 и 429) протяните стрелку от кнопки «Вернуться на главную» к макету вашего дашборда (Navigate to). Объём работ: 1. Технического задания нет.