Wise
Глыбокі мох з вапнавай напругай. Вапнавыя іскры на амаль чорнай лясной глебе, а масіўныя, вуглаватыя фігуры сігналізуюць аб кожным руху
Шрыфт Wise кажа ўпэўненым, злёгку гучным голасам: глыбокі лясны зялёны (#163300) займае большую частку паверхні - тэкст, рух, цёмныя часткі, значкі, - у той час як адзіны ярка-салатавы (#9fe870) служыць функцыянальным знакам прыпынку на закліках да дзеяння, актыўных. Шрыфт амаль агрэсіўны: Wise Sans з таўшчынёй лініі 900, шчыльна размешчаны, выдзелены буйнымі літарамі (100px +) на галоўным экране. Астатняя частка сістэмы застаецца стрыманай на амаль белым палатне з мяккімі шэрымі паверхнямі (#e8ebe6). Кампаненты па змаўчанні маюць форму таблетак - кнопкі, сегменты навігацыі, мініяцюры сцяжкоў, маскі малюнкаў - з невялікімі радыусамі (10px), зарэзерваванымі для картак і палёў уводу. Каляровыя градыенты сустракаюцца рэдка; замест гэтага спалучэнне саламандры і ляснога колеру плаўна мяняецца, калі раздзелы становяцца цёмнымі, ствараючы рытм без залішняга дэкору.
Кантэйнер з максімальнай шырынёй 1200px, цэнтраваны па цэнтры, з верхняй і цёмнай секцыямі, якія займаюць усю шырыню старонкі. Шаблон верхняй часткі: масіўны загаловак, цэнтраваны па цэнтры, на белым фоне, з вялікай ілюстрацыяй (глобус), якая выступае за ніжні край вобласці прагляду. Рытм секцый: чаргаванне белага → светла-зялёнай паласы → цёмнай секцыі колеру «лясныя чарнілы», якое стварае натуральны каляровы рытм. Размяшчэнне кантэнту пераважна цэнтраванае: у верхняй частцы — блокі тэксту і выявы ў 2 слупкі, або радкі з асноўнымі элементамі ў 3 слупках у дапаможных раздзелах. Для адлюстравання спісу краін выкарыстоўваецца сетка з 5 слупкоў са сцягамі. Навігацыя ўяўляе сабой адзіную фіксаваную верхнюю панэль з сегментаваць перамыкачом. QR-код застаецца нерухомым у правым ніжнім куце пры ўсіх палажэннях пракруткі.
Ілюстрацыі ў стылі 3D, якія паказваюць зямны шар з залатымі манетамі, ствараюць візуальны свет брэнда - тактыльны, злёгку сюррэалістычны, выкананы з выкарыстаннем мяккіх градыентаў і цёплага святла. Фатаграфіі мінімалістычныя; калі выкарыстоўваюцца, то ў высокай танальнасці і ў стылі casual. Флагі краін прадстаўлены ў выглядзе круглых мініяцюр у пяцікалонкавай сетцы - адзіная "іканачная" сістэма - гэта нацыянальная ідэнтычнасць. Ніякіх абстрактных графічных элементаў, ніякіх стандартных шаблёнаў. Глобус і манеты з'яўляюцца паўтаральным матывам талісмана, які сігналізуе аб глабальным ахопе з дапамогай аднаго цёплага, аптымістычнага аб'екта, а не мантажу.
Палітра
Брэнд
- Forest Ink
#163300— Дамінуючы цёмны стыль брэнда - тэкст навігацыі, цёмны фон частак, асноўны тэкст на светлых паверхнях, контуры абразкоў, запоўненыя навігацыйныя элементы. Гэта і ёсць сіла брэнда: усюды, дзе патрабуецца важкасць ці аўтарытэт, вы выбіраеце Forest Ink. - Lime Voltage
#9fe870— Зялёны колер выкарыстоўваецца ў якасці дапаможнага акцэнту для дэкаратыўных дэталяў і акцэнтаванні ўвагі на нячастых запытах. Не варта вылучаць яго як асноўны колер закліку да дзеяння. - Spruce
#054d28— Другасны цёмна-зялёны колер выкарыстоўваецца для паверхняў карт, дапаможнай іканаграфіі і для надання глыбіні тону цёмным участкам, дзе колер Forest Ink занадта насычаны.
Нейтральныя
- Linen Mist
#e2f6d5— Светла-зялёнае адценне для мяккіх блікаў на паверхнях, таніраваных фонавым картак, станаў навядзення курсора на навігацыйную панэль. Лёгкае адценне фірмовага зялёнага для някідкіх элементаў афармлення кантэйнераў. - Signal Blue
#0b4c72— Сіні колер служыць дадатковым акцэнтам для дэкаратыўных дэталяў і падкрэсліванні нізкіх частот. - Alarm Red
#cb272f— Чырвоны колер служыць дапаможным акцэнтам для дэкаратыўных дэталяў і акцэнтаванні ўвагі на нячастых колерах. Выкарыстоўвайце яго як дапаможны акцэнт, а не як колер статусу. - Charcoal
#454745— Асноўны тэкст, асноўны тэкст, насычаны карыстацкі інтэрфейс - злёгку цёплы чорны колер, які адчуваецца мякчэй, чым чысты #000 на белым фоне. - Obsidian
#0e0f0c— Загалоўкі, высокакантрасныя загалоўкі, чыста чорныя элементы ў навігацыі і галоўным меню. Чорны колер са злёгку зялёным адценнем, а не нейтральна-шэры. - Pebble
#868685— Прыглушаны другарадны тэкст, тэкст-запаўняльнік, абводка значкоў, межы палёў уводу. Сярэдне-шэры колер, які адыходзіць удалячынь.
Друкарня
ад 12 да 105px · 10 прыступак
- Inter — замена: Inter (native Google Fonts) · напісання 400,500,600,700 · Асноўны тэкст, карыстацкі інтэрфейс, подпісы і падзагалоўкі па ўсім прадукце. Шрыфт таўшчынёй 700 выкарыстоўваецца для загалоўкаў сярэдняга ўзроўню (36-45px), 500-600 - для падзагалоўкаў і подпісаў, 400 - для асноўнага тэксту і подпісаў. Шрыфт Inter выконвае ціхую працу, а Wise Sans – кідкую.
- Wise Sans — замена: Inter Black (900) with -0.04em tracking · напісання 900 · Загалоўкі для адлюстравання - візітная картка брэнда. Звышшчыльны шрыфт 900 з крокам 89-105px і шчыльнай міжлітарнай адлегласцю ператварае кожны загаловак у аб'яву буйнымі літарамі. Выкарыстоўваецца эканомна: у якасці асноўнага тэксту, для загалоўкаў раздзелаў, для ключавых момантаў кампаніі.
- monospace — замена: Inter · напісання 400 · моноширинный - выяўлены ў вынятых дадзеных, але не апісаны ІІ.
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | шчыльная |
| Базавы крок | 8-12px |
| Радыус кнопак | 9999px |
| Радыус картак | 10px |
| Цені | не - межы замест ценяў |
| Паміж секцыямі | 64-80px |
| Шырыня старонкі | 1200px |
ІІ збярэ ваш сайт у стылі Wise і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- Integrated Biosciences — біялюмінесцэнтная лабараторыя апоўначы
- Huly — Паўночнае ззянне ў паўночнай абсерваторыі - галоўны герой уяўляе сабой вертыкальны прамень фіялетавага колеру, які пераходзіць у каралавы, і кожны ціхі ўчастак ніжэй за яго запазычае тую ж двухколерную гісторыю, расказаную ў больш прыглушаным тоне.
- Dia Browser — Галерэя ў цёмным пакоі спалучаецца з рэдакцыйнай газетай. Сцэна ў апраметнай цемры адкрывае від на заліты сонцам разварот газеты, дзе кожны раздзел пазначаны адным загалоўкам з засечкамі.
- Mintlify — Воблачна сад над шкляным сталом. Намаляванае ад рукі неба і дакументальны прадукт знаходзяцца ў адной рамцы - адзінае месца, дзе колер і канцэпцыя сутыкаюцца, перш чым старонка пагрузіцца ў манаскую беласць.
- Gleap — Працоўная прастора, аформленая ў цёплых крэмавых танах з графітавымі акцэнтамі - студыя, дзе матавыя чорныя чарнільныя кропкі нібы параць над ільняной архітэктурай.
- ClickUp — Эфектыўная панэль кіравання на белым мармуры. Старонка ўяўляе сабою брашуру прадукта — прылады падвышэння прадукцыйнасці, таму візуальная мова запазычаная з самога прадукта: шчыльныя спісы, індыкатары статуту, групы аватараў і адважныя друкарскія заявы, якія выглядаюць як тэхнічная спецыфікацыя прадукта ў выставачным маштабе
- monday — Белая майстэрня з пастэльнымі стыкерамі
- Portal — Рэдакцыйны артыкул Twilight Serif - прэміяльны разварот у незалежным часопісе, аформлены ў стылі iOS
- Slack — Сцэна баклажанавага колеру з белымі пражэктарамі. Глыбокае калючае адценне дамінуе ў цёмных участках, а амаль белае палатно дазваляе буйным авангардным загалоўкам вольна «дыхаць»
- Base44 — Нататнік, заліты сонечным святлом, з лаймавым маркерам
- Letters — Ранішні прыём у клініцы пад адкрытым небам - стэрыльна-белы стол пад мяккай блакітнай столлю, усеяны інструментамі хірургічнага сіняга колеру
- Duolingo — Зялёная дзіцячая пляцоўка з тоўстымі лініямі разметкі