Spotify
Кімната управління нічним музичним автоматом
Веб-інтерфейс Spotify - це щільний, темний центр управління медіаконтентом: майже чорне полотно, прикрашене яскравими обкладинками альбомів, одним фірмовим зеленим акцентом та елементами управління у формі таблеток. Типографіка компактна та утилітарна — спеціально розроблений геометричний шрифт без засічок невеликого розміру, що дозволяє обкладинкам альбомів та фотографіям виконавців виконувати основну візуальну роботу. Макет є фіксованою двоколоночну оболонку (бічна панель + основна стрічка) з сіткою з квадратних обкладинок і круглих аватарів, що створюють ритмічне чергування геометричних типів. Інтерфейс уникає різких перепадів висоти, покладаючись на тонке розрізнення поверхонь (картки #121212 на полотні #000000) і один великий градієнт банер для надання енергії. В результаті створюється відчуття діджейської апаратної: насиченої інформацією, акустично темної та готової до відтворення з першого погляду.
Фіксована двоколонова оболонка: ліва бічна панель («Ваша бібліотека») та адаптивна основна область контенту. Верхня панель являє собою чорну смугу на всю ширину з пошуком зліва та діями з обліковим записом праворуч. Основний контент прокручується вертикально, з горизонтальними каруселями-картками - популярні пісні в 5-колонковій квадратній сітці, популярні виконавці в 5-колонковій круглій сітці, популярні альбоми/сингли продовжують цей шаблон. Відстань між розділами компактна (32 см). Нижній рекламний банер закріплений лише на рівні нижньої частини області перегляду. Навігація здійснюється виключно за допомогою верхньої панелі та бічної панелі – без мега-меню та хлібних крихт. Ритм чергується: квадратні картки → круглі картки → квадратні картки, утворюючи геометричний контраст між розділами.
Обкладинки альбомів та фотографії виконавців є основним візуальним контентом. Обкладинки представлені у вигляді щільних квадратних фрагментів (співвідношення сторін 1:1) з радіусом 6px - досить чітких, щоб виглядати як редакційні матеріали, і досить м'яких, щоб виглядати сучасно. Фотографії виконавців є круглі фрагменти, що підкреслюють обличчя як ідентифікатор. В основному інтерфейс немає декоративних фотографій, зображень в стилі лайфстайл, абстрактної графіки. Єдиний нефотографічний візуальний елемент - це рекламний банер з градієнтом від пурпурового до синього внизу, який є єдиним елементом фірмового кольору. Іконки мінімалістичні, монолінійні, білі на темному тлі – маленькі та функціональні, ніколи не декоративні.
Палітра
Бренд
- Spotify Green
#1ed760— Зелений колір використовується як допоміжний акцент для декоративних деталей та акцентування уваги на нечасті запити. Не слід виділяти його як основний колір заклику до дії.
Нейтральні
- Pure White
#ffffff— Легка опорна поверхня для створення ненав'язливого фону та розділення розділів. Не слід виділяти її як основний колір заклику до дії. - Signal Red
#b85850— Червоний колір служить допоміжним акцентом для декоративних деталей та акцентування уваги на нечастих кольорах. Використовуйте його як допоміжний акцент, а не колір статусу. - Void Black
#000000— Полотно сторінки, фон верхньої навігації, найглибший поверхневий шар - Carbon
#121212— Картонні поверхні, бічні панелі, вторинний поверхневий шар поверх полотна - Graphite
#1f1f1f— Піднята поверхня – стани при наведенні курсору, поля введення, вибрані елементи навігації. - Smoke
#292929— Активна навігація фону, легкий ефект підсвічування.
Друкарня
від 11 до 24px · 4 ступенів
- SpotifyMixUI — заміна: Inter · зображення 400, 600, 700 · Основний текст, навігація, кнопки, метадані, невеликі підписи – компактний та насичений інформацією дизайн, покликаний стати непомітним, щоб мистецьке оформлення домінувало.
- SpotifyMixUITitle — заміна: Inter weight 700 · зображення 700 · Заголовки розділів ("Популярні пісні", "Популярні виконавці") - жирний шрифт помірного розміру робить заголовки виразними, не перевантажуючи сітку карток.
Інтервали та форма
| Призначення | Значення |
|---|---|
| Щільність | щільна |
| Базовий крок | 8-12px |
| Радіус кнопок | 9999px |
| Радіус карток | 6px |
| Тіні | мінімальні |
| Між секціями | 32-48px |
ІІ збере ваш сайт у стилі Spotify і наповнить його
- Наповнить товарами та постами за посиланням - Instagram, TikTok, Facebook.
- Перенесе контент зі старого сайту – достатньо вказати адресу.
- Сучасний дизайн на кращому движку: React ( Next.js) з серверним рендерингом та SEO-оптимізацією з коробки.
- Повна автоматична SEO-оптимізація під пошукову видачу та рекомендації нейромереж.
Схожі стилі
- Resend — чорний оксамит з фіолетовим неоновим кольором
- Neon — Серверна кімната після настання темряви. Глибока темрява, де єдиними джерелами світла є дані та взаємодія між користувачами
- Discord — Ігровий світ прихований за спливаючим вікном чату — кожен розділ є самодостатнім середовищем зі своїм власним освітленням і набором персонажів.
- Idle Finance — Неоновий торговий зал глибоководних терміналів — темний військово-морський термінал, де єдине блакитне світло пронизує морок.
- Midjourney — Біолюмінесцентний термінал у глибоководних районах океану. Глибоководний світ, де інтелект наочно генерує себе в потоках ASCII, а елементи управління виглядають як зразки, що слабо світяться.
- Netflix — Нескінченна цифрова полиця. Кінематографічний досвід, де нескінченна бібліотека контенту представлена на тлі абсолютно чорного театрального задника
- Wope — Wope – інтерфейс фіолетового горизонту. Уявіть собі темний стіл в обсерваторії, з-під скла якого піднімається світло-фіолетовий потік
- basement — Порожня друкарня о 3 годині ночі - величезні, стислі шрифти, що розтікаються по темряві, один проблиск помаранчевого світла на навігаційній панелі, все інше біле або примарно-сіре
- Ori — Серверна кімната опівночі – чорна порожнеча, біле світло, один увімкнений вимикач
- Amaterasu — Небесне бірюзове святилище
- Stink Studios — Кіностудія опівночі - проектор гуде, у кімнаті темно, світиться тільки кіноплівка
- Obsidian — Сховище кристальних знань. Чіткий, багатогранний цифровий простір, створений для ясності та зосередженості, з сяючими фіолетовими прожилками взаємодії