Spotify
Ноћна контролна соба за џубокс
Спотифајев веб интерфејс је густ, тамни центар за контролу медија: скоро црно платно украшено живописним омотима албума, једним препознатљивим зеленим акцентом и контролама у облику пилуле. Типографија је компактна и утилитарна - прилагођено дизајнирани геометријски фонт без серифа мале величине, што омогућава да омот албума и фотографије извођача обаве највећи део визуелног посла. Распоред је фиксна љуска са две колоне (бочна трака + главни фид) са мрежом квадратних омотa албума и округлих аватара, стварајући ритмичку смену геометријских типова. Интерфејс избегава оштре промене висине, ослањајући се на суптилне површинске разлике (картице #121212 на платну #000000) и један велики градијентни банер за енергију. Резултат је осећај ди-џеј кабине: густа информација, акустично мрачна и спремна за свирање на први поглед.
Фиксни распоред са две колоне садржи леву бочну траку („Ваша библиотека“) и прилагодљиву област главног садржаја. Горња трака је црна трака пуне ширине са претрагом са леве стране и радњама на налогу са десне стране. Главни садржај се помера вертикално, са хоризонталним вртешкама картица - популарне песме у квадратној мрежи са 5 колона, популарни извођачи у кружној мрежи са 5 колона и популарни албуми/синглови који настављају овај образац. Размак између одељака је компактан (32 цм). Доњи огласни банер је усидрен на дну приказног дела. Навигација се врши искључиво преко горње траке и бочне траке - без мега-менија или навигационих трака. Ритам се смењује: квадратне картице → округле картице → квадратне картице, стварајући геометријски контраст између одељака.
Омоти албума и фотографије извођача су примарни визуелни садржај. Омоти су представљени као густи квадратни фрагменти (однос ширине и висине 1:1) са радијусом од 6 пиксела — довољно оштри да изгледају уреднички, а опет довољно меки да буду савремени. Фотографије уметника су округли фрагменти, који наглашавају лице као идентификатор. Главни интерфејс је без декоративних фотографија, слика животног стила или апстрактне графике. Једини визуелни елемент који није фотографски је љубичасто-плави градијентни банер на дну, који служи као једини елемент боје бренда. Иконе су минималистичке, монолинеарне, беле на тамној позадини — мале и функционалне, никада декоративне.
Палета
Brend
- 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.
- Пребаците садржај са вашег старог сајта — само наведите адресу.
- Модерни дизајн на најбољем енџину: React ( Next.js) са рендеровањем на серверу и SEO оптимизацијом одмах по уградњи.
- Потпуно аутоматизована SEO оптимизација за резултате претраге и препоруке неуронских мрежа.
Слични стилови
- Resend — црни сомот са љубичастом неонском бојом
- Neon — Серверска соба после мрака. Чисти мрак, где једино светло долази од података и интеракција корисника.
- Discord — Свет игре је скривен иза искачућег прозора за ћаскање - сваки одељак је засебно окружење са сопственим осветљењем и скупом ликова.
- Idle Finance — Неонски трговачки под дубокоморских терминала је мрачан поморски терминал где једно плаво светло пробија таму.
- Midjourney — Биолуминисцентни терминал у дубоком океану. Свет дубоког мора где се интелигенција визуелно генерише у ASCII токовима, а контроле се појављују као слабо светлећи обрасци.
- Netflix — Бесконачна дигитална полица. Филмско искуство где се бескрајна библиотека садржаја приказује уз потпуно црну, позоришну позадину.
- Wope — Воп је љубичасти хоризонтални интерфејс. Замислите тамни сто за осматрачницу са љубичастим светлом које зрачи испод стакла.
- basement — Празна штампарска машина у 3 ујутру – огромни, компримовани фонтови се шире по мрклом мраку, један бљесак наранџасте светлости на навигационој траци, све остало бело или сабласно сиво.
- Ori — Серверска соба у поноћ је црна празнина, бело светло, један укључен прекидач.
- Amaterasu — Небеско тиркизно светилиште
- Stink Studios — Филмски студио у поноћ - пројектор зуји, соба је мрачна, само је филм осветљен
- Obsidian — Складиште кристалног знања. Јасан, вишеслојан дигитални простор дизајниран за јасноћу и фокус, са светлећим љубичастим венама интеракције.