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 · تُعرض عناوين الأقسام، مثل "مجاني. ممتع. فعال" و"اختبار دولينجو للغة الإنجليزية"، باستخدام خط دائري مخصص، مما يمنح العلامة التجارية طابعًا مرحًا وودودًا يشبه التميمة. استبدله بخط "Feather Bold" أو "Nunito Black" بالوزن المناسب. تباعد الأحرف: -0.0200em
- duolingo-sans — الاستبدال: Inter · الخطوط العريضة 500 · الفقرات الرئيسية وروابط التنقل بحجم 17 بكسل/500 بكسل - خط هندسي بدون زوائد يظل مقروءًا، مما يسمح لوزن السطر البالغ 700 بكسل بتسليط الضوء على النقاط المهمة. استبدله بـ 'DIN Next' أو 'Inter' أو 'Nunito Sans'.
- duolingo-sans — الاستبدال: Inter · الخطوط العريضة 700 · تم استخدام جميع قيم الوزن 700: الأحرف الكبيرة في عناوين التنقل 15 بكسل (0.0530em)، والعناوين الفرعية 19 بكسل و32 بكسل، وتأكيد الروابط 13 بكسل. نفس خط النص الرئيسي - الفرق المرئي يكمن في الوزن، وليس في نوع الخط. تباعد الأحرف: 0.0530em للأحرف الكبيرة في عناوين التنقل.
الفترات والشكل
| غاية | معنى |
|---|---|
| كثافة | كثيف |
| الخطوة الأساسية | 12px |
| نصف قطر الزر | 12px |
| نصف قطر البطاقة | 12px |
| الظلال | لا - حدود بدلاً من الظلال |
| بين الأقسام | 80-120px |
| عرض الصفحة | 1200px |
سيقوم الذكاء الاصطناعي ببناء موقعك الإلكتروني بأسلوب Duolingo وتعبئته.
- املأ حسابك بالمنتجات والمنشورات عبر الرابط - Instagram ، TikTok ، Facebook.
- انقل المحتوى من موقعك القديم - ما عليك سوى تحديد العنوان.
- تصميم عصري على أفضل محرك: React ( Next.js) مع عرض الخادم وتحسين محركات البحث بشكل جاهز للاستخدام.
- تحسين محركات البحث المؤتمت بالكامل لنتائج البحث وتوصيات الشبكة العصبية.
أنماط مشابهة
- Family — صفحة من حكاية خرافية على ورق بردي كريمي اللون
- Say Briefly — دفتر رسم لوكالة إبداعية على ورق كريمي
- Flying Papers — اعتراف في رسوم متحركة صباح يوم السبت
- Portrait — جدار من الذكريات، مُلتقطة بصور بولارويد على ورق كريمي اللون. ألبوم صور كريمي اللون زاهي، حيث يُستخدم الحبر الأزرق الداكن كنص وحيد، وخطوط هيكلية وحيدة، ولون إطار وحيد - مع قوس قزح مرسوم يدويًا يظهر مرة واحدة فقط، على زر "تسجيل" وعلى كلمة "إلى الأبد" المكتوبة بخط مائل، ولن يظهر مرة أخرى.
- Karl — مجسم ثلاثي الأبعاد على شكل كتاب منبثق في يوم مشمس
- Navigate — مجموعة كبيرة من الملصقات مثبتة على لوحة: خط كبير غريب، جميعها على شكل ألواح وخمسة رموز متعددة الألوان، تتكرر مثل الشعار.
- Monte — صباح على الساحل بلون صدئ
- MotherDuck — تم ترميز الجهاز باستخدام أقلام رصاص ملونة على ورق كريمي اللون.
- Wise Design — كشك سوق مضاء بالنيون في شارع عالمي - لافتة خضراء زاهية تصرخ عبر السوق المزدحم، بينما تظهر خلفها واجهة مستخدم منتج مصقولة بشكل خفي.
- Hatch — تصميم مرسوم يدويًا على طراز النشر السري، ممزوج بأوعية حلوى بألوان الباستيل. لوحة ورقية كريمية اللون مزينة بلمسات من النعناع، ونقاط من قصاصات الورق الملونة، وعبارات تحفيزية على شكل حبوب، حيث يوحي خط كبير وجريء بروح المرح، وشعار أزرق يومض في الزاوية.
- Superr — دفتر مدرسي دافئ في ضوء الظهيرة الناعم. صفحة بلون كريمي، قلم تحديد برتقالي بدون غطاء، ومجموعة من ملصقات الأسماء المغلفة بطبقة واقية تنتظر أن تُنزع.
- Mews — مركز تحكم الضيافة عند الفجر، غارق باللون الوردي. مساحة عمل بيضاء الجدران مضاءة بأشعة الشمس، حيث تحدد الكتابة السوداء الجريئة والبطاقات الكريمية الدافئة وزر إجراء واحد باللون الوردي الفاقع كل شاشة - ثقة مرحة بدلاً من ضبط النفس المؤسسي.