Subframe
Графічны чарцёж на цёплым пергаменце. Дызайнерская папера, дзе кожны рыска - гэта або графіт, або гумка, ніколі не фарба - глыбіня дасягаецца за кошт таўшчыні ліній і рэдкіх засечак
Subframe — гэта манахромная працоўная паверхня дызайнера: цёплае крэмавае палатно, графітава-чорнае чарніла і поўная адсутнасць храматычных акцэнтаў. Увесь інтэрфейс успрымаецца як адзіны матэрыял - папера, аловак і цень - з адным смелым друкарскім прыёмам: вытанчаны шрыфт з засечкамі (Instrument Serif) на фоне сістэматычнага шрыфта без засечак (Inter), які надае загалоўкам рэдакцыйную сур'ёзнасць. Паверхні плоскія і апраўленыя, а не прыўзнятыя; глыбіня дасягаецца за кошт тонкіх падзельнікаў у #e5e7eb і ўстаўных блікаў на цёмных элементах кіравання, а не ценяў. Шчыльнасць шчодрая: шырокі вертыкальны рытм (48-64px прамежкаў паміж секцыямі), цэнтраваныя макеты максімальнай шырыні і вялікая прастора вакол тэксту. Адзіны колер - гэта кантраст паміж амаль белым і амаль чорным, што робіць цёмную кнопку самым яркім элементам на кожнай старонцы, а паласа лагатыпаў партнёрскіх брэндаў у шэрых танах - адзіным дэкаратыўным візуальным элементам.
Цэнтраваныя макеты максімальнай шырыні (1200px) з шчодрым вертыкальным рытмам. Галоўны элемент уяўляе сабой адзіны цэнтраваны блок: цёмны сегментаваць элемент кіравання ў верхняй частцы, буйны загаловак Inter, падзагаловак у адзін радок і дзве кнопкі побач (запоўненыя + напаўпразрыстыя) - без бакавога малюнка, без падзелу макета. Пад галоўным элементам - цэнтраваная паласа лагатыпа ў адценнях шэрага. Кожная наступная частка варта таму ж шаблону: блок загалоўка і падзагалоўка, выраўнаваны па левым краі, затым рамка дэманстрацыі прадукта ва ўсю шырыню з прамежкамі 48–64px паміж часткамі. Навігацыя мінімальная: верхняя панэль з цэнтраванымі спасылкамі і дзеяннямі, выраўнаванымі па правым краі, без бакавой панэлі, без мега-меню. Старонка чытаецца зверху ўніз як серыя цэнтраваных сцвярджэнняў, кожнаму з якіх адведзена досыць месцы - макет больш падобны на рэдакцыйнае партфоліё, чым на насычаную старонку прадукта.
Візуальны шэраг мінімалістычны і функцыянальны. Сістэма выкарыстоўвае два візуальных рэжыму: (1) скрыншоты прадуктаў з рамкамі і макеты карыстацкага інтэрфейсу, зняволеныя ў рамкі радыусам 24px - на іх адлюстроўваюцца рэальныя кампаненты інтэрфейсу (табліцы, кнопкі, формы), адмаляваныя ў той жа манахромнай палітры, дзякуючы чаму скрыншак у скрыню; (2) адзіная паласа лагатыпаў партнёраў у адценнях шэрага ў якасці сацыяльнага доказы, адмаляваная плоска, без колеру і кантэйнераў. Тут няма лайфстайл-фатаграфій, абстрактных градыентаў, 3D-рэндэраў. Адзіны ілюстрацыйны элемент – гэта цёмная «плітка» прадукта, размешчаная па цэнтры на цёплым шэрым фоне з абразком брэнда – яна ўспрымаецца як дэманстрацыя прадукта, а не як упрыгожванне. Усе выявы займаюць тэкставую вёрстку, дзе візуальная вага нясе тэкст.
Палітра
Нейтральныя
- Page Canvas
#fafafa— Фон старонкі, паштоўка на палатне, светлы тэкст на цёмных паверхнях - цёплы белы колер, які ляжыць у аснове ўсёй манахромнай сістэмы. - Hairline Border
#e5e7eb— Раздзяляльнікі, межы картак, рамкі малюнкаў, контуры значкоў - найболей часта выкарыстоўваны тып абводкі ў сістэме, вызначае прасторавую структуру. - Card Surface
#ededed— Прыўзняты фон для картак, дадатковая паверхня - размяшчаецца на прыступку вышэй палатна, ствараючы групоўку без ценяў. - Divider Mid
#dadada— Раздзяляльнікі сярэдніх тонаў і пераходы паміж секцыямі - Graphite
#242424— Высокакантраснае нейтральнае заліванне для асноўных кнопак на светлых паверхнях. - Ink Black
#171717— Асноўны тэкст, загалоўкі, контуры абразкоў – крыху страмчэй, чым Graphite, выкарыстоўваецца для друкаркі, а не для паверхняў.
Друкарня
ад 12 да 128px · 7 прыступак
- Inter — замена: Inter (Google Fonts) · напісання 500, 600, 700 · Сістэмны інтэрфейс без засечак - рух, асноўны тэкст, кнопкі, падзагалоўкі, загалоўкі раздзелаў. Вага 500 для асноўнага тэксту і элементаў кіравання, 600 для падзагалоўкаў і акцэнту навігацыі, 700 для загалоўкаў раздзелаў. Моцная адмоўная міжлітарная адлегласць сціскае геаметрычныя формы пры любым памеры, надаючы інтэрфейсу сціснуты, тэхнічны выгляд.
- Instrument Serif — замена: Playfair Display · напісання 400 · Шрыфт з засечкамі, прызначаны толькі для загалоўкаў і рэдакцыйных матэрыялаў. Таўшчыня 400 з міжлітарным інтэрвалам -0.025em стварае элегантнасць, які імкнецца да курсіва, якая кантрастуе з індустрыяльнай геаметрыяй Inter - фірмовым прыёмам: адно слова або фраза з засечкамі ўнутры старонкі без засечак, якое выступае ў якасці візуальнага знака прыпынку, а не.
- Fragment Mono — замена: JetBrains Mono · напісання 400 · Акцэнтны мона для ўбудаваных элементаў, падобных на код, пазнак тэгаў і тэхнічных вынасак. Выкарыстоўваецца эканомна – з'яўляецца ў спісах функцый і ўбудаваных анатацыях, дзе інструмент праектавання хоча пазначыць «гэта машынная выснова».
Інтэрвалы і форма
| Прызначэнне | Значэнне |
|---|---|
| Шчыльнасць | сярэдняя |
| Базавы крок | 8px |
| Радыус кнопак | 16px |
| Радыус картак | 24px |
| Цені | не - межы замест ценяў |
| Паміж секцыямі | 64px |
| Шырыня старонкі | 1200px |
ІІ збярэ ваш сайт у стылі Subframe і напоўніць яго
- Напоўніць таварамі і пастамі па спасылцы — Instagram, TikTok, Facebook.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- monopo saigon — Вадкае пераліўнае ззянне за рэдакцыйнай цішынёй - манахромная рэдакцыйная галерэя, парылая на расплаўленым святле
- Hyer Aviation — Змрок у кабіне пілота над пергаментам. Бледнае світальнае неба сустракаецца з лагатыпам з засечкамі памерам з фюзеляж, а адзін цёплы гліняны акцэнт парушае манахромную стрыманасць.
- OFF+BRAND. — Пераліўная сфера на цёплым пергаменце
- Seed — жывы арганізм пад лабараторным шклом
- Eindhoven Design District — Рэдакцыйны бруталізм на белай паперы - маніфест муніцыпальнага дызайну, выкананы буйным шрыфтам, з мінімальнай колькасцю фатаграфій і абсалютнай стрыманасцю
- Miranda — Класічны шырокафарматны шрыфт на светла-крэмавым фоне - рэдакцыйны артыкул газеты для лічбавай эпохі.
- Monocle — Якасная шырокафарматная газета на крэмавай паперы. Рэдакцыя, старанна падабраная па ўсіх параметрах, дзе кожная калонка заслугоўвае свайго месца, а на старонцы прысутнічае толькі адзін колер, які мае значэнне
- Agencja brandingowa — Рэдакцыйная галерэя ў белых танах з друкаркай, выкананай чорнымі чарніламі
- Websmith Studio — Ранішняе святло на крэмавай паперы
- Aspelin Reitan — Архітэктурны архіў пры свечках — старонка выглядае як партфоліё пабудаваных месцаў, прымацаванае да сцяны цёплага крэмавага колеру, з адным радком белага тэксту, які лунае над кожнай выявай ва ўсю шырыню старонкі
- Public — Манахромны рэдакцыйны артыкул на халодным мармуры - амаль манахромнае палатно, шрыфт з засечкамі таўшчынёй 300, адзін фіялетавы акцэнт, які выконвае ўсю каляровую працу
- Motto — Друкарскі маналіт на паперы - адзіны ўпэўнены голас, які заяўляе пра сябе на беласнежнай паперы.