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 оптималдаштыруу.
Окшош стилдер
- Auros — Биолюминесценттик маалымат шарлары бар түпсүз терминал
- Origin Financial — Тынч, кооз түнкү галерея. Чоң сериф шрифттери жана бир нече жарыктандырылган түстүү панелдер каржыны кылдаттык менен тандалган көркөм чыгарма катары сездирген тынч, дээрлик караңгы бөлмө.
- Raycast — Түнкү командалык борбору, Корал Неон
- Dimension — күүгүмдө жарыктандырылган, айнек панелдери менен капталган жумушчу станция
- Reflect Notes — Жылдыздуу кызгылт көк мейкиндик – бул дээрлик кара индиго боштугунун фонунда ноталар топ жылдыздардай калкып жүргөн караңгы обсерватория.
- Ameba — Түн ортосу боюнча башкаруу бөлмөсү – күңүрт айнек панелдердин ичиндеги көк электрдик импульс
- Branding — Кара галерея дубалы, кан кызыл түстөгү акценттер - Чоң ак шрифттер боштукту эске салган кара полотнонун үстүндө калкып жүрөт, аны бир гана ачык кызыл түстөгү акцент жана веб-интерфейске караганда галереянын белгилерине көбүрөөк окшош кооздук элементтер үзгүлтүккө учуратат.
- Harness — Фосфоресценттүү жашыл түстөгү түнкү 12деги Миссияны башкаруу
- Koto — Түн ортосунда Обсидиан галереясы. Дээрлик караңгы сахна, анда жылуу жарыктын жалгыз булагы бир гана сары маркер болуп саналат жана коюу шрифт көргөзмө плакаттары сыяктуу кең негативдүү мейкиндикте калкып жүрөт.
- Ohzi — Караңгы галереяда илинип турган жаркыраган куб
- Depot — Караңгы сервер терминалы. Иштин башталышын билдирген бир жашыл LED жарыгы бар дээрлик кара түстөгү иштеп чыгуучунун консолу жана колдонуучу интерфейсинин калган бөлүгү графит менен көрсөтүлгөн.
- Maciej Zadykowicz — Түнкүсүн калейдоскопиялык дубал сүрөтү бар Midnight галереясы дээрлик кара түстөгү студиялык дубалдай болуп, анда бир жандуу, түркүн түстүү типографиялык искусство чыгармасы көңүлдү бурат, ал эми калганынын баары тынч жана аң-сезимдүү бойдон калат.