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 — Центр управління гостинністю на світанку у рожевих тонах. Білостінний, залитий сонцем робочий простір, де сміливий чорний шрифт, теплі кремові картки та єдина яскраво-рожева кнопка дії визначають кожен екран — грайлива впевненість, а не стриманість підприємства