Прорисувати інтерфейс у Figma

Потрібно розробити дизайн інтерфейсу криптотрейдинг додатку 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.