Duolingo
Παιχνιδιάρικη μασκότ τάξης σε λευκό χαρτί
Η διεπαφή του Duolingo έχει σχεδιαστεί σαν παιδικό εικονογραφημένο βιβλίο: ένας λευκός καμβάς από χαρτί, παχουλή, στρογγυλεμένη γραμματοσειρά και ένα ενιαίο, πλούσιο πράσινο χρώμα που θυμίζει αμέσως τη «σωστή απάντηση». Το κύριο κείμενο είναι σε απαλούς τόνους μεσαίου γκρι, επιτρέποντας στο πράσινο και την μπλε προφορά του να κάνουν όλη τη συναισθηματική δουλειά - πράσινο για την πρόοδο και τις επικεφαλίδες, μπλε για συνδέσμους με δυνατότητα κλικ και πρόσθετες ενέργειες. Τα στοιχεία έχουν σχήμα χαπιών ή ογκώδεις, στρογγυλεμένες γωνίες με παχιά μαύρα ή χρωματιστά περιγράμματα, κάνοντας κάθε κουμπί να μοιάζει περισσότερο με αυτοκόλλητο κολλημένο στη σελίδα παρά με ένα επίπεδο χειριστήριο UI.
Οι ενότητες καταλαμβάνουν όλο το πλάτος της σελίδας και είναι διατεταγμένες κάθετα σε μία μόνο στήλη, με ύψος περίπου 800 pixel η καθεμία. Το μέγιστο πλάτος περιεχομένου είναι περίπου 1 pixel στο κέντρο. Το κείμενο στα αριστερά και οι εικόνες στα δεξιά εναλλάσσονται, παρέχοντας άφθονο κάθετο χώρο (80 pixel μεταξύ των ενοτήτων). Δεν υπάρχουν κάρτες πλέγματος ή διατάξεις πολλαπλών στηλών—κάθε ενότητα είναι ένα ενιαίο μπλοκ κειμένου σε συνδυασμό με μία μόνο εικόνα. Η πλοήγηση είναι μια μινιμαλιστική επάνω γραμμή με λογότυπο και επιλογέα γλώσσας, η οποία εμφανίζεται ως σταθερή γραμμή μεταξύ των ενοτήτων. Το υποσέλιδο είναι μια πράσινη λωρίδα που εκτείνεται σε όλο το πλάτος της σελίδας. Ο ρυθμός είναι συντακτικός: επικεφαλίδα, παράγραφος, παρότρυνση για δράση, εικόνα, επανάληψη.
Η εικονογραφική γλώσσα του βιβλίου περιλαμβάνει επίπεδους, δισδιάστατους χαρακτήρες μασκότ (Ντουέτο την κουκουβάγια και διάφορες ανθρώπινες φιγούρες) με στρογγυλεμένα γεωμετρικά σχήματα, έντονα μαύρα περιγράμματα και μια συμπληρωματική χρωματική παλέτα ροζ, μοβ, κίτρινου, πορτοκαλί και μπλε που δεν εμφανίζεται ποτέ στην ίδια τη διεπαφή. Οι εικόνες τοποθετούνται δίπλα στο κείμενο στη δεξιά πλευρά κάθε ενότητας, σε καθαρό λευκό φόντο, χωρίς περιβλήματα ή φόντα. Δεν υπάρχουν φωτογραφίες - οι χαρακτήρες χρησιμεύουν ως το οπτικό περιεχόμενο. Η εικονογραφία χρησιμοποιεί παχιά περιγράμματα, σύμφωνα με το στυλ των μασκότ. Η πυκνότητα εικόνας είναι μέτρια: κάθε ενότητα περιλαμβάνει μία μεγάλη απεικόνιση του χαρακτήρα, με την υπόλοιπη σελίδα να είναι αφιερωμένη στην τυπογραφία και τον λευκό χώρο.
Παλέτα
Μάρκα
- Eager Green
#58cc02— Το πράσινο χρησιμοποιείται για την επισήμανση συνδέσμων, ετικετών και σύντομων φράσεων. Δεν πρέπει να χρησιμοποιείται ως το κύριο χρώμα για παροτρύνσεις για δράση. - Storybook Green
#d7ffb8— Απαλές ανταύγειες σε ανοιχτόχρωμες επιφάνειες, διακριτικοί τόνοι φόντου πίσω από τις ετικέτες πλοήγησης στο υποσέλιδο.
Ουδέτερος
- Spark Blue
#1cb0f6— Το μπλε χρησιμοποιείται για την επισήμανση συνδέσμων, ετικετών και σύντομων φράσεων. Δεν πρέπει να χρησιμοποιείται ως κύριο χρώμα για παροτρύνσεις για δράση. - Fresh Leaf
#a5ed6e— Το πράσινο χρησιμοποιείται για την επισήμανση συνδέσμων, ετικετών και σύντομων φράσεων. Δεν πρέπει να χρησιμοποιείται ως το κύριο χρώμα για παροτρύνσεις για δράση. - Night Ink
#000437— Σύνδεσμοι, ετικέτες και σύντομες επισημασμένες φράσεις επισημαίνονται με μοβ. - Paper White
#ffffff— Καμβάς σελίδων, επιφάνειες από χαρτόνι, κείμενο κουμπιών σε πράσινο/σκούρο φόντο. - Charcoal
#4b4b4b— Επικεφαλίδες και Κείμενο Σώματος - Καθολικό σκούρο κείμενο που επιτρέπει στους έγχρωμους τίτλους να ξεχωρίζουν. - Pencil Gray
#777777— Οι κύριες παράγραφοι του κειμένου επισημαίνονται με δυσδιάκριτα γράμματα και το δευτερεύον περιγραφικό κείμενο υποχωρεί στο φόντο, έτσι ώστε τα χρωματιστά στοιχεία να αναδεικνύονται.
Τυπογραφία
από 13 έως 64px · 7 βήματα
- feather — αντικατάσταση: Inter · περιγράμματα 700 · Οι επικεφαλίδες ενοτήτων, όπως "Δωρεάν. Διασκεδαστικό. Αποτελεσματικό" και "Duolingo English Test", εμφανίζονται χρησιμοποιώντας μια προσαρμοσμένη στρογγυλεμένη γραμματοσειρά, δίνοντας στην επωνυμία το παιχνιδιάρικο, φιλικό, μασκότ στυλ της. Αντικαταστήστε με "Feather Bold" ή "Nunito Black" στο κατάλληλο πάχος. Απόσταση γραμμάτων: -0,0200em
- duolingo-sans — αντικατάσταση: Inter · περιγράμματα 500 · Κύριες παράγραφοι και σύνδεσμοι πλοήγησης στα 17px/500—μια γεωμετρική γραμματοσειρά sans-serif που παραμένει ευανάγνωστη, επιτρέποντας στο πάχος γραμμής 700 να επισημαίνει σημαντικά σημεία. Αντικαταστήστε με 'DIN Next', 'Inter' ή 'Nunito Sans'.
- duolingo-sans — αντικατάσταση: Inter · περιγράμματα 700 · Χρησιμοποιούνται όλες οι τιμές βάρους-700: τα κεφαλαία γράμματα στις ετικέτες πλοήγησης είναι 15px (ls 0.0530em), οι υποεπικεφαλίδες είναι 19px και 32px και η έμφαση στον σύνδεσμο είναι 13px. Η ίδια γραμματοσειρά με το κύριο κείμενο—η οπτική διαφορά έγκειται στο βάρος, όχι στην αλλαγή γραμματοσειράς. Απόσταση μεταξύ γραμμάτων: 0.0530em για κεφαλαία γράμματα στις ετικέτες πλοήγησης.
Διαστήματα και μορφή
| Σκοπός | Εννοια |
|---|---|
| Πυκνότητα | πυκνός |
| Βασικό βήμα | 12px |
| Ακτίνα κουμπιού | 12px |
| Ακτίνα κάρτας | 12px |
| Σκιές | χωρίς περιγράμματα αντί για σκιές |
| Μεταξύ τμημάτων | 80-120px |
| Πλάτος σελίδας | 1200px |
Η Τεχνητή Νοημοσύνη θα δημιουργήσει τον ιστότοπό σας σε στυλ Duolingo και θα τον γεμίσει
- Συμπληρώστε με προϊόντα και αναρτήσεις μέσω του συνδέσμου - Instagram, TikTok, Facebook.
- Μεταφέρετε περιεχόμενο από τον παλιό σας ιστότοπο—απλώς καθορίστε τη διεύθυνση.
- Μοντέρνος σχεδιασμός στην καλύτερη μηχανή αναζήτησης: React ( Next.js) με απόδοση διακομιστή και βελτιστοποίηση SEO από την πρώτη στιγμή.
- Πλήρως αυτοματοποιημένη βελτιστοποίηση SEO για αποτελέσματα αναζήτησης και προτάσεις νευρωνικών δικτύων.
Παρόμοια στυλ
- Family — Ένα άλειμμα από ένα παραμύθι σε κρεμώδη περγαμηνή
- Say Briefly — Μπλοκ σχεδίασης δημιουργικού πρακτορείου σε κρεμ χαρτί
- Flying Papers — Εξομολόγηση σε ένα καρτούν Σάββατο πρωί
- Portrait — Ένας τοίχος από αναμνήσεις, αποτυπωμένες με Polaroid σε κρεμ χαρτί. Ένα φωτεινό, κρεμ λεύκωμα όπου το σκούρο μπλε μελάνι χρησιμεύει ως το μόνο κείμενο, οι μόνες γραμμές δομής και το μόνο χρώμα πλαισίου—με ένα μόνο χειρόγραφο ουράνιο τόξο που εμφανίζεται μία φορά, στο κουμπί «Εγγραφή» και στην πλάγια λέξη «για πάντα» και ποτέ ξανά.
- Karl — Ένα τρισδιάστατο διόραμα σε στυλ βιβλίου σε μια ηλιόλουστη μέρα
- Navigate — Ένα μεγάλο σετ αυτοκόλλητων ετικετών προσαρτημένων σε έναν πίνακα: μεγάλη γκροτέσκα γραμματοσειρά, όλα με τη μορφή ταμπλετών και πέντε πολύχρωμα εικονίδια, που επαναλαμβάνονται σαν λογότυπο
- Monte — Πρωί στην ακτή με μια σκουριασμένη απόχρωση
- MotherDuck — Τερματικό κωδικοποιημένο με χρωματιστά μολύβια σε κρεμ χαρτί
- Wise Design — Ένας πάγκος με νέον φώτα σε έναν παγκόσμιο δρόμο—μια φωτεινή πράσινη πινακίδα ουρλιάζει μέσα στην πολυσύχναστη αγορά, ενώ πίσω της, εμφανίζεται διακριτικά μια γυαλισμένη διεπαφή χρήστη προϊόντος.
- Hatch — Ένα χειροποίητο σχέδιο σε στιλ σαμιζντάτ, αναμεμειγμένο με παστέλ μπολ με γλυκά. Ένας κρεμώδης χάρτινος καμβάς διακοσμημένος με πινελιές μέντας, κουκκίδες κομφετί και παροτρύνσεις για δράση σε σχήμα χαπιού, όπου μια μεγάλη, έντονη γραμματοσειρά serif υπονοεί διασκέδαση και μια μπλε μασκότ κλείνει το μάτι στη γωνία.
- Superr — Ένα ζεστό σχολικό τετράδιο στο απαλό απογευματινό φως. Μια κρεμ σελίδα, ένας πορτοκαλί μαρκαδόρος χωρίς καπάκι και μια στοίβα από πλαστικοποιημένα αυτοκόλλητα ονομάτων που περιμένουν να ξεκολληθούν.
- Mews — Ένα κέντρο ελέγχου φιλοξενίας την αυγή, βουτηγμένο στα ροζ. Ένας χώρος εργασίας με λευκούς τοίχους, ηλιόλουστος, όπου κάθε οθόνη χαρακτηρίζεται από έντονα μαύρα γράμματα, ζεστές κρεμ κάρτες και ένα μόνο έντονο ροζ κουμπί δράσης - μια παιχνιδιάρικη αυτοπεποίθηση αντί για εταιρική αυτοσυγκράτηση.