Framer
γκαλερί νέον στο κενό
Το Framer λειτουργεί ως σχεδόν απόλυτο σκοτάδι—ένας μαύρος καμβάς όπου το περιεχόμενο αιωρείται σαν μια φωτεινή επιγραφή σε ένα άνοιγμα γκαλερί. Οι τίτλοι, σε GT Walsheim Medium με στενή απόσταση γραμμών 0,8–1,1 και έντονη αρνητική απόσταση γραμμάτων (-0,04em στα 54px), δημιουργούν μια συμπυκνωμένη, διακοσμητική γραμματοσειρά που προχωρά προς τα εμπρός αντί να κάθεται τακτοποιημένα στη σελίδα. Ένα μόνο ηλεκτρικό μπλε (#0099ff) παρέχει όλες τις λειτουργικές πινελιές—περιγράμματα, λάμψη, εικονίδια, ενεργές καταστάσεις—ενώ το υπόλοιπο περιβάλλον παραμένει αχρωματικό, βασιζόμενο σε ανεπαίσθητες γκρι μεταβάσεις (#111, #171717, #242424) για να δημιουργήσει βάθος από καθαρό μαύρο. Τα στοιχεία δίνουν την αίσθηση ότι είναι μελετημένα παρά διακοσμητικά: στρογγυλεμένες ακτίνες 8–25px, λεπτά περιγράμματα 1px, ελάχιστες σκιές και ημιδιαφανείς επιφάνειες που επιτρέπουν στο κενό να λάμψει.
Οι ενότητες πλήρους πλάτους εκτείνονται πέρα από τον μαύρο καμβά, με περιεχόμενο που περιορίζεται σε μέγιστο πλάτος ~1200px και είναι κεντραρισμένο εντός. Η κύρια ενότητα διαθέτει μια κεφαλίδα με αριστερή ευθυγράμμιση και ένα μόνο κουμπί παρότρυνσης για δράση (CTA), με τη δεξιά πλευρά να αφήνεται σκόπιμα κενή—ασύμμετρα, όχι κεντραρισμένη. Οι ενότητες εναλλάσσονται μεταξύ διατάξεων μόνο κειμένου (μεγάλη κεφαλίδα + υποκείμενο κείμενο) και στιγμιότυπων οθόνης προϊόντος. Η ενότητα "Συμπεριλαμβάνεται στο Framer" χρησιμοποιεί έναν τοίχο λογότυπου σε ένα πλέγμα 4 στηλών. Στην ενότητα κοινότητας, ένα στιγμιότυπο οθόνης προϊόντος τοποθετείται μέσα σε ένα κεντραρισμένο κοντέινερ πλήρους πλάτους με στρογγυλεμένες γωνίες. Η πλοήγηση είναι ελάχιστη—μια λεπτή επάνω γραμμή με το λογότυπο στα αριστερά και τους συνδέσμους ευθυγραμμισμένους προς τα δεξιά, χωρίς ορατά χειριστήρια. Ρυθμός ενότητας: σημαντικά κάθετα κενά 80px μεταξύ των ενοτήτων, δημιουργώντας διακριτά νησίδια περιεχομένου που αιωρούνται στο κενό.
Κυριαρχούν στιγμιότυπα οθόνης από τη διεπαφή χρήστη του προϊόντος—πλαισιωμένα από ένα παράθυρο τύπου χρωμίου με κουκκίδες φαναριού, τα ενσωματωμένα στιγμιότυπα οθόνης της εφαρμογής γίνονται η κύρια εικόνα. Τα λογότυπα, που χρησιμεύουν ως απόδειξη ποιότητας, παρουσιάζονται με λευκά γράμματα σε μαύρο φόντο με μεγάλο διάστιχο. Δεν χρησιμοποιούνται φωτογραφίες, εικόνες ή αφηρημένα γραφικά—η οπτική γλώσσα είναι το ίδιο το προϊόν, που εμφανίζεται ως μια ζωντανή διεπαφή. Στυλ εικονιδίων: μινιμαλιστικό, με περίγραμμα, μονόχρωμο και λευκό σε μικρά μεγέθη. Πυκνότητα κειμένου: κυρίως κείμενο, με περιστασιακά μεγάλα αποσπάσματα με τη μορφή στιγμιότυπων οθόνης προϊόντος. Η οπτική ισορροπία του χώρου ευνοεί σαφώς την τυπογραφία έναντι των εικόνων.
Παλέτα
Μάρκα
- Vivid Violet
#0066ff— Το κύριο κουμπί ενέργειας είναι το μόνο σημείο στη διεπαφή όπου εμφανίζεται ένα φόντο κουμπιού με συμπαγές χρώμα.
Ουδέτερος
- Bone
#ffffff— Κύριοι τίτλοι, κύριο κείμενο σε σκούρο φόντο, το φόντο με κουμπιά είναι η μόνη πηγή φωτός. - Void
#000000— Ο καμβάς της σελίδας, το φόντο πλοήγησης, οι επιφάνειες των καρτών, το γέμισμα εικονιδίων—όλα είναι ένα ατελείωτο μαύρο χρώμα που απορροφά όλο το μη απαραίτητο περιεχόμενο. - Graphite
#111111— Οι υπερυψωμένες επιφάνειες καρτών είναι ένα βήμα πάνω από το κενό—μεγάλες, λειτουργικές κάρτες και τροπικά δοχεία. - Obsidian
#171717— Ενδιάμεση επιφάνεια για κουμπιά, πρόσθετες κάρτες, γεμίσματα UI - διαχωρίζει τα διαδραστικά στοιχεία από τον καμβά. - Slate
#242424— Κατά την τοποθέτηση του δείκτη του ποντικιού, τα πεδία εισαγωγής και τα πλαίσια με εσοχή έχουν την πιο φωτεινή ουδέτερη απόχρωση πριν από τη μετάβαση σε μορφή κειμένου. - Ash
#333333— Βαθύ γέμισμα για ανενεργές εικόνες φόντου και δομικά στοιχεία.
Τυπογραφία
από 12 έως 68px · 8 βήματα
- sans-serif — αντικατάσταση: Inter · περιγράμματα 400 · sans-serif - βρίσκεται στα εξαγόμενα δεδομένα αλλά δεν περιγράφεται από την τεχνητή νοημοσύνη.
- GT Walsheim — αντικατάσταση: Inter Tight · περιγράμματα 500 · Η γραμματοσειρά για τις επικεφαλίδες και τους τίτλους είναι η γραμματοσειρά της επωνυμίας. Είναι επιθετικά συμπυκνωμένη, με απόσταση γραμμών 0,8–1,1 και απόσταση γραμμάτων από -0,04em έως -0,05em στο εύρος 44–68px. Δεν αποτελεί διακοσμητικό στοιχείο. Η γεωμετρική ζεστασιά του GT Walsheim, σε συνδυασμό με αυστηρές μετρήσεις, δημιουργεί τη φωνή του συστήματος - σίγουρη, συμπαγής και ελαφρώς φουτουριστική. Για παρόμοια γεωμετρική έκφραση, σκεφτείτε το Inter Tight ή το Space Grotesk Bold.
- Inter Variable — αντικατάσταση: Inter · περιγράμματα 400 · Το κύριο κείμενο, η πλοήγηση και οι δευτερεύουσες επικεφαλίδες είναι ο βασικός άξονας. Ο άξονας Inter Variable επιτρέπει την ομαλή παρεμβολή των βαρών. Η παρακολούθηση περιορίζεται καθώς αυξάνεται το μέγεθος: από -0,001em σε 18px και από -0,027em σε 22px. Η έκδοση με μεταβλητές επιτρέπει την ομαλή δημιουργία μικροκινήσεων του ιστότοπου. Αντικατάσταση: Inter ( Google) – μια σχεδόν πανομοιότυπη εναλλακτική λύση.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | μέσος |
| Βασικό βήμα | 10px |
| Ακτίνα κουμπιού | 9999px |
| Ακτίνα κάρτας | 20px |
| Σκιές | χωρίς περιγράμματα αντί για σκιές |
| Μεταξύ τμημάτων | 80px |
| Πλάτος σελίδας | 1200px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Framer και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- Auros — Αβυσσαλικό τερματικό με βιοφωταυγείς μπάλες δεδομένων
- Origin Financial — Μια μεσονύκτια γκαλερί ήσυχης χλιδής. Ένα ήσυχο, σχεδόν σκοτεινό δωμάτιο όπου οι μεγάλες γραμματοσειρές serif και μερικά φωτισμένα χρωματιστά πάνελ δημιουργούν την αίσθηση ότι τα χρηματοοικονομικά είναι ένα προσεκτικά επιμελημένο έργο τέχνης.
- Raycast — Κέντρο Διοίκησης Μεσονυχτίων, Coral Neon
- Dimension — ένας σταθμός εργασίας φωτισμένος από το σούρουπο με αδιαφανή γυάλινα πάνελ
- Reflect Notes — Ο χώρος Starry Violet είναι ένα σκοτεινό παρατηρητήριο όπου οι νότες αιωρούνται σαν αστερισμοί με φόντο ένα σχεδόν μαύρο λουλακί κενό.
- Ameba — Το δωμάτιο ελέγχου τα μεσάνυχτα – ένας ηλεκτρικός μπλε παλμός μέσα σε αδιαφανή γυάλινα πάνελ
- Branding — Μαύρος τοίχος γκαλερί, αιματηρές πινελιές - Μεγάλες λευκές γραμματοσειρές αιωρούνται σε έναν σκούρο καμβά που μοιάζει με κενό, διακόπτεται από μια ενιαία φωτεινή κόκκινη πινελιά και εντυπωσιακά διακοσμητικά στοιχεία που μοιάζουν περισσότερο με πινακίδες γκαλερί παρά με διεπαφή ιστού.
- Harness — Mission Control τα μεσάνυχτα με φωσφοριζέ πράσινες πινελιές
- Koto — Η Πινακοθήκη Οψιδιανού τα μεσάνυχτα. Μια σχεδόν κατάμαυρη σκηνή, όπου η μόνη πηγή θερμού φωτός είναι ένας μόνο κίτρινος μαρκαδόρος, και συμπυκνωμένα γράμματα αιωρούνται στον απέραντο αρνητικό χώρο σαν αφίσες εκθέσεων.
- Ohzi — Ένας λαμπερός κύβος αιωρούμενος σε μια σκοτεινή στοά
- Depot — Ένα σκοτεινό τερματικό διακομιστή. Μια σχεδόν μαύρη κονσόλα προγραμματιστή, με ένα μόνο πράσινο LED που σηματοδοτεί την έναρξη της εργασίας και το υπόλοιπο περιβάλλον χρήστη να εμφανίζεται σε γραφίτη.
- Maciej Zadykowicz — Η Midnight Gallery με την καλειδοσκοπική τοιχογραφία της είναι ένας σχεδόν μαύρος τοίχος στούντιο όπου ένα ζωντανό, πολύχρωμο τυπογραφικό έργο τέχνης τραβάει την προσοχή, ενώ όλα τα άλλα παραμένουν ήσυχα και σκόπιμα.