Apple (España)

Ένας καθεδρικός ναός από λευκό χώρο με μόλις ακουστούς τίτλους. Μια απέραντη, φωτεινή αίθουσα όπου τεράστιες γραμματοσειρές πυκνότητας 700 κρέμονται στον αέρα, συγκρατούμενες μόνο από παστέλ χρώματα και ένα μόνο μπλε νήμα.

Η γλώσσα των σελίδων προϊόντων της Apple αποτελεί μια μελέτη τυπογραφικής γενναιοδωρίας: τεράστιοι τίτλοι σε οθόνες SF Pro που αιωρούνται σε υπόλευκο φόντο, περιβάλλονται από τεράστιο λευκό χώρο που κάνει κάθε λέξη να φαίνεται σκόπιμη. Η παλέτα είναι σχεδόν μονοχρωματική - κείμενο σε #1d1d1f, καμβάς που εναλλάσσεται μεταξύ #ffffff και #f5f5f7 - με μία μόνο μπλε πινελιά (#0071e3) που προορίζεται αποκλειστικά για διαδραστικές στιγμές. Το χρώμα υπάρχει στις ίδιες τις εικόνες προϊόντων (παστέλ τόνοι), ποτέ ως διακοσμητικά στοιχεία UI. Τα στοιχεία είναι χωρίς πλαίσιο: στρογγυλεμένες κάρτες με ακτίνα 28px, κουμπιά σε σχήμα χαπιού που σχεδόν αγγίζουν τις άκρες της σελίδας, χωρίς ορατά περιβλήματα ή σκιές. Ο ρυθμός δημιουργείται με εναλλασσόμενες λευκές και γκρι ρίγες, όχι με διαχωριστικά ή περιγράμματα.

Οι ενότητες καταλαμβάνουν όλο το πλάτος της σελίδας, εκτείνονται από άκρη σε άκρη με άφθονο γέμισμα (περίπου 40-100 πλευρές). Το μέγιστο πλάτος περιεχομένου είναι ουσιαστικά κεντραρισμένο μέσα σε κάθε λωρίδα. Το κύριο στοιχείο είναι μια κεντραρισμένη στοίβα: μια ετικέτα σε σχήμα φρυδιού, μια μεγεθυμένη επικεφαλίδα, ένα μόνο κουμπί παρότρυνσης για δράση, μια σειρά τιμής και, στη συνέχεια, μια εικόνα προϊόντος που γεμίζει το κάτω μέρος του παραθύρου προβολής. Οι ενότητες ακολουθούν ένα επαναλαμβανόμενο μοτίβο: μια αριστερή στοίχιση επικεφαλίδας μέσα στη λωρίδα, ακολουθούμενη είτε από μια διάταξη δύο στηλών με περιγραφές προϊόντων (κείμενο στα αριστερά/εικόνα στα δεξιά ή εναλλασσόμενες), ένα πλέγμα τριών στηλών καρτών ή μια κεντραρισμένη οπτική παρουσίαση. Ο ρυθμός περιεχομένου ελέγχεται εξ ολοκλήρου από εναλλασσόμενα λευκά και τρίχρωμα φόντα με κάθετα κενά 100-100 cm—χωρίς διαχωριστικά, χωρίς κάρτες που φέρουν στοιχεία. Η καθολική πλοήγηση είναι μια ενιαία, σταθερή γραμμή. Οι ενότητες προδιαγραφών προϊόντων χρησιμοποιούν ζώνες πλήρους πλάτους με άφθονο γέμισμα, όπου το κείμενο κεντράρεται σε στενές στήλες (~560px) σε μια ευρύτερη οπτική περιοχή.

Η οπτική γλώσσα της Apple είναι κυρίως η φωτογραφία προϊόντων: κοντινά πλάνα υλικού σε καθαρό λευκό ή έγχρωμο φόντο, χωρίς πλαίσιο τρόπου ζωής ή σκηνές. Η κύρια εικόνα δείχνει χέρια που κρατούν ένα παστέλ πράσινο MacBook Neo—το ανθρώπινο στοιχείο είναι δευτερεύον, επιδεικνύοντας κλίμακα και υφή παρά συναίσθημα. Στις ενότητες παραλλαγών προϊόντων, δύο συσκευές παρουσιάζονται δίπλα-δίπλα σε φόντο με αντίστοιχα χρώματα (ροζ, πράσινο, ασημί, γαλάζιο), με κάθε κάρτα να αποτελεί ένα επίπεδο χρωματικό πεδίο με το προϊόν στο κέντρο. Οι λεπτομερείς λήψεις χρησιμοποιούν ακραία κοντινά πλάνα (ο μεντεσές του φορητού υπολογιστή, η μονάδα κάμερας) σε ουδέτερο φόντο. Δεν υπάρχουν εικόνες, αφηρημένα γραφικά, διακοσμητικές εικόνες—το ίδιο το προϊόν είναι το οπτικό στοιχείο. Η εικονογραφία είναι παντού—μονόχρωμα εικονίδια γραμμής στο στυλ SF Symbols, πάχους 1,5–2px, που προέρχονται από το σύνολο εικονιδίων συστήματος της Apple. Η φωτογραφία γίνεται πάντα με έντονο τρόπο: ομοιόμορφος, χωρίς σκιές φωτισμός που μειώνει το προϊόν σε γραφική μορφή και όχι σε τρισδιάστατο αντικείμενο.

Ηλεκτρονικό κατάστημα Μονόχρωμος

https://www.apple.com/macbook-neo

Παλέτα

Μάρκα

Electric Blue #0071e3 — Τα γεμάτα κουμπιά δράσης είναι η μόνη χρωματική έμφαση στο περιβάλλον χρήστη, και χρησιμοποιούνται με φειδώ για κλήσεις για δράση.
Link Blue #0066cc — Ενσωματωμένοι σύνδεσμοι κειμένου, σύνδεσμοι με βέλη και διαγράμματα.
Citrus Gradient #3b3b23 — Ένα εναλλακτικό φινίρισμα που έχει γίνει το χαρακτηριστικό γνώρισμα του προϊόντος είναι μια σκούρα βάση που ξεθωριάζει σε κιτρινοπράσινες ανταύγειες.

Ουδέτερος

Primary Ink #1d1d1f — Οι επικεφαλίδες, το κείμενο του σώματος και οι ετικέτες κουμπιών αποτελούν τον κυρίαρχο τόνο στο προσκήνιο σε όλες τις επιφάνειες. Το φόντο της κύριας εικόνας προϊόντος μεταβαίνει ομαλά από ένα συμπαγές #1d1d1f στην κορυφή σε ένα χρωματικό μπλε.
Mid Gray #707070 — Δευτερεύον κείμενο, ανενεργή κατάσταση πλοήγησης, ετικέτες UI σε σίγαση
Deep Gray #474747 — Το κείμενο πλοήγησης και τα εικονίδια είναι σε μεσαία γραμματοσειρά.
Hairline #d6d6d6 — Λεπτά όρια μεταξύ ενοτήτων και στοιχείων UI.
Canvas #f5f5f7 — Εναλλασσόμενα φόντα τμημάτων - μια γκρι λωρίδα που χωρίζει τις λευκές περιοχές.
Paper #ffffff — Επιφάνεια κάρτας, φόντο κύριας σελίδας, κείμενο κουμπιού σε σκούρο φόντο.

Τυπογραφία

από 12 έως 96px · 10 βήματα

SF Pro Display — αντικατάσταση: Inter · περιγράμματα 600, 700 · Επικεφαλίδες και υποεπικεφαλίδες πρωταγωνιστών για εμφάνιση — βάρος 700 στα 80–96px με αρνητική απόσταση γραμμάτων -1,44px δημιουργεί την χαρακτηριστική «τεράστια επικεφαλίδα που αιωρείται σε λευκό» της Apple. Αντικαταστάσεις: Inter, system-ui
SF Pro Display — αντικατάσταση: Inter · περιγράμματα 600 · Επικεφαλίδες ενοτήτων, τίτλοι καρτών, υποεπικεφαλίδες - μια γραμματοσειρά 600 με ελαφρώς θετική απόσταση μεταξύ των γραμμάτων δίνει μια ζεστή και φιλική αίσθηση σε μεσαία μεγέθη, σε αντίθεση με τις σύντομες επικεφαλίδες παραπάνω.
SF Pro Text — αντικατάσταση: Inter · περιγράμματα 400, 500, 600 · Για το κυρίως κείμενο, την πλοήγηση, τις υποστηρικτικές παραγράφους και τις μικρές λεζάντες, η κύρια γραμματοσειρά είναι μια γραμματοσειρά με δείκτη 400 στα 17px. Η αρνητική απόσταση μεταξύ των γραμμάτων επιτρέπει ένα πιο συνοπτικό κύριο κείμενο σε σελίδες με πολλές πληροφορίες.

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

Σκοπός	Εννοια
Πυκνότητα	πυκνός
Βασικό βήμα	8-10px
Ακτίνα κουμπιού	980px
Ακτίνα κάρτας	28px
Σκιές	χωρίς περιγράμματα αντί για σκιές
Μεταξύ τμημάτων	100-120px
Πλάτος σελίδας	1200px

Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Apple (España) και θα τον γεμίσει

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

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

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

Airbnb — Ένας ήσυχος λευκός τοίχος γκαλερί με έναν μόνο κοραλλιογενή σελιδοδείκτη
Peak Design — Τοίχος γκαλερί, μερικώς φωτισμένος
Ramp — Το οικονομικό τμήμα της σύνταξης, ασπρόμαυρες σελίδες με έναν μόνο νέον μαρκαδόρο. Η σχεδόν μονόχρωμη επιφάνεια της έκδοσης, όπου μια μόνο φωτεινή πράσινη πινελιά μετατρέπει κάθε αλληλεπίδραση σε ένα χρηματικό σήμα.
099 SUPPLY — Ένας τοίχος γκαλερί γεμάτος με ασπρόμαυρα αντικείμενα
Orderful — Κατάστρωμα Ελέγχου Βιομηχανικής Logistics - Μια έντυπη λίστα ελέγχου για τον αποστολέα logistics, με μαύρο μελάνι και κόκκινο χειρουργείο, με κάθε σελίδα αρκετά διακριτική ώστε να επιτρέπει σε έναν χειριστή να φωνάξει κάτι σημαντικό.
Apple (España) — λευκή βιτρίνα γκαλερί
teenage engineering — Βιομηχανικός κατάλογος φωτισμού στούντιο - το προϊόν είναι το μόνο σημαντικό αντικείμενο στη σελίδα και όλα τα άλλα συζητούνται γύρω από αυτό
Apple (España) — Μια βιτρίνα γκαλερί στην πρωινή ομίχλη
Lightship — Ένα κινηματογραφικό διοράμα του ανοιχτού δρόμου. Ζεστοί κρεμ τοίχοι γκαλερί διακοσμημένοι με μεγάλες φωτογραφίες τοπίων τοποθετημένες σε κοντινά διαστήματα, λεπτές μαύρες γραμματοσειρές μόλις που διακρίνονται στα κάδρα, και μια μοναδική φωτεινή πορτοκαλί πινελιά που σπάει τη μονόχρωμη σαν φωτιά σε λιβάδι.
Custo — Μια γκαλερί σε χρώμα gunmetal με μονολιθική γραμματοσειρά. Ένας εκθεσιακός χώρος σε απαλούς γκριζοπράσινους τόνους, όπου ένα μόνο σκούρο αντικείμενο και μια γραμματοσειρά 57px μιλούν από μόνα τους.
Silencio — Ένα λευκό δωμάτιο με αιωρούμενα αντικείμενα. Μια γκαλερί από ζεστό χαρτί, όπου κάθε στοιχείο καταλαμβάνει τη θέση του σε ένα φόντο αρνητικού όγκου, και η σιωπή είναι μια σκόπιμη σχεδιαστική απόφαση.
ORYZO AI — Ένα φωτογραφικό δοκίμιο για έναν σκοτεινό θάλαμο. Ένα μοναχικό αντικείμενο που αιωρείται στο ζεστό σκοτάδι, με κρεμ γραμματοσειρά τη μόνη διακόσμηση.