Seline Analytics
Ένα ήσυχο αναλυτικό τραπέζι σε ζεστό χαρτί
Το Seline τοποθετείται σε ένα ζεστό πέτρινο φόντο (#fafaf9) με μια μοναδική έντονη μπλε πινελιά—όλα τα άλλα χρώματα είναι ουδέτερα και προέρχονται από την παλέτα χρωμάτων πέτρας Tailwind. Οι τίτλοι αποδίδονται με μια ειδικά σχεδιασμένη γεωμετρική γραμματοσειρά sans-serif (roobert) με βάρος 400 και στενή αρνητική απόσταση μεταξύ των γραμμάτων, προσδίδοντας στο κείμενο μια χαλαρή, σχεδόν ψιθυριστή αυτοπεποίθηση που έρχεται σε αντίθεση με το τυπικά δυνατό στυλ SaaS. Οι επιφάνειες του UI είναι επίπεδες λευκές κάρτες, που αιωρούνται πάνω από το ζεστό φόντο με ένα ενιαίο, απαλό θάμπωμα 16px. Τα περιγράμματα δημιουργούνται με λεπτές γραμμές 1px σε απόχρωση πέτρας, που χρησιμοποιούνται γενναιόδωρα ως το κύριο δομικό στοιχείο αντί για βαριά διαχωριστικά ή πάνελ. Η διάταξη αναπνέει: περιεχόμενο πλήρους πλάτους με επίκεντρο έναν γενναιόδωρο κάθετο ρυθμό, με διαδραστικά χειριστήρια σε σχήμα χαπιού, μια απεικόνιση μασκότ για προσωπικότητα και στιγμιότυπα οθόνης στον πίνακα ελέγχου ως απόδειξη προϊόντος. Η συνολική εντύπωση είναι συντακτικά αναλυτική: ήρεμη, μονόχρωμη, σίγουρη, με την μπλε έκκληση για δράση να είναι το πιο εντυπωσιακό στοιχείο στη σελίδα χάρη στον σκόπιμο περιορισμό όλων των άλλων.
Η σελίδα έχει μέγιστο πλάτος, κεντραρισμένη στα περίπου 1200px με άφθονο κάθετο χώρο. Ο ήρωας είναι ένα μπλοκ κειμένου δύο γραμμών, ευθυγραμμισμένο αριστερά, με μία μόνο φράση που επισημαίνεται ("απλό και αποτελεσματικό") σε μπλε χρώμα, ακολουθούμενη από μια σειρά με δύο παροτρύνσεις για δράση (μπλε χάπι + χάπι-φάντασμα), στη συνέχεια μια σειρά λογότυπων συνεργατών σε κλίμακα του γκρι, στη συνέχεια μια σειρά αξιολογήσεων εμπιστοσύνης και, στη συνέχεια, μια προεπισκόπηση αιωρούμενου πίνακα ελέγχου πλήρους πλάτους, που επικαλύπτει ελαφρώς την επόμενη ενότητα. Κάτω από την πτυχή υπάρχουν εναλλασσόμενες σειρές μαρτυριών σε ένα πλέγμα μίας στήλης, ακολουθούμενες από ενότητες πλήρους πλάτους με περιγραφές χαρακτηριστικών, κείμενο ευθυγραμμισμένο αριστερά και κεντραρισμένα οπτικά στοιχεία προϊόντων. Η πλοήγηση είναι μια μινιμαλιστική επάνω γραμμή - λογότυπο στα αριστερά, κεντραρισμένοι σύνδεσμοι πλοήγησης, σύνδεση + μπλε παρότρυνση για δράση στα δεξιά - με ένα αιωρούμενο σύμπλεγμα avatar στη μέση της πλοήγησης που χρησιμεύει ως επαλήθευση ταυτότητας. Τα κενά μεταξύ των ενοτήτων είναι μεγάλα (96px) για να δημιουργήσουν έναν συντακτικό ρυθμό αντί για ένα πυκνό συνονθύλευμα πληροφοριών.
Η οπτική γλώσσα κυριαρχείται από στιγμιότυπα οθόνης της διεπαφής χρήστη του προϊόντος—η προεπισκόπηση του πίνακα ελέγχου είναι μια φωτογραφία που αποδίδεται με φίλτρο αντίθεσης σε κλίμακα του γκρι (1) (0,94), το οποίο μειώνει τα χρώματα των δεδομένων σε μονόχρωμη απόχρωση. Η μόνη ανθρώπινη φιγούρα είναι ένα γραμμικό αυτοκόλλητο μασκότ (ένας χαρακτήρας με κουκούλα), σχεδιασμένο σε στυλ SVG μόνο με περιγράμματα, τοποθετημένο μία φορά ανά ενότητα ως παιχνιδιάρικο αντίστιγμα στο αναλυτικό περιεχόμενο, με μια απαλή σκιά για να δημιουργήσει ένα εφέ βάθους που μοιάζει με αυτοκόλλητο. Το λογότυπο της μάρκας και τα σύμβολα είναι μικρές μαύρες σπίθες/φλόγες. Δεν υπάρχουν φωτογραφίες—ούτε φωτογραφίες τρόπου ζωής, ούτε φωτογραφίες ομάδας, ούτε εικόνες περιβάλλοντος. Το αντικείμενο (ο πίνακας ελέγχου) είναι ο πρωταγωνιστής. Όλα τα διακοσμητικά εικονίδια έχουν στυλ περιγράμματος 1px είτε σε #0c0a09 είτε #3ba6f1, ποτέ δεν γεμίζουν.
Παλέτα
Μάρκα
- Cyan Signal
#3ba6f1— Η κύρια παρότρυνση για δράση, οι ενεργοί σύνδεσμοι και το περίγραμμα των εικονιδίων επωνυμίας είναι οι μόνες χρωματικές πινελιές στη σελίδα, οι οποίες χρησιμοποιούνται με φειδώ για να επιστήσουν την προσοχή στη δράση. - Cyan Edge
#3398e1— Το μπλε χρησιμοποιείται για την επισήμανση περιγραμμάτων ενεργειών, ετικετών συνδέσμων και διαδραστικών στοιχείων. Δεν πρέπει να χρησιμοποιείται ως κύριο χρώμα για παροτρύνσεις για δράση.
Ουδέτερος
- Ink Black
#0c0a09— Οι κύριες επικεφαλίδες, το επισημασμένο κείμενο στο κυρίως μέρος και τα εκφραστικά εικονίδια έχουν ζεστό, σχεδόν μαύρο χρώμα. - Stone Canvas
#fafaf9— Το φόντο της σελίδας έχει μια ζεστή, κρεμώδη απόχρωση που μοιάζει με χαρτί και όχι με το λευκό μιας οθόνης. - Pure White
#ffffff— Οι επιφάνειες του χάρτη, τα προεξέχοντα πλαίσια και τα γεμίσματα των πεδίων εισαγωγής είναι επίπεδες και χωρίς σκιά από προεπιλογή. - Stone Border
#e8e6e5— Τα λεπτά περιγράμματα στις κάρτες, την πλοήγηση και τα πεδία εισαγωγής είναι το κύριο δομικό στοιχείο, όχι τα διαχωριστικά. - Stone Muted
#d6d3d1— Επιπλέον πλαίσια, διακριτικές αποχρώσεις φόντου, διακοσμητικά διαχωριστικά. - Ash Gray
#a8a29e— Κείμενο βοήθειας, περιγράμματα εικονιδίων, απενεργοποιημένες καταστάσεις - ευανάγνωστα αλλά ανενεργά.
Τυπογραφία
από 10 έως 52px · 5 βήματα
- Roobert — αντικατάσταση: Inter Tight or Satoshi · περιγράμματα 400, 500 · Η γραμματοσειρά για τις επικεφαλίδες και τη διάταξη κειμένου είναι μια μοναδική γεωμετρική sans-serif με ελάχιστη απόσταση μεταξύ των αρνητικών γραμμάτων (-0,025em στα 32px, -0,021em στα 52px). Το βάρος των 400 x 52px είναι η χαρακτηριστική της γραμματοσειράς: αντισυμβατική, διακριτική, αλλά και αυθεντική, αλλά και διακριτική. Οι επικεφαλίδες καταλαμβάνουν τη θέση τους χωρίς να είναι υπερβολικές.
- Inter — αντικατάσταση: Inter · περιγράμματα 400, 500, 600 · Η κύρια γραμματοσειρά για το κυρίως κείμενο, την πλοήγηση, το περιβάλλον χρήστη και τις επικεφαλίδες είναι μια ουδέτερη, καθολική γραμματοσειρά για όλα τα κείμενα εκτός οθόνης. Τα 14px με βάρος 400 και διάστιχο 1,64 είναι το κυρίαρχο μέγεθος για το κυρίως κείμενο (συχνότητα 1174). Η θετική διάστιχο μεταξύ γραμμάτων (0,004em) σε μικρά μεγέθη διασφαλίζει την αναγνωσιμότητα του πυκνού περιβάλλοντος χρήστη.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | ευρύχωρος |
| Βασικό βήμα | 8px |
| Ακτίνα κουμπιού | 9999px |
| Ακτίνα κάρτας | 10px |
| Σκιές | απαλές σκιές |
| Μεταξύ τμημάτων | 96px |
| Πλάτος σελίδας | 1200px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Seline Analytics και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- ElevenLabs — Ένα φωτογραφικό δοκίμιο σε ζεστές κρεμ αποχρώσεις με διακριτικούς τίτλους. Ένα σημειωματάριο σε στιλ Bauhaus—χαρτί στο χρώμα του κελύφους του αυγού, μαύρο μελάνι και μία μόνο μωβ και πορτοκαλί πινελιά για την προβολή του προϊόντος.
- Awesomic — Συντακτικό πλέγμα ψευδαργύρου με πορτοκαλί σημεία στίξης που θυμίζουν κομφετί
- Monad — συντακτικό τεχνικό περιοδικό σε θερμή περγαμηνή
- Dub — Πίνακας ελέγχου από ματ ριζόχαρτο της Link
- Notion — Ένα ζεστό χάρτινο σημειωματάριο στον μεσημεριανό ήλιο
- Anthropic — Ένα επιστημονικό περιοδικό πεδίου για τη ζεστή περγαμηνή - ήρεμες επιφάνειες σε χρώμα ελεφαντόδοντου, επικεφαλίδες με ραβδώσεις και μια μοναδική πινελιά από πηλό που εμφανίζεται μόνο όταν χρειάζεται δράση.
- Calendly — Σκούρο μπλε μελάνι σε κρύο μάρμαρο
- Augen Pro — Η λευκή παρουσίαση της Apple διαθέτει ένα κλινικό, χωρίς βάρος, ηλεκτρικό μπλε ως τη μοναδική πινελιά σε έναν μονόχρωμο χώρο.
- Antimetal — Ένα συντακτικό χρονικό σε κρεμ χαρτί—ένα ήσυχο πρωινό σε ένα επιστημονικό περιοδικό, όπου η αυτοσυγκράτηση μεταδίδει αυτοπεποίθηση και οι σερίφηδες κάνουν τη δύσκολη δουλειά
- Perk — Ηλεκτρικό λάιμ σε ζεστή λαδόκολλα
- Ditto — Ένα ηλιόλουστο εργαστήριο δημιουργίας δειγμάτων αγριολούλουδων. Ζεστές κρεμ επιφάνειες, ένα έντονο κίτρινο βασικό χρώμα, βαθιά μπλε μελάνια, οργανικές χρωματικές μορφές που ανθίζουν πίσω από το έργο.
- Officevibe — Ένα εκδοτικό περιοδικό σε ζεστό κρεμ χαρτί. Φανταστείτε ένα στοχαστικό δοκίμιο για τη διαχείριση ανθρώπινου δυναμικού, που παρουσιάζεται ως προϊόν - μια καλλιγραφική γραμματοσειρά serif που ψιθυρίζει μέσα από μια μοντέρνα μπλε διεπαφή.