Calendly
Хүйтэн гантиг дээр хар хөх бэх
Calendly нь тайван, өөртөө итгэлтэй төлөвлөлтийн ажлын талбар мэт санагдаж байна: бараг цагаан өнгийн даавуу нь амьсгалах зай ихтэй, хүйтэн саарал дэвсгэр дээр хөвж буй тод цагаан бүтээгдэхүүний картууд, бүх хэв маягийг цэвэр хар биш харин хар хөх бэхээр дүрсэлсэн. Тодорхойлох элемент нь хар хөх өнгө (#0b3558) бөгөөд текст гарч ирэх газар бүрт ашиглагддаг - гарчиг, товчлуур, дүрс, холбоосууд - энэ нь интерфэйсийг бүхэлд нь зөөлрүүлж, ердийн SaaS буух хуудаснаас илүү дулаан, загварлаг болгодог. Бүх үндсэн үйлдлүүдэд ганц тод цэнхэр (#006bff) ашигладаг бөгөөд бүтээгдэхүүний зохион байгуулалтаас цааш үргэлжилсэн гоёл чимэглэлийн ягаан, цэнхэр өнгийн цацалтууд нь эмх замбараагүй байдал үүсгэхгүйгээр дулааныг нэмдэг. Бүрэлдэхүүн хэсгүүдийг даруухан байлгасан: нимгэн 1 пикселийн хүрээ, нарийн цэнхэр сүүдэр, том 24 пикселийн картын радиус, 8 пикселийн товчлуурын булангууд нь уйтгартай биш харин санаатай мэт санагддаг.
Хамгийн их өргөн нь 1200 пиксел, төвд байрлуулсан, ширээний компьютер дээр өргөн хүрээтэй. Үндсэн дэлгэц нь хоёр баганад хуваагддаг: зүүн баганад 80 пикселийн толгой хэсэг + үндсэн текст + давхарласан нэвтрэх товчлуурууд, харин баруун баганад арын дэвсгэр дээр чимэглэлийн элементүүдтэй захиалгын виджет карт байдаг. Үндсэн дэлгэцийн доор Trust логотой ганц, бүтэн өргөнтэй судал байдаг. Дараагийн хэсгүүд нь төвд байрлуулсан толгой хэсгийн блокуудын хооронд ээлжлэн байрладаг (H2 + дэд текст + нэмэлт үйлдэл хийх уриалга), дараа нь бүтээгдэхүүний зураг бүрийн ард чимэглэлийн өргөлтийн элементүүдтэй онцлог шинж чанаруудыг дүрсэлсэн хоёр баганатай блокууд (зүүн/баруун эсвэл бүтээгдэхүүний зүүн/баруун текст) байдаг. Картын торыг ховор ашигладаг - зохион байгуулалт нь олон баганатай торны оронд хосолсон хэсгүүдийг зэрэгцүүлэн байрлуулахыг илүүд үздэг. Хэсгүүдийн хоорондох зай нь 48-64 пикселийн хооронд хэлбэлздэг. Навигаци нь зүүн талд нь лого, төвд байрлуулсан цэс, баруун талд нь үйлдэл хийх уриалгын бүлэг бүхий 64 пикселийн тогтмол дээд мөр юм.
Гол харааны элемент нь бүтээгдэхүүний дэлгэцийн агшин буюу захиалгын хуанлийн хэрэглэгчийн интерфэйсийн энгийн загварууд бөгөөд өргөн, бөөрөнхий булантай, тод цагаан картууд дээр дүрслэгдсэн байдаг. Чимэглэлийн дизайн: бүтээгдэхүүний карт бүрийг шүрэн нил ягаан (#e55cff) эсвэл цэнхэр хөх (#0099ff) зөөлөн цэгээр хүрээлсэн, бага зэрэг гажсан, бүдгэрсэн тул хавтгай дэлгэцийн агшин биш харин коллаж эффект үүсгэдэг. Зураг байхгүй, амьдралын хэв маягийн зураг байхгүй - бүх харааны элементүүд нь бүтээгдэхүүний хэрэглэгчийн интерфэйс, хийсвэр өргөлтийн хэлбэрүүд эсвэл итгэлцлийн самбар дээрх монохром түншийн логог илэрхийлдэг. Дүрсүүд нь 1.5–2 пикселийн шугамын өргөнтэй, монохром, хар хөх (бэхэн хар хөх) эсвэл цэнхэр (дохионы цэнхэр) өнгөтэй шугаман байна.
Палетт
Брэнд
- Ink Navy
#0b3558— Үндсэн текст, гарчиг, дүрс тэмдэг, үйлдэлд уриалсан бараан дэвсгэр, навигацийн холбоосууд. - Signal Blue
#006bff— Үйлдэлд анхдагч уриалга (CTA), идэвхтэй навигаци, холбоос онцлох, сонгосон төлөвүүд
Төвийг сахисан
- Carbon
#0a0a0a— Текст цэвэр хар өнгөтэй (нөөц), логоны глиф, дүрсний дүүргэлт. - Slate Gray
#476788— Нэмэлт үндсэн текст, туслах текст, дуугүй шошго. - Mist Gray
#a6bbd1— Идэвхгүй текст, идэвхгүй функцийн шошго, гэрлийн дүрсний тоймууд - Cloud
#f8f9fb— Хуудасны зураг, хөл хэсгийн дэвсгэр зураг, нэмэлт гадаргуу - Paper
#ffffff— Картын гадаргуу, товгор самбар, бараан дэвсгэр дээр товчлуурын текст. - Pebble
#f0f3f8— Дүрсүүдийн дэвсгэр зураг, оролтын талбарын сүүдэрлэлт, нарийн тусгаарлагч, хулганы заагч эффектүүд.
Типографи
12-оос 80 пиксел хүртэл · 10 алхам
- Gilroy — солих: Manrope · тоймууд 400, 500, 600, 700 · Бүх интерфэйсийн текст. Гилрой бол өргөн диафрагмтай, жигд зураасны контрасттай геометрийн хүмүүнлэг санс-сериф юм; түүний тод жинг (700) гарчиг болгон ашигладаг бол 500–600 нь товчлуур болон дэд гарчиг болгон ашигладаг. Manrope эсвэл Inter-ээр солино уу.
- Gilroy — солих: Inter · тоймууд 400 · Биеийн текст болон ерөнхий зориулалттай UI шошго - 400 цэгийн фонтын зузаан нь урт текстийг хүнд мэдрэмж төрүүлэхгүйгээр уншигдахуйц болгодог.
- Gilroy — солих: Inter · тоймууд 500 · Хоёрдогч гарчиг болон тодруулсан үндсэн текст - 14/500 фонт нь картын гарчиг болон мөр доторх шошгоны үндсэн хэрэгсэл юм.
Интервал ба хэлбэр
| Зорилго | Утга |
|---|---|
| Нягтрал | нягт |
| Үндсэн алхам | 8-16px |
| Товчлуурын радиус | 8px |
| Картын радиус | 24px |
| Сүүдэр | сүүдрийн оронд хил хязгаар байхгүй |
| Хэсгүүдийн хооронд | 48-64px |
| Хуудасны өргөн | 1200px |
Хиймэл оюун ухаан таны вэбсайтыг Calendly хэв маягаар бүтээж, дүүргэх болно
- Instagram, TikTok, Facebook холбоосоор дамжуулан бүтээгдэхүүн болон нийтлэлүүдээр дүүргээрэй.
- Хуучин сайтаасаа контентыг шилжүүлэх - зүгээр л хаягийг нь зааж өгнө үү.
- Шилдэг хөдөлгүүр дээрх орчин үеийн дизайн: Серверийн рендеринг болон SEO оновчлолыг хайрцагнаас нь гарган React ( Next.js).
- Хайлтын үр дүн болон мэдрэлийн сүлжээний зөвлөмжид зориулсан бүрэн автомат SEO оновчлол.
Төстэй хэв маяг
- Mollie — Ноолуурын лангуу, бараан өнгийн дэвтэр. Хар текстийн эргэн тойронд редакцийн дизайн хийхэд хангалттай цагаан зай үлдээгээд, бүтээгдэхүүнтэй холбоотой санаануудыг бүлээн тос, эспрессо бор шар айраг, бодит төлбөрийн аргуудын хүрэлцэхүйц зургуудаар бататга.
- Kagi — Тусдаа уншлагын өрөө. Тод графит текстийн эргэн тойронд задгай цагаан зай гаргаж, нарийн нил ягаан өнгийн өргөлт болон дулаан пастел гадаргууг ашиглан амар амгаланг эвдээрэй.
- Milanote — Миланоте бол зориулалтын бүтээлч студи юм. Хөвөгч харааны самбаруудыг ашиглан редакцийн галерей маягийн хуудас үүсгээрэй: бараан хүрээтэй хана, цагаан дэлгэцийн зай, зөөлөн гүнтэй бодит объект шиг харагдах дэлгэцийн агшин.
- Co2 — Өвлийн гэрэлд уур амьсгалын атлас. Сериф гарчиг, ангиллын кодчилсон өгөгдөл, мөстэй зургууд нь өргөн цагаан захыг тодруулсан агаарын баримт бичгийн ландшафт шиг хуудас үүсгээрэй.
- GitButler — Текстийн төгсгөлд оюу өнгөтэй. Өндөр тодосгогчтой сериф гарчиг, нарийн техникийн тор, дулаан бал чулуун гадаргуу, даруухан оюу өнгийн аялгатай хослуулсан.
- ElevenLabs — Дулаан цөцгий өнгөтэй, нарийн гарчигтай фото эссэ. Баухаус маягийн дэвтэр - өндөгний хальсан өнгөтэй цаас, хар бэх, бүтээгдэхүүний үзэсгэлэнд зориулсан нил ягаан, улбар шар өнгийн ганц чимэглэл.
- Awesomic — Конфеттиг санагдуулам улбар шар цэг таслал бүхий редакцийн цайрын тор
- Monad — дулаан илгэн дээрх редакцийн техникийн сэтгүүл
- Dub — Линкийн царцсан будааны цаасан удирдлагын самбар
- Seline Analytics — Дулаан цаасан дээрх чимээгүй аналитик ширээ
- Notion — Үдийн наран дор дулаахан цаасан дэвтэр
- Anthropic — Дулаан илгэн цаасны тухай шинжлэх ухааны салбарын сэтгүүл - тайван зааны ясан гадаргуу, сериф хээтэй редакцийн гарчиг, зөвхөн үйлдэл шаардлагатай үед гарч ирдэг ганц шавар аялга.