Spectrum Interactive
Платформа навчання інвестуванню. Складний відсоток тут можна покрутити в інтерактивному інструменті, а сухий абзац тексту для цього не потрібен.
Усе знято з живої версії сайту, такою, якою її бачить відвідувач.
Inter Tight
Заголовки й текстAa
- SpectrumMedium 500
- SpectrumSemiBold 600
- SpectrumBold 700
АБВГҐДЕЄЖЗИІЇЙ abcdefghijklm 0123456789
Bruno Ace
ЛоготипAa
- SpectrumRegular 400
ABCDEFGHIJKLM abcdefghijklm 0123456789
Заокруглення
- 16 px
- 32 px
- пігулка
Кнопки: пігулка
Шкала тексту
- AaH1, 96 px
- AaH2, 48 px
- AaH3, 24 px
- AaТекст, 20 px
Контраст
- 15,7 : 1текст на тлі, AAA
- 15,7 : 1напис на кнопці, AAA
Тіні
М'яка нейтральна тінь
Проблема
Інвестування погано вчиться текстом. Різниця між «6% річних» і «6% річних двадцять років» очевидна на графіку за секунду й губиться в абзаці, і саме в цьому місці читач іде з курсу. Отже, платформа не могла бути збіркою статей із тестом у кінці.
Що ми зробили, і чому
Курси й інструменти зібрані в один застосунок: калькулятори та моделі вбудовані просто в урок і не висять окремим додатком під ним. Просторова сцена працює просто в браузері через Three.js, без плагінів і встановлення, рух веде GSAP. Інтерфейс тримає темну підкладку й один акцент, щоб найсвітлішим на екрані були цифри.
Ближчий погляд
Що вийшло
Проєкт у розробці, і ми показуємо його саме таким навмисно: це найкращий доказ того, що ми вміємо технічно: 3D у браузері, інтерактивні моделі, рівний кадр. Цифр щодо студентів і пройдених уроків тут не буде, доки платформа не запрацює наживо.