Потрібно розробити дизайн інтерфейсу криптотрейдинг додатку UPDOWNX. Робота виконується тільки як UI дизайн, без верстки і без розробки. Основне завдання — промалювати інтерфейс у Figma, щоб потім розробник зміг легко зверстати його з використанням TailwindCSS.
Дизайн повинен бути виконаний у темній темі (dark theme) в стилі crypto / cyberpunk, з неоновими акцентами, світінням елементів і сучасними картками. Інтерфейс повинен виглядати технологічно, мінімалістично і преміально. Основний фон інтерфейсу — темний, елементи виділяються м'якими світіннями і неоновими кольорами.
Основні кольори інтерфейсу:
фон — #05070A,
картки — #0B0F14,
основний неоновий колір — #00FFA3,
червоний для падіння — #FF3B3B,
додатковий акцент — #2CF6C3.
Елементи інтерфейсу повинні мати м'які межі, glow-ефекти і акуратні тіні. При цьому важливо не перевантажувати дизайн складними ефектами. Оскільки інтерфейс буде верстатися через TailwindCSS, дизайн повинен бути максимально структурованим і логічним.
Не використовувати складні форми, нестандартні контейнери або важкі візуальні ефекти. Усі блоки повинні бути побудовані на картках, flex або grid-структурі. Бажано використовувати прості радіуси, наприклад стиль rounded-xl, прості тіні і легке світіння. Градієнти можна використовувати, але без складних переходів.
Основний шрифт — Inter.
Заголовки — великі і читабельні, підзаголовки — середні, основний текст — стандартний інтерфейсний. Інтерфейс повинен виглядати сучасно і акуратно.
Для desktop використовується контейнер 1440px, робоча область приблизно 1280px. Для мобільної версії потрібно використовувати ширину 375px або 390px. Важно дотримуватися 8-піксельної сітки, щоб розробнику було легко повторити дизайн.
Необхідно промалювати наступні сторінки інтерфейсу.
Перша сторінка — Trading (головна сторінка торгівлі). На ній повинен бути основний графік активу, вибір криптовалюти, таймфрейми, ціна активу, кнопки UP / DOWN для відкриття угоди, таймер угоди, блок Live Trades з останніми угодами користувачів і блок відкритих позицій.
Друга сторінка — Markets. Це список криптовалют. На сторінці повинен бути пошук, список активів (BTC, ETH, SOL тощо), ціна, зміна за 24 години, а також кнопка переходу до торгівлі.
Третя сторінка — Balance. На цій сторінці відображається загальний баланс користувача. Повинні бути кнопки Deposit і Withdraw, QR-код для депозиту, а також список останніх операцій.
Четверта сторінка — History. Тут відображається історія операцій користувача. Потрібно зробити фільтр за типом операцій: All, Trading, Deposits, Withdrawals. Також повинні відображатися дата операції, актив, ставка і результат угоди.
П'ята сторінка — Tournaments. На сторінці повинен бути банер турніру (наприклад Bull vs Bear), призовий фонд, кнопка участі, лідерборд учасників і список доступних турнірів.
Шоста сторінка — Profile (особистий кабінет). Тут відображається профіль користувача, аватар, статистика трейдера (Win Rate, Profit, кількість угод), а також історія операцій.
Також необхідно зробити мобільну версію всіх сторінок. Для мобільного інтерфейсу повинна бути нижня навігація з іконками: Trading, Markets, Balance, Tournaments, History. Інтерфейс повинен бути адаптований під мобільне використання.
Окрім сторінок потрібно створити набір компонентів (UI Kit). В нього повинні входити кнопки (primary, secondary, danger), картки (asset card, trade card, stats card, tournament card), таблиці (trades, history, leaderboard), поля пошуку і елементи фільтрації.
В результаті дизайнер повинен передати Figma-файл, в якому буде структура проекту: Desktop версії сторінок, Mobile версії сторінок і Components / UI Kit.
Головна мета — зробити сучасний криптотрейдинг інтерфейс, який виглядає технологічно і при цьому легко зверстається через TailwindCSS.
