Shopify
Θερμοκήπιο Μεσονυχτίου - Τα εμπορικά σήματα ανθίζουν σε ένα βαθύ τιρκουάζ φόντο, φωτισμένα από μια μοναδική σπίθα μέντας
Το σύστημα σχεδιασμού του Shopify είναι ένα μεταμεσονύκτιο εργαστήριο για το εμπόριο: ένας σχεδόν μαύρος καμβάς με βαθύ τιρκουάζ πράσινο, μια φαρδιά, γεμάτη αυτοπεποίθηση γραμματοσειρά sans-serif και μια ενιαία έντονη πινελιά μέντας που ενεργοποιεί διαδραστικές στιγμές. Η διεπαφή μοιάζει με σκοτεινό θάλαμο, όπου προϊόντα και μάρκες είναι η πηγή φωτός - φωτογραφίες και βιτρίνες καταστημάτων λάμπουν σε σχεδόν μαύρες επιφάνειες, ενώ τα χρωμιωμένα στοιχεία υποχωρούν. Τα στοιχεία είναι γεωμετρικά αλλά απαλά: κάρτες ακτίνας 12px με λεπτά περιγράμματα, κουμπιά σε σχήμα χαπιού και γραμματοσειρά βάρους 330 που ψιθυρίζει την κλίμακα αντί να φωνάζει. Ένα μόνο χρωματικό σημείο στίξης (#36f4a4) χρησιμοποιείται με φειδώ σε συνδέσμους, ετικέτες και καταστάσεις εστίασης, διατηρώντας το χρώμα για λειτουργικές στιγμές για να διασφαλιστεί ότι οι ιστορίες των εμπόρων παραμένουν το οπτικό σημείο εστίασης.
Το μέγιστο πλάτος είναι ~1280px, στο κέντρο, με μπλοκ splash πλήρους πλάτους που εκτείνονται πέρα από το κοντέινερ φωτογραφιών. Ο ρυθμός της σελίδας εναλλάσσεται: (1) μια σκούρα σελίδα splash πλήρους πλάτους με επικαλυπτόμενη επικεφαλίδα και κουμπιά παρότρυνσης για δράση, (2) άνετα σκούρα τμήματα με μπλοκ κειμένου και εικόνας μέγιστου πλάτους σε 2 στήλες ή πλέγματα εικόνας σε 3 στήλες, (3) διαδραστικά πάνελ βιτρίνας (κάρτα προϊόντος, αριθμομηχανή αποστολής, παγκόσμιος χάρτης) που εμφανίζονται ως ανάγλυφες κάρτες σε έναν βαθύτερο καμβά. Η πλοήγηση είναι μια σταθερή επάνω γραμμή με το λογότυπο + 3 στοιχεία πλοήγησης + δευτερεύοντες συνδέσμους + το κύριο κουμπί παρότρυνσης για δράση, όλα ευθυγραμμισμένα προς τα δεξιά. Ο κάθετος ρυθμός χρησιμοποιεί κενά 80px μεταξύ των τμημάτων με ομαλή μετάβαση—χωρίς διαχωριστικά μεταξύ των σκούρων τμημάτων, μόνο μια αλλαγή στον τόνο της επιφάνειας.
Ο οπτικός σχεδιασμός επικεντρώνεται κυρίως στον λιανοπωλητή: οι φωτογραφίες προϊόντων σε πλήρες μέγεθος και οι φωτογραφίες από εκδηλώσεις επωνυμίας φέρουν το μεγαλύτερο μέρος του οπτικού βάρους, συχνά με τη μορφή μεγάλου φόντου με επικαλυπτόμενο λευκό κείμενο. Οι εικόνες είναι κομμένες σε μεγάλο βαθμό, υψηλής αντίθεσης και εορταστικής φύσης (το χτύπημα του κουδουνιού του Nasdaq, οι ομαδικοί χαιρετισμοί, τα κοντινά πλάνα των προϊόντων στα χέρια). Το σκούρο φόντο δημιουργεί την εντύπωση ότι αυτές οι φωτογραφίες φωτίζονται από προβολείς. Οι εικόνες είναι μινιμαλιστικές - η κύρια επεξηγηματική εργασία εκτελείται από ενσωματωμένες εικόνες προϊόντων και στιγμιότυπα οθόνης από βιτρίνες καταστημάτων. Τα εικονίδια είναι μονόχρωμα, με πλάτος γραμμής 1,5–2px, συνήθως λευκά ή #36f4a4 για ενεργές καταστάσεις.
Παλέτα
Μάρκα
- 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 — Μια λαμπερή χόβολη σε μια στοά διακοσμημένη με κάρβουνο
- ORYZO AI — Ένα φωτογραφικό δοκίμιο για έναν σκοτεινό θάλαμο. Ένα μοναχικό αντικείμενο που αιωρείται στο ζεστό σκοτάδι, με κρεμ γραμματοσειρά τη μόνη διακόσμηση.
- Factory — Το τερματικό του «αίθουσας πολέμου» τα μεσάνυχτα. Το «εργοστάσιο» είναι ένας κατάμαυρος πίνακας ελέγχου όπου μια μόνο λευκή κάρτα προσγειώνεται σαν αποστολή φωτισμένη με φακό — το μόνο αντικείμενο στο δωμάτιο είναι η ίδια η εργασία.
- Hungry Tiger — Γκράφιτι σε έντονο χρώμα σαν κουρκουμά στον τοίχο του ταντούρ. Μια ενιαία παλέτα χρυσού και σκουριασμένου καφέ, με γραμματοσειρά τόσο μεγάλη που μοιάζει περισσότερο με πινακίδα αγοράς μπαχαρικών παρά με ιστοσελίδα.
- Bibliothèque — Μια μαύρη γκαλερί σε σχήμα κύβου κάτω από προβολέα – μια μοναχική φωτισμένη πλάκα σε μια τεράστια, σκοτεινή αίθουσα
- Apple (España) — μαύρο θέατρο με φωτιζόμενα εξαρτήματα