Superhuman
συντακτική επιτροπή της χρυσής ώρας
Το Superhuman βρίσκεται στο σημείο τομής της φωτογραφίας σύνταξης και του περιβάλλοντος εργασίας χρήστη λογισμικού—ένας ζεστός, σαν περγαμηνή καμβάς (ποτέ καθαρός λευκός) πλαισιώνει καστανόχρωμα στοιχεία επωνυμίας και έντονες μωβ πινελιές. Οι τίτλοι, σε γραμματοσειρά 460, ψιθυρίζουν αντί να φωνάζουν, επιτρέποντας στην κινηματογραφική φωτογραφία ολόκληρης σελίδας να κάνει τη βαριά δουλειά, ενώ οι ημιδιαφανείς κάρτες UI προϊόντων αιωρούνται σαν γυαλί πάνω από τις εικόνες. Η παλέτα παραμένει ήρεμη και εκδοτική τις περισσότερες φορές: κρεμ επιφάνειες, ανθρακί κείμενο, διακριτικά ζεστά γκρι περιγράμματα και γενναιόδωρη απόσταση μεταξύ των στοιχείων, με το χρώμα να προορίζεται για σκόπιμη στίξη επωνυμίας—ένα μόνο καστανόχρωμη παρότρυνση για δράση, μωβ σύνδεσμοι, ένα ανοιχτό λιλά κουμπί προσθήκης. Το σύστημα αποφεύγει σκόπιμα τις έντονες σκιές και τις διαβαθμίσεις στις επιφάνειες του περιβάλλοντος εργασίας χρήστη. Το βάθος επιτυγχάνεται μέσω πολυεπίπεδης φωτογραφίας και διακριτικού θολώματος φόντου στον τίτλο, αντί μέσω ενός εφέ στοίβαξης.
Το κύριο στοιχείο είναι μια φωτογραφία πλήρους πλάτους με κεντρική επικεφαλίδα (48-64px/460) και μια ενιαία παρότρυνση για δράση γεμάτη με μια εικόνα κρασιού, με αιωρούμενες ημιδιαφανείς κάρτες UI προϊόντος επικαλυμμένες στην αριστερή και δεξιά άκρη. Κάτω από το κύριο στοιχείο υπάρχει μια λευκή λωρίδα λογότυπου (6 κελιά ανά σειρά, μέγιστο πλάτος περιορισμένο) και στη συνέχεια μια ενότητα καρτέλας με λευκές επιφάνειες καρτών σε καμβά περγαμηνής. Μια σκούρα τιρκουάζ λωρίδα διακόπτει τον ρυθμό περίπου στα δύο τρίτα της σελίδας - πλήρους πλάτους, δύο στήλες (εικόνα στα αριστερά, κείμενο στα δεξιά) - δημιουργώντας τη μόνη τονική αντίθεση καθώς κάνετε κύλιση. Ακολουθεί μια διαβαθμισμένη ατμοσφαιρική λωρίδα. Η κάθετη απόσταση μεταξύ των ενοτήτων είναι 64-96px. Το μέγιστο πλάτος περιεχομένου είναι ~1200px στο κέντρο, με το κύριο στοιχείο και τη σκούρα λωρίδα να εκτείνονται σε όλο το πλάτος του παραθύρου προβολής. Η πλοήγηση είναι μια ενιαία σταθερή κεφαλίδα με θολό φόντο. χωρίς πλαϊνή μπάρα, χωρίς mega μενού. Το υποσέλιδο είναι μια σελίδα μπορντό πλήρους πλάτους με διάταξη συνδέσμων πολλαπλών στηλών. Ο συνολικός ρυθμός είναι: κύριο καρέ → ήρεμο λευκό/κρεμ περιεχόμενο → σκούρα ρίγα με την κύρια εικόνα → ατμοσφαιρική διαβάθμιση → μπορντό υποσέλιδο, εναλλασσόμενες ανοιχτόχρωμες και σκούρες ρίγες για τη δημιουργία ενός εκδοτικού τέμπο.
Το κύριο οπτικό στοιχείο είναι η κινηματογραφική φωτογραφία: ένα πορτρέτο πλήρους πλάτους σε φόντο ανοιχτού ουρανού χρησιμεύει ως το κεντρικό σημείο, με μια δεύτερη ατμοσφαιρική λωρίδα τοποθετημένη χαμηλότερα στη σελίδα. Η εικόνα είναι ζεστή, διακριτικά απαλή και γυρισμένη σε προφίλ, θυμίζοντας μια χρυσή ώρα, δημιουργώντας μια πιο εκδοτική παρά εταιρική αίσθηση. Μια σκούρα λωρίδα με ημιδιαφανή γεωμετρικά ορθογώνια και χειρόγραφες επιγραφές τοποθετείται πάνω από μια φωτογραφία ενός άνδρα χαμένου στις σκέψεις του - ένα κολάζ επιφανειών αντί για μία μόνο εικόνα. Η διεπαφή χρήστη παρουσιάζεται ως αιωρούμενες γυάλινες κάρτες που τοποθετούνται απευθείας πάνω στη φωτογραφία, αντί ως ξεχωριστά στιγμιότυπα οθόνης. Δεν υπάρχουν εικόνες αρχείου, τρισδιάστατες απεικονίσεις και αφηρημένες διακοσμητικές φόρμες, εκτός από την ατμοσφαιρική λωρίδα με διαβάθμιση. Τα εικονίδια είναι μινιμαλιστικά μονόχρωμα εικονίδια γραμμής, πλάτους ~16-20px, με ένα μόνο πλάτος που αντιστοιχεί στο βάρος κειμένου 460 σημείων.
Παλέτα
Μάρκα
- Midnight Wine
#421d24— Τα κύρια κουμπιά δράσης, το διαφημιστικό banner και το υποσέλιδο είναι σε ένα ζεστό, σχεδόν μαύρο μπορντό χρώμα που θυμίζει περισσότερο μελάνι παρά κόκκινο, αγκυροβολώντας την παλέτα χρωμάτων χωρίς να είναι υπερβολικά. - Royal Violet
#714cb6— Το μωβ χρησιμοποιείται για την επισήμανση συνδέσμων, ετικετών και σύντομων φράσεων. Δεν πρέπει να χρησιμοποιείται ως κύριο χρώμα για παροτρύνσεις για δράση.
Ουδέτερος
- Lilac Mist
#d4c7ff— Το γέμισμα της δευτερεύουσας επιφάνειας, τα φωτεινά εικονίδια και τα φόντα των κουμπιών-φαντασμάτων διαθέτουν ένα απαλό μωβ χρώμα που υποδηλώνει το στυλ της μάρκας χωρίς να τραβάει υπερβολική προσοχή. - Deep Lagoon
#0c4243— Το σκούρο φόντο για τη λωρίδα, που χρησιμοποιείται ως το κύριο αφηγηματικό στοιχείο, είναι η μόνη σκοτεινή επιφάνεια στο σύστημα, σε συνδυασμό με ένα επικαλυπτόμενο γεωμετρικό μοτίβο. - Warm Parchment
#f2f0eb— Η επιφάνεια εργασίας της σελίδας είναι το κυρίαρχο στοιχείο· ένα ζεστό κρεμ χρώμα αντικαθιστά το λευκό ως βάση, προσδίδοντας σε ολόκληρο το σύστημα μια συντακτική ζεστασιά. - Soft Mist
#e3e3e2— Λεπτά περιγράμματα, περιγράμματα καρτών, διαχωριστικές γραμμές—ένα ζεστό, ανοιχτό γκρι που αναμειγνύεται με την περγαμηνή αλλά οριοθετεί σαφώς τις άκρες. - Ink Charcoal
#292827— Κείμενο σώματος, επικεφαλίδες, περιγράμματα εικονιδίων - ένα ζεστό, σχεδόν μαύρο χρώμα με αρκετό καφέ για να μοιάζει με μελάνι σε χαρτί, ποτέ κρύο #000 - Stone Gray
#666666— Δευτερεύον κείμενο, υποστηρικτικά κείμενα, διακριτικές περιγραφές - ένα μόνο μεσαίο γκρι, που χρησιμοποιείται με φειδώ ώστε να μην ανταγωνίζεται ποτέ το κύριο κείμενο.
Τυπογραφία
από 12 έως 64px · 8 βήματα
- Super Sans VF — αντικατάσταση: Inter (closest open equivalent for variable weight range) · περιγράμματα 460, 500, 540, 600, 700 · Μία μόνο γραμματοσειρά σε ολόκληρο το σύστημα. Οι μεταβλητές άξονα εκτείνονται στο εύρος από 460 (μια χαρακτηριστική, ελαφρώς κομμένη γραμματοσειρά για όλα τα μεγάλα κείμενα επικεφαλίδων) έως 540 (τονισμένο κείμενο σώματος) και 700 (μικρές, έντονες λεζάντες). Ένα ειδικά σχεδιασμένο VF κάνει τις επικεφαλίδες βάρους 460 να φαίνονται πιο σκόπιμες παρά τυχαίες—στα 48-64px με μικρή απόσταση μεταξύ των γραμμάτων, το εφέ "ελαφρώς κομμένου" γίνεται αντιληπτό ως σίγουρο παρά ως λεπτό.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | πυκνός |
| Βασικό βήμα | 8px |
| Ακτίνα κουμπιού | 16px |
| Ακτίνα κάρτας | 16px |
| Σκιές | χωρίς περιγράμματα αντί για σκιές |
| Μεταξύ τμημάτων | 64-96px |
| Πλάτος σελίδας | 1200px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Superhuman και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- AI for Business — Εκθεσιακός χώρος Brutalist σε ζεστούς γκρι τόνους
- Jeton — Ένα άρθρο σχετικά με το fintech σε ζεστό μάρμαρο
- Airtable — Ένα άνετο σεμινάριο με κεφάλαια που επισημαίνονται με διαφορετικά χρώματα
- Osmo — Το Μουσείο Εργολάβων σε Γκρι Σκυρόδεμα
- Linktr — Οι αφίσες των συντακτών είναι στοιβαγμένες σαν καραμέλες. Ο ιστότοπος έχει σχεδιαστεί σε χρωματικά μπλοκ, με φωτεινούς πράσινους τίτλους σε φόντο τοίχους με μπλε-κοβαλτίου και λευκά στοιχεία πλοήγησης σε σχήμα χαπιού που αιωρούνται πάνω από μπορντό χωράφια.
- Outsource Consultants — Ένα αρχιτεκτονικό φύλλο μεγάλου μεγέθους σε οστέινο χαρτί. Μια μονογραφική αισθητική, όπου μια μοναδική φωτεινή κηλίδα ινδικού χρώματος διακόπτει το κατά τα άλλα ζεστό, τυπογραφικά μαξιμαλιστικό πλέγμα.
- Streamtime — Πίνακας δημιουργικής διάθεσης Tactile Creative - Πίνακας Scrapbooking Σχεδιαστών
- Switch-Lit — Συντακτικό πλέγμα τυπωμένο με μελάνι σε κρεμ χαρτί
- HubSpot — Ένα ζεστό κρεμ χρώμα χαρτιού με μία μόνο πορτοκαλί πινελιά. Το HubSpot μοιάζει με περιοδικό σχεδιαστών τυπωμένο σε βαρύ χαρτί - τίτλοι με σερίφ, σελίδες σε ζεστό κρεμ χρώμα και μία μόνο φλογερή πορτοκαλί πινελιά που τονίζει μόνο τα πιο σημαντικά σημεία.
- Granola — Σημειώσεις πεδίου σε ζεστή περγαμηνή—η Granola διαβάζεται σαν ένα φθαρμένο σημειωματάριο Moleskine ανοιχτό σε ένα ηλιόλουστο γραφείο: οι επικεφαλίδες σε σχήμα serif προσδίδουν μια αίσθηση στιβαρότητας, οργανικές πράσινες πινελιές όπως φυτικό μελάνι και λεπτές γραμμές στα περιθώρια των καρτών που μοιάζουν με χειρόγραφες σημειώσεις.
- Secure — Μια συζήτηση σε ένα ευρωπαϊκό καφέ με απαλό φως ημέρας είναι μια ζεστή, κομψή εκδοχή των βιντεοκλήσεων, όπου οι τίτλοι σε στυλ serif διαβάζονται σαν ένα στοχαστικό άρθρο περιοδικού και όχι σαν μια σελίδα τεχνολογικού προϊόντος.
- Mockups made easy — Στούντιο εκδοτικού σχεδιασμού σε λευκό χαρτί