Glossier
Φωτογράφιση Sunshine - λευκό χαρτί, μαύρο μελάνι, μία φωτεινή κίτρινη πινελιά
Το Glossier λειτουργεί σαν ένα ψηφιακό περιοδικό ομορφιάς: ένας σχεδόν μονόχρωμος καμβάς από λευκό και μαύρο, που διακόπτεται από μια μοναδική, έντονη κίτρινη πινελιά που λειτουργεί και ως λογότυπο της μάρκας και ως μοναδική πρόσκληση για δράση. Το σύστημα είναι συντακτικά περιορισμένο - υπερμεγέθεις τίτλοι Apercu, άφθονος χώρος κειμένου, ολοσέλιδη φωτογραφία lifestyle που φέρει το μεγαλύτερο μέρος του συναισθηματικού βάρους - και χρηστικό στην εκτέλεση: επίπεδες κάρτες προϊόντων, λεπτά περιγράμματα και πλήρης έλλειψη διακοσμητικών στοιχείων. Το κίτρινο δεν είναι δευτερεύον χρώμα μάρκας. ΕΙΝΑΙ η μάρκα, που χρησιμοποιείται με φειδώ, έτσι ώστε κάθε εμφάνιση να μοιάζει με φλας κάμερας. Όλα τα άλλα προορίζονται να ξεθωριάσουν στο παρασκήνιο: τα ουδέτερα είναι ζεστά γκρι με μια διακριτική κοκκινωπή απόχρωση, τα περιγράμματα είναι διακριτικά και η γραμματοσειρά είναι πυκνή και συμπυκνωμένη. Το αποτέλεσμα είναι μια βιτρίνα που δίνει μια αίσθηση αυτοπεποίθησης, διακριτικότητας και χωρίς συμβιβασμούς μοντέρνας.
Η σελίδα διαθέτει μια κατακόρυφα διατεταγμένη σειρά από ενότητες πλήρους οθόνης, καθεμία σχεδιασμένη ως αυτόνομο συντακτικό άρθρωμα. Η κύρια ενότητα είναι μια φωτογραφία πλήρους πλάτους με μια αιωρούμενη λευκή επικάλυψη (πάνω αριστερά) και ένα τεράστιο κίτρινο λογότυπο που καταλαμβάνει ολόκληρο το κάτω μέρος της σελίδας. Κάτω από την κύρια ενότητα, οι ενότητες εναλλάσσονται μεταξύ εικόνων πλήρους οθόνης και πλεγμάτων μεμονωμένων καρτών. Η διαίρεση των κατηγοριών (περιποίηση δέρματος/μακιγιάζ) σε δύο στήλες με ίση αναλογία εικόνων (50/50) γίνεται χωρίς ορατό περίγραμμα—μόνο μια γραμμή που συνδέει τις εικόνες τις χωρίζει. Ο κατάλογος προϊόντων χρησιμοποιεί ένα πλέγμα τεσσάρων στηλών από τετράγωνες κάρτες σε έναν καμβά #f7f7f7. Η πλοήγηση είναι μια μινιμαλιστική επάνω γραμμή με μια δευτερεύουσα διαφημιστική λωρίδα από πάνω. Τα κενά μεταξύ των ενοτήτων είναι αρκετά μεγάλα (64px), αλλά οι μεταβάσεις μεταξύ των ενοτήτων είναι ομαλές—χωρίς διαχωριστικά ή εναλλασσόμενα χρώματα φόντου, εκτός από το ζεστό υποσέλιδο. Ο συνολικός ρυθμός είναι: φωτογραφία, κείμενο, φωτογραφία, πλέγμα, φωτογραφία – σαν να ξεφυλλίζετε ένα περιοδικό μόδας.
Η φωτογραφία είναι η κυρίαρχη οπτική γλώσσα. Ολόκληρος ο χώρος θέασης είναι γεμάτος με εικόνες lifestyle και πορτρέτα - ζεστός χρυσός φωτισμός ώρας, απαλά κοντινά πλάνα δέρματος, χέρια που κρατούν μπουκάλια προϊόντων με φόντο το έντονο φως του ήλιου. Η χρωματική παλέτα στις φωτογραφίες είναι ζεστή και αποκορεσμένη: ροδακινί ουρανοί, τόνοι δέρματος από τερακότα, βαθύ μπλε του ωκεανού. Οι εικόνες καταλαμβάνουν πάντα ολόκληρη την επιφάνεια της σελίδας, χωρίς στρογγυλεμένες γωνίες, πλαίσια ή επικαλύψεις, με εξαίρεση τις λευκές κάρτες κειμένου ή το κίτρινο λογότυπο. Οι φωτογραφίες προϊόντων στις κάρτες καταλόγου τραβήχτηκαν σε ένα καθαρό λευκό φόντο χωρίς ραφές με επίπεδο, ομοιόμορφο φωτισμό. Η αναλογία εικόνας προς κείμενο είναι περίπου 70/30 - οι εικόνες μεταφέρουν το συναίσθημα, το κείμενο, τη λειτουργία. Χωρίς εικόνες, χωρίς αφηρημένα γραφικά, χωρίς τρισδιάστατες απεικονίσεις.
Παλέτα
Μάρκα
- Glossier Yellow
#fff116— Το κίτρινο χρησιμοποιείται ως δευτερεύον χρώμα για διακοσμητικές λεπτομέρειες και για την επισήμανση λιγότερο συχνά χρησιμοποιούμενων ερωτημάτων αναζήτησης. Δεν πρέπει να χρησιμοποιείται ως κύριο χρώμα για παρότρυνση για δράση.
Ουδέτερος
- Ink
#000000— Κείμενο σώματος, σύνδεσμοι πλοήγησης, κύριο κείμενο, κείμενο υποσέλιδου, περιγράμματα εικονιδίων, λεπτά περιγράμματα· κυρίαρχο τυπογραφικό και δομικό χρώμα. - Paper
#ffffff— Επιφάνειες κάρτας προϊόντος, περιοχές γεμίσματος, υπερυψωμένα πάνελ· το πιο φωτεινό επίπεδο επιφάνειας στη στοίβα. - Fog
#f7f7f7— Καμβάς σελίδας, φόντα ενοτήτων, μεταβάσεις μεταξύ εικόνων στη σελίδα· η βασική επιφάνεια στην οποία βρίσκεται ολόκληρος ο ιστότοπος. - Blush
#faf2f4— Φόντο υποσέλιδου, απαλά ζεστά διαχωριστικά ενοτήτων· μια διακριτική ροζ-λευκή απόχρωση προσθέτει ζεστασιά στο κάτω μέρος των σελίδων. - Mist
#f0f0f0— Μια ελαφριά επιφάνεια στήριξης για τη δημιουργία ενός διακριτικού φόντου και τον διαχωρισμό των τμημάτων. Δεν πρέπει να χρησιμοποιείται ως το κύριο χρώμα για την παρότρυνση για δράση. - Ash
#e8e8e8— Περιγράμματα πεδίων εισαγωγής, φόντα εικονιδίων, λεπτές διαχωριστικές γραμμές· χρώμα δομικού περιγράμματος για κάρτες και στοιχεία φόρμας.
Τυπογραφία
από 12 έως 32px · 5 βήματα
- Apercu — αντικατάσταση: Inter · περιγράμματα 400, 500, 700 · Η κύρια γραμματοσειρά χρησιμοποιείται σε όλη τη διεπαφή χρήστη—κείμενο σώματος στα 16px/400, πλοήγηση και λεζάντες στα 12–14px/500, υποεπικεφαλίδες στα 20px/500 και τίτλοι συντακτών στα 32px/700. Ο γεωμετρικός, ανθρωπιστικός σχεδιασμός της Apercu δίνει στην επωνυμία ένα συμπυκνωμένο, μοντέρνο στυλ. Η σχεδόν μηδενική απόσταση μεταξύ των γραμμάτων (0,002–0,003em) καθιστά τη γραμματοσειρά συμπαγή και παρόμοια με εκείνη ενός περιοδικού, αντί για ευάερη ή φιλική. Το βάρος των 700 προορίζεται για στοιχεία εμφάνισης σε άρθρα συντακτών, όχι για στοιχεία UI.
- Apercu Mono — αντικατάσταση: JetBrains Mono or IBM Plex Mono · περιγράμματα 400 · Μικρο-χρηστική τυπογραφία για μεταδεδομένα παραγγελιών, αριθμούς παρακολούθησης και ετικέτες δίπλα στον κώδικα. Η έκδοση με μονοδιάστατο χώρο δημιουργεί μια τεχνική υφή σε σχέση με έναν αναλογικό σωματότυπο.
- GTStandard-M — αντικατάσταση: Inter · περιγράμματα 400 · GTStandard-M - Βρέθηκε στα εξαγόμενα δεδομένα αλλά δεν περιγράφεται από την Τεχνητή Νοημοσύνη.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | μέσος |
| Βασικό βήμα | 8px |
| Ακτίνα κουμπιού | 0px |
| Ακτίνα κάρτας | 0px |
| Σκιές | χωρίς περιγράμματα αντί για σκιές |
| Μεταξύ τμημάτων | 64px |
| Πλάτος σελίδας | 1440px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Glossier και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- Lightship — Ένα κινηματογραφικό διοράμα του ανοιχτού δρόμου. Ζεστοί κρεμ τοίχοι γκαλερί διακοσμημένοι με μεγάλες φωτογραφίες τοπίων τοποθετημένες σε κοντινά διαστήματα, λεπτές μαύρες γραμματοσειρές μόλις που διακρίνονται στα κάδρα, και μια μοναδική φωτεινή πορτοκαλί πινελιά που σπάει τη μονόχρωμη σαν φωτιά σε λιβάδι.
- Faire ES — χονδρικός κατάλογος ζεστής κρέμας
- Adanola — Ένα editorial lookbook σε λευκό χαρτί. Μια φωτογράφιση μόδας όπου η τυπογραφία και η φωτογραφία αναπνέουν σε καθαρές λευκές επιφάνειες, με μαύρο μελάνι για την γραμματοσειρά και μια διακριτική, χαρακτηριστική γραμματοσειρά sans-serif (Favorit), που αντανακλά το συνολικό στυλ της μάρκας.
- Oura Ring — Ένα ζεστό εργαστήριο παρασκευής βρώμης, λουσμένο στο απαλό φως της ημέρας
- Stykka — Ένα σκανδιναβικό εργαστήριο σε λευκό φως – ένας ήσυχος, χειροποίητος εκθεσιακός χώρος όπου η μόνη φωνή είναι η φωτογραφία
- DJI — Αεροδιαστημικός μαύρος καμβάς με μία μόνο ηλεκτρίκ μπλε ανταύγεια
- Altitude Beverages — Μονόχρωμο εξώφυλλο περιοδικού. Φανταστείτε ένα εξώφυλλο περιοδικού μόδας χωρίς κανένα χρώμα εκτός από τις φωτογραφίες—το κείμενο και ο λευκός χώρος αφηγούνται όλη την ιστορία.
- AATHER — Μια ανοιχτή παλάμη, μια μοναδική φλόγα - μια ήσυχη πολυτέλεια που περιέχεται στην ηρεμία
- Cowboy — Μια βελγική γκαλερί ποδηλάτων σε ένα κατάλευκο πορσελάνινο περιβάλλον. Ένας εκθεσιακός χώρος όπου οι ματ επιφάνειες, οι μεγάλες γραμματοσειρές που χρησιμοποιούνται στα εκδοτικά υλικά και η σχεδόν απουσία διακόσμησης τραβούν την προσοχή στο ποδήλατο και το περιεχόμενό του.
- Refero — Σύνταξη σε λευκό μάρμαρο - μια σελίδα προϊόντος που δημιουργήθηκε από τυπογράφο, όπου ο τίτλος serif είναι η επαγγελματική κάρτα της μάρκας και όλα τα άλλα είναι διακριτικά.
- Face Formula — Ένα σκανδιναβικό πορτρέτο του εκδότη. Ένα ήρεμο, περιοδικού στιλ πορτραίτο, όπου το βλέμμα του μοντέλου και ο τίτλος, γραμμένοι με συμπυκνωμένη γραμματοσειρά serif, μιλούν από μόνα τους σε ένα δροσερό, ομιχλώδες φόντο.
- Shupatto — Προθήκη μουσείου σε λευκό μάρμαρο