Framer
бушлыктагы неон галереясе
Framer тулысынча караңгылык кебек эшли - галерея ачылышында эчтәлек неон билгесе кебек калкып торган кара полотно. GT Walsheim Medium форматында 0,8–1,1 юл аралыгы һәм агрессив тискәре хәреф аралыгы (54 пиксельдә -0,04em) белән урнаштырылган башлыклар, биттә тәртипле урнашу урынына алга таба этәрелә торган кыскартылган, бизәкле шрифт булдыра. Бер генә электр зәңгәр төс (#0099ff) барлык функциональ акцентларны - чикләр, балкыш, иконалар, актив халәтләрне тәэмин итә, ә интерфейсның калган өлеше ахроматик булып кала, саф кара төстән тирәнлек булдыру өчен нечкә соры күчешләргә (#111, #171717, #242424) таяна. Компонентлар бизәкле түгел, ә каралган кебек тоела: 8–25 пиксель түгәрәкләнгән радиуслар, нечкә 1 пиксель чикләр, минималь төшүче күләгәләр һәм бушлыкның яктыртылуына мөмкинлек бирә торган үтә күренмәле өслекләр.
Тулы киңлекле бүлекләр кара полотнодан читтәрәк сузыла, эчтәлек максималь киңлек ~1200 пиксель белән чикләнгән һәм үзәктә урнашкан. Төп бүлектә сул якка тигезләнгән башлык һәм бер чакыру (CTA) төймәсе бар, уң ягы махсус буш калдырылган - асимметрик рәвештә, үзәктә түгел. Бүлекләр тексттан гына торган макетлар (зур башлык + аскы текст) һәм продукт скриншотлары арасында чиратлаша. "Framer белән килә" бүлегендә 4 баганалы челтәрдә логотип дивары кулланыла. Җәмгыять бүлегендә продукт скриншоты үзәктә, тулы киңлектәге, түгәрәкләнгән почмаклары булган контейнер эченә урнаштырыла. Навигация минималь - сулда логотип һәм уңда туры китерелгән сылтамалар белән нечкә өске такта, күренерлек контроль элементлары юк. Бүлек ритмы: бүлекләр арасында 80 пиксель зурлыктагы вертикаль аралар барлыкка килә, бушлыкта йөзеп йөрүче аерым эчтәлек утраулары барлыкка китерә.
Продукциянең кулланучы интерфейсының скриншотлары өстенлек итә - светофор нокталары булган хром сыман тәрәзә белән рамкаланган, кушымтаның кертелгән скриншотлары төп рәсемгә әйләнә. Сыйфатны раслаучы логотиплар кара фонда ак хәрефләр белән киң интервал белән күрсәтелә. Фотосурәтләр, иллюстрацияләр яки абстракт графика кулланылмый - визуаль тел - продукт үзе, тере интерфейс буларак күрсәтелә. Иконка стиле: минималист, контурланган, монохром һәм кечкенә зурлыктагы ак. Текст тыгызлыгы: күбесенчә текст, кайвакыт продукт скриншотлары рәвешендәге зур фрагментлар. Киңлекнең визуаль балансы рәсемнәргә караганда типографияне өстен күрә.
Палитра
Бренд
- 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 — Фосфоресцент яшел төстәге төн уртасындагы Миссия контроле
- Koto — Төн уртасындагы Обсидиан галереясе. Караңгы сәхнә, анда бердәнбер җылы яктылык чыганагы - бер сары маркер, ә куе шрифт зур негатив киңлектә күргәзмә плакатлары кебек йөзеп йөри.
- Ohzi — Караңгы галереядә эленеп торган якты куб
- Depot — Караңгы сервер терминалы. Эш башлануын белдерүче бер яшел LED белән диярлек кара төстәге эшкәртүче консоле, ә кулланучы интерфейсының калган өлеше графит белән күрсәтелгән.
- Maciej Zadykowicz — Түнге галерея калейдоскопик фрескалары белән кара төстәге студия стенасына охшаган, анда бер якты, төсле типографик сәнгать әсәре игътибарны җәлеп итә, ә калганнары тын һәм уйланылган килеш кала.