Dub
Πίνακας ελέγχου από ματ ριζόχαρτο της Link
Το οπτικό σύστημα του Dub έχει μια συγκρατημένη, σχεδόν εκδοτική αισθητική SaaS: ένας σχεδόν λευκός καμβάς που συγκρατείται από λεπτά περιγράμματα αντί για προεξέχοντα στοιχεία, με πυκνή μονόχρωμη τυπογραφία που παρέχει δομική υποστήριξη και ένα μόνο φωτεινό μπλε χρώμα (#2563eb) που κάνει τη διαφορά. Οι επιφάνειες παραμένουν επίπεδες και χωρίς πλαίσιο με την πρώτη ματιά, αλλά κάθε κοντέινερ έχει περιθώριο 1px #e5e5e5, που θυμίζει την αίσθηση ενός τυπωμένου εγγράφου. Η προσωπικότητα επιτυγχάνεται μέσω ενός μικρού συνόλου χρωματιστών τόνων "χάπι" (πορτοκαλί, πράσινο, μοβ) που αιωρούνται πάνω από την ουδέτερη παλέτα και κεφαλίδων που δίνουν μια αίσθηση σιγουριάς και μοντέρνων χωρίς να είναι φανταχτερά. Τα εξαρτήματα είναι συμπαγή και πυκνά: υδρορροές 8px, ακτίνα κάρτας 12px, ετικέτες σε σχήμα χαπιού στα 9999px και αόρατα χειριστήρια αντί για βαριά, γεμάτα κουμπιά.
Η σελίδα βασίζεται σε μια κεντρική διάταξη με μέγιστο πλάτος περίπου 1200px. Το κύριο στοιχείο είναι ένα κεντρικό μπλοκ κειμένου με τρία αιωρούμενα στοιχεία (Συνεργαζόμενα Προγράμματα, Αναλυτικά Μετατροπές, Σύντομοι Σύνδεσμοι) τοποθετημένα οριζόντια πάνω από μια μεγάλη διάταξη προϊόντος. Οι ενότητες είναι διατεταγμένες κάθετα με ομοιόμορφα κενά 64px, εναλλάσσοντας λευκό καμβά και θολούρα χαρτιού #f5f5f5 για τονικό διαχωρισμό. Το κάτω τμήμα χρησιμοποιεί μια διάταξη σε σχήμα Z: το κείμενο σύνταξης είναι κεντραρισμένο στο μεσαίο τρίτο και οι αιωρούμενες κάρτες UI είναι αγκυρωμένες στο αριστερό και το δεξί περιθώριο, δημιουργώντας έναν ασύμμετρο ρυθμό που θυμίζει περιοδικό. Το σύννεφο λογότυπου είναι ένα απλό πλέγμα 5x2, κεντραρισμένο στη σελίδα. Η πλοήγηση είναι μια μινιμαλιστική επάνω γραμμή - λογότυπο στα αριστερά, πλοήγηση στο κέντρο, μια ομάδα δύο κουμπιών (ένα κουμπί "Σύνδεση" + ένα γεμάτο κουμπί "Εγγραφή") στα δεξιά - χωρίς σταθερό ή μεγα-μενού. Η διάταξη του πίνακα ελέγχου του κύριου παραθύρου παρουσιάζει μια κλασική διάταξη εφαρμογής δύο στηλών: μια σταθερή πλαϊνή μπάρα (παρόμοια με 240px) + μια περιοχή περιεχομένου που καθορίζει την πυκνότητα των πληροφοριών προϊόντος για τους επισκέπτες πριν ξεκινήσουν την κύλιση.
Τα γραφικά επικεντρώνονται στο προϊόν και όχι στον τρόπο ζωής. Η κύρια οθόνη επικεντρώνεται σε ένα μεγάλο στιγμιότυπο οθόνης του ταμπλό, που αντιπροσωπεύει ένα πραγματικό μοντέλο προϊόντος με πλοήγηση στο πλάι, πίνακα δεδομένων και αιωρούμενα στοιχεία UI, διατεταγμένα ως επίπεδη οθόνη σε λευκό καμβά. Τα λογότυπα των πελατών εμφανίζονται σε ένα αποκορεσμένο πλέγμα σε κλίμακα του γκρι (beehiv, superperformance, Chatbase, κ.λπ.) για να αναγνωρίσουν την απόδοσή τους στα μέσα κοινωνικής δικτύωσης, χωρίς χρώμα για να παραμείνει κυρίαρχη η μοναδική μπλε πινελιά της σελίδας. Οι αιωρούμενες κάρτες συνεργατών (μικρά προφίλ και πλακίδια με δεδομένα εσόδων/πληρωμών) κινούνται γύρω από μπλοκ συντακτικού κειμένου στο κάτω μέρος, δημιουργώντας μια αίσθηση βάθους χωρίς τη χρήση σκιών στο ίδιο το κείμενο. Το μοτίβο φόντου με διακεκομμένο πλέγμα είναι ένα χαρακτηριστικό σήμα κατατεθέν: μια λεπτή σειρά από μικρές κουκκίδες με πολύ χαμηλή αδιαφάνεια δημιουργεί υφή και την αίσθηση ενός συστήματος σχεδίασης/επιφάνειας σχεδίασης, τονίζοντας την τοποθέτηση του ιστότοπου ως «σύγχρονης πλατφόρμας απόδοσης συνδέσμων». Η εικονογραφία είναι μινιμαλιστική, με περιγράμματα και γεμίσματα, και χρησιμοποιεί μια παλέτα έμφασης (πορτοκαλί μανταρίνι, μοβ λεβάντα, πράσινο μέντας) για τις ετικέτες χαρακτηριστικών. Δεν χρησιμοποιούνται φωτογραφίες, εικόνες ή τρισδιάστατα μοντέλα—η ίδια η διεπαφή χρήστη του προϊόντος είναι μια οπτική γλώσσα.
Παλέτα
Μάρκα
- Electric Blue
#2563eb— Χρησιμοποιείται το κύριο χρώμα της επωνυμίας—το λογότυπο, οι σύνδεσμοι, οι βασικοί δείκτες απόδοσης, οι ενεργές καταστάσεις και οι λεπτομέρειες των εικονιδίων. Ένα πλούσιο μπλε σε λευκό φόντο δημιουργεί τη μόνη οπτική ελκυστικότητα του συστήματος. - Deep Sapphire
#1e40af— Το κύριο φόντο του κουμπιού δράσης, η έντονη γραφή της παρότρυνσης για δράση—το μόνο χρώμα που υποδηλώνει την ενέργεια—χρησιμοποιείται με φειδώ για να προσελκύσει την προσοχή.
Ουδέτερος
- Canvas White
#ffffff— Το φόντο της σελίδας, η επιφάνεια της κάρτας, τα αναδυόμενα πλαίσια αποτελούν την απόλυτη βάση κάθε οθόνης. - Paper Mist
#f5f5f5— Λεπτές αλλαγές χρώματος κατά την τοποθέτηση του δείκτη του ποντικιού για ένθετες κάρτες, πρόσθετα πλαίσια και γεμίσματα. - Ash
#e5e5e5— Τα λεπτά περιθώρια στις κάρτες, τις υποδοχές εισόδου και τα διαχωριστικά αποτελούν τη δομική γραμμή που συγκρατεί το σύστημα ενωμένο. - Smoke
#d4d4d4— Ευκρινέστερα περιγράμματα για επιλεγμένα κοντέινερ και πρόσθετα περιγράμματα κουμπιών. - Pebble
#c8c8c8— Περιγράμματα, περιγράμματα ελέγχου και δομικά διαχωριστικά με μέτρια αντίθεση. Αυτό το χρώμα δεν πρέπει να χρησιμοποιείται ως κύριο χρώμα για παροτρύνσεις για δράση. - Midnight Ink
#0a0a0a— Το κύριο κείμενο των κουμπιών, τα επισημασμένα κουμπιά και το κείμενο πλοήγησης είναι σχεδόν μαύρα για μέγιστη αντίθεση.
Τυπογραφία
από 11 έως 48px · 9 βήματα
- Satoshi — αντικατάσταση: Inter (weight 500 · περιγράμματα 500 · Εμφάνιση Επικεφαλίδων – χρησιμοποιούνται μόνο σε γραμμές 36–48px για τίτλους επικεφαλίδων και ενοτήτων. Βάρος γραμματοσειράς – 500 (μεσαίο, όχι έντονο): Οι επικεφαλίδες φαίνονται σίγουρες και μοντέρνες, αλλά ποτέ υπερβολικές. Οι γεωμετρικές αναλογίες του Satoshi δίνουν στη γραμματοσειρά μια ελαφρώς εκδοτική, μοντέρνα αίσθηση που το κύριο κείμενο του Inter δεν μπορεί να αναπαράγει.
- Inter — αντικατάσταση: Inter (native) · περιγράμματα 400, 500, 600 · Κείμενο σώματος, ετικέτες UI, πλοήγηση, υποεπικεφαλίδες και δευτερεύουσες επικεφαλίδες. Το Inter είναι το κύριο εργαλείο, χειριζόμενο τα πάντα, από μικρο-ετικέτες 11px έως δευτερεύουσες επικεφαλίδες 30px. Το βάρος 400 είναι το προεπιλεγμένο για το αντίγραφο σώματος, 500 για τα επισημασμένα στοιχεία και τις ετικέτες κουμπιών και 600 προορίζεται για σημαντικές ετικέτες UI. Τα 16px με ύψος γραμμής 1,5 είναι το πιο συχνά συναντώμενο μέγεθος ενός βήματος (1220 εμφανίσεις), επιβεβαιώνοντας ότι τα 16px είναι το κανονικό μέγεθος αντιγράφου σώματος.
- Geist Mono — αντικατάσταση: JetBrains Mono or IBM Plex Mono · περιγράμματα 400, 500 · Τα τμήματα κώδικα, τα τεχνικά μεταδεδομένα και τα ενσωματωμένα μονοδιάστατα διακριτικά χρησιμοποιούνται σε μπλοκ κώδικα μεγέθους 12–14px και σε μεγάλα στοιχεία εμφάνισης κώδικα μεγέθους 24px. Αυτό διασφαλίζει την αξιοπιστία του εργαλείου προγραμματιστών, σύμφωνα με την τοποθέτηση προϊόντων της Dub.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | μέσος |
| Βασικό βήμα | 8px |
| Ακτίνα κουμπιού | 8px |
| Ακτίνα κάρτας | 12px |
| Σκιές | χωρίς περιγράμματα αντί για σκιές |
| Μεταξύ τμημάτων | 64px |
| Πλάτος σελίδας | 1200px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Dub και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- ElevenLabs — Ένα φωτογραφικό δοκίμιο σε ζεστές κρεμ αποχρώσεις με διακριτικούς τίτλους. Ένα σημειωματάριο σε στιλ Bauhaus—χαρτί στο χρώμα του κελύφους του αυγού, μαύρο μελάνι και μία μόνο μωβ και πορτοκαλί πινελιά για την προβολή του προϊόντος.
- Awesomic — Συντακτικό πλέγμα ψευδαργύρου με πορτοκαλί σημεία στίξης που θυμίζουν κομφετί
- Monad — συντακτικό τεχνικό περιοδικό σε θερμή περγαμηνή
- Seline Analytics — Ένα ήσυχο αναλυτικό τραπέζι σε ζεστό χαρτί
- Notion — Ένα ζεστό χάρτινο σημειωματάριο στον μεσημεριανό ήλιο
- Anthropic — Ένα επιστημονικό περιοδικό πεδίου για τη ζεστή περγαμηνή - ήρεμες επιφάνειες σε χρώμα ελεφαντόδοντου, επικεφαλίδες με ραβδώσεις και μια μοναδική πινελιά από πηλό που εμφανίζεται μόνο όταν χρειάζεται δράση.
- Calendly — Σκούρο μπλε μελάνι σε κρύο μάρμαρο
- Augen Pro — Η λευκή παρουσίαση της Apple διαθέτει ένα κλινικό, χωρίς βάρος, ηλεκτρικό μπλε ως τη μοναδική πινελιά σε έναν μονόχρωμο χώρο.
- Antimetal — Ένα συντακτικό χρονικό σε κρεμ χαρτί—ένα ήσυχο πρωινό σε ένα επιστημονικό περιοδικό, όπου η αυτοσυγκράτηση μεταδίδει αυτοπεποίθηση και οι σερίφηδες κάνουν τη δύσκολη δουλειά
- Perk — Ηλεκτρικό λάιμ σε ζεστή λαδόκολλα
- Ditto — Ένα ηλιόλουστο εργαστήριο δημιουργίας δειγμάτων αγριολούλουδων. Ζεστές κρεμ επιφάνειες, ένα έντονο κίτρινο βασικό χρώμα, βαθιά μπλε μελάνια, οργανικές χρωματικές μορφές που ανθίζουν πίσω από το έργο.
- Officevibe — Ένα εκδοτικό περιοδικό σε ζεστό κρεμ χαρτί. Φανταστείτε ένα στοχαστικό δοκίμιο για τη διαχείριση ανθρώπινου δυναμικού, που παρουσιάζεται ως προϊόν - μια καλλιγραφική γραμματοσειρά serif που ψιθυρίζει μέσα από μια μοντέρνα μπλε διεπαφή.