Spotify
ღამის ჯუბოქსის მართვის ოთახი
Spotify-ის ვებ ინტერფეისი წარმოადგენს მკვრივ, ბნელ მედია კონტროლის ცენტრს: თითქმის შავ ტილოს, რომელიც მორთულია ნათელი ალბომის დიზაინით, ერთიანი მწვანე აქცენტით და აბის ფორმის მართვის საშუალებებით. ტიპოგრაფია კომპაქტური და უტილიტარულია - პატარა ზომის გეომეტრიული sans-serif შრიფტი, რომელიც ალბომის დიზაინითა და მხატვრის ფოტოებით ვიზუალური სამუშაოს ძირითად ნაწილს წარმოადგენს. განლაგება წარმოადგენს ფიქსირებულ ორსვეტიან გარსს (გვერდითი ზოლი + მთავარი არხი) კვადრატული ალბომის დიზაინისა და მრგვალი ავატარების ბადით, რაც გეომეტრიული ტიპების რიტმულ მონაცვლეობას ქმნის. ინტერფეისი თავს არიდებს სიმაღლის მკვეთრ ცვლილებებს და ეყრდნობა ზედაპირულ განსხვავებებს (#121212 ბარათები #000000 ტილოზე) და ენერგიისთვის ერთ დიდ გრადიენტულ ბანერს. შედეგად, იქმნება დიჯეის ჯიხურის შეგრძნება: ინფორმაციულად მკვრივი, აკუსტიკურად ბნელი და ერთი შეხედვით დასაკრავად მზად.
ფიქსირებული ორსვეტიანი განლაგება მოიცავს მარცხენა გვერდითა ზოლს („თქვენი ბიბლიოთეკა“) და რეაგირებად მთავარ კონტენტის არეალს. ზედა ზოლი სრული სიგანის შავი ზოლია, რომლის მარცხენა მხარეს ძიებაა, ხოლო მარჯვენა მხარეს ანგარიშის მოქმედებები. მთავარი კონტენტი ვერტიკალურად გორაობს, ბარათების ჰორიზონტალური კარუსელებით - პოპულარული სიმღერები 5-სვეტიან კვადრატულ ბადეზე, პოპულარული შემსრულებლები 5-სვეტიან წრიულ ბადეზე და პოპულარული ალბომები/სინგლები, რომლებიც ამ ნიმუშს აგრძელებენ. სექციებს შორის დაშორება კომპაქტურია (32 სმ). ქვედა სარეკლამო ბანერი მიმაგრებულია ხედვის ფანჯრის ქვედა ნაწილში. ნავიგაცია ხორციელდება მხოლოდ ზედა ზოლისა და გვერდითი ზოლის მეშვეობით - მეგამენიუების ან პურის ნამცეცების გარეშე. რიტმი მონაცვლეობით იცვლება: კვადრატული ბარათები → მრგვალი ბარათები → კვადრატული ბარათები, რაც ქმნის გეომეტრიულ კონტრასტს სექციებს შორის.
ალბომის გარეკანები და შემსრულებლის ფოტოები ძირითადი ვიზუალური კონტენტია. გარეკანები წარმოდგენილია მკვრივი კვადრატული ფრაგმენტების სახით (1:1 ასპექტის თანაფარდობა) 6 პიქსელის რადიუსით - საკმარისად მკვეთრია, რომ რედაქციულად გამოიყურებოდეს და ამავდროულად საკმარისად რბილია, რომ თანამედროვე იყოს. შემსრულებლის ფოტოები მრგვალი ფრაგმენტებია, რომლებიც ხაზს უსვამენ სახეს, როგორც იდენტიფიკატორს. მთავარი ინტერფეისი თავისუფალია დეკორატიული ფოტოებისგან, ცხოვრების წესის სურათებისგან ან აბსტრაქტული გრაფიკისგან. ერთადერთი არაფოტოგრაფიული ვიზუალური ელემენტია ქვედა ნაწილში იისფერ-ლურჯ გრადიენტული ბანერი, რომელიც ბრენდის ფერის ერთადერთ ელემენტს წარმოადგენს. ხატები მინიმალისტური, მონოწრფივი, თეთრია მუქ ფონზე - პატარა და ფუნქციონალური, არასდროს დეკორატიული.
პალიტრა
ბრენდი
- 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 — Infinite Digital Shelf. კინემატოგრაფიული გამოცდილება, სადაც კონტენტის დაუსრულებელი ბიბლიოთეკა წარმოდგენილია შავ, თეატრალურ ფონზე.
- Wope — ვოპი იისფერი ჰორიზონტის ინტერფეისია. წარმოიდგინეთ მუქი ობსერვატორიის მაგიდა, რომლის შუშის ქვეშაც იისფერი შუქი გამოდის.
- basement — დილის 3 საათზე ცარიელი საბეჭდი მანქანა - უზარმაზარი, შეკუმშული შრიფტები სრულ სიბნელეშია მიმოფანტული, ნავიგაციის პანელზე ნარინჯისფერი შუქის ერთი მოციმციმე ნათებაა, ყველაფერი დანარჩენი თეთრი ან მოჩვენებითი ნაცრისფერია.
- Ori — შუაღამისას სერვერების ოთახი შავი სიცარიელეა, თეთრი შუქით, ერთი ჩამრთველი ჩართული.
- Amaterasu — ციური ფირუზისფერი საკურთხეველი
- Stink Studios — კინოსტუდია შუაღამისას - პროექტორი გუგუნებს, ოთახი ბნელია, მხოლოდ ფილმი ანათებს
- Obsidian — კრისტალური ცოდნის საცავი. მკაფიო, მრავალმხრივი ციფრული სივრცე, რომელიც შექმნილია სიცხადისა და ფოკუსირებისთვის, ურთიერთქმედების მანათობელი იასამნისფერი ძარღვებით.