Задание: Figma. Нарисовать web дизайн трекера привычек в figma (Дистанционная работа)
Нужно нарисовать дизайн личного трекера привычек с функционалом:
1) Главная (презентация продукта) — Hero-блок, как это работает, ключевые возможности, пример дашборда(скрины), преимущества, футер. Указать что это именно мой личный трекер привычек, т.е. только для себя(у других не будет возможности регистрироваться там), создан для того чтобы выстроить дисциплину и укрепить свои привычки.
2) Дашборд / Today — приветствие, текущая дата, прогресс-бар (выполнено X из Y), список привычек на сегодня с чекбоксами чтобы была возможность поставить отметку о выполнении за текущий и прошлые дни, кнопка быстрого добавления привычки, навигация (нижняя/боковая). Нужно будет 2 вида навигации нижняя pwa и боковая бургер(макеты с той и той навигацией по отдельности) т.к. ещё нет точного решения будет реализована просто мобильная версия или pwa.
Блок «Лучше, чем вчера» (Динамика + сравнение) в духе:
- «Вчера вы сделали 3/5 привычек. Сегодня 2/5 — подтянитесь!» (мягкое напоминание).
- «Вы держитесь уже дольше, чем в прошлый раз на 2 дня».
- «Ты пропустил сегодня аяяй, завтра не пропускаем»
Блок «Статистика в виде пользы» в духе:
- «За месяц вы прочитали 320 страниц. Это 2 книги!»
- «Вы выпили 40 стаканов воды (на 2 литра больше нормы)».
- «Вы сэкономили 500 минут, отказавшись от соцсетей в рабочее время».
3) Список всех привычек — все созданные привычки (активные/архивные показывать через фильтр), текущие серии (streak), иконки, редактирование, удаление, архивация.
Помечать «Стрик» (Текущая серия выполнения) т.к. обычно не хочется срывать идеальные 30 дней подряд. Оформить как крупные цифры или горящая иконка (огонь, молния). «30 дней подряд!», «Выполняется: 7/7 дней на этой неделе».
Счетчик пропусков. «У вас осталось 2 пропуска в этом месяце».
4) Создание привычки — форма: название, иконка/цвет, периодичность (ежедневно / по дням недели / X раз в неделю), напоминание (время), цвет привычки, единица измерения. Назначение напоминаний на определенное время(скорее всего будут пуши для pwa). Поле сколько раз в месяц можно пропустить т.е. возможность иногда давать себе поблажки)
5) Редактирование привычки — таже форма, что и создание, но с предзаполненными данными.
6) Список категорий привычек с иконками, популярные категории которые дожны быть по умолчанию:
Здоровье, Работа, Образование, Спорт, Питание, Дом, Вредные привычки (отказ / контроль), Творчество, Сон
7) Создание категории привычки
8) Редактирование категории привычки
9 ) Календарь / история — просмотр выполненных привычек по дням, тепловая карта т.е. сколько выполнено, возможность отметить/исправить выполнение за прошлые дни.
10 ) Статистика привычки — текущая серия, лучшая серия, процент выполнения за неделю/15/30 дней, график выполнения по дням/неделям.
11 ) Общая статистика — общая активность за всё время, самые успешные привычки, лучший день/неделя/месяц, диаграммы.
11) Профиль / настройки, смена имени, пароля и логина, а так же экспорт данных, удаление всех данных. Включить/выключить уведомления push/email.
12) Вход — форма логин + пароль, кнопка входа, ссылка на восстановление пароля, ссылка на регистрацию.
13) Регистрация — форма (логин, email, пароль, подтверждение пароля), кнопка регистрации, ссылка на вход.
14) Восстановление пароля — форма email, инструкция по сбросу, подтверждение отправки.
15) 404 / Не найдено — страница для несуществующих маршрутов.
Светлая и темная тема дизайн обоих расцветок - возможность их переключать в приложении в личном кабинете
Десктоп версия по ширине 1920
Мобильная версия по ширине 360
У меня нет опыта проектирования дизайна, выше описан список функционала - нужно разместить их на страничках так чтобы это было красиво и удобно (нет привязки к количеству страниц - возможно нужно определенные странички объединить или наоборот разбить по функционалу).
Мобильная версия:
-важно отсутствие горизонтального скролла
Pwa:
-помимо мобильного бургер меню важно прорисовать вариант мобильного меню для pwa(т.е. два варианта навигационного меню, не одновременно конечно, в макетах по отдельности)
