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 да 64px · 7 прыступак
- feather — замена: Inter · напісання 700 · Загалоўкі раздзелаў, напрыклад, «бясплатна. весела. эфектыўна» і «тэст па англійскай мове Duolingo», адлюстроўваюцца з дапамогай спецыяльнага закругленага шрыфта, які надае брэнду яго цацачны, прыязны, падобны на талісман стыль. Заменіце на "Feather Bold" ці "Nunito Black" адпаведнай таўшчыні. Міжлітарны інтэрвал: -0.0200em
- duolingo-sans — замена: Inter · напісання 500 · Асноўныя абзацы і навігацыйныя спасылкі на 17px/500 - геаметрычны шрыфт без засечак, які застаецца чытэльным, дазваляючы шрыфту з таўшчынёй лініі 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.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- Family — Разварот з казкі на крэмавым пергаменце
- Say Briefly — Скетчбук крэатыўнага агенцтва на крэмавай паперы
- Flying Papers — Споведзь у суботнім ранішнім мультфільме
- Portrait — Сцяна ўспамінаў, захаваных на палароідных здымках, на крэмавай паперы. Яркі, крэмавы альбом для выразак, дзе цёмна-сінія чарнілы служаць адзіным тэкстам, адзінымі структурнымі лініямі і адзіным колерам рамкі — з адзінай намаляванай ад рукі вясёлкай, якая з'яўляецца адзін раз, на кнопцы «Зарэгістравацца» і на вылучаным курсівам слове «назаўжды», і больш ніколі
- Karl — Аб'ёмная дыярама ў стылі кніжкі-раскладанкі сонечным днём
- Navigate — Вялікі набор стыкераў, прымацаваны да дошкі: буйны гратэскавы шрыфт, усё ў выглядзе таблетак і пяць рознакаляровых абразкоў, якія паўтараюцца як лагатып
- Monte — Раніца на ўзбярэжжа з іржавым адценнем
- MotherDuck — Тэрмінал, закадаваны каляровымі алоўкамі, на крэмавай паперы
- Wise Design — Неонавы рынкавы прылавак на глабальнай вуліцы - ярка-салатавая шыльда, якая крычыць скрозь перапоўнены рынак, а за ёй неўзаметку з'яўляецца вывастраны карыстацкі інтэрфейс прадукта
- Hatch — Малюнак ад рукі ў стылі самвыду, змяшаны з пастэльнымі цукерніцамі. Палатно з крэмавай паперы, упрыгожанае мятнымі акцэнтамі, кропкамі-канфеці і заклікамі да дзеяння ў форме таблетак, дзе буйны, смелы шрыфт з засечкамі намякае на весялосць, а сіні талісман падміргвае ў куце.
- Superr — Цёплы школьны нататнік у мяккім пасляпаўдзённым святле. Крэмавая старонка, аранжавы маркер без каўпачка і чарка заламінаваных налепак з імёнамі, якія чакаюць адклейвання
- Mews — Цэнтр кіравання гасціннасцю на досвітку ў ружовых танах. Беласценная, залітая сонцам працоўная прастора, дзе смелы чорны шрыфт, цёплыя крэмавыя карткі і адзіная ярка-ружовая кнопка дзеяння вызначаюць кожны экран - гуллівая ўпэўненасць, а не стрыманасць прадпрыемства.