Subframe
Җылы пергаментта график рәсем. Дизайнер кәгазендә һәр сызык я графит, я бетергеч белән ясалган, беркайчан да буялмый - тирәнлек сызык калынлыгы һәм сирәк серифлар аша ирешелә.
Субрам - монохром дизайнерның эш урыны: җылы, каймак төсендәге холст, графит-кара төстәге буяу һәм хроматик акцентларның бөтенләй булмавы. Интерфейс тулысынча бер материал - кәгазь, карандаш һәм күләгә - буларак кабул ителә, бер кыю типографик бизәк белән: системалы sans-serif (Inter) белән чагыштырылган нечкә serif (Instrument Serif), башлыкларга редакциянең әһәмиятен бирә. Өслекләр күтәрелгән түгел, ә яссы һәм рамкаланган; тирәнлеккә #e5e7eb'тагы нечкә бүлгечләр һәм күләгәләр урынына караңгы контроль элементларында аскы өлешләр ярдәмендә ирешелә. Тыгызлык мул: киң вертикаль ритм (бүлекләр арасындагы аралар 48–64 пиксель), үзәкләштерелгән, тулы киңлекле макетлар һәм текст тирәсендәге киң ак бушлык. Бердәнбер төс - ак һәм кара төс арасындагы контраст, бу караңгы төймәне һәр биттә иң күзгә ташланган элемент итә, ә соры төстәге партнер бренд логотиплары полосасы - бердәнбер декоратив визуаль элемент.
Үзәкләштерелгән, тулы киңлектәге макетлар (1200 пиксель), киң вертикаль ритм белән. Төп элемент - бер үзәкләштерелгән блок: өске өлешендә караңгы, сегментланган контроль элемент, зур "Интер" исеме, бер юллы суб-башлык һәм ике янәшә төймә (тутырылган + үтә күренмәле) - ян рәсем юк, макет бүленеше юк. Төп элемент астында үзәкләштерелгән соры төстәге логотип полосасы урнашкан. Һәрбер аннан соңгы бүлек шул ук схема буенча бара: сул якка тигезләнгән исем һәм суб-башлык блогы, аннары бүлекләр арасында 48–64 пиксель озынлыктагы бушлык белән тулы киңлектәге продукт витрина рамкасы. Навигация минималь: үзәкләштерелгән сылтамалар һәм уң якка тигезләнгән гамәлләр белән өске панель, ян панель юк, мега-меню юк. Бит өстән аска үзәкләштерелгән белдерүләр сериясе буларак укыла, һәрберсенә җитәрлек урын бирелгән - макет тыгыз продукт битенә караганда редакция портфолиосына күбрәк охшаган.
Визуаль дизайн минималист һәм функциональ. Система ике визуаль режим куллана: (1) рамкаланган продукт скриншотлары һәм 24 пиксель радиуслы рамнарга кертелгән 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 мм хәреф аралыгы Inter сәнәгать геометриясенә каршы торган нәфис, курсив күренеш тудыра - имза техникасы: 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 — Кәгазьдәге типографик монолит – кар кебек ап-ак кәгазьдә үзен игълан итүче бердәм, ышанычлы тавыш