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 — 3D диорама в стил изскачаща книга в слънчев ден
- Navigate — Голям набор от стикери, прикрепени към дъска: голям гротескен шрифт, всички под формата на таблети и пет многоцветни икони, повтарящи се като лого
- Monte — Сутрин на брега с ръждив оттенък
- MotherDuck — Терминал, кодиран с цветни моливи върху кремава хартия
- Wise Design — Неонова пазарна сергия на глобална улица – яркозелена табела, крещяща през претъпкания пазар, докато зад нея дискретно се появява изпипан потребителски интерфейс на продукта.
- Hatch — Ръчно рисуван дизайн в стил самиздат, смесен с пастелни купички за бонбони. Кремообразно хартиено платно, украсено с ментови акценти, конфети и призиви за действие във формата на хапчета, където голям, удебелен шрифт със серифни букви загатва за забавление, а син талисман намига в ъгъла.
- Superr — Топла ученическа тетрадка в меката следобедна светлина. Кремава страница, оранжев маркер без капачка и купчина ламинирани стикери с имена, чакащи да бъдат отлепени.
- Mews — Контролен център за хотелиерство на разсъмване, облян в розово. Работно място с бели стени, осветено от слънце, където смел черен шрифт, топли кремави карти и един-единствен яркорозов бутон за действие дефинират всеки екран - игрива увереност, а не корпоративна сдържаност.