Криптодашборд, веб и мобильныйCrypto dashboard, web and mobile
NyxaNyxa
Дашборд для крипто-инвестора, которым приятно пользоваться каждый вечер: бренд, дизайн-система на токенах, четыре экрана на десктопе и четыре на мобильном.A crypto investor dashboard you are happy to open every evening: brand, a token-based design system, four desktop and four mobile screens.
- РольRole
- Продуктовый дизайнер, один на проектеProduct designer, solo
- ТипType
- Концепт финтех-продуктаFintech product concept
- ПлатформаPlatform
- Веб 1440, мобильный 390Web 1440, mobile 390
- ОбъёмScope
- 51 цветовая переменная, 17 текстовых стилей, 48 иконок, 30+ компонентов, 12 иллюстраций51 colour variables, 17 text styles, 48 icons, 30+ components, 12 illustrations
- ИнструментыTools
- Figma, Higgsfield AIFigma, Higgsfield AI
В Figma открыты отдельные фрагменты проекта. Полную версию покажу по запросу.The Figma file shows selected parts of the project. The full version is available on request.
ЗадачаThe problem
Криптодашборды обычно либо холодные таблицы, либо шумные неоновые экраны, где светится каждая карточка. Я хотел сделать спокойный и дорогой продукт, который открывают проверить деньги, а не поиграть.
Crypto dashboards are usually either cold spreadsheets or noisy neon screens where every card glows. I wanted a calm, premium product you open to check your money, not to gamble.
- Сколько у меня денег?How much do I have?
- ОбзорOverview
- Что делает рынок?What is the market doing?
- РынкиMarkets
- Что у меня и как оно растёт?What do I own and how is it doing?
- ПортфельPortfolio
- Как действовать?How do I act?
- ТорговляTrade
Исследование и правилаResearch and rules
Я сравнил 8 финтех- и трейдинговых дашбордов по экранам: плотность, подача главной цифры, иерархия карточек, графики, торговые панели. Из этого получились правила:
I compared 8 fintech and trading dashboards screen by screen: density, how the main number is shown, card hierarchy, charts, trading panels. That gave me the rules:
- Свечение — это ценностьGlow means value
- Неон и градиент только для денег, живой цены и главного действия.Neon and gradient only for money, live price and the main action.
- Одно главное действиеOne primary action
- На экране ровно одна градиентная кнопка: «Пополнить», «Купить» или «Улучшить».Exactly one gradient button per view: Deposit, Buy or Upgrade.
- Сначала данныеData first
- Цифры крупно в Sora, декор никогда не лежит поверх данных.Numbers set large in Sora; art never sits on top of data.
- Двойное кодированиеDouble-coded signals
- Каждое изменение — стрелка и цвет, чтобы читалось без опоры на красный и зелёный.Every change shows an arrow and a colour, so it reads without relying on red and green.
ЭкраныScreens
Бренд и системаBrand and system
Nyxa — от Никты, богини ночи. Знак — буква N, последний штрих которой превращается в стрелку роста. Палитра: нейтральные цвета с фиолетовым оттенком вместо чистого чёрного, фиолетовый бренд, маджента как неон, циан для сравнений, зелёный, красный и янтарный только для рыночных сигналов.
Nyxa comes from Nyx, the goddess of night. The mark is an N whose last stroke becomes a rising arrow. Palette: violet-tinted neutrals instead of pure black, a violet brand, magenta as neon, cyan for comparisons, and green, red and amber strictly for market signals.
Система собрана до экранов: 29 примитивов, 22 семантических токена со скоупами и CSS-синтаксисом для разработки, потом стили и компоненты. Все экраны, включая мобильные, собраны из экземпляров.
The system came before the screens: 29 primitives, 22 semantic tokens with scopes and CSS syntax for handoff, then styles and components. Every screen, mobile included, is assembled from instances.
Мобильная версияMobile
