Letters
Ένα πρωινό ραντεβού σε μια υπαίθρια κλινική—ένα αποστειρωμένο λευκό τραπέζι κάτω από μια απαλή μπλε οροφή, σπαρμένο με χειρουργικά μπλε εργαλεία
Το Letters είναι ένα εργαλείο γραφής ιατρικών επιστολών που ξεκινά με μια κεφαλίδα ανοιχτού ουρανού με διαβάθμιση - μια απαλή, ατμοσφαιρική μπλε λωρίδα που δημιουργεί μια ήρεμη, κλινική ατμόσφαιρα - πριν μεταβεί σε έναν καθαρό λευκό χώρο εργασίας. Το σύστημα έχει σχεδιαστεί σε μονόχρωμο στυλ: ένας καθαρός λευκός καμβάς, σχεδόν μαύρο κείμενο (#070709), σκούρες προσκλήσεις για δράση σε σχήμα χαπιού και στρογγυλεμένες κάρτες που αιωρούνται στις πιο ανεπαίσθητες σκιές. Ένα μόνο φωτεινό μπλε (#2597d0) προορίζεται για λειτουργική στίξη - εικονίδια, μικρογραφικά, συσκευές αναπαραγωγής κυματομορφών - που δεν χρησιμοποιείται ποτέ για κουμπιά ή μεγάλα γεμίσματα. Η τυπογραφία χρησιμοποιεί το Open Runde, ένα γεωμετρικό ουμανιστικό sans-serif με επιθετική αρνητική απόσταση μεταξύ γραμμάτων σε μεγαλύτερα μεγέθη οθόνης (-0,04em στα 80px), το οποίο συμπιέζει τις κεφαλίδες σε σίγουρα μπλοκ. Τα εξαρτήματα έχουν ελαφριά αίσθηση, σαν ιατρικό όργανο: λεπτά πλαίσια, γενναιόδωρη απόσταση μεταξύ καρτών, κουμπιά σε σχήμα χαπιού και μια διακριτική χρήση ανύψωσης που επιτρέπει στην κεφαλίδα σε σχήμα ουρανού να κάνει τη συναισθηματική δουλειά.
Μια αρχική σελίδα με διαβάθμιση σε γαλάζιο χρώμα εκτείνεται σε όλο το πλάτος της σελίδας, με έναν κεντρικό τίτλο και δευτερεύον κείμενο, και ένα κουμπί παρότρυνσης για δράση από κάτω. Μεταβαίνει ομαλά σε μια λευκή περιοχή περιεχομένου με γενναιόδωρη απόσταση μεταξύ των ενοτήτων (80-120px). Οι ενότητες χαρακτηριστικών χρησιμοποιούν ένα πλέγμα δύο στηλών από μεγάλες, στρογγυλεμένες κάρτες (ακτίνας 18-32px) ίσων αναλογιών. Οι επικεφαλίδες των ενοτήτων είναι πάντα κεντραρισμένες, σε μία μόνο στήλη, πάνω από το πλέγμα των καρτών. Η πλοήγηση είναι μια σταθερή λευκή επάνω γραμμή με ένα κεντρικό σύμπλεγμα συνδέσμων και ενεργειών σύνδεσης με δεξιά στοίχιση. Ο συνολικός ρυθμός είναι μια ενιαία, ατμοσφαιρική κύρια λωρίδα, στη συνέχεια εναλλασσόμενες λευκές και #f5f5f5 ενότητες με σταθερό κάθετο χώρο αναπνοής. Δεν υπάρχει πλαϊνή γραμμή, ούτε mega-μενού, ούτε ασύμμετρες διατάξεις—η σελίδα μοιάζει με μια ήρεμη, συμμετρική στήλη.
Ο οπτικός σχεδιασμός επικεντρώνεται σχεδόν εξ ολοκλήρου στη διεπαφή χρήστη του προϊόντος—χωρίς φωτογραφίες lifestyle, χωρίς αφηρημένες τρισδιάστατες απεικονίσεις. Η οπτική γλώσσα βασίζεται σε κάρτες προϊόντων που παρουσιάζουν τη μητρική διεπαφή της εφαρμογής: μια σύγκριση εγγράφων "Πριν" και "Μετά", μια περιοχή φόρτωσης με διακεκομμένο περίγραμμα και ένα πρόγραμμα αναπαραγωγής ήχου με τη μορφή κυματομορφής. Το μόνο ατμοσφαιρικό οπτικό στοιχείο είναι η διαβάθμιση του ουρανού στην κύρια εικόνα. Τα εικονίδια είναι επίπεδα, μονόχρωμα εικονίδια γραμμής #2597d0 (φάκελος, μικρόφωνο, σημάδι επιλογής) με ομοιόμορφα βάρη γραμμών, χωρίς γεμισμένες παραλλαγές. Το στυλ απεικόνισης είναι περιορισμένο: τα μακέτα προϊόντων εμφανίζονται σε λευκό φόντο, ελαφρώς περιστρεφόμενα για δημιουργία βάθους, χωρίς απότομη κλίση. Μια χειρόγραφη γραμματοσειρά (The Doctor) είναι το μόνο οργανικό/χειροποίητο στοιχείο, που χρησιμοποιείται αποκλειστικά για να αναδείξει την κλινική γραφή στην κάρτα "Πριν".
Παλέτα
Μάρκα
- Surgical Blue
#2597d0— Τα εικονίδια, ένα εικονίδιο μικροφώνου, μια συσκευή αναπαραγωγής ηχητικών κυμάτων και μικρές λειτουργικές πινελιές δημιουργούν μια ενιαία χρωματική νότα σε όλη τη διεπαφή.
Ουδέτερος
- Obsidian
#070709— Το κύριο κείμενο, τα γεμάτα κουμπιά παρότρυνσης για δράση και τα σκούρα στοιχεία UI—επιλέγεται σχεδόν μαύρο αντί για το καθαρό #000 για να απαλύνει την αντίθεση σε σχέση με το λευκό φόντο. - Paper White
#ffffff— Το φόντο της σελίδας, οι επιφάνειες της κάρτας και το κείμενο των κουμπιών αποτελούν τον κύριο καμβά για όλες τις ενότητες κάτω από το κύριο στοιχείο. - Cloud Gray
#f5f5f5— Πρόσθετες επιφάνειες καρτών και φόντα τμημάτων διαχωρίζουν τα λειτουργικά μπλοκ από τον κύριο καμβά. - Sky Tint
#d7e6f5— Η απόχρωση του χαρτονένιου πλαισίου και ο μόλις αισθητός μπλε τόνος της επιφάνειας δημιουργούν μια αίσθηση ατμόσφαιρας, αντί για γκριζωπότητα. - Charcoal
#60606c— Κύριο κείμενο, δευτερεύον κείμενο και σίγαση περιγραμμάτων - ένα κυρίαρχο ουδέτερο χρώμα για περιεχόμενο που δεν περιλαμβάνει επικεφαλίδες. - Slate
#8b8b8b— Μικρό κείμενο και ανενεργές συνοριακές καταστάσεις - χρησιμοποιούνται για την υπόδειξη τοποθεσιών και τη διασφάλιση της προσβασιμότητας για άτομα με αναπηρίες.
Τυπογραφία
από 12 έως 80px · 8 βήματα
- sans-serif — αντικατάσταση: Inter · περιγράμματα 400, 700 · sans-serif - βρίσκεται στα εξαγόμενα δεδομένα αλλά δεν περιγράφεται από την τεχνητή νοημοσύνη.
- Open Runde — αντικατάσταση: Inter Tight · περιγράμματα 400, 500, 600, 700, 900 · Η κύρια γραμματοσειρά για τις επικεφαλίδες και την πλοήγηση είναι μια γεωμετρική ουμανιστική γραμματοσειρά, με μικρή απόσταση μεταξύ των γραμμάτων σε μεγάλα μεγέθη. Το -0.04em στα 80px συμπιέζει την επικεφαλίδα σε ένα μόνο, αξιόπιστο μπλοκ. Χρησιμοποιήστε την για όλες τις επικεφαλίδες, την πλοήγηση και το μεγάλο κείμενο.
- Inter — αντικατάσταση: system-ui · περιγράμματα 400, 500 · Δευτερεύον σώμα και κείμενο διεπαφής χρήστη – χρησιμοποιείται για μικρές επικεφαλίδες, στοιχεία πλοήγησης και ενσωματωμένους συνδέσμους όπου επιθυμείται ένας πιο ουδέτερος ρυθμός ανάγνωσης. Συνδυάζεται με το Open Runde για τη δημιουργία ιεραρχικής αντίθεσης.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | πυκνός |
| Βασικό βήμα | 12-16px |
| Ακτίνα κουμπιού | 100px |
| Ακτίνα κάρτας | 18px |
| Σκιές | χωρίς περιγράμματα αντί για σκιές |
| Μεταξύ τμημάτων | 80-120px |
| Πλάτος σελίδας | 1200px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Letters και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- Integrated Biosciences — εργαστήριο βιοφωταύγειας τα μεσάνυχτα
- Mintlify — Ένας κήπος με σύννεφα πάνω από ένα γυάλινο τραπέζι. Ο χειρόγραφος ουρανός και το ντοκιμαντέρ πλαισιώνονται μαζί—το μόνο μέρος όπου το χρώμα και η έννοια συγκρούονται προτού η σελίδα ξεθωριάσει στο μοναστικό λευκό.
- Gleap — Ένας χώρος εργασίας διακοσμημένος σε ζεστές κρεμ αποχρώσεις με γραφιτικές πινελιές—ένα στούντιο όπου οι ματ μαύρες κουκκίδες μελανιού φαίνεται να αιωρούνται πάνω από την αρχιτεκτονική από λινό.
- Render — Ο σχεδιασμός είναι σε βουρτσισμένο αλουμίνιο. Η διεπαφή μοιάζει με ένα καθαρό, γεωμετρικό έγγραφο μηχανικής - λευκός χώρος, λεπτές γραμμές και μία μόνο μωβ γραμμή που τραβάει την προσοχή στη δράση.
- Grafbase — μηχανικό σχέδιο σε κρύο μάρμαρο
- Slash — Μεσονύχτιο θησαυροφυλάκιο με επιχρυσωμένα καθολικά βιβλία
- Modal — Ένα φωσφορίζον τερματικό σε ένα σκοτεινό δωμάτιο διακομιστή - η μόνη πηγή φωτός είναι ένα φωτεινό πράσινο χρώμα
- Whimsical — Πλούσιο μελάνι δαμασκηνί σε φόντο λεβάντας—ένα σημειωματάριο δημιουργικού στούντιο που λειτουργεί και ως τεχνικός πίνακας.
- AgentQL — Βόρειο Σέλας πάνω από τον τερματικό σταθμό τη νύχτα
- Alveos One — Ένα άνετο καταφύγιο φτιαγμένο από πέτρες ποταμού – μια ήσυχη, κρεμώδης αίθουσα διαλογισμού όπου ένα μόνο αντικείμενο γραφίτη αναπαύεται σε μια απαλή κεχριμπαρένια λάμψη
- GitHub — Ένας πίνακας εντολών διαστήματος με βιοφωταυγή σημεία ελέγχου—ένας σκοτεινός, ατμοσφαιρικός χώρος εργασίας όπου μια μοναδική πράσινη λάμψη δείχνει τον δρόμο προς τα εμπρός.
- Buddy — Ένα μηχανολογικό σχέδιο σε χαρτί γραφικών παραστάσεων. Η λευκή επιφάνεια σχεδίασης είναι σημειωμένη με ένα μόλις ορατό πλέγμα, εφαρμοσμένο με σχεδόν μαύρο μελάνι, με φθορίζοντα σημάδια σε ασβέστη-πράσινο και ιριδίζουσες διαβαθμισμένες πινελιές.