Spotify
Түнгі музыкалық блокты басқару бөлмесі
Spotify веб-интерфейсі – тығыз, қараңғы медианы басқару орталығы: жарқын альбом суретімен безендірілген қара дерлік кенеп, бірыңғай жасыл екпін және таблетка тәрізді басқару элементтері. Типография ықшам және утилитарлық – кішкентай өлшемдегі арнайы жасалған геометриялық sans-serif қаріпі, альбом суреті мен суретшінің фотосуреттеріне визуалды жұмыстың негізгі бөлігін жасауға мүмкіндік береді. Орналасуы – шаршы альбом суреті мен дөңгелек аватарлар торы бар бекітілген екі бағандық қабық (бүйірлік жолақ + негізгі арна), бұл геометриялық түрлердің ырғақты кезектесуін жасайды. Интерфейс биіктіктегі күрт өзгерістерден аулақ болады, нәзік беткі айырмашылықтарға (#000000 кенептегі #121212 карталар) және энергия үшін бір үлкен градиент баннеріне сүйенеді. Нәтижесінде диджей кабинасының сезімі пайда болады: ақпаратқа бай, акустикалық қараңғы және бір қарағанда ойнауға дайын.
Екі бағаннан тұратын бекітілген орналасуда сол жақ бүйірлік тақта («Сіздің кітапханаңыз») және бейімделгіш негізгі мазмұн аймағы бар. Жоғарғы жолақ - сол жағында іздеу және оң жағында тіркелгі әрекеттері бар толық енді қара жолақ. Негізгі мазмұн тігінен айналдырылады, көлденең карусельдер карталары бар - 5 бағандық шаршы торда танымал әндер, 5 бағандық дөңгелек торда танымал әртістер және осы үлгіні жалғастыратын танымал альбомдар/синглдер. Бөлімдер арасындағы аралық ықшам (32 см). Төменгі жарнама баннері қарау терезесінің төменгі жағында бекітілген. Навигация тек жоғарғы жолақ және бүйірлік тақта арқылы өңделеді - мега-мәзірлер немесе нан үгінділері жоқ. Ырғақ кезектесіп отырады: шаршы карталар → дөңгелек карталар → шаршы карталар, бөлімдер арасында геометриялық контраст жасайды.
Альбом мұқабалары мен суретшілердің фотосуреттері негізгі визуалды мазмұн болып табылады. Мұқабалар 6 пиксель радиусы бар тығыз шаршы фрагменттер (1:1 пропорциясы) ретінде ұсынылған — редакциялық көрінуге жеткілікті айқын, бірақ заманауи болу үшін жеткілікті жұмсақ. Суретшілердің фотосуреттері дөңгелек фрагменттер болып табылады, олар бет-әлпетті идентификатор ретінде көрсетеді. Негізгі интерфейс сәндік фотосуреттерден, өмір салты суреттерінен немесе абстрактілі графикадан бос. Фотографиялық емес жалғыз визуалды элемент — бренд түсінің жалғыз элементі ретінде қызмет ететін төменгі жағындағы күлгін-көк градиенттік баннер. Белгішелер минималистік, бір сызықты, қараңғы фонда ақ — кішкентай және функционалды, ешқашан сәндік емес.
Палитра
Бренд
- Spotify Green
#1ed760— Жасыл түс сәндік бөлшектер үшін қосымша екпін ретінде және сирек қолданылатын іздеу сұраныстарын ерекшелеу үшін қолданылады. Оны әрекетке шақыру үшін негізгі түс ретінде пайдалануға болмайды.
Бейтарап
- Pure White
#ffffff— Көзге көрінбейтін фон жасауға және бөліктерді бөлуге арналған жеңіл тірек беті. Оны әрекетке шақыру үшін негізгі түс ретінде пайдалануға болмайды. - Signal Red
#b85850— Қызыл түс сәндік бөлшектерді қолдаушы екпін ретінде және сирек кездесетін түстерді ерекшелеу үшін қызмет етеді. Оны мәртебе түсі ретінде емес, қолдаушы екпін ретінде пайдаланыңыз. - Void Black
#000000— Бет кенебі, жоғарғы навигациялық фон, ең терең беткі қабат - Carbon
#121212— Картон беттері, бүйір панельдері, кенептің үстінен екінші реттік беткі қабат - Graphite
#1f1f1f— Көтерілген бет - тінтуірді апаратын күйлер, енгізу өрістері, таңдалған навигация элементтері. - Smoke
#292929— Белсенді навигациялық фон, аздап артқы жарық әсері.
Типография
11-ден 24 пиксельге дейін · 4 қадам
- SpotifyMixUI — ауыстыру: Inter · контурлар 400, 600, 700 · Негізгі мәтін, навигация, түймелер, метадеректер, шағын жазулар — көркем шығарманың басым болуына мүмкіндік беретін нәзік, ақпаратқа бай ықшам дизайн.
- SpotifyMixUITitle — ауыстыру: Inter weight 700 · контурлар 700 · Бөлім тақырыптары («Танымал әндер», «Танымал әртістер») - қалың, орташа өлшемді қаріп тақырыптарды карта торын шамадан тыс жүктемей ерекшелеп көрсетеді.
Аралықтары және формасы
| Мақсаты | Мағынасы |
|---|---|
| Тығыздық | тығыз |
| Негізгі қадам | 8-12px |
| Түйме радиусы | 9999px |
| Карта радиусы | 6px |
| Көлеңкелер | минималды |
| Бөлімдер арасында | 32-48px |
Жасанды интеллект сіздің веб-сайтыңызды Spotify стилінде жасайды және оны толтырады
- Instagram, TikTok, Facebook сілтемелері арқылы өнімдер мен жазбаларды толтырыңыз.
- Ескі сайтыңыздан мазмұнды тасымалдаңыз — тек мекенжайын көрсетіңіз.
- Ең үздік қозғалтқыштағы заманауи дизайн: серверді рендерингтеу және SEO оңтайландыру арқылы React ( Next.js).
- Іздеу нәтижелері мен нейрондық желі ұсыныстары үшін толық автоматтандырылған SEO оңтайландыруы.
Ұқсас стильдер
- Resend — күлгін неон түсті қара барқыт
- Neon — Қараңғы түскеннен кейінгі сервер бөлмесі. Таза қараңғылық, мұнда жарық тек деректер мен пайдаланушылардың өзара әрекеттесуінен келеді.
- Discord — Ойын әлемі қалқымалы чат терезесінің артында жасырылған - әрбір бөлім өзіндік жарықтандыруы мен кейіпкерлер жиынтығы бар дербес орта.
- Idle Finance — Терең теңіз терминалдарының неон сауда алаңы - қараңғы әскери-теңіз терминалы, онда бір ғана көк жарық қараңғылықты тесіп өтеді.
- Midjourney — Терең мұхиттағы биолюминесцентті терминал. Интеллект ASCII ағындарында көрнекі түрде пайда болатын және басқару элементтері әлсіз жарқыраған өрнектер ретінде көрінетін терең теңіз әлемі.
- Netflix — Шексіз сандық сөре. Шексіз мазмұн кітапханасы қараңғы, театрлық фонмен ұсынылған кинематографиялық тәжірибе.
- Wope — Wope – күлгін көкжиек интерфейсі. Әйнектің астынан күлгін жарық түсіп тұрған қараңғы обсерватория үстелін елестетіп көріңіз.
- basement — Таңғы сағат 3-тегі бос баспа станогы – үлкен, қысылған қаріптер қара түсте шашырап жатыр, навигация тақтасында қызғылт сары жарықтың бір сәулесі, қалғанының бәрі ақ немесе елес сұр.
- Ori — Түн ортасындағы сервер бөлмесінде қара бос орын, ақ жарық, бір ғана қосқыш қосулы.
- Amaterasu — Аспан көгілдір қорығы
- Stink Studios — Түн ортасындағы киностудия - проектор ызыңдайды, бөлме қараңғы, тек фильм ғана жарықтандырылған
- Obsidian — Кристалдық білім қоймасы. Жарқыраған күлгін өзара әрекеттесу жолақтары бар айқындық пен назар аударуға арналған айқын, көп қырлы сандық кеңістік.