Figma
хроматик эмх замбараагүй байдлын монохром явах эд анги
Интерфэйс нь хэрэглэгчийн үүсгэсэн контентод бүрэн харааны давамгайллыг олгодог хатуу, өндөр тодосгогчтой бүтцийн контейнер болж ажилладаг. Үндсэн шугам нь #000000-аас #ffffff хүртэлх хатуу палитр бөгөөд энэ нь анхдагч хил болон текстийн хувьд хамгийн их тодосгогч байдлыг дэмжиж саарал өнгийн нарийн өнгийг зайлсхийдэг. Типографийн шатлал нь бараг бүхэлдээ өнгөний өөрчлөлтөөс илүүтэй хэмжээ болон түрэмгий сөрөг үсгийн зайд суурилдаг бөгөөд текстийн том мөрүүдийг нягт график блок болгон хувиргадаг. Хилийн радиусын логик нь эрс ялгаатай байдлыг бий болгодог: дэлхийн навигацийн элементүүдийн 50 пикселийн гаднах "хадаас" нь контент контейнерийн 0 пикселийн тод булантай санаатайгаар ялгаатай байдаг.
Зохиолууд нь харах цонхыг төвлөрүүлсэн хамгийн дээд өргөн хүрээ (хамгийн ихдээ 1440 пиксел) дээр суурилдаг бөгөөд өргөн макро зайгаар (хэсгүүдийн хооронд 96-120 пикселийн хоосон зай) тусгаарлагдсан нягт контентын кластеруудыг агуулдаг. "Баатар" архетип нь ихэвчлэн хөвөгч, төгс төвлөрсөн UI блокийн доор динамикаар бэхлэгдсэн зургийн тэгш бус галерейг ашигладаг. Нугалаасны доор мэдээлэл нь зах хязгааргүй дөрвөн баганатай хатуу торонд шууд нийцэж, картуудын давтагдсан кластеруудыг хүрээлж, объектын нягтралыг хамгийн их байлгахын зэрэгцээ хүрээнээс зах хязгаарыг арилгадаг.
Харааны дизайн нь хэрэглэгчдэд чиглэсэн үр дүнд суурилсан болно. Зургуудыг хавтгай, хүрээгүй дөрвөлжин эсвэл тархай бутархай, давхардсан хэлтэрхий хэлбэрээр, биет объектыг санагдуулж, хатуу, хоосон дэвсгэр дээр харуулдаг. Зураг нь вэбсайт дээрх өнгөний цорын ганц эх үүсвэр юм. Амьдралын хэв маягийн гэрэл зургийн элементүүд эсвэл стандарт корпорацийн чимэглэл байхгүй - график элемент бүр нь дижитал зургийн яг нарийн, шууд утгаар нь авсан зураг бөгөөд бүтээгдэхүүний баталгаа болон үндсэн гоо зүйн элементийн үүрэг гүйцэтгэдэг.
Палетт
Брэнд
- Context Action Violet
#4d49fc— Дэд самбар доторх орон нутгийн анхдагч дуудлага - ганц тасалдуулагч өнгө нь гол цэгийг тодорхойлдог.
Төвийг сахисан
- Absolute Canvas
#ffffff— Хуудасны дэвсгэр, хөвөгч хэрэгслийн самбар, өргөгдсөн самбарын суурь. - Structural Ink
#000000— Үндсэн фонт, хатуу товчлуурын дэвсгэр, товчлуурын хүрээ. - Graphite Metadata
#595959— Хоёрдогч зохиогчийн текст, нутагшуулсан дэд текст, орлуулагчийн утга - Boundary Frame
#e2e2e2— Нарийн тусгаарлагч болон идэвхгүй оролтын талбарын хил хязгаар. - Angular Teal
#33dfdf— Чимэглэлийн эффектүүд, ачаалах үзүүлэлтүүд болон идэвхтэй курсорын дүрслэл.
Типографи
12-оос 72 пиксел хүртэл · 6 алхам
- figmaSans — солих: Inter · тоймууд 320, 330, 340, 400, 450, 480, 520, 700 · Дэлгэцийн гарчгаас эхлээд навигацийн шошго хүртэл бүх зүйлийг удирддаг олон талын хэрэгсэл. Энэ нь оптик сөрөг хяналтыг өөрчлөх замаар өвөрмөц харагдах байдлыг бий болгодог.
- figmaMono — солих: JetBrains Mono · тоймууд 400 · Микрошошго, координатын хяналт болон контентоос илүү хэрэглэгчийн интерфэйсийн элементүүдийн үүрэг гүйцэтгэдэг техникийн өнгө аяс.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | нягт |
| Үндсэн алхам | 24px |
| Товчлуурын радиус | 8px |
| Картын радиус | 12px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 96-120px |
| Хуудасны өргөн | 1440px |
Хиймэл оюун ухаан таны вэбсайтыг Figma хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- Caldera — Бүлээн шохойн чулуун дээр гал түл. Зотон даавуу нь түүхий, бүлээн гипс бөгөөд улбар шар өнгийн элемент бүр гадаргуу дээр дарагдсан утаатай цог шиг харагдаж байна.
- Vercel — Терминалыг цагаан цаасан дээр хэвлэв
- Dylanbrouwer — Нар жаргах үеийн харгис хэрцгий цутгамал үйлдвэр
- Headspace — Дулаан цаасан дээрх нарлаг эрүүл мэндийн булан
- WHOOP — Шөнө дундын үзүүлбэрийн лаборатори - хар театрын хоосон зайн доорх цагаан клиник лабораторийн ширээнүүд, ганц нил ягаан цахилгаан импульс
- (dot)connect — Нүүрсний нэг хэсэг бүхий Швейцарийн инженерийн зураг
- Together AI — Мөстлөгийн цаасан дээрх судалгааны консол
- Vivid+Co — обсидианаар дамжин өнгөрөх призматик гэрэл
- Sequel — Харанхуй үед кино театрт зөвхөн харанхуй бол хувийн кино үзвэрийн газар л дулаахан гэрэлтэй байдаг.
- v0 by Vercel — Токарийн зураг. Нарийвчлал болон ажиллагаа нь хамгийн чухал бөгөөд элемент бүр нь цэвэрхэн, техникийн хувьд төгс гадаргуу дээр тодорхой үүрэг гүйцэтгэдэг.
- ThoughtLab — Чал улаан өнгийн дохиотой обсидиан хөшөө. Хар хоосон зотон даавуу, сүмийн цорын ганц ханасан улаан объект нь том цагаан үсгээр хэвлэсэн бөгөөд ганц хроматик дүрс юм.
- Dovetail — Хар сарны доорх зураг төсөл — бараг харагдахгүй график шугам, цагаан фонт, нэг нил ягаан гялалзсан зураг