Spotify
Шөнийн тоглоомын хайрцаг удирдлагын өрөө
Spotify-ийн вэб интерфэйс нь нягт, бараан медиа хяналтын төв юм: тод цомгийн зураг, ганцхан гарын үсэг бүхий ногоон өргөлт, эм хэлбэртэй удирдлагаар чимэглэсэн бараг хар өнгийн зураг. Типографи нь авсаархан бөгөөд хэрэглээнд нийцсэн - жижиг хэмжээтэй захиалгаар хийсэн геометрийн sans-serif фонт нь цомгийн зураг болон уран бүтээлчдийн зургуудад харааны ажлын ихэнх хэсгийг хийх боломжийг олгодог. Байршил нь дөрвөлжин цомгийн зураг болон дугуй аватаруудын тор бүхий тогтмол хоёр баганатай бүрхүүл (хажуугийн мөр + үндсэн тэжээл) бөгөөд геометрийн төрлүүдийн хэмнэлтэй ээлжлэн солигддог. Интерфэйс нь өндрийн огцом өөрчлөлтөөс зайлсхийж, нарийн гадаргуугийн ялгаа (#000000 зураг дээрх #121212 картууд) болон энергийн нэг том градиент баннер дээр тулгуурладаг. Үр дүн нь DJ лангууны мэдрэмжийг төрүүлдэг: мэдээлэл ихтэй, акустик харанхуй, нэг харахад тоглоход бэлэн.
Тогтмол хоёр баганатай байрлал нь зүүн талын самбар ("Таны номын сан") болон хариу үйлдэл үзүүлдэг үндсэн контентын хэсгийг агуулдаг. Дээд талын самбар нь зүүн талд хайлт, баруун талд бүртгэлийн үйлдэл бүхий бүрэн өргөнтэй хар талбар юм. Үндсэн контент нь босоо чиглэлд гүйлгэж, хөзрийн хэвтээ тойруулгатай - 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 — Вопе бол нил ягаан өнгийн тэнгэрийн хаяатай интерфэйс юм. Шилний доороос нил ягаан гэрэл тусаж буй харанхуй ажиглалтын ширээг төсөөлөөд үз дээ.
- basement — Шөнийн 3 цагийн хоосон хэвлэх машин – том, шахагдсан фонтууд тас хар өнгөөр тархаж, навигацийн самбар дээр улбар шар өнгийн гялбаа тусч, бусад бүх зүйл цагаан эсвэл хий саарал өнгөтэй байна.
- Ori — Шөнө дундын серверийн өрөө хар хоосон, цагаан гэрэлтэй, нэг унтраалга асаалттай байна.
- Amaterasu — Тэнгэрийн оюу өнгийн ариун газар
- Stink Studios — Шөнө дундын кино студи - проектор дуугарч, өрөө харанхуй, зөвхөн кино л гэрэлтэж байна
- Obsidian — Талст мэдлэгийн агуулах. Тодорхой байдал, төвлөрлийг хангах зорилготой, гэрэлтсэн нил ягаан өнгийн харилцан үйлчлэл бүхий тунгалаг, олон талт дижитал орон зай.