Spotify
Контролна соба за ноќен џубокс
Веб-интерфејсот на Spotify е густ, темен центар за контрола на медиуми: речиси црно платно украсено со живописна уметност на албумот, еден препознатлив зелен акцент и контроли во форма на апчиња. Типографијата е компактна и утилитарна - прилагодено дизајниран геометриски sans-serif фонт со мала големина, што им овозможува на уметноста на албумот и фотографиите на уметниците да го прават најголемиот дел од визуелната работа. Распоредот е фиксна обвивка со две колони (странична лента + главен фид) со мрежа од квадратна уметност на албумот и тркалезни аватари, создавајќи ритмичка алтернатива на геометриски типови. Интерфејсот избегнува остри промени во висината, потпирајќи се на суптилни површински разлики (картички #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 — Воуп е виолетова хоризонтска површина. Замислете темна опсерваторија со виолетова светлина што зрачи од под стаклото.
- basement — Празна печатарска машина во 3 часот наутро – огромни, компресирани фонтови што се распрснуваат низ целата темнина, еден единствен зрак портокалова светлина на лентата за навигација, сè друго е бело или призрачно сиво.
- Ori — Серверската соба на полноќ е црна празнина, бело светло, еден вклучен прекинувач.
- Amaterasu — Небесно тиркизно светилиште
- Stink Studios — Филмско студио на полноќ - проекторот зуи, собата е темна, само филмот е осветлен
- Obsidian — Складиште на кристално знаење. Јасен, разновиден дигитален простор дизајниран за јасност и фокус, со светлечки виолетови вени на интеракција.