Framer
неонавая галерэя ў пустаце
Framer працуе як амаль поўная цемра - чорнае палатно, дзе кантэнт парыць, нібы неонавая шыльда на адкрыцці галерэі. Загалоўкі, набраныя шрыфтам GT Walsheim Medium са шчыльнай міжрадковай разметкай 0,8-1,1 і агрэсіўнай адмоўнай міжлітарнай адлегласцю (-0.04em на 54px), ствараюць сціснуты дэкаратыўны шрыфт, які высоўваецца наперад, а не акуратна размяшчаецца на старонцы. Адзіны электрычны сіні колер (#0099ff) забяспечвае ўсе функцыянальныя акцэнты - межы, свячэнне, значкі, актыўныя станы, - у той час як астатняя частка інтэрфейсу застаецца ахраматычнай, належачы на тонкія шэрыя пераходы (#111, #171717, #242424) для стварэння глыбіні з чыстага чорнага. Кампаненты выглядаюць хутчэй прадуманымі, чым дэкараваны: закругленыя радыусы 8-25px, тонкія межы 1px, мінімальныя цені і напаўпразрыстыя паверхні, якія дазваляюць прасвечваць пустаце.
Часткі ва ўсю шырыню, якія выходзяць за межы чорнага палатна, з кантэнтам, абмежаваным максімальнай шырынёй ~1200px, цэнтраваным усярэдзіне. Галоўная частка ўяўляе сабой загаловак, выраўнаваны па левым краі, і адну кнопку закліку да дзеяння (CTA), пры гэтым правы бок наўмысна пакінуты пусты - асіметрычна, не цэнтравана. Раздзелы чаргуюцца паміж макетамі толькі з тэкстам (буйны загаловак + падтэкст) і дэманстрацыяй скрыншотаў прадукта. У раздзеле "Пастаўляецца з Framer" выкарыстоўваецца сцяна з лагатыпамі ў 4-калонкавай сетцы. У падзеле супольнасці скрыншот прадукта змешчаны ў цэнтраваны кантэйнер максімальнай шырыні з закругленымі бакамі акна. Навігацыя мінімальная - тонкая верхняя панэль з лагатыпам злева і спасылкамі, выраўнаванымі па правым краі, без бачных элементаў кіравання. Рытм раздзелаў: значныя вертыкальныя прамежкі 80px паміж раздзеламі, якія ствараюць выразныя астраўкі кантэнту, парылыя ў пустаце.
Скрыншоты карыстацкага інтэрфейсу прадукта дамінуюць - апраўленыя імітаваным хромам акном з кропкамі святлафора, убудаваныя скрыншоты прыкладання становяцца галоўнай выявай. Лагатыпы, якія служаць доказам якасці, прадстаўлены белымі надпісамі на чорным фоне з вялікім інтэрвалам. Ніякіх фатаграфій, ілюстрацый, абстрактнай графікі – візуальная мова – гэта сам прадукт, які адлюстроўваецца ў выглядзе жывога інтэрфейсу. Стыль абразкоў: мінімалістычны, контурны, манахромна-белы ў малых памерах. Шчыльнасць: пераважае тэкст з рэдкімі буйнымі фрагментамі ў выглядзе скрыншотаў прадукта. Візуальныя суадносіны прасторы відавочна аддае перавагу друкарцы, а не выявам.
Палітра
Брэнд
- Vivid Violet
#0066ff— Асноўная кнопка дзеяння - адзінае месца ў інтэрфейсе, дзе адлюстроўваецца суцэльны каляровы фон кнопкі.
Нейтральныя
- Bone
#ffffff— Асноўныя загалоўкі, асноўны тэкст на цёмным фоне, фон кнопак - адзіная крыніца святла. - Void
#000000— Палатно старонкі, фон навігацыі, паверхні картак, заліванне абразкоў - бясконцы чорны колер, які паглынае ўвесь неістотны кантэнт. - Graphite
#111111— Прыўзнятыя паверхні картак на прыступку вышэй пустаты - вялікія функцыянальныя карткі і мадальныя кантэйнеры. - Obsidian
#171717— Прамежкавая паверхня для кнопак, дадатковых картак, залівак карыстацкага інтэрфейсу - адлучае інтэрактыўныя элементы ад палатна. - Slate
#242424— Пры навядзенні курсора, палі ўводу і выступалыя панэлі - самае яркае нейтральнае адценне перад пераходам да тэкставага фармату. - Ash
#333333— Глыбокае заліванне для неактыўных фонавых малюнкаў і структурных элементаў.
Друкарня
ад 12 да 68px · 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.
- Перанясе кантэнт са старога сайта - дастаткова пазначыць адрас.
- Сучасны дызайн на лепшым рухавічку: React ( Next.js) з серверным рэндэрынгам і SEO-аптымізацыяй са скрынкі.
- Поўная аўтаматычная SEO-аптымізацыя пад пошукавую выдачу і рэкамендацыі нейрасетак.
Падобныя стылі
- Auros — Абісальны тэрмінал з біялюмінесцэнтнымі шарамі дадзеных
- Origin Financial — Паўночная галерэя ціхага багацця. Ціхі, амаль цёмны пакой, дзе буйныя шрыфты з засечкамі і некалькі святлівых каляровых панэляў ствараюць адчуванне, што фінансавая сфера - гэта старанна адабраны твор мастацтва
- Raycast — Паўночны камандны цэнтр, каралавы неон
- Dimension — працоўнае месца, асветленае прыцемкам, з панэлямі з матавага шкла
- Reflect Notes — Зорны фіялетавы космас - цёмная абсерваторыя, дзе ноты параць, нібы сузор'і, на фоне амаль чорнай індыгавай пустаты.
- Ameba — Дыспетчарская апоўначы - электрычны сіні пульс усярэдзіне матавых шкляных панэляў
- Branding — Чорная сцяна галерэі, крывава-чырвоныя акцэнты - Буйныя белыя шрыфты параць на цёмным палатне, якое нагадвае пустэчу, якія перарываюцца адзіным яркім чырвоным акцэнтам і эфектнымі дэкаратыўнымі элементамі, якія больш падобныя на шыльды галерэі, чым на вэб-інтэрфейс
- Harness — Цэнтр кіравання палётамі апоўначы з фасфарасцыруючымі зялёнымі акцэнтамі
- Koto — Галерэя «Абсідыян» апоўначы. Амаль чорная сцэна, дзе адзінай цёплай крыніцай святла з'яўляецца адзіная жоўтая пазнака, а сціснуты шрыфт парыць у велізарнай негатыўнай прасторы, нібы выставачныя плакаты.
- Ohzi — Свеціцца куб, падвешаны ў цёмнай галерэі
- Depot — Цёмны серверны тэрмінал. Амаль чорная кансоль распрацоўніка, дзе адзін зялёны святлодыёд сігналізуе аб пачатку працы, а астатняя частка карыстацкага інтэрфейсу адлюстроўваецца графітавым колерам
- Maciej Zadykowicz — Апоўначная галерэя з калейдаскапічным пано - амаль чорная сцяна студыі, дзе адзін яркі маляўнічы друкарскі твор мастацтва прыкоўвае ўвагу, а ўсё астатняе застаецца ціхім і прадуманым.