Duolingo
Цагаан цаасан дээрх тоглоомтой ангийн сахиус
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 · "Үнэгүй. Хөгжилтэй. Үр дүнтэй" болон "Duolingo Англи хэлний шалгалт" зэрэг хэсгийн гарчгийг тусгайлан бөөрөнхийлсөн фонт ашиглан харуулсан нь брэндийг тоглоомтой, нөхөрсөг, сахиус маягийн хэв маягтай болгодог. Тохирох жинтэй "Өдтэй тод" эсвэл "Nunito Black" гэж солино уу. Үсгийн зай: -0.0200em
- duolingo-sans — солих: Inter · тоймууд 500 · Үндсэн догол мөрүүд болон навигацийн холбоосууд нь 17px/500 хэмжээтэй бөгөөд геометрийн sans-serif фонт нь уншигдахуйц хэвээр байх бөгөөд 700 мөрийн жин нь чухал цэгүүдийг тодруулах боломжийг олгоно. 'DIN Next', 'Inter' эсвэл 'Nunito Sans' гэж солино уу.
- duolingo-sans — солих: Inter · тоймууд 700 · Бүх weight-700 утгыг ашигласан: навигацийн шошгон дээрх том үсгүүд нь 15px (ls 0.0530em), дэд гарчгууд нь 19px ба 32px, холбоосын онцлох хэмжээ нь 13px. Үндсэн тексттэй ижил фонт - харагдах ялгаа нь фонтын өөрчлөлт биш харин жинд байна. Үсгийн зай: навигацийн шошгон дээрх том үсгийн хувьд 0.0530em.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | нягт |
| Үндсэн алхам | 12px |
| Товчлуурын радиус | 12px |
| Картын радиус | 12px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 80-120px |
| Хуудасны өргөн | 1200px |
Хиймэл оюун ухаан таны вэбсайтыг Duolingo хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- Family — Цөцгийтэй илгэн цаасан дээрх үлгэрийн хэсэг
- Say Briefly — Цөцгий цаасан дээрх бүтээлч агентлагийн ноорог ном
- Flying Papers — Бямба гарагийн өглөөний хүүхэлдэйн киноны тухай наманчлал
- Portrait — Цөцгий өнгийн цаасан дээр Полароид зургаар буулгасан дурсамжийн хана. Хар хөх бэх нь цорын ганц текст, цорын ганц бүтцийн шугам, цорын ганц хүрээний өнгө болж үйлчилдэг тод, цөцгий өнгийн дэвтэр. "Бүртгүүлэх" товчлуур болон налуу үсгээр бичсэн "үүрд" гэсэн үгэн дээр нэг удаа гарч ирэх ганц гараар зурсан солонготой бөгөөд дахин хэзээ ч гарч ирэхгүй.
- Karl — Нартай өдөр 3D поп-ап номын хэв маягийн диорама
- Navigate — Самбарт наасан олон тооны наалт: том, аймшигтай фонт, бүгд шахмал хэлбэртэй, лого шиг давтагдсан таван өнгийн дүрс
- Monte — Зэвэрсэн өнгөөр далайн эрэг дээрх өглөө
- MotherDuck — Цөцгий цаасан дээр өнгөт харандаагаар кодлогдсон терминал
- Wise Design — Дэлхийн гудамжинд байрлах неон захын лангуу - хүн ихтэй зах зээлээр тод ногоон тэмдэг хашгирч байхад ард нь өнгөлсөн бүтээгдэхүүний хэрэглэгчийн интерфэйс нууцлаг байдлаар харагдаж байна.
- Hatch — Гараар зурсан, самиздат маягийн загварыг пастел чихрийн аягатай хослуулсан. Гаа өнгийн чимэглэл, конфетти цэгүүд, эм хэлбэртэй үйлдэл хийхийг уриалсан хээтэй цөцгийтэй цаасан даавуун дээр том, тод сериф фонт нь хөгжилтэй байдлыг илтгэж, буланд цэнхэр сахиус нүд ирмэнэ.
- Superr — Үдээс хойш зөөлөн гэрэлд дулаахан сургуулийн дэвтэр. Цөцгий өнгийн хуудас, малгайгүй улбар шар өнгийн маркер, хуулахыг хүлээж буй ламинатлагдсан нэрийн наалтны овоолго.
- Mews — Үүрийн үүрээр ягаан өнгөөр нэвт норсон зочломтгой байдлын хяналтын төв. Цагаан ханатай, нарны гэрэлтэй ажлын талбар нь тод хар үсэг, бүлээн кремэн ил захидал, ганц тод ягаан товчлуур нь дэлгэц бүрийг тодорхойлдог бөгөөд энэ нь корпорацийн хязгаарлалтаас илүүтэй тоглоомтой өөртөө итгэх итгэлийг илэрхийлдэг.