Duolingo
Ак кәгазьдә уйнап торган сыйныф талисманы
Duolingo интерфейсы балалар рәсемле китабы кебек эшләнгән: ак кәгазьдән ясалган холст, тулы, түгәрәкләнгән шрифт һәм "дөрес җавап"ны шунда ук искә төшерә торган бердәнбер, бай яшел төс. Төп текст тынычландыручы урта соры төсмерләрдән тора, яшел һәм аның акценты булган зәңгәр төс барлык эмоциональ эшне башкарырга мөмкинлек бирә - яшел төс алга китеш һәм башлыклар өчен, зәңгәр төс басу өчен сылтамалар һәм өстәмә гамәлләр өчен. Компонентлар калын кара яки төсле чикләре булган капчыклар яки калын, түгәрәкләнгән почмаклар формасында, һәр төймә яссы интерфейс контроленә караганда биткә ябыштырылган стикер кебек тоела.
Бүлекләр битнең тулы киңлеген били һәм вертикаль рәвештә бер баганага урнаштырылган, һәрберсе якынча 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.0200 ем
- duolingo-sans — алыштыру: Inter · контурлар 500 · Төп абзацлар һәм навигация сылтамалары 17px/500 зурлыгында — геометрик sans-serif шрифты, ул укыла торган булып кала, 700 юл калынлыгы мөһим пунктларны билгеләргә мөмкинлек бирә. 'DIN Next', 'Inter' яки 'Nunito Sans' белән алыштырыгыз.
- duolingo-sans — алыштыру: Inter · контурлар 700 · Weight-700 өчен барлык кыйммәтләр дә кулланыла: навигация ярлыкларында баш хәрефләр 15 пиксель (ls 0.0530em), аскы исемнәр 19 пиксель һәм 32 пиксель, ә сылтама басымы 13 пиксель. Төп текст белән бер үк шрифт - визуаль аерма шрифт үзгәрешендә түгел, ә калынлыкта. Хәрефләр арасы: навигация ярлыкларында баш хәрефләр өчен 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 — Таң ату белән кунакчыллык үзәге, алсу төскә чумган. Ак диварлы, кояш нурлары белән яктыртылган эш урыны, анда һәр экранда калын кара шрифт, җылы каймак төсендәге открыткалар һәм бер генә кайнар алсу төймә - корпоратив тыйнаклык түгел, ә шаян ышаныч чагыла.