Spotify
Δωμάτιο ελέγχου νυχτερινού τζουκ μποξ
Η διαδικτυακή διεπαφή του Spotify είναι ένα πυκνό, σκοτεινό κέντρο ελέγχου πολυμέσων: ένας σχεδόν μαύρος καμβάς διακοσμημένος με ζωηρά εξώφυλλα άλμπουμ, μια μοναδική πράσινη πινελιά και χειριστήρια σε σχήμα χαπιού. Η τυπογραφία είναι συμπαγής και χρηστική—μια ειδικά σχεδιασμένη γεωμετρική γραμματοσειρά sans-serif σε μικρό μέγεθος, επιτρέποντας στο εξώφυλλο άλμπουμ και στις φωτογραφίες των καλλιτεχνών να κάνουν το μεγαλύτερο μέρος της οπτικής εργασίας. Η διάταξη είναι ένα σταθερό κέλυφος δύο στηλών (πλευρική μπάρα + κύρια τροφοδοσία) με ένα πλέγμα από τετράγωνο εξώφυλλο άλμπουμ και στρογγυλά avatar, δημιουργώντας μια ρυθμική εναλλαγή γεωμετρικών τύπων. Η διεπαφή αποφεύγει τις απότομες αλλαγές στο ύψος, βασιζόμενη σε λεπτές διακρίσεις επιφάνειας (κάρτες #121212 σε καμβά #000000) και ένα μόνο μεγάλο banner με διαβάθμιση για ενέργεια. Το αποτέλεσμα είναι η αίσθηση ενός θαλάμου DJ: πυκνή σε πληροφορίες, ακουστικά σκοτεινή και έτοιμη για αναπαραγωγή με μια ματιά.
Μια σταθερή διάταξη δύο στηλών διαθέτει μια αριστερή πλαϊνή μπάρα ("Η βιβλιοθήκη σας") και μια περιοχή κύριου περιεχομένου που προσαρμόζεται στις ανάγκες σας. Η επάνω μπάρα είναι μια μαύρη μπάρα πλήρους πλάτους με αναζήτηση στα αριστερά και ενέργειες λογαριασμού στα δεξιά. Το κύριο περιεχόμενο κυλάει κάθετα, με οριζόντια καρουζέλ καρτών - δημοφιλή τραγούδια σε ένα τετράγωνο πλέγμα 5 στηλών, δημοφιλείς καλλιτέχνες σε ένα κυκλικό πλέγμα 5 στηλών και δημοφιλή άλμπουμ/singles που συνεχίζουν αυτό το μοτίβο. Η απόσταση μεταξύ των ενοτήτων είναι συμπαγής (32 cm). Το κάτω διαφημιστικό banner είναι αγκυρωμένο στο κάτω μέρος του παραθύρου προβολής. Η πλοήγηση γίνεται αποκλειστικά μέσω της επάνω μπάρας και της πλαϊνής μπάρας - χωρίς mega-μενού ή ψίχουλα. Ο ρυθμός εναλλάσσεται: τετράγωνες κάρτες → στρογγυλές κάρτες → τετράγωνες κάρτες, δημιουργώντας γεωμετρική αντίθεση μεταξύ των ενοτήτων.
Τα εξώφυλλα άλμπουμ και οι φωτογραφίες καλλιτεχνών αποτελούν το κύριο οπτικό περιεχόμενο. Τα εξώφυλλα παρουσιάζονται ως πυκνά τετράγωνα τμήματα (αναλογία διαστάσεων 1:1) με ακτίνα 6px—αρκετά καθαρά ώστε να φαίνονται εκδοτικά αλλά και αρκετά απαλές ώστε να είναι σύγχρονες. Οι φωτογραφίες καλλιτεχνών είναι στρογγυλά τμήματα, δίνοντας έμφαση στο πρόσωπο ως αναγνωριστικό στοιχείο. Η κύρια διεπαφή δεν περιέχει διακοσμητικές φωτογραφίες, εικόνες lifestyle ή αφηρημένα γραφικά. Το μόνο μη φωτογραφικό οπτικό στοιχείο είναι ένα banner με διαβάθμιση από μωβ σε μπλε στο κάτω μέρος, το οποίο χρησιμεύει ως το μοναδικό στοιχείο του χρώματος της επωνυμίας. Τα εικονίδια είναι μινιμαλιστικά, μονογραμμικά, λευκά σε σκούρο φόντο—μικρά και λειτουργικά, ποτέ διακοσμητικά.
Παλέτα
Μάρκα
- 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 — Το Wope είναι μια μωβ διεπαφή ορίζοντα. Φανταστείτε ένα σκοτεινό τραπέζι παρατηρητηρίου με ένα μωβ φως να λάμπει κάτω από το γυαλί.
- basement — Ένα άδειο τυπογραφείο στις 3 π.μ. – τεράστιες, συμπιεσμένες γραμματοσειρές να απλώνονται στο σκοτάδι, μια μοναδική πορτοκαλί λάμψη στη γραμμή πλοήγησης, όλα τα άλλα λευκά ή γκρίζα.
- Ori — Η αίθουσα σερβιτόρων τα μεσάνυχτα είναι ένα μαύρο κενό, με λευκό φως, έναν διακόπτη αναμμένο.
- Amaterasu — Ουράνιο Τυρκουάζ Ιερό
- Stink Studios — Ένα κινηματογραφικό στούντιο τα μεσάνυχτα - ο προβολέας βουίζει, το δωμάτιο είναι σκοτεινό, μόνο η ταινία είναι αναμμένη
- Obsidian — Ένα αποθετήριο κρυστάλλινης γνώσης. Ένας σαφής, πολύπλευρος ψηφιακός χώρος σχεδιασμένος για σαφήνεια και εστίαση, με φωτεινές μωβ φλέβες αλληλεπίδρασης.