Framer
боштуктагы неон галереясы
Framer дээрлик толук караңгылык катары иштейт — галереянын ачылышында мазмун неон белгиси сыяктуу калкып турган кара полотно. GT Walsheim Medium форматында 0,8–1,1 сап аралыгы жана агрессивдүү терс тамга аралыгы (54 пикселде -0,04em) менен жайгаштырылган аталыштар барактын үстүндө тыкан жайгашуунун ордуна алдыга түртүлгөн кыскартылган, декоративдүү шрифтти түзөт. Бир гана электр көк түс (#0099ff) бардык функционалдык акценттерди — чек араларды, жаркыроону, сүрөтчөлөрдү, активдүү абалдарды — камсыз кылат, ал эми интерфейстин калган бөлүгү ахроматикалык бойдон калат, таза кара түстөн тереңдикти түзүү үчүн жумшак боз өткөөлдөргө (#111, #171717, #242424) таянат. Компоненттер декоративдүү эмес, ошондой эле маанилүү сезилет: 8–25 пикселдик тегеректелген радиустар, ичке 1 пикселдик чек аралар, минималдуу көлөкөлөр жана боштуктун жаркырашына мүмкүндүк берген тунук беттер.
Толук туурасы бөлүмдөр кара полотнонун чегинен тышкары созулуп, мазмуну ~1200px максималдуу туурасы менен чектелип, борборлоштурулган. Негизги бөлүмдө солго тегизделген баштык жана бир гана аракетке чакыруу (CTA) баскычы бар, оң жагы атайылап бош калтырылат — асимметриялык түрдө, борборлоштурулбайт. Бөлүмдөр тексттик гана макеттер (чоң баштык + кошумча текст) жана продукт скриншотторунун ортосунда кезектешип турат. "Framer менен келет" бөлүмүндө 4 тилкелүү торчодо логотип дубалы колдонулат. Коомчулук бөлүмүндө продукт скриншоту борборлоштурулган, толук туурасы тегеректелген бурчтары бар контейнердин ичине жайгаштырылат. Навигация минималдуу — сол жагында логотипи жана оң жагында тегизделген шилтемелери бар ичке үстүнкү тилке, көрүнгөн башкаруу элементтери жок. Бөлүм ритми: бөлүмдөрдүн ортосундагы 80px вертикалдуу боштуктар боштукта калкып жүргөн мазмундун ар кандай аралчаларын түзөт.
Продукциянын колдонуучу интерфейсинин скриншоттору басымдуулук кылат — светофор чекиттери бар хром сымал терезе менен курчалган, колдонмонун камтылган скриншоттору негизги сүрөткө айланат. Сапаттын далили катары кызмат кылган логотиптер кара фондо ак тамгалар менен кең аралыкта берилген. Сүрөттөр, иллюстрациялар же абстракттуу графика колдонулбайт — визуалдык тил - бул продукттун өзү, ал тирүү интерфейс катары көрсөтүлөт. Сүрөтчө стили: минималисттик, контурланган, монохромдуу жана кичинекей өлчөмдөгү ак. Тексттин тыгыздыгы: негизинен текст, кээде продукттун скриншоттору түрүндөгү чоң фрагменттер. Мейкиндиктин визуалдык балансы сүрөттөргө караганда типографияны артыкчылыктуу деп эсептейт.
Түстөр палитрасы
Бренд
- Vivid Violet
#0066ff— Негизги аракет баскычы - интерфейсте бир түстүү баскычтын фоны көрсөтүлгөн жалгыз жер.
Нейтралдуу
- Bone
#ffffff— Негизги аталыштар, караңгы фондо негизги текст, баскычтын фону жарыктын жалгыз булагы болуп саналат. - Void
#000000— Барактын холст, навигация фону, карта беттери, сүрөтчөлөрдү толтуруу — мунун баары бардык маанилүү эмес мазмунду сиңирип алган чексиз кара түс. - Graphite
#111111— Көтөрүлгөн карта беттери боштуктан бир кадам жогору турат — чоң функционалдык карталар жана модалдык контейнерлер. - Obsidian
#171717— Баскычтар, кошумча карталар, UI толтуруулары үчүн ортоңку бет - интерактивдүү элементтерди холсттон бөлүп турат. - Slate
#242424— Текст форматына өтүүдөн мурун, курсорду курсорду курсорду курсорду ийнине көтөрүп турганда, киргизүү талаалары жана ичкери кирген панелдер эң жаркыраган нейтралдуу түс болуп саналат. - Ash
#333333— Активдүү эмес фондук сүрөттөр жана структуралык элементтер үчүн терең толтуруу.
Типография
12ден 68 пикселге чейин · 8 кадам
- sans-serif — алмаштыруу: Inter · контурлар 400 · sans-serif - алынган маалыматтарда кездешет, бирок жасалма интеллект тарабынан сүрөттөлгөн эмес.
- GT Walsheim — алмаштыруу: Inter Tight · контурлар 500 · Аталыштар жана аталыштар үчүн шрифт бренддик шрифт болуп саналат. Ал агрессивдүү түрдө кыскартылган, сап аралыгы 0,8–1,1 жана тамга аралыгы -0,04emден -0,05emге чейин, 44–68px диапазонунда. Бул декоративдик элемент эмес; GT Walsheimдин геометриялык жылуулугу, катуу метрикалар менен айкалышып, системанын үнүн түзөт — ишенимдүү, компакттуу жана бир аз футуристтик. Окшош геометриялык туюнтма үчүн Inter Tight же Space Grotesk Bold шрифтин карап көрүңүз.
- Inter Variable — алмаштыруу: Inter · контурлар 400 · Негизги текст, навигация жана кошумча аталыштар негизги жумуш атын түзөт. Inter Variable огу салмактарды жылмакай интерполяциялоого мүмкүндүк берет. Өлчөмү чоңойгон сайын көзөмөлдөө тарып баратат: -0.001emден 18pxке чейин жана -0.027emден 22pxке чейин. Өзгөрмө версиясы сайттын жылмакай микроанимацияларына мүмкүндүк берет. Алмаштыруу: Inter ( Google) – дээрлик бирдей резервдик версия.
Интервалдар жана форма
| Максаты | Мааниси |
|---|---|
| Тыгыздык | орточо |
| Негизги кадам | 10px |
| Баскычтын радиусу | 9999px |
| Картанын радиусу | 20px |
| Көлөкөлөр | көлөкөлөрдүн ордуна чек аралар жок |
| Бөлүмдөрдүн ортосунда | 80px |
| Барактын туурасы | 1200px |
Жасалма интеллект сиздин веб-сайтыңызды Framer стилинде куруп, аны толтурат
- Instagram, TikTok, Facebook шилтемелери аркылуу өнүмдөр жана посттор менен толтуруңуз.
- Эски сайтыңыздан мазмунду өткөрүп бериңиз — жөн гана даректи көрсөтүңүз.
- Эң мыкты кыймылдаткычтагы заманбап дизайн: серверди рендеринг жана SEO оптималдаштыруу менен React ( Next.js).
- Издөө натыйжалары жана нейрон тармактарынын сунуштары үчүн толугу менен автоматташтырылган SEO оптималдаштыруу.
Окшош стилдер
- Graphite — Жаркыраган уч торчосу. Так ак типографиялык белгилердин жана спектрдик жарыктын мезгил-мезгили менен жаркылдаган жерлеринин айланасында караңгы, чектеш продукт беттерин түзүңүз.
- Linearity — Жаркыраган студиялык консол. Ак түстөгү интерфейс, хром акценттери жана кээде эритилген кызгылт сары түстүн жаркырашы менен минималисттик кара жумуш мейкиндиктери бар экрандарды түзүңүз.
- Featurebase — Кызгылт көк түстөгү жарыктандырылган консоль. Ар бир баракты караңгы, тынч сахна катары элестетиңиз, ал эми продукт үчүн жаркыраган жумушчу мейкиндик төмөнкү четинен чыгып турат.
- Nuxt — Терең мейкиндиктеги терминалдык жаркыроо. Көк-кара беттерге каршы жашыл жарык сигнал катары пайда болгон караңгы, жабык интерфейс тегиздиктерин түзүңүз.
- Auros — Биолюминесценттик маалымат шарлары бар түпсүз терминал
- Origin Financial — Тынч, кооз түнкү галерея. Чоң сериф шрифттери жана бир нече жарыктандырылган түстүү панелдер каржыны кылдаттык менен тандалган көркөм чыгарма катары сездирген тынч, дээрлик караңгы бөлмө.
- Raycast — Түнкү командалык борбору, Корал Неон
- Dimension — күүгүмдө жарыктандырылган, айнек панелдери менен капталган жумушчу станция
- Reflect Notes — Жылдыздуу кызгылт көк мейкиндик – бул дээрлик кара индиго боштугунун фонунда ноталар топ жылдыздардай калкып жүргөн караңгы обсерватория.
- Ameba — Түн ортосу боюнча башкаруу бөлмөсү – күңүрт айнек панелдердин ичиндеги көк электрдик импульс
- Branding — Кара галерея дубалы, кан кызыл түстөгү акценттер - Чоң ак шрифттер боштукту эске салган кара полотнонун үстүндө калкып жүрөт, аны бир гана ачык кызыл түстөгү акцент жана веб-интерфейске караганда галереянын белгилерине көбүрөөк окшош кооздук элементтер үзгүлтүккө учуратат.
- Harness — Фосфоресценттүү жашыл түстөгү түнкү 12деги Миссияны башкаруу