Substack
πορτοκαλί μελάνι στο γραφείο του συντακτικού γραφείου
Το Substack μοιάζει με έναν πολύ φθαρμένο πίνακα ελέγχου γραφείου σύνταξης - έναν λευκό καμβά, ζεστό, σχεδόν μαύρο κείμενο και μια ενιαία φωτεινή πορτοκαλί πινελιά που σηματοδοτεί κάθε στάδιο δημιουργίας περιεχομένου. Η οπτική ιεραρχία βασίζεται στην πυκνότητα και όχι στη διακόσμηση: λεπτές γκρίζες γραμμές διαχωρίζουν τα στοιχεία ροής, τα avatar είναι μικρά, τα μεταδεδομένα είναι σε σίγαση και το μάτι του αναγνώστη είναι εκπαιδευμένο να εστιάζει στην πορτοκαλί παρότρυνση για δράση, το πορτοκαλί λογότυπο, τον πορτοκαλί σύνδεσμο "Εγγραφή" και το πορτοκαλί κουμπί "Δημιουργία". Οι επιφάνειες διατηρούνται επίπεδες και χωρίς περιορισμούς - χωρίς σκιές καρτών, χωρίς στοιχεία πίνακα χρωμίου - αφήνοντας την τυπογραφία (ένα συμπαγές στοιχείο UI συστήματος χρωμίου σε συνδυασμό με μια προσαρμοσμένη γραμματοσειρά τίτλου serif) να φέρει το κύριο βάρος της σύνταξης. Το στυλ υπογραφής είναι συγκρατημένα στοιχεία χρωμίου και ζωντανά, μονόχρωμα στοιχεία: μια εφαρμογή ανάγνωσης που μοιάζει με εργαλείο δημοσίευσης.
Διάταξη επιφάνειας εργασίας τριών στηλών: μια σταθερή αριστερή πλαϊνή μπάρα (~200px, πλοήγηση με εικονίδια και ετικέτες, sticky), μια κεντρική ροή (μέγιστο πλάτος ~600px, κατακόρυφη κύλιση λίστας αναρτήσεων) και μια σταθερή δεξιά πλαϊνή μπάρα (~300px, αναζήτηση + προτάσεις + εγγραφή). Η κεντρική ροή είναι ο πυρήνας σύνταξης—χωρίς κάρτες, μόνο αναρτήσεις στοιβαγμένες η μία πάνω στην άλλη με λεπτά διαχωριστικά και κενά 32px μεταξύ των ενοτήτων. Το κύριο banner βρίσκεται στην κορυφή της ροής ως μία ενιαία κάρτα πλήρους πλάτους. Η αριστερή πλαϊνή μπάρα περιέχει το λογότυπο της επωνυμίας (ένα πορτοκαλί σύμβολο με επικαλυπτόμενες γραμμές), έξι στοιχεία πλοήγησης και ένα πορτοκαλί κουμπί "Δημιουργία" πλήρους πλάτους στο κάτω μέρος. Η δεξιά πλαϊνή μπάρα περιέχει ένα πεδίο αναζήτησης, μια κάρτα εγγραφής και μια λίστα "Επόμενο" για ανάγνωση. Η πλοήγηση είναι ελάχιστη—χωρίς επάνω μπάρα, χωρίς ψίχουλα. η πλαϊνή μπάρα ΕΙΝΑΙ η πλοήγηση. Η πυκνότητα περιεχομένου είναι υψηλή: οι αναρτήσεις χρησιμοποιούν μεταδεδομένα 12-13px και κείμενο σώματος 15-19px, δημιουργώντας έναν ρυθμό που μοιάζει με εφημερίδα αντί για την αίσθηση του πλέγματος καρτών μιας αγοράς.
Οι φωτογραφίες είναι περιεχόμενο που δημιουργείται από χρήστες (avatar συγγραφέων, μικρογραφίες αναρτήσεων, εικόνες αναρτήσεων)—Το Substack δεν παρέχει τις δικές του διακοσμητικές φωτογραφίες. Η κύρια κάρτα χρησιμοποιεί μια διαβάθμιση από τιρκουάζ έως πράσινο με αφηρημένα εικονογραφικά στοιχεία (γεωμετρικά σχήματα, στυλιζαρισμένα αντικείμενα όπως στυλό και σημειώσεις) ως φόντο. Οι μικρογραφίες αναρτήσεων στη δεξιά πλαϊνή μπάρα είναι μικρές (64px), περικλείονται σε ακτίνα 8px και λειτουργούν ως προεπισκόπηση της λίστας ανάγνωσης. Η συνολική οπτική γλώσσα βασίζεται σε κείμενο: η διεπαφή είναι ένας καμβάς ανάγνωσης και οι εικόνες χρησιμεύουν ως μικρές οπτικές άγκυρες αντί να δημιουργούν ατμόσφαιρα.
Παλέτα
Μάρκα
- Signal Orange
#ff6719— Το πορτοκαλί χρησιμοποιείται ως δευτερεύον χρώμα για διακοσμητικές λεπτομέρειες και για να τονίσει σπάνιες ενδείξεις. Δεν πρέπει να χρησιμοποιείται ως κύριο χρώμα για παροτρύνσεις για δράση.
Ουδέτερος
- Ink
#363737— Κείμενο σώματος—το κύριο κείμενο, οι επικεφαλίδες, οι τίτλοι των αναρτήσεων, οι χρονικές σημάνσεις και τα ονόματα των συγγραφέων· ένα ζεστό, σχεδόν μαύρο χρώμα αντί για το καθαρό #000 για ευκολότερη ανάγνωση. - Paper
#ffffff— Ο καμβάς σελίδας, οι επιφάνειες καρτών, τα πεδία εισαγωγής και το φόντο πλοήγησης είναι οι κυρίαρχες επιφάνειες που καταλαμβάνουν το μεγαλύτερο μέρος της διεπαφής. - Charcoal
#232525— Κατάσταση τοποθέτησης του δείκτη του ποντικιού για επιπλέον κείμενο και συνδέσμους με υψηλά επίπεδα επιλογής. Βαθύτερη από τη λειτουργία μελανιού για μπλοκ κώδικα και μπλοκ επιλογής. - Stone
#777777— Υποστηρίζεται ένα ουδέτερο χρώμα για δευτερεύοντα στοιχεία διεπαφής χρήστη, διαχωριστικά και ετικέτες με σίγαση. Δεν θα πρέπει να χρησιμοποιείται ως κύριο χρώμα για παροτρύνσεις για δράση. - Ash
#b6b6b6— Λεπτές γραμμές περιγράμματος, περιγράμματα κουμπιών, περιγράμματα εικονιδίων, περιγράμματα σε απενεργοποιημένα στοιχεία ελέγχου. - Mist
#c8c8c8— Διαχωριστικές γραμμές, διακριτικό φόντο για εικονίδια, γέμισμα κενών κελιών με τη μορφή σκελετού.
Τυπογραφία
από 12 έως 32px · 5 βήματα
- system-ui — αντικατάσταση: -apple-system · περιγράμματα 400, 500, 600 · Η κύρια γραμματοσειρά για τη διεπαφή χρήστη και το κυρίως κείμενο χρησιμοποιείται για ετικέτες πλοήγησης, κουμπιά, κείμενο μηνύματος, μεταδεδομένα, πεδία εισαγωγής και όλα τα στοιχεία της διεπαφής. Τα συμπαγή μεγέθη 12-13px για τα μεταδεδομένα και 15-19px για το κυρίως κείμενο δημιουργούν την αίσθηση μιας πυκνής ροής ειδήσεων. Το βάρος είναι 400 για το κυρίως κείμενο, 500 για τα στοιχεία πλοήγησης και τις ετικέτες κουμπιών και 600 για τους επισημασμένους τίτλους μηνυμάτων και τις επικεφαλίδες ενοτήτων.
- Cahuenga — αντικατάσταση: Charter · περιγράμματα 500 · Μια χαρακτηριστική διακοσμητική γραμματοσειρά serif για επικεφαλίδες σε επίπεδο προϊόντος (επικεφαλίδες πλευρικής γραμμής, επικεφαλίδες καρτών εγγραφής, κύριο κείμενο). Το μέτριο βάρος και το ελαφρύ ύψος της γραμμής της προσδίδουν μια ξεχωριστή εμφάνιση χωρίς να είναι ογκώδης. Είναι η μόνη γραμματοσειρά που, εκτός από το πορτοκαλί χρώμα, σηματοδοτεί την ταυτότητα του Substack.
- Spectral — αντικατάσταση: Charter · περιγράμματα 400 · Μια γραμματοσειρά serif για μακροσκελείς αναρτήσεις—χρησιμοποιείται σε αναγνωστήρια και σε περιεχόμενο ειδήσεων για τη βελτίωση της αναγνωσιμότητας του συντακτικού υλικού. Ένα ελαφρώς μικρότερο διάστιχο (1,20) εξασφαλίζει άνετη ανάγνωση παραγράφων, διατηρώντας παράλληλα τη συμπαγή μορφή που είναι τυπική των ειδησεογραφικών αιθουσών.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | πυκνός |
| Βασικό βήμα | 8px |
| Ακτίνα κουμπιού | 9999px |
| Ακτίνα κάρτας | 12px |
| Σκιές | χωρίς περιγράμματα αντί για σκιές |
| Μεταξύ τμημάτων | 32px |
| Πλάτος σελίδας | 1200px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Substack και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- ElevenLabs — Ένα φωτογραφικό δοκίμιο σε ζεστές κρεμ αποχρώσεις με διακριτικούς τίτλους. Ένα σημειωματάριο σε στιλ Bauhaus—χαρτί στο χρώμα του κελύφους του αυγού, μαύρο μελάνι και μία μόνο μωβ και πορτοκαλί πινελιά για την προβολή του προϊόντος.
- Awesomic — Συντακτικό πλέγμα ψευδαργύρου με πορτοκαλί σημεία στίξης που θυμίζουν κομφετί
- Monad — συντακτικό τεχνικό περιοδικό σε θερμή περγαμηνή
- Dub — Πίνακας ελέγχου από ματ ριζόχαρτο της Link
- Seline Analytics — Ένα ήσυχο αναλυτικό τραπέζι σε ζεστό χαρτί
- Notion — Ένα ζεστό χάρτινο σημειωματάριο στον μεσημεριανό ήλιο
- Anthropic — Ένα επιστημονικό περιοδικό πεδίου για τη ζεστή περγαμηνή - ήρεμες επιφάνειες σε χρώμα ελεφαντόδοντου, επικεφαλίδες με ραβδώσεις και μια μοναδική πινελιά από πηλό που εμφανίζεται μόνο όταν χρειάζεται δράση.
- Calendly — Σκούρο μπλε μελάνι σε κρύο μάρμαρο
- Augen Pro — Η λευκή παρουσίαση της Apple διαθέτει ένα κλινικό, χωρίς βάρος, ηλεκτρικό μπλε ως τη μοναδική πινελιά σε έναν μονόχρωμο χώρο.
- Antimetal — Ένα συντακτικό χρονικό σε κρεμ χαρτί—ένα ήσυχο πρωινό σε ένα επιστημονικό περιοδικό, όπου η αυτοσυγκράτηση μεταδίδει αυτοπεποίθηση και οι σερίφηδες κάνουν τη δύσκολη δουλειά
- Perk — Ηλεκτρικό λάιμ σε ζεστή λαδόκολλα
- Ditto — Ένα ηλιόλουστο εργαστήριο δημιουργίας δειγμάτων αγριολούλουδων. Ζεστές κρεμ επιφάνειες, ένα έντονο κίτρινο βασικό χρώμα, βαθιά μπλε μελάνια, οργανικές χρωματικές μορφές που ανθίζουν πίσω από το έργο.