Spotify
Контролна зала за нощен джубокс
Уеб интерфейсът на Spotify е плътен, тъмен център за управление на медиите: почти черно платно, украсено с ярки обложки на албуми, един-единствен зелен акцент и контроли във формата на хапчета. Типографията е компактна и утилитарна - специално проектиран геометричен шрифт без серифи с малък размер, позволяващ на обложката на албума и снимките на изпълнителите да вършат по-голямата част от визуалната работа. Оформлението е фиксирана двуколонна обвивка (странична лента + основна лента) с решетка от квадратни обложки на албуми и кръгли аватари, създавайки ритмично редуване на геометрични типове. Интерфейсът избягва резки промени във височината, разчитайки на фини повърхностни различия (карти #121212 върху платно #000000) и един голям градиентен банер за енергия. Резултатът е усещане за DJ кабина: информационно плътна, акустично тъмна и готова за свирене с един поглед.
Фиксираното двуколонно оформление включва лява странична лента („Вашата библиотека“) и адаптивна област с основно съдържание. Горната лента е черна лента с пълна ширина с търсене отляво и действия в акаунта отдясно. Основното съдържание се превърта вертикално, с хоризонтални въртележки от карти – популярни песни в квадратна мрежа с 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 — Хранилище на кристално чисти знания. Ясно, многостранно дигитално пространство, проектирано за яснота и фокус, със светещи лилави жилки на взаимодействие.