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 - геометриски sans-serif фонт кој останува читлив, дозволувајќи дебелината на редот од 700 да ги истакне важните точки. Заменете со „DIN Next“, „Inter“ или „Nunito Sans“.
- duolingo-sans — замена: Inter · контури 700 · Се користат сите вредности со тежина-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 — 3Д диорама во стилот на книга што се појавува во сончев ден
- Navigate — Голем сет налепници прикачени на табла: голем гротескен фонт, сите во форма на таблети и пет разнобојни икони, кои се повторуваат како лого
- Monte — Утро на брегот со 'рѓосана нијанса
- MotherDuck — Терминал кодиран со обоени моливи на крем хартија
- Wise Design — Неонски тезга на пазар на глобална улица - светло зелен знак што вреска низ преполниот пазар, додека зад него, дискретно се појавува дотеран кориснички интерфејс на производот.
- Hatch — Рачно нацртан дизајн во стилот на самиздат, измешан со пастелни чинии за бомбони. Кремасто хартиено платно украсено со акценти во боја на мента, точки од конфети и повици за акција во облик на апчиња, каде што голем, смел сериф фонт алудира на забава, а сина маскота намигнува во аголот.
- Superr — Топла училишна тетратка на меката попладневна светлина. Крем страница, портокалов маркер без капаче и куп пластирани налепници со имиња што чекаат да се излупат.
- Mews — Контролен центар за угостителство во зори, облеан во розова боја. Работен простор со бели ѕидови, осветлен од сонцето, каде што смели црни букви, картички во топла крем боја и едно копче за акција во боја на впечатлива розова боја го дефинираат секој екран - игрива самодоверба, а не корпоративна воздржаност.