Dub
Линкийн царцсан будааны цаасан удирдлагын самбар
Дубын харааны систем нь хязгаарлагдмал, бараг л редакторын SaaS гоо зүйтэй: цухуйсан элементүүдийн оронд нимгэн хүрээгээр бэхлэгдсэн бараг цагаан өнгийн зураг, бүтцийн дэмжлэг үзүүлдэг нягт монохром фонт, нэг тод цэнхэр өнгө (#2563eb) нь мэдэгдэл өгдөг. Гадаргуу нь анх харахад хавтгай, хүрээгүй хэвээр байгаа ч сав бүр нь хэвлэмэл баримт бичгийн мэдрэмжийг төрүүлдэг 1px #e5e5e5 захтай. Төвийг сахисан палитрын дээгүүр хөвдөг жижиг өнгийн "эм" өргөлт (улбар шар, ногоон, нил ягаан), гялгар биш өөртөө итгэлтэй, орчин үеийн мэдрэмж төрүүлдэг толгой хэсгүүдээр дамжуулан хувийн шинж чанарыг бий болгодог. Бүрэлдэхүүн хэсгүүд нь авсаархан, нягт: 8px ус зайлуулах хоолой, 12px картын радиус, 9999px дээрх эм хэлбэртэй шошго, хүнд, дүүргэсэн товчлууруудын оронд үл үзэгдэх удирдлага.
Хуудас нь ойролцоогоор 1200 пикселийн өргөнтэй төвлөрсөн байрлал дээр бүтээгдсэн. Үндсэн элемент нь том бүтээгдэхүүний байрлалын дээр хэвтээ байрлалтай гурван хөвөгч элемент (Хамтрагч хөтөлбөрүүд, Хөрвүүлэлтийн аналитик, Богино холбоосууд) бүхий төвлөрсөн текст блок юм. Хэсгүүдийг цагаан зотон болон #f5f5f5 цаасан манангаар ээлжлэн 64 пикселийн ус зайлуулах хоолойгоор босоо байдлаар байрлуулсан бөгөөд өнгө аясыг тусгаарлах зорилгоор ээлжлэн байрлуулсан. Доод хэсэгт Z хэлбэрийн байрлалыг ашигласан: редакцийн текст нь дунд гуравны нэг хэсэгт төвлөрсөн бөгөөд хөвөгч UI картууд нь зүүн ба баруун захад бэхлэгдсэн бөгөөд тэгш бус, сэтгүүл шиг хэмнэл үүсгэдэг. Логоны үүл нь хуудсан дээр төвлөрсөн энгийн 5x2 тор юм. Навигаци нь минималист дээд мөр юм - зүүн талд лого, төвд навигаци, баруун талд хоёр товчлуурын бүлэг (сүнс "Нэвтрэх" товчлуур + дүүргэсэн "Бүртгүүлэх" товчлуур) - тогтмол эсвэл мега цэсгүй. Үндсэн цонхны хяналтын самбарын зохион байгуулалт нь сонгодог хоёр баганатай аппликейшны зохион байгуулалтыг харуулдаг: тогтмол хажуугийн самбар (240px-тэй төстэй) + зочдыг гүйлгэж эхлэхээс өмнө бүтээгдэхүүний мэдээллийн нягтралыг тодорхойлдог контентын хэсэг.
Дүрслэлүүд нь амьдралын хэв маягт бус, бүтээгдэхүүнд чиглэсэн. Үндсэн дэлгэц нь том хяналтын самбарын дэлгэцийн зурган дээр төвлөрч, хажуугийн самбарын навигаци, өгөгдлийн хүснэгт, хөвөгч UI элементүүдтэй бодит ертөнцийн бүтээгдэхүүний загварыг харуулсан бөгөөд цагаан зотон дээр хавтгай самбар хэлбэрээр байрлуулсан. Үйлчлүүлэгчийн логог сошиал медиа гүйцэтгэлийг нь үнэлэхийн тулд ханаагүй саарал өнгийн торонд (beehiv, superpower, Chatbase гэх мэт) харуулсан бөгөөд хуудасны ганц цэнхэр өргөлт давамгайлахын тулд өнгийг нь хассан. Хөвөгч түншийн картууд (жижиг профайл болон орлого/төлбөрийн мэдээлэл бүхий хавтангууд) нь доод хэсэгт байрлах редакцийн текстийн блокуудын эргэн тойронд хөдөлж, текст дээр сүүдэр ашиглахгүйгээр гүн гүнзгий мэдрэмжийг бий болгодог. Цэгтэй торон дэвсгэр хээ нь онцлог шинж чанар юм: маш бага тунгалаг бус жижиг цэгүүдийн нимгэн эгнээ нь бүтэц, дизайны систем/зургийн гадаргуугийн мэдрэмжийг бий болгож, сайтын "орчин үеийн холбоосын хамаарлын платформ" гэсэн байр суурийг онцолж өгдөг. Дүрс дүрслэл нь хамгийн бага, тойм болон дүүргэлттэй бөгөөд онцлог шошгоны хувьд өргөлтийн палитр (мандарин улбар шар, лаванда нил ягаан, гаа ногоон) ашигладаг. Зураг, чимэглэл эсвэл 3D загвар ашиглаагүй болно - бүтээгдэхүүний хэрэглэгчийн интерфэйс нь өөрөө харааны хэл юм.
Палетт
Брэнд
- Electric Blue
#2563eb— Брэндийн үндсэн өнгө болох лого, холбоосууд, гол гүйцэтгэлийн үзүүлэлтүүд, идэвхтэй төлөвүүд болон дүрс тэмдэг зэргийг ашигладаг. Цагаан дэвсгэр дээрх баялаг цэнхэр өнгө нь системийн цорын ганц харагдах байдлыг бий болгодог. - Deep Sapphire
#1e40af— Үйлдлийн товчлуурын үндсэн дэвсгэр хэсэг болох үйлдэл хийхийг уриалсан тод өнгө буюу үйлдлийг илэрхийлсэн цорын ганц өнгө нь анхаарлыг татахын тулд ховор ашиглагддаг.
Төвийг сахисан
- Canvas White
#ffffff— Хуудасны дэвсгэр, картын гадаргуу, гарч ирэх самбарууд нь дэлгэц бүрийн үндэс суурь юм. - Paper Mist
#f5f5f5— Суурилуулсан картууд, нэмэлт самбарууд болон дүүргэлтүүдийн хувьд хулганы заагчийг бага зэрэг өнгийг өөрчилнө. - Ash
#e5e5e5— Картууд, оролтын холбогч болон хуваагч дээрх нимгэн хүрээ нь системийг хамтад нь барьж байдаг бүтцийн шугам юм. - Smoke
#d4d4d4— Сонгосон савнуудын илүү хурц хүрээ болон нэмэлт товчлуурын тоймууд. - Pebble
#c8c8c8— Дунд зэргийн тодосголттой хил хязгаар, хяналтын тойм болон бүтцийн хуваагч. Энэ өнгийг үйлдэлд уриалахад үндсэн өнгө болгон ашиглаж болохгүй. - Midnight Ink
#0a0a0a— Товчлуурын үндсэн текст, тодруулсан товчлуурууд болон навигацийн текст нь хамгийн их ялгарлыг нэмэгдүүлэхийн тулд бараг хар өнгөтэй байна.
Типографи
11-ээс 48 пиксел хүртэл · 9 алхам
- Satoshi — солих: Inter (weight 500 · тоймууд 500 · Гарчиг харуулах – зөвхөн гарчиг болон хэсгийн гарчигт 36–48 пикселийн мөрөнд ашиглагддаг. Фонтын зузаан – 500 (дунд, тод биш): Гарчиг нь өөртөө итгэлтэй, орчин үеийн харагддаг ч хэзээ ч хэт хүчтэй харагддаггүй. Сатошигийн геометрийн харьцаа нь фонтод Inter-ийн үндсэн хуулбарыг хуулбарлах боломжгүй бага зэрэг редакторын, орчин үеийн мэдрэмжийг өгдөг.
- Inter — солих: Inter (native) · тоймууд 400, 500, 600 · Үндсэн хэсэг, UI шошго, навигаци, дэд гарчиг болон жижиг гарчгууд. Интер нь 11 пикселийн бичил шошгоноос эхлээд 30 пикселийн хоёрдогч гарчиг хүртэлх бүх зүйлийг зохицуулдаг үндсэн ажил юм. Үндсэн хэсгийн хувьд 400 жин нь анхдагч утга, тодруулсан элементүүд болон товчлуурын шошгоны хувьд 500 жин, чухал UI шошгоны хувьд 600 жин нь нөөцлөгдсөн байдаг. 1.5 мөрийн өндөртэй 16 пиксел нь хамгийн түгээмэл тохиолддог нэг алхамт хэмжээ (1220 тохиолдол) бөгөөд 16 пиксел нь каноник үндсэн хэсгийн хуулбарын хэмжээ гэдгийг баталж байна.
- Geist Mono — солих: JetBrains Mono or IBM Plex Mono · тоймууд 400, 500 · Кодын хэсгүүд, техникийн мета өгөгдөл болон суулгагдсан нэг зайтай токенуудыг 12–14 пикселийн хэмжээтэй кодын блокуудад, 24 пикселийн хэмжээтэй том кодын дэлгэцийн элементүүдэд ашигладаг. Энэ нь хөгжүүлэгчийн хэрэгслийн найдвартай байдлыг хангаж, Dub-ийн бүтээгдэхүүний байршилтай нийцдэг.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | дундаж |
| Үндсэн алхам | 8px |
| Товчлуурын радиус | 8px |
| Картын радиус | 12px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 64px |
| Хуудасны өргөн | 1200px |
Хиймэл оюун ухаан таны вэбсайтыг Dub хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- ElevenLabs — Дулаан цөцгий өнгөтэй, нарийн гарчигтай фото эссэ. Баухаус маягийн дэвтэр - өндөгний хальсан өнгөтэй цаас, хар бэх, бүтээгдэхүүний үзэсгэлэнд зориулсан нил ягаан, улбар шар өнгийн ганц чимэглэл.
- Awesomic — Конфеттиг санагдуулам улбар шар цэг таслал бүхий редакцийн цайрын тор
- Monad — дулаан илгэн дээрх редакцийн техникийн сэтгүүл
- Seline Analytics — Дулаан цаасан дээрх чимээгүй аналитик ширээ
- Notion — Үдийн наран дор дулаахан цаасан дэвтэр
- Anthropic — Дулаан илгэн цаасны тухай шинжлэх ухааны салбарын сэтгүүл - тайван зааны ясан гадаргуу, сериф хээтэй редакцийн гарчиг, зөвхөн үйлдэл шаардлагатай үед гарч ирдэг ганц шавар аялга.
- Calendly — Хүйтэн гантиг дээр хар хөх бэх
- Augen Pro — Apple-ийн цагаан өнгөний дүрслэл нь монохром орон зайд цорын ганц тод өнгө болгон эмх цэгцтэй, жингүй, цахилгаан цэнхэр өнгийг хослуулсан.
- Antimetal — Цөцгий цаасан дээрх редакцийн тэмдэглэл - шинжлэх ухааны сэтгүүлд өнгөрүүлсэн нам гүм өглөө, биеэ барих нь өөртөө итгэх итгэлийг илэрхийлж, серифүүд хүнд ажлыг хийдэг.
- Perk — Дулаан илгэн цаасан дээр цахилгаан лайм
- Ditto — Нарны гэрэлд зэрлэг цэцгийн дээж бүтээх цех. Дулаан цөцгийтэй гадаргуу, тод шар суурь өнгө, гүн хар хөх бэх, бүтээлийн ард дэлбээлж буй органик өнгөний хэлбэрүүд.
- Officevibe — Дулаан цөцгий өнгийн цаасан дээрх редакцийн сэтгүүл. Хүний нөөцийн менежментийн талаарх бодлыг төрүүлэм, орчин үеийн цэнхэр интерфэйсээр шивнэн бичигдсэн курсив сериф фонтыг бүтээгдэхүүн болгон танилцуулж байна гэж төсөөлөөд үз дээ.