Narysować interfejs w Figma

Trzeba zaprojektować interfejs aplikacji do kryptotradingu UPDOWNX. Praca wykonywana jest tylko jako UI design, bez kodowania i bez programowania. Główne zadanie to narysować interfejs w Figma, aby programista mógł łatwo go zakodować z użyciem TailwindCSS.

Projekt powinien być wykonany w ciemnej tematyce (dark theme) w stylu crypto / cyberpunk, z neonowymi akcentami, świeceniem elementów i nowoczesnymi kartami. Interfejs powinien wyglądać technologicznie, minimalistycznie i premium. Głównym tłem interfejsu jest ciemne, elementy wyróżniają się miękkim świeceniem i neonowymi kolorami.

Główne kolory interfejsu:

tło — #05070A,

karty — #0B0F14,

główny kolor neonowy — #00FFA3,

czerwony dla spadków — #FF3B3B,

dodatkowy akcent — #2CF6C3.

Elementy interfejsu powinny mieć miękkie krawędzie, efekty glow i staranne cienie. Ważne jest, aby nie przeciążać projektu skomplikowanymi efektami. Ponieważ interfejs będzie kodowany przez TailwindCSS, projekt powinien być maksymalnie zorganizowany i logiczny.

Nie używać skomplikowanych form, niestandardowych kontenerów ani ciężkich efektów wizualnych. Wszystkie bloki powinny być zbudowane na kartach, strukturze flex lub grid. Preferowane jest użycie prostych promieni, na przykład styl rounded-xl, proste cienie i lekkie świecenie. Gradienty można stosować, ale bez skomplikowanych przejść.

Główną czcionką jest Inter.

Nagłówki powinny być duże i czytelne, podnagłówki średnie, a główny tekst standardowy interfejsowy. Interfejs powinien wyglądać nowocześnie i schludnie.

Dla desktopu używa się kontenera 1440px, obszar roboczy wynosi około 1280px. Dla wersji mobilnej należy użyć szerokości 375px lub 390px. Ważne jest przestrzeganie 8-pikselowej siatki, aby programista mógł łatwo powtórzyć projekt.

Trzeba narysować następujące strony interfejsu.

Pierwsza strona — Trading (główna strona handlu). Powinna zawierać główny wykres aktywów, wybór kryptowaluty, ramy czasowe, cenę aktywów, przyciski UP / DOWN do otwierania transakcji, timer transakcji, blok Live Trades z ostatnimi transakcjami użytkowników oraz blok otwartych pozycji.

Druga strona — Markets. To lista kryptowalut. Na stronie powinien być wyszukiwarka, lista aktywów (BTC, ETH, SOL itd.), cena, zmiana w ciągu 24 godzin, a także przycisk przejścia do handlu.

Trzecia strona — Balance. Na tej stronie wyświetlany jest całkowity bilans użytkownika. Powinny być przyciski Deposit i Withdraw, kod QR do wpłaty oraz lista ostatnich operacji.

Czwarta strona — History. Tutaj wyświetlana jest historia operacji użytkownika. Należy zrobić filtr według typu operacji: All, Trading, Deposits, Withdrawals. Powinny być również wyświetlane data operacji, aktyw, stawka i wynik transakcji.

Piąta strona — Tournaments. Na stronie powinien być baner turnieju (na przykład Bull vs Bear), pula nagród, przycisk uczestnictwa, tabela liderów uczestników oraz lista dostępnych turniejów.

Szósta strona — Profile (panel użytkownika). Tutaj wyświetlany jest profil użytkownika, awatar, statystyki tradera (Win Rate, Profit, liczba transakcji) oraz historia operacji.

Trzeba również zrobić mobilną wersję wszystkich stron. Dla interfejsu mobilnego powinna być dolna nawigacja z ikonami: Trading, Markets, Balance, Tournaments, History. Interfejs powinien być dostosowany do użycia mobilnego.

Oprócz stron trzeba stworzyć zestaw komponentów (UI Kit). Powinny się w nim znaleźć przyciski (primary, secondary, danger), karty (asset card, trade card, stats card, tournament card), tabele (trades, history, leaderboard), pola wyszukiwania i elementy filtracji.

W rezultacie projektant powinien przekazać plik Figma, w którym będzie struktura projektu: Wersje Desktop stron, Wersje Mobilne stron oraz Komponenty / UI Kit.

Głównym celem jest stworzenie nowoczesnego interfejsu kryptotradingowego, który wygląda technologicznie i jednocześnie łatwo się go koduje przez TailwindCSS.