Duolingo
קמע כיתה שובב על נייר לבן
הממשק של Duolingo מעוצב כמו ספר תמונות לילדים: בד קנבס לבן, גופן עבה ומעוגל, וצבע ירוק עשיר יחיד שמעורר מיד את "התשובה הנכונה". הטקסט העיקרי הוא בגווני אפור בינוני מרגיעים, המאפשרים לירוק ולכחול המבטא שלו לעשות את כל העבודה הרגשית - ירוק להתקדמות וכותרות, כחול לקישורים הניתנים ללחיצה ופעולות נוספות. הרכיבים מעוצבים כמו גלולות או פינות מעוגלות ועבות עם גבולות שחורים או צבעוניים עבים, מה שגורם לכל כפתור להרגיש יותר כמו מדבקה דבוקה לדף מאשר פקד ממשק משתמש שטוח.
המקטעים תופסים את מלוא רוחב העמוד ומסודרים אנכית בעמודה אחת, כל אחת בגובה של כ-800 פיקסלים. רוחב התוכן המרבי הוא כפיקסל אחד במרכז. טקסט משמאל ואיורים מימין מתחלפים, ומספקים מרחב אנכי נרחב (80 פיקסלים בין מקטעים). אין כרטיסי רשת או פריסות מרובות עמודות - כל מקטע הוא בלוק טקסט יחיד בשילוב עם איור יחיד. הניווט הוא סרגל עליון מינימליסטי עם לוגו ובורר שפה, המופיעים כסרגל קבוע בין מקטעים. הכותרת התחתונה היא פס ירוק המשתרע על פני כל רוחב העמוד. הקצב הוא עריכה: כותרת, פסקה, קריאה לפעולה, איור, חזרה.
שפת האיורים של הספר כוללת דמויות קמעות שטוחות ודו-ממדיות (דואט הינשוף ודמויות אנושיות שונות) עם צורות גיאומטריות מעוגלות, קווי מתאר שחורים מודגשים ופלטת צבעים משלימה של ורוד, סגול, צהוב, כתום וכחול שלעולם לא מופיעה בממשק עצמו. האיורים ממוקמים לצד הטקסט בצד ימין של כל חלק, על רקע לבן טהור, ללא מכלים או רקעים. אין תצלומים - הדמויות משמשות כתוכן חזותי. האיקונוגרפיה משתמשת בקווי מתאר עבים, בהתאם לסגנון הקמעות. צפיפות התמונה בינונית: כל חלק כולל איור גדול אחד של הדמות, כאשר שאר העמוד מוקדש לטיפוגרפיה ולרווח לבן.
לוּחַ הַצְבָעִים
מותג
- Eager Green
#58cc02— ירוק משמש להדגשת קישורים, תגיות וביטויים קצרים. אין להשתמש בו כצבע העיקרי עבור קריאות לפעולה. - Storybook Green
#d7ffb8— הדגשות רכות על משטחים בהירים, גווני רקע עדינים מאחורי תוויות הניווט בתחתית הכותרת.
נֵטרָלִי
- Spark Blue
#1cb0f6— כחול משמש להדגשת קישורים, תגיות וביטויים קצרים. אין להשתמש בו כצבע העיקרי עבור קריאות לפעולה. - Fresh Leaf
#a5ed6e— ירוק משמש להדגשת קישורים, תגיות וביטויים קצרים. אין להשתמש בו כצבע העיקרי עבור קריאות לפעולה. - Night Ink
#000437— קישורים, תגיות וביטויים קצרים מודגשים מסומנים בסגול. - Paper White
#ffffff— קנבס דף, משטחי קרטון, טקסט כפתור על רקע ירוק/כהה. - Charcoal
#4b4b4b— כותרות ראשיות וטקסט גוף - טקסט כהה אוניברסלי המאפשר לכותרות צבעוניות לבלוט. - Pencil Gray
#777777— פסקאות הטקסט העיקריות מודגשות באותיות נסתרות, וטקסט תיאורי משני נסוג אל הרקע, כך שהאלמנטים הצבעוניים עולים לקדמת הבמה.
טיפוגרפיה
מ-13 עד 64 פיקסלים · 7 צעדים
- feather — תַחֲלִיף: Inter · קווי מתאר 700 · כותרות סעיפים, כגון "חינמי. כיף. יעיל" ו"מבחן אנגלית של Duolingo", מוצגות בגופן מעוגל מותאם אישית, המעניק למותג את הסגנון השובב, הידידותי, דמוי הקמע שלו. החלף ב-"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 משמשים: אותיות גדולות בתוויות ניווט הן 15 פיקסלים (ls 0.0530em), כותרות משנה הן 19 פיקסלים ו-32 פיקסלים, והדגשת קישורים היא 13 פיקסלים. אותו גופן כמו הטקסט הראשי - ההבדל הוויזואלי הוא במשקל, לא בשינוי הגופן. ריווח בין אותיות: 0.0530em עבור אותיות גדולות בתוויות ניווט.
אינטרוולים וצורה
| מַטָרָה | מַשְׁמָעוּת |
|---|---|
| צְפִיפוּת | צָפוּף |
| שלב בסיסי | 12px |
| רדיוס הכפתור | 12px |
| רדיוס הכרטיס | 12px |
| צללים | אין גבולות במקום צללים |
| בין סעיפים | 80-120px |
| רוחב העמוד | 1200px |
בינה מלאכותית תבנה את אתר האינטרנט שלך בסגנון Duolingo ותמלא אותו
- מלאו מוצרים ופוסטים דרך הקישור - Instagram, TikTok, Facebook.
- העברת תוכן מהאתר הישן שלך - רק ציין את הכתובת.
- עיצוב מודרני על מנוע הפיתוח הטוב ביותר: React ( Next.js) עם רינדור שרת ואופטימיזציה של קידום אתרים (SEO) ישירות מהקופסה.
- אופטימיזציה אוטומטית לחלוטין של SEO עבור תוצאות חיפוש והמלצות לרשתות עצביות.
סגנונות דומים
- Family — פריסה מתוך אגדה על קלף קרם
- Say Briefly — פנקס סקיצות על נייר קרם של סוכנות קריאייטיב
- Flying Papers — וידוי בבוקר שבת - סרט מצויר
- Portrait — קיר של זיכרונות, שנלכד בפולארויד על נייר בצבע קרם. אלבום סקראפבוקים בצבע קרם בהיר שבו דיו כחול כהה משמש כטקסט היחיד, קווי המבנה היחידים וצבע המסגרת היחיד - עם קשת אחת מצוירת ביד שמופיעה פעם אחת, על כפתור "הרשמה" ועל המילה הנטושה "לנצח", ולעולם לא עוד.
- Karl — דיורמה תלת-ממדית בסגנון ספר פופ-אפ ביום שמשי
- Navigate — סט גדול של מדבקות המחוברות ללוח: גופן גרוטסקי גדול, כולן בצורת טאבלטים וחמישה אייקונים רב-צבעוניים, החוזרים על עצמם כמו לוגו
- Monte — בוקר על החוף עם גוון חלוד
- MotherDuck — מסוף מקודד בעפרונות צבעוניים על נייר קרם
- Wise Design — דוכן ניאון בשוק ברחוב גלובלי - שלט ירוק בוהק צועק דרך השוק הצפוף, בעוד שמאחוריו מופיע באופן דיסקרטי ממשק משתמש מלוטש של מוצר.
- Hatch — עיצוב בסגנון סמיזדאט, מצויר ביד, משולב עם קערות ממתקים בצבעי פסטל. קנבס נייר בצבע קרם מעוטר בנגיעות מנטה, נקודות קונפטי וקריאות לפעולה בצורת גלולה, כאשר גופן סריפי גדול ונועז רומז על כיף, וקמע כחול קורץ בפינה.
- Superr — מחברת בית ספר חמה באור אחר הצהריים הרך. דף בצבע קרם, טוש כתום ללא מכסה, וערימת מדבקות שם למינציה שמחכות להתקלף.
- Mews — מרכז בקרה לאירוח עם שחר, ספוג בוורוד. סביבת עבודה מוארת שטופת שמש עם קירות לבנים, שבה כתב שחור נועז, כרטיסי קרם חמים וכפתור פעולה בודד בצבע ורוד לוהט מגדירים כל מסך - ביטחון שובב ולא איפוק תאגידי.