
Duolingo
اڇي ڪاغذ تي چنچل ڪلاس جو ماسڪوٽ
ڊوئلنگو جو انٽرفيس ٻارن جي تصويري ڪتاب وانگر ٺهيل آهي: هڪ اڇو ڪاغذ جو ڪينواس، ٿلهو، گول فونٽ، ۽ هڪ واحد، امير سائو رنگ جيڪو فوري طور تي "صحيح جواب" کي ظاهر ڪري ٿو. مکيه متن هڪ آرامده وچ-گرين ٽون آهي، جيڪو سائي ۽ ان جي تلفظ نيرو کي سڀ جذباتي ڪم ڪرڻ جي اجازت ڏئي ٿو - ترقي ۽ عنوانن لاءِ سائو، ڪلڪ ڪرڻ جي قابل لنڪس ۽ اضافي عملن لاءِ نيرو. اجزاء گولين يا ٿلهي، گول ڪنڊن وانگر ٺهيل آهن جن ۾ ٿلهي ڪاري يا رنگين سرحدون آهن، هر بٽڻ کي فليٽ UI ڪنٽرول جي ڀيٽ ۾ صفحي تي لڳل اسٽيڪر وانگر وڌيڪ محسوس ٿئي ٿو.
سيڪشن صفحي جي پوري ويڪر تي قبضو ڪن ٿا ۽ هڪ ڪالم ۾ عمودي طور تي ترتيب ڏنل آهن، هر هڪ تقريباً 800 پکسلز اوچو آهي. وڌ ۾ وڌ مواد جي ويڪر تقريبن 1 پکسل سينٽرڊ آهي. کاٻي پاسي ٽيڪسٽ ۽ ساڄي پاسي تصويرون متبادل، ڪافي عمودي جڳهه فراهم ڪن ٿيون (سيڪشنن جي وچ ۾ 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 · سيڪشن هيڊنگ، جهڙوڪ "مفت. مزيدار. اثرائتو" ۽ "ڊولنگو انگلش ٽيسٽ،" هڪ ڪسٽم گول فونٽ استعمال ڪندي ڏيکاريا ويا آهن، جيڪو برانڊ کي ان جو چنچل، دوستانه، ماسڪوٽ جهڙو انداز ڏئي ٿو. مناسب وزن ۾ "فيدر بولڊ" يا "نونيٽو بليڪ" سان تبديل ڪريو. اکر جي فاصلي: -0.0200em
- duolingo-sans — متبادل: Inter · خاڪا 500 · مکيه پيراگراف ۽ نيويگيشن لنڪس 17px/500 تي - هڪ جاميٽري سينز-سيريف فونٽ جيڪو پڙهڻ لائق رهي ٿو، 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 |
AI توهان جي ويب سائيٽ Duolingo انداز ۾ ٺاهيندو ۽ ان کي ڀريندو.
- لنڪ ذريعي پراڊڪٽس ۽ پوسٽن سان ڀريو - Instagram ، TikTok ، Facebook.
- پنهنجي پراڻي سائيٽ تان مواد منتقل ڪريو - صرف پتو بيان ڪريو.
- بهترين انجن تي جديد ڊيزائن: سرور رينڊرنگ ۽ ايس اي او آپٽمائيزيشن سان React ( Next.js).
- ڳولا جي نتيجن ۽ نيورل نيٽ ورڪ سفارشن لاءِ مڪمل طور تي خودڪار SEO اصلاح.
هڪجهڙا انداز
- Family — ڪريم پارچمينٽ تي هڪ پري جي ڪهاڻي مان هڪ اسپريڊ
- Say Briefly — ڪريم پيپر تي تخليقي ايجنسي اسڪيچ بڪ
- Flying Papers — ڇنڇر جي صبح جو ڪارٽون تي اعتراف
- Portrait — يادن جي هڪ ڀت، پولارائڊس ۾ ڪريم رنگ جي ڪاغذ تي قبضو ڪيل. هڪ روشن، ڪريم رنگ جي اسڪريپ بڪ جتي ڳاڙهي نيري مس واحد متن، واحد ساخت جون لائينون، ۽ واحد فريم رنگ طور ڪم ڪري ٿي - هڪ هٿ سان ٺهيل قوس قزح سان جيڪا هڪ ڀيرو ظاهر ٿئي ٿي، "رجسٽر" بٽڻ تي ۽ ترڪي لفظ "هميشه لاءِ" تي، ۽ ڪڏهن به ٻيهر نه.
- Karl — هڪ سج واري ڏينهن تي هڪ 3D پاپ اپ ڪتابي انداز جو ڊائوراما
- Navigate — بورڊ سان ڳنڍيل اسٽيڪرز جو هڪ وڏو سيٽ: وڏو عجيب فونٽ، سڀ ٽيبليٽ جي صورت ۾ ۽ پنج گھڻن رنگن وارا آئڪن، هڪ لوگو وانگر ورجائي رهيا آهن.
- Monte — سامونڊي ڪناري تي صبح جو زنگ آلود رنگ سان
- MotherDuck — ڪريم پيپر تي رنگين پينسلن سان ڪوڊ ٿيل ٽرمينل
- Wise Design — هڪ عالمي گهٽي تي هڪ نيون مارڪيٽ جو اسٽال - هڪ چمڪندڙ سائي نشان ڀريل مارڪيٽ مان چيخ رهيو آهي، جڏهن ته ان جي پويان، هڪ پالش ٿيل پراڊڪٽ يوزر انٽرفيس خفيه طور تي ظاهر ٿئي ٿو.
- Hatch — هڪ هٿ سان ٺهيل، سميزدات طرز جو ڊيزائن جيڪو پيسٽل ڪينڊي پيالن سان ملايو ويو آهي. هڪ ڪريمي پيپر ڪينواس جيڪو پوديني جي تلفظ، ڪنفيٽي ڊٽس، ۽ گولي جي شڪل واري ڪال ٽو ايڪشن سان سينگاريل آهي، جتي هڪ وڏو، بولڊ سيريف فونٽ تفريح جو اشارو ڏئي ٿو، ۽ هڪ نيرو ماسڪوٽ ڪنڊ ۾ اک ڇنڀائي ٿو.
- Superr — منجهند جي نرم روشنيءَ ۾ هڪ گرم اسڪول نوٽ بڪ. هڪ ڪريم رنگ جو صفحو، ٽوپي کان سواءِ نارنگي مارڪر، ۽ ليمينيٽ ٿيل نالي جي اسٽيڪرن جو هڪ ڍير جيڪو ڇلڻ جي انتظار ۾ آهي.
- Mews — صبح جو هڪ مهمان نوازي ڪنٽرول سينٽر، گلابي رنگ ۾ لت پت. هڪ اڇي ڀتين وارو، سج جي روشني وارو ڪم ڪندڙ هنڌ جتي بولڊ ڪارو قسم، گرم ڪريم ڪارڊ، ۽ هڪ گرم گلابي ايڪشن بٽڻ هر اسڪرين کي بيان ڪري ٿو - ڪارپوريٽ پابندي جي بدران هڪ چنچل اعتماد.