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 — Фосфорын ногоон өнгийн чимэглэлтэй шөнө дундын Mission Control
- Koto — Шөнө дундын Обсидиан галерей. Бараг л тас харанхуй тайз, цорын ганц дулаан гэрлийн эх үүсвэр нь ганц шар маркер бөгөөд үзэсгэлэнгийн зурагт хуудас шиг асар том сөрөг орон зайд өтгөрүүлсэн бичээс хөвнө.
- Ohzi — Харанхуй галерейд гэрэлтсэн куб өлгөөтэй байна
- Depot — Харанхуй серверийн терминал. Ажил эхэлснийг илтгэх ганц ногоон LED гэрэлтэй, хэрэглэгчийн интерфэйсийн үлдсэн хэсэг нь бал чулуугаар харагддаг бараг хар өнгийн хөгжүүлэгчийн консол.
- Maciej Zadykowicz — Калейдоскопийн ханын зурагтай Midnight Gallery нь бараг хар өнгийн студийн хана мэт бөгөөд энд нэг тод, өнгөлөг хэвлэмэл урлагийн бүтээл анхаарал татдаг бол бусад бүх зүйл чимээгүй, нямбай хэвээр байдаг.