Shopify

Θερμοκήπιο Μεσονυχτίου - Τα εμπορικά σήματα ανθίζουν σε ένα βαθύ τιρκουάζ φόντο, φωτισμένα από μια μοναδική σπίθα μέντας

Το σύστημα σχεδιασμού του Shopify είναι ένα μεταμεσονύκτιο εργαστήριο για το εμπόριο: ένας σχεδόν μαύρος καμβάς με βαθύ τιρκουάζ πράσινο, μια φαρδιά, γεμάτη αυτοπεποίθηση γραμματοσειρά sans-serif και μια ενιαία έντονη πινελιά μέντας που ενεργοποιεί διαδραστικές στιγμές. Η διεπαφή μοιάζει με σκοτεινό θάλαμο, όπου προϊόντα και μάρκες είναι η πηγή φωτός - φωτογραφίες και βιτρίνες καταστημάτων λάμπουν σε σχεδόν μαύρες επιφάνειες, ενώ τα χρωμιωμένα στοιχεία υποχωρούν. Τα στοιχεία είναι γεωμετρικά αλλά απαλά: κάρτες ακτίνας 12px με λεπτά περιγράμματα, κουμπιά σε σχήμα χαπιού και γραμματοσειρά βάρους 330 που ψιθυρίζει την κλίμακα αντί να φωνάζει. Ένα μόνο χρωματικό σημείο στίξης (#36f4a4) χρησιμοποιείται με φειδώ σε συνδέσμους, ετικέτες και καταστάσεις εστίασης, διατηρώντας το χρώμα για λειτουργικές στιγμές για να διασφαλιστεί ότι οι ιστορίες των εμπόρων παραμένουν το οπτικό σημείο εστίασης.

Το μέγιστο πλάτος είναι ~1280px, στο κέντρο, με μπλοκ splash πλήρους πλάτους που εκτείνονται πέρα από το κοντέινερ φωτογραφιών. Ο ρυθμός της σελίδας εναλλάσσεται: (1) μια σκούρα σελίδα splash πλήρους πλάτους με επικαλυπτόμενη επικεφαλίδα και κουμπιά παρότρυνσης για δράση, (2) άνετα σκούρα τμήματα με μπλοκ κειμένου και εικόνας μέγιστου πλάτους σε 2 στήλες ή πλέγματα εικόνας σε 3 στήλες, (3) διαδραστικά πάνελ βιτρίνας (κάρτα προϊόντος, αριθμομηχανή αποστολής, παγκόσμιος χάρτης) που εμφανίζονται ως ανάγλυφες κάρτες σε έναν βαθύτερο καμβά. Η πλοήγηση είναι μια σταθερή επάνω γραμμή με το λογότυπο + 3 στοιχεία πλοήγησης + δευτερεύοντες συνδέσμους + το κύριο κουμπί παρότρυνσης για δράση, όλα ευθυγραμμισμένα προς τα δεξιά. Ο κάθετος ρυθμός χρησιμοποιεί κενά 80px μεταξύ των τμημάτων με ομαλή μετάβαση—χωρίς διαχωριστικά μεταξύ των σκούρων τμημάτων, μόνο μια αλλαγή στον τόνο της επιφάνειας.

Ο οπτικός σχεδιασμός επικεντρώνεται κυρίως στον λιανοπωλητή: οι φωτογραφίες προϊόντων σε πλήρες μέγεθος και οι φωτογραφίες από εκδηλώσεις επωνυμίας φέρουν το μεγαλύτερο μέρος του οπτικού βάρους, συχνά με τη μορφή μεγάλου φόντου με επικαλυπτόμενο λευκό κείμενο. Οι εικόνες είναι κομμένες σε μεγάλο βαθμό, υψηλής αντίθεσης και εορταστικής φύσης (το χτύπημα του κουδουνιού του Nasdaq, οι ομαδικοί χαιρετισμοί, τα κοντινά πλάνα των προϊόντων στα χέρια). Το σκούρο φόντο δημιουργεί την εντύπωση ότι αυτές οι φωτογραφίες φωτίζονται από προβολείς. Οι εικόνες είναι μινιμαλιστικές - η κύρια επεξηγηματική εργασία εκτελείται από ενσωματωμένες εικόνες προϊόντων και στιγμιότυπα οθόνης από βιτρίνες καταστημάτων. Τα εικονίδια είναι μονόχρωμα, με πλάτος γραμμής 1,5–2px, συνήθως λευκά ή #36f4a4 για ενεργές καταστάσεις.

Ηλεκτρονικό κατάστημα Σκοτάδι Απαλές κλίσεις

https://www.shopify.com

Παλέτα

Μάρκα

Shopify Mint #36f4a4 — Οι ενεργές ενδείξεις πλοήγησης, οι δακτύλιοι εστίασης, οι επισημάνσεις ετικετών και οι επισημάνσεις κατά την τοποθέτηση του δείκτη του ποντικιού σε συνδέσμους είναι η μόνη χρωματική λάμψη που δημιουργεί την αίσθηση ενεργοποιημένης διαδραστικότητας σε σκούρο φόντο.

Ουδέτερος

Midnight Forest #02090a — Καμβάς σελίδας, εικόνες φόντου κεφαλίδας, εικόνες φόντου ενότητας
Deep Lichen #061a1c — Κύριες επιφάνειες καρτών, υπερυψωμένα πάνελ, μπλοκ περιεχομένου.
Shaded Fern #072720 — Πίνακας πλοήγησης, πρόσθετες κάρτες, μόλις αισθητή ανύψωση του πίνακα.
Spruce Border #1e2c31 — Λεπτά περιγράμματα για κάρτες, διαχωριστικές γραμμές, περιγράμματα πεδίων εισαγωγής.
Abyss Indigo #000a1e — Επιπλέον επιφάνεια για ενσωμάτωση προϊόντων/επιδείξεων, πάνελ με περιγραφές λειτουργιών.
Pure White #ffffff — Κύριο κείμενο, γέμισμα κουμπιών, τίτλος, λογότυπα.

Τυπογραφία

από 12 έως 70px · 8 βήματα

Neue Haas Grotesk — αντικατάσταση: Inter · περιγράμματα 330, 400, 500, 550, 600 · Το βασικό τυπογραφικό σύστημα αποτελείται από τίτλους με βάρος γραμματοσειράς 70–96px (330–400) που είναι διακριτικοί και όχι δυνατοί, κείμενο σώματος με βάρος γραμματοσειράς 16–18px (400–500) και πλοήγηση και διεπαφή χρήστη με βάρος γραμματοσειράς 14–16px (500–550). Το εξαιρετικά ελαφρύ βάρος γραμματοσειράς των 330 σε μεγάλα μεγέθη οθόνης είναι ένα ξεχωριστό χαρακτηριστικό: μεταδίδει εμπιστοσύνη μέσω της συγκράτησης και όχι του όγκου.
Inter Variable — αντικατάσταση: Inter · περιγράμματα 400, 420, 450, 550 · Ένας δευτερεύων τύπος γραμματοσειράς που χρησιμοποιείται σε στοιχεία διεπαφής πλοήγησης, μικρές σημειώσεις, στοιχεία ελέγχου καρτελών και μικροκείμενο σε υποσέλιδα. Τα ελαφρώς μεγαλύτερα πεζά γράμματα και η μεγαλύτερη τυπική απόσταση μεταξύ των γραμμάτων την καθιστούν πιο ευανάγνωστη σε μικρά μεγέθη. Είναι επίσης κατάλληλη για περιπτώσεις όπου μια γραμματοσειρά βάρους 420 γεμίζει το κενό μεταξύ μιας κανονικής και μιας μεσαίου μεγέθους γραμματοσειράς.

Διαστήματα και μορφή

Σκοπός	Εννοια
Πυκνότητα	μέσος
Βασικό βήμα	12px
Ακτίνα κουμπιού	9999px
Ακτίνα κάρτας	12px
Σκιές	χωρίς περιγράμματα αντί για σκιές
Μεταξύ τμημάτων	80px
Πλάτος σελίδας	1280px

Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Shopify και θα τον γεμίσει

Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.

Δημιουργήστε έναν ιστότοπο σε αυτό το στυλ

Παρόμοια στυλ

Retool — Ένα ζεστό εργαστήριο οψιδιανού - μια επιφάνεια για εργαλεία ακριβείας, φωτισμένη από αναμμένα κάρβουνα, όπου δημιουργούνται τα πάντα
Elektron — Ο πίνακας ελέγχου του εξοπλισμού τα μεσάνυχτα είναι ένας σχεδόν μαύρος καμβάς, όπου λάμπουν φωτογραφίες προϊόντων, ενώ η διεπαφή παραμένει σχεδόν αόρατη.
REKKI — Πίνακας ελέγχου πτήσης στο φωτογραφικό εργαστήριο
OFFFICE : — μια γκαλερί νουάρ τυλιγμένη σε μονολιθική γραμματοσειρά
Clyde — Ο εκθεσιακός χώρος, με τον μοναδικό προβολέα του, είναι μια σχεδόν σκοτεινή γκαλερί όπου το μόνο χρώμα στο δωμάτιο είναι μια ζεστή μπάλα σε ντεγκραντέ αποχρώσεις.
Channel Studio — Ένα φωτογραφικό εργαστήριο στούντιο με ένα κοραλί αμπαζούρ
Electronic Materials Office — Μια λαμπερή χόβολη σε μια στοά διακοσμημένη με κάρβουνο
Apple iPhone 18 Pro — Μια συλλογή από μεταμεσονύκτια εξαρτήματα. Σκεφτείτε κάθε τμήμα ως μια σκοτεινή, μουσειακή βάση, με ένα κομμάτι του προϊόντος να επισημαίνεται με ακρίβεια, και την τυπογραφία και τα μπλε χειριστήρια να χρησιμεύουν ως διακριτικές ετικέτες γύρω του.
Apple Watch Ultra 4 — Ένα εργαλείο για νυχτερινές δοκιμές. Δημιουργήστε οθόνες ως ακολουθία μαύρων εκθεσιακών χώρων, όπου τεράστιες κεφαλίδες SF Pro πλαισιώνουν εξοπλισμό υψηλής ακρίβειας, ενεργά δεδομένα και προσεκτικά δοσολογημένα ηλεκτρικά χρώματα.
Apple Watch Series 12 — Ένας χάλκινος αισθητήρας στο σκοτάδι. Σκεφτείτε το υλικό του ρολογιού και τις ενδείξεις κατάστασης σαν φωτισμένα αντικείμενα που αιωρούνται σε μια σχεδόν σκοτεινή γκαλερί.
Bedouin's Daughter — Ηλιακό φως σε μαύρο βελούδο. Χρησιμοποιήστε φωτεινές βουτυρένιες κίτρινες, σκληρές μαύρες επιφάνειες και κοκκώδεις, ηλιόλουστες εικόνες ως ίσα μέρη της οπτικής σύνθεσης.
ORYZO AI — Ένα φωτογραφικό δοκίμιο για έναν σκοτεινό θάλαμο. Ένα μοναχικό αντικείμενο που αιωρείται στο ζεστό σκοτάδι, με κρεμ γραμματοσειρά τη μόνη διακόσμηση.