app

Дизайн додатку для підрахунку калорій Wrieat

Дизайн головної сторінки проєкту Дизайн додатку для підрахунку калорій Wrieat

Задача

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

Зроблено

Варіанти дизайну

UI Дизайн

Варіанти дизайну

На початковому етапі розробили декілька візуальних концепцій інтерфейсу з різними колористичними рішеннями та акцентною типографікою. Це дозволило протестувати відхід від традиційної фітнес-стилістики на користь теплої теракотово-персикової гами та підібрати оптимальний візуальний тон для онбордингу.

Варіанти дизайну - мобільний інтерфейс 1
Варіанти дизайну - мобільний інтерфейс 2
Варіанти дизайну - мобільний інтерфейс 3
Варіанти дизайну - мобільний інтерфейс 4

Основний флов

Головний екран забезпечує миттєвий доступ до ключових щоденних метрик: прогрес-кільця балансу калорій, розбивки білків, жирів і вуглеводів та таймлайну прийомів їжі. Архітектура взаємодії спрощує детальний перегляд кожного прийому (сніданок, обід, вечеря) та швидкий перехід до додавання страв.

Основний флов - мобільний інтерфейс 1
Основний флов - мобільний інтерфейс 2
Основний флов - мобільний інтерфейс 3
Основний флов - мобільний інтерфейс 4
Основний флов - мобільний інтерфейс 5
Основний флов - мобільний інтерфейс 6

Додавання нового продукту

Спроєктували зручний сценарій внесення страв до раціону з можливістю фотофіксації продукту та ручного вводу параметрів. Форма підтримує швидке заповнення базових калорій на 100 грамів, а також розгортання поглибленого списку мікро- та макронутрієнтів для точного контролю дієти.

Додавання нового продукту - мобільний інтерфейс 1
Додавання нового продукту - мобільний інтерфейс 2
Додавання нового продукту - мобільний інтерфейс 3

Давайте працювати разом.

Готові втілити ваше бачення у життя? Давайте об'єднаємося для вашого наступного проєкту та разом створимо щось незабутнє.

// Type some code ->
console.log "oO08 iIlL1 g9qCGQ ~-+=>";
var paddingTop = 'px';
var sectionRadius = 'px';
// Interactive Theme Configuration
function updateButton(config) {
var radius = 'px';
btn.style.borderRadius = radius;
}
updateButton({ active: true });
Розробник

Color Styles

Pink
Purple
Orange
Green
Blue
Дизайнер

Реєстрація і вхід

Розробили покроковий онбординг із персоналізованим опитуванням для точного розрахунку добової норми. Користувач за кілька простих кроків налаштовує свій зріст, поточну і цільову вагу, харчові обмеження (веганство, безглютенова дієта) та рівень фізичної активності перед створенням профілю.

Реєстрація і вхід - мобільний інтерфейс 1
Реєстрація і вхід - мобільний інтерфейс 2
Реєстрація і вхід - мобільний інтерфейс 3
Реєстрація і вхід - мобільний інтерфейс 4
Реєстрація і вхід - мобільний інтерфейс 5
Реєстрація і вхід - мобільний інтерфейс 6
Реєстрація і вхід - мобільний інтерфейс 7
Реєстрація і вхід - мобільний інтерфейс 8
Реєстрація і вхід - мобільний інтерфейс 9
Реєстрація і вхід - мобільний інтерфейс 10
Реєстрація і вхід - мобільний інтерфейс 11
Реєстрація і вхід - мобільний інтерфейс 12
Реєстрація і вхід - мобільний інтерфейс 13