Shop
Ένας πλωτός εμπορικός αστερισμός σε λευκό μάρμαρο
Το ηλεκτρονικό κατάστημα λειτουργεί με βάση το μοντέλο "λευκού καμβά", με τα προϊόντα να εμφανίζονται ως μεγάλες, έντονα καμπυλωμένες κάρτες εικόνων αντί για πλέγματα μικρογραφιών. Ολόκληρη η διεπαφή είναι απίστευτα ομαλή: ακτίνες 20-28px σε όλη την έκταση, χειριστήρια σε σχήμα χαπιού και ένα συμπαγές σώμα GT Standard 16px με στενή αρνητική παρακολούθηση που κάνει το κείμενο καθαρό και έντονο. Η μόνη έντονη έμφαση του συστήματος είναι ένα έντονο μωβ (#5433eb), το οποίο εμφανίζεται στο λογότυπο, στο κυκλικό πεδίο αποτελεσμάτων αναζήτησης και ως μια χρωματιστή σκιά στο ίδιο κουμπί. Η υπόλοιπη παλέτα είναι θερμή ουδέτερη: λευκές επιφάνειες, ένας διακριτικός ψυχρός γκρι καμβάς, διακριτικά περιγράμματα και σχεδόν μαύρο κείμενο. Η πυκνότητα παραμένει συμπαγής με κενά 12px, αλλά οι ρίγες ήρωα και κατηγορίας αναπνέουν χάρη σε έναν γενναιόδωρο κάθετο ρυθμό 64-80px, κάνοντας την εμπειρία εμπορίου να μοιάζει περισσότερο με περιήγηση παρά με κατάλογο.
Το μέγιστο πλάτος είναι 1200px, κεντραρισμένο σε έναν ημιδιαφανή καμβά #f2f4f5, με μια μόνιμη πλαϊνή μπάρα πλάτους 64px στα αριστερά που περιέχει μόνο εικονίδια πλοήγησης. Το κύριο στοιχείο είναι μια λωρίδα πλήρους πλάτους, με κάρτες προϊόντων τοποθετημένες πάνω από ένα κεντρικό μωβ λογότυπο "καταστήματος" και μια γραμμή αναζήτησης σε σχήμα χαπιού ακριβώς από κάτω. Τα χάπια κατηγορίας είναι διατεταγμένα σε μία μόνο κεντραρισμένη σειρά κάτω από τη γραμμή αναζήτησης. Οι ενότητες περιεχομένου (Γυναίκες, Άνδρες, Ομορφιά, Σπίτι, Μωρό & Παιδιά) ακολουθούν ως καθορισμένες λωρίδες, καθεμία από τις οποίες περιέχει ένα πλέγμα 4 στηλών με εικόνες προϊόντων ή μια σύνθεση "κύριου στοιχείου και πλέγματος" 2 στηλών. Ο κάθετος ρυθμός είναι γενναιόδωρος: 64–80px μεταξύ των κύριων ενοτήτων. Το υποσέλιδο είναι μια σκούρα λωρίδα στο κάτω μέρος της σελίδας με ομάδες συνδέσμων σε σχήμα στήλης. Τα βέλη καρουζέλ στη δεξιά πλευρά των οριζόντιων πλαισίων προϊόντων υποδεικνύουν περιεχόμενο με δυνατότητα κύλισης χωρίς σημεία σελιδοποίησης.
Η φωτογραφία είναι το κυρίαρχο οπτικό στοιχείο: φωτογραφίες προϊόντων πλήρους οθόνης σε λευκό φόντο, κομμένες 1:1, και εικόνες lifestyle με ζεστούς γήινους τόνους (μπεζ, τερακότα, φασκόμηλο, ελεφαντόδοντο). Οι εικόνες προϊόντων έχουν το δικό τους χρώμα—η διεπαφή χρήστη παραμένει αχρωματική, επιτρέποντας στις αποχρώσεις των προϊόντων να παρέχουν οπτική ποικιλία. Τα λογότυπα επωνυμίας εμφανίζονται ως κείμενο επικάλυψης σε σκούρες ή ανοιχτόχρωμες κύριες εικόνες, αντί ως μεμονωμένα εικονίδια. Στην κύρια σύνθεση, οι κάρτες προϊόντων τοποθετούνται ως ένας αιωρούμενος, ελαφρώς επικαλυπτόμενος αστερισμός πάνω από το λεκτικό σήμα. Τα εικονίδια είναι μινιμαλιστικά και μονόχρωμα (μαύρα περιγράμματα), με εξαίρεση τα εικονίδια κατηγορίας, τα οποία χρησιμοποιούν ένα μόνο χρώμα επωνυμίας. Δεν υπάρχουν εικόνες, τρισδιάστατα εφέ ή διαβαθμίσεις στις εικόνες προϊόντων.
Παλέτα
Μάρκα
- Shop Violet
#5433eb— Το κουμπί αποστολής, το σημάδι κειμένου με τις κουκκίδες και το λογότυπο της μάρκας είναι τα μόνα στοιχεία που τονίζουν τη δράση και την ατομικότητα στο λευκό φόντο. - Violet Wash
#c0b5f3— Ένα ημιδιαφανές φωτοστέφανο πίσω από το μωβ κουμπί αποστολής που διατηρεί τη λάμψη του χωρίς να αλλάζει απόχρωση.
Ουδέτερος
- Canvas Mist
#f2f4f5— Φόντο σελίδας και πρόσθετη επιφανειακή επεξεργασία πίσω από ανάγλυφες κάρτες. - Pure White
#ffffff— Η κύρια επιφάνεια για κάρτες, πεδία εισαγωγής, αιωρούμενα σύμβολα και κουμπιά σε σχήμα χαπιού. - Ink Black
#000000— Κύριο κείμενο, επικεφαλίδες, εικονίδια, σύμβολα πλοήγησης και κάρτες προϊόντων σε σκοτεινή λειτουργία. - Faint Border
#ebebeb— Λεπτές διαχωριστικές γραμμές σε κάρτες, περιγράμματα πεδίων εισαγωγής και πλαίσια κουμπιών σε σχήμα χαπιού. - Muted Gray
#787574— Δευτερεύον κείμενο, ετικέτες πλοήγησης, περιγράμματα εικονιδίων όταν είναι ανενεργά - Cool Stone
#cccccc— Σύμβολα κράτησης θέσης, καταστάσεις απενεργοποίησης και φόντα ανενεργών εικονιδίων
Τυπογραφία
από 11 έως 16px · 4 βήματα
- GT Standard — αντικατάσταση: Inter · περιγράμματα 400 · Η κύρια γραμματοσειρά σε όλα τα μεγέθη—τόσο για το κυρίως κείμενο όσο και για τις επικεφαλίδες. Η GTStandard-MRegular στα 16px/-0.031em είναι η κύρια γραμματοσειρά για το κυρίως κείμενο, τα κουμπιά και τις ετικέτες. Η GTStandard-MSemibold στα 20px/-0.05em χρησιμοποιείται για αρκετές μεγάλες επικεφαλίδες. Η GTStandard-MMedium στα 11–12px χρησιμοποιείται για μικρολεζάντες. Κάθε παραλλαγή γραμματοσειράς εμφανίζεται με οπτικό βάρος 400—η ιεραρχία γραμματοσειρών επιτυγχάνεται μέσω λεπτών διαβαθμίσεων και πυκνής αρνητικής απόστασης μεταξύ γραμμάτων, αντί για έντονη αντίθεση. Αυτό είναι ένα χαρακτηριστικό στυλ: Το Shop δεν χρησιμοποιεί έντονη γραμματοσειρά, αλλά μάλλον διαμορφώνει το κείμενο μέσω της απόστασης μεταξύ γραμμάτων.
- Shopify Sans — αντικατάσταση: Inter · περιγράμματα 400, 700 · Δεσμευμένο για μηνύματα σε επίπεδο συστήματος, όπως banner φόρτωσης εφαρμογών και κείμενο συγκατάθεσης για cookie.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | μέσος |
| Βασικό βήμα | 12px |
| Ακτίνα κουμπιού | 9999px |
| Ακτίνα κάρτας | 28px |
| Σκιές | απαλές σκιές |
| Μεταξύ τμημάτων | 64px |
| Πλάτος σελίδας | 1200px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Shop και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- Cursor — Ένα ζεστό εργαστήριο περγαμηνής, φωτισμένο από αναμμένα κάρβουνα
- Slush — φουσκωτό σύμπαν από αυτοκόλλητα σε παστέλ χαρτί
- MindMarket — Ένα ζεστό βιβλίο παραμυθιού σε κρεμ χαρτί - ένας φιλικός εκδοτικός καμβάς όπου μεγάλοι τίτλοι της Inter και κομμένοι χάρτινοι χαρακτήρες συνυπάρχουν σε μια ηλιόλουστη, μαλακή σαν αυτοκόλλητο επιφάνεια.
- Airbnb — Ένας ήσυχος λευκός τοίχος γκαλερί με έναν μόνο κοραλλιογενή σελιδοδείκτη
- Superr — Ένα ζεστό σχολικό τετράδιο στο απαλό απογευματινό φως. Μια κρεμ σελίδα, ένας πορτοκαλί μαρκαδόρος χωρίς καπάκι και μια στοίβα από πλαστικοποιημένα αυτοκόλλητα ονομάτων που περιμένουν να ξεκολληθούν.
- Apple (España) — Η γκαλερί του μουσείου, σε απαλό φως ημέρας, είναι ένας ενιαίος, σαγηνευτικός, χωρίς βαρύτητα λευκός χώρος, με κάθε έκθεμα να φωτίζεται από έναν προβολέα σε έναν ελαφρώς φιμέ τοίχο.
- Lamborghini — Μαύρο χρώμα αμαξώματος στην αίθουσα εκθέσεων, κάτω από τους προβολείς - ένα κίτρινο αυτοκίνητο
- Amplemarket — Ένας ηλιόλουστος χώρος εργασίας γεμάτος κομφετί
- Getharvest — Ένα γραφείο σε χρυσή ώρα – ένας ζεστός κρεμ καμβάς, λευκές καρτ ποστάλ κρεμασμένες στον καμβά και μια μόνο φωτεινή πορτοκαλί φλόγα
- Agence Foudre — Το εξώφυλλο του περιοδικού έχει ένα απαλό ροζ χρώμα που θυμίζει κραγιόν.
- Drive Capital — Ρετρό αφίσα οδικού ταξιδιού σε ζεστό χαρτί
- Apple (España) — λευκή βιτρίνα γκαλερί