Ui
царцсан цаасан дээрх клиник төлөвлөгөө
shadcn/ui нь монохром дизайны системийг бий болгох семинар юм: цэвэр цагаан даавуу, зөөлөн дулаан саарал гадаргуу, хамгийн нарийн хүрээн дээр байрлуулсан том радиустай картууд. Интерфэйс нь бараг бүхэлдээ ахроматик - хар текст, цагаан гадаргуу, саарал хоёрдогч өнгөнүүд - алдааны төлөвт зориулагдсан ганц, тасалдуулагч улаан өнгө, өөр юу ч биш. Типографи нь дэлгэцэн дээр нягт үсэг өндөртэй Geist-ийн геометрийн төвийг сахисан байдалд тулгуурладаг бөгөөд хэрэглээний бүтээгдэхүүнээс илүү хөгжүүлэгчийн дэд бүтэцтэй төстэй тайван, код шиг мэдрэмжийг төрүүлдэг.
Хамгийн бага зураг - систем нь бараг бүхэлдээ хэрэглэгчийн интерфэйсээс бүрддэг. Гол зураг, чимэглэл, гоёл чимэглэлийн график байхгүй. Бүтээгдэхүүний демо зургийг сүлжээнд бүрэлдэхүүн хэсгийн загвар (карт, оролтын талбар, товчлуур) хэлбэрээр үзүүлж, баримт бичиг болон харааны контент болгон ашигладаг. Дүрсүүд нь #0a0a0a эсвэл #737373 дээр 1.5-2 пиксел зузаантай нимгэн геометрийн шугамууд (магадгүй Lucide-ээс зээлсэн) бөгөөд функциональ дохио болгон бага ашиглагддаг. Харааны хэл нь UI бүрэлдэхүүн хэсгүүд өөрсдөө юм - хуудас нь амьдралын хэв маягийн гарын авлага болж ажилладаг бөгөөд харагдах элемент бүр нь харагдахуйц дизайны элемент юм.
Палетт
Төвийг сахисан
- Canvas
#f5f5f5— Хуудасны дэвсгэр, бүдэг гадаргууг дүүргэх, нэмэлт товчлуурууд. - Paper
#ffffff— Картын гадаргуу, гарч ирэх дэвсгэр зураг, үндсэн товчлуурын дүүргэлт - Surface Alt
#fafafa— Хажуугийн самбарын дэвсгэр, анзаарагдахгүй картын сонголт, оролтын талбарын идэвхгүй төлөв. - Ink
#0a0a0a— Үндсэн текст, гарчиг, товчлуурын шошго, дүрсний тойм. - Ink Soft
#171717— Гэрэлтэй гадаргуу дээр нэмэлт текст, дүүргэлттэй товчлуурын дэвсгэр зургууд. - Mid Gray
#737373— Үндсэн текст, орлуулагч текст, туслах шошго, мөн дүрс дүүргэлт нь дуугүй байна.
Типографи
12-оос 48 пиксел хүртэл · 8 алхам
- Geist — солих: Inter · тоймууд 400, 500, 600 · Бүх интерфэйсийн текст—14px/400 мөрийн зузаантай үндсэн текст, 24–48px/600 мөрийн зузаантай гарчиг, 13–14px/500 мөрийн зузаантай товчлуурууд. Geist-ийн геометрийн үсгийн хэлбэрүүд болон жигд мөрийн зузаан нь хөгжүүлэгчийн хэрэгслүүдэд төвийг сахисан мэдрэмжийг төрүүлдэг; 48px үсгийн зайтай 600 мөрийн зузаан, -0.05em үсгийн зайтай нь засварлахын оронд тодорхой, итгэлтэй гарчгийг гаргаж өгдөг.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | нягт |
| Үндсэн алхам | 8px |
| Товчлуурын радиус | 18px |
| Картын радиус | 24px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 48-80px |
| Хуудасны өргөн | 1280px |
Хиймэл оюун ухаан таны вэбсайтыг Ui хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- Ventriloc — Дулаан цаасан дээрх өгөгдлийн редакцийн ажиглалтын төв - дан улбар шар өнгийн хул нь монохром нарийвчлалыг онцолсон
- Geniestudio — Зөөлөн өдрийн гэрэлтэй дэвтэр - өргөн хүрээтэй, нэг зузаан үзэгний зураастай төрөл
- xAI — Хар эмтэй дулаан тосны лаборатори
- Cal — Монохром практик байдал, хүний хандлага. Хатуу хар цагаан палитраар дамжуулан тодорхой байдал болон функциональ байдлыг чухалчилдаг боловч ээлтэй хэвлэмэл болон бөөрөнхий хэлбэртэйгээр зөөлрүүлдэг систем.
- Scale — Техникийн төсөлтэй хослуулсан өндөр чанартай музейн чанартай гэрэл зургийн лаборатори
- Contractbook — хэт далай тэнгисийн доорх цөцгий цаасны гэрээ
- AutoSend — Ганцхан нил ягаан гэрэлтэй, тохилог чулуун студи - сериф гарчиг болон тод индиго уриалга нь нэг нам гүм, бараг цагаан орон зайд зэрэгцэн оршдог.
- Air — "Шөнө дундын тэнгэрийг шилээр нэвтлэн" баримал
- SpatialChat — цагаан илгэн дээрх нил ягаан импульс
- Squarespace — Кино урлагийн монохром галерей
- Giga — Хүйтэн обсидиан дээгүүр шөнө дундын тэнгэрийн хаяа
- Supabase — Шөнө дундын үед фосфоресцент ногоон цэгтэй код засварлагч - нүүрсний тоосны тэнгис дээрх ганц хроматик импульс