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 англис тили боюнча тест" сыяктуу бөлүмдөрдүн аталыштары атайын тегеректелген шрифт менен көрсөтүлүп, брендге ойноок, достук, талисман сыяктуу стилди берет. Тиешелүү калыңдыктагы "Feather Bold" же "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 — Таң атканда кызгылт түскө боёлгон меймандостук борборунун көрүнүшү. Ак дубал менен капталган, күн нуру тийген жумуш орду, анда кара шрифт, жылуу каймак түстөгү открыткалар жана бир гана ачык кызгылт баскыч ар бир экранды аныктайт — корпоративдик чектөөнүн ордуна ойноок ишеним.