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