Notion
Ένα ζεστό χάρτινο σημειωματάριο στον μεσημεριανό ήλιο
Η διεπαφή του Notion μοιάζει με ένα αγαπημένο χάρτινο σημειωματάριο στο φως της ημέρας: ένας ζεστός, κρεμώδης καμβάς (#f6f5f4) που δίνει μια αίσθηση αφής παρά μιας αποστειρωμένης, η γενναιόδωρη τυπογραφία sans-serif προσδίδει συντακτικό βάρος στο κείμενο του προϊόντος, και το χρώμα που χρησιμοποιείται ως αραιή στίξη - τα ροδακινί "χάπια" τονίζουν τα ρήματα, ένα μόνο μπλε αγκυρώνει την κύρια δράση και μια περιστρεφόμενη σειρά από αποχρώσεις έμφασης (κοραλί, κεχριμπαρένιο, ουρανός, μεσάνυχτα) χρωματίζουν τα φόντα των καρτών σαν αυτοκόλλητα. Οι κάρτες είναι διατεταγμένες σε έναν καμβά με λεπτά περιγράμματα και γωνίες - χωρίς σκιές, χωρίς χρώμιο - όπως τα τμήματα με γραμμές ενός σημειωματάριου Moleskine. Η κινούμενη εικόνα είναι παιχνιδιάρικη και ελαστική, με ομαλές μεταβάσεις στα 200ms και ελαστικές κινούμενες εικόνες χαρακτήρων που ζωντανεύουν τη διεπαφή χωρίς να είναι διακοσμητικές.
Στο κέντρο, το μέγιστο πλάτος περιορίζεται σε περίπου 1440px. Το κύριο στοιχείο είναι μια στοίβα στο κέντρο: μια σειρά συμβόλων → μια μεγάλη επικεφαλίδα δύο γραμμών με ενσωματωμένο έγχρωμο χάπι → μια υποεπικεφαλίδα → μια σειρά με δύο κουμπιά παρότρυνσης για δράση → ένα μεγάλο πρότυπο UI προϊόντος. Κάτω από το κύριο στοιχείο, οι ενότητες εναλλάσσονται μεταξύ πλεγμάτων λευκών καρτών και έγχρωμων πάνελ έμφασης. Ο τοίχος λογότυπου είναι ένα κεντραρισμένο πλέγμα μίας γραμμής λογότυπων συνεργατών σε κλίμακα του γκρι. Τα μπλοκ χαρακτηριστικών χρησιμοποιούν μια διάταξη δύο στηλών (κείμενο στα αριστερά, έγχρωμο πλαίσιο στα δεξιά), εναλλάσσοντας από αριστερά προς τα δεξιά μεταξύ των ενοτήτων. Η ενότητα "Ρωτήστε τους βοηθούς σας κατ' απαίτηση" χρησιμοποιεί ένα πλέγμα καρτών 2x2, όπου η επάνω κάρτα καταλαμβάνει το πλήρες πλάτος και η κάτω σειρά χωρίζεται σε δύο ίσες στήλες. Τα κενά μεταξύ των ενοτήτων είναι γενναιόδωρα (~80px), δημιουργώντας έναν ήρεμο κάθετο ρυθμό. Η πλοήγηση είναι μια σταθερή επάνω γραμμή ύψους 64px με κεντραρισμένα στοιχεία πλοήγησης και κουμπιά δράσης ευθυγραμμισμένα προς τα δεξιά.
Οι εικόνες είναι πρωταρχικής σημασίας, χωρίς φωτογραφίες. Η οπτική γλώσσα βασίζεται σε επίπεδα, εικονογραφημένα σύμβολα (στρογγυλεμένες άκρες σε χρωματιστούς κύκλους 2px), αφηρημένα διακοσμητικά στοιχεία (χειρόγραφες γραμμές, γκλίτερ, βέλη, σχήματα λουλουδιών) και μακέτες της διεπαφής χρήστη του προϊόντος. Τα σύμβολα εμφανίζονται στο κύριο παράθυρο ως οριζόντια σειρά επτά avatar και είναι διάσπαρτα σε όλη τη σελίδα ως παιχνιδιάρικα σημεία στίξης. Τα στιγμιότυπα οθόνης προϊόντων είναι τα μόνα «πραγματικά» οπτικά στοιχεία: δείχνουν την πραγματική διεπαφή Notion (πίνακες Kanban, προβολές εγγράφων, πίνακες πρακτόρων AI) με ένα πλήρες σύνολο στοιχείων και πραγματικών δεδομένων. Η μακέτα προϊόντος στο κύριο παράθυρο είναι μεγάλη, κεντραρισμένη και ρίχνει μια μόνο σκιά που τη χωρίζει από τον καμβά. Δεν υπάρχουν φωτογραφίες lifestyle, εικόνες αρχείου, αφηρημένες τρισδιάστατες απεικονίσεις.
Παλέτα
Μάρκα
- Notion Blue
#0075de— Το κύριο στοιχείο που γεμίζει το κουμπί παρότρυνσης για δράση (CTA), μια έμφαση στην ενεργή πλοήγηση, τα γεμάτα κουμπιά δράσης είναι το μόνο χρωματικό σχήμα σε ένα σχεδόν μονόχρωμο σύστημα που είναι αρκετά κορεσμένο ώστε να γίνεται αντιληπτό ως διακόπτης.
Ουδέτερος
- Paper Warmth
#f6f5f4— Ο καμβάς της σελίδας, το φόντο του κύριου παραθύρου και το φόντο της ενότητας είναι όλα σε ζεστά, ελαφρώς μπεζ χρώματα που δίνουν στο σύστημα μια ανάγλυφη, αναλογική αίσθηση. - Pure White
#ffffff— Επιφάνειες καρτών, ανάγλυφα πάνελ, φόντο λογότυπου, κείμενο σε αντίθεση σε σκούρες κάρτες. - Ink Black
#000000— Κύριο κείμενο, σύνδεσμοι πλοήγησης, επικεφαλίδες - χρησιμοποιούνται με διαφορετική διαφάνεια (100%, 95%, 90%, 60%, 40%, 20%) για τη δημιουργία ιεραρχίας χωρίς την προσθήκη νέων χρωμάτων. - Charcoal
#111111— Μια επιλογή σκούρου κειμένου για εκείνες τις περιοχές του UI όπου το καθαρό μαύρο θα φαινόταν πολύ έντονο. - Stone
#757575— Δευτερεύον κείμενο πλοήγησης, κείμενο βοήθειας σε σίγαση, απενεργοποιημένες ετικέτες κουμπιών - 60% μελάνι alpha - Graphite
#615d59— Το κύριο κείμενο έχει έναν ζεστό τόνο - καφέ γκρι, που εναρμονίζεται με το ζεστό φόντο.
Τυπογραφία
από 12 έως 96px · 10 βήματα
- NotionInter — αντικατάσταση: Inter · περιγράμματα 400, 500, 600, 700 · Η κύρια γραμματοσειρά sans-serif είναι μια γεωμετρική ουμανιστική γραμματοσειρά με ανεπαίσθητες αποχρώσεις, που χρησιμοποιείται σε μεγέθη 400 για το κυρίως κείμενο, 500 για την πλοήγηση/διεπαφή χρήστη και 600-700 για τις επικεφαλίδες. Η κλίμακα της γραμματοσειράς χρησιμοποιεί δυναμική αρνητική απόσταση μεταξύ των γραμμάτων σε μεγαλύτερα μεγέθη (-4,6px στα 96px, -2px στα 72px), γεγονός που κάνει την επικεφαλίδα να φαίνεται πιο συμπαγής και σίγουρη, παρά αέρινη.
- Lyon Text — αντικατάσταση: Source Serif Pro · περιγράμματα 400 · Η γραμματοσειρά editorial serif, που προορίζεται για μεμονωμένες ενότητες του κύριου κειμένου και εισαγωγές ενοτήτων, χρησιμοποιείται με φειδώ (τέσσερις φορές) για να δώσει στη γραμματοσειρά λογοτεχνικό βάρος, παρόμοιο με ένα απόσπασμα σε μια διάταξη περιοδικού. Λειτουργεί ως συστηματική προφορά και όχι ως παράλληλη ιεραρχία.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | μέσος |
| Βασικό βήμα | 8px |
| Ακτίνα κουμπιού | 8px |
| Ακτίνα κάρτας | 12px |
| Σκιές | χωρίς περιγράμματα αντί για σκιές |
| Μεταξύ τμημάτων | 80px |
| Πλάτος σελίδας | 1440px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Notion και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- ElevenLabs — Ένα φωτογραφικό δοκίμιο σε ζεστές κρεμ αποχρώσεις με διακριτικούς τίτλους. Ένα σημειωματάριο σε στιλ Bauhaus—χαρτί στο χρώμα του κελύφους του αυγού, μαύρο μελάνι και μία μόνο μωβ και πορτοκαλί πινελιά για την προβολή του προϊόντος.
- Awesomic — Συντακτικό πλέγμα ψευδαργύρου με πορτοκαλί σημεία στίξης που θυμίζουν κομφετί
- Monad — συντακτικό τεχνικό περιοδικό σε θερμή περγαμηνή
- Dub — Πίνακας ελέγχου από ματ ριζόχαρτο της Link
- Seline Analytics — Ένα ήσυχο αναλυτικό τραπέζι σε ζεστό χαρτί
- Anthropic — Ένα επιστημονικό περιοδικό πεδίου για τη ζεστή περγαμηνή - ήρεμες επιφάνειες σε χρώμα ελεφαντόδοντου, επικεφαλίδες με ραβδώσεις και μια μοναδική πινελιά από πηλό που εμφανίζεται μόνο όταν χρειάζεται δράση.
- Calendly — Σκούρο μπλε μελάνι σε κρύο μάρμαρο
- Augen Pro — Η λευκή παρουσίαση της Apple διαθέτει ένα κλινικό, χωρίς βάρος, ηλεκτρικό μπλε ως τη μοναδική πινελιά σε έναν μονόχρωμο χώρο.
- Antimetal — Ένα συντακτικό χρονικό σε κρεμ χαρτί—ένα ήσυχο πρωινό σε ένα επιστημονικό περιοδικό, όπου η αυτοσυγκράτηση μεταδίδει αυτοπεποίθηση και οι σερίφηδες κάνουν τη δύσκολη δουλειά
- Perk — Ηλεκτρικό λάιμ σε ζεστή λαδόκολλα
- Ditto — Ένα ηλιόλουστο εργαστήριο δημιουργίας δειγμάτων αγριολούλουδων. Ζεστές κρεμ επιφάνειες, ένα έντονο κίτρινο βασικό χρώμα, βαθιά μπλε μελάνια, οργανικές χρωματικές μορφές που ανθίζουν πίσω από το έργο.
- Officevibe — Ένα εκδοτικό περιοδικό σε ζεστό κρεμ χαρτί. Φανταστείτε ένα στοχαστικό δοκίμιο για τη διαχείριση ανθρώπινου δυναμικού, που παρουσιάζεται ως προϊόν - μια καλλιγραφική γραμματοσειρά serif που ψιθυρίζει μέσα από μια μοντέρνα μπλε διεπαφή.