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 оновчлол.
Төстэй хэв маяг
- ElevenLabs — Дулаан цөцгий өнгөтэй, нарийн гарчигтай фото эссэ. Баухаус маягийн дэвтэр - өндөгний хальсан өнгөтэй цаас, хар бэх, бүтээгдэхүүний үзэсгэлэнд зориулсан нил ягаан, улбар шар өнгийн ганц чимэглэл.
- Awesomic — Конфеттиг санагдуулам улбар шар цэг таслал бүхий редакцийн цайрын тор
- Monad — дулаан илгэн дээрх редакцийн техникийн сэтгүүл
- Dub — Линкийн царцсан будааны цаасан удирдлагын самбар
- Seline Analytics — Дулаан цаасан дээрх чимээгүй аналитик ширээ
- Notion — Үдийн наран дор дулаахан цаасан дэвтэр
- Anthropic — Дулаан илгэн цаасны тухай шинжлэх ухааны салбарын сэтгүүл - тайван зааны ясан гадаргуу, сериф хээтэй редакцийн гарчиг, зөвхөн үйлдэл шаардлагатай үед гарч ирдэг ганц шавар аялга.
- Augen Pro — Apple-ийн цагаан өнгөний дүрслэл нь монохром орон зайд цорын ганц тод өнгө болгон эмх цэгцтэй, жингүй, цахилгаан цэнхэр өнгийг хослуулсан.
- Antimetal — Цөцгий цаасан дээрх редакцийн тэмдэглэл - шинжлэх ухааны сэтгүүлд өнгөрүүлсэн нам гүм өглөө, биеэ барих нь өөртөө итгэх итгэлийг илэрхийлж, серифүүд хүнд ажлыг хийдэг.
- Perk — Дулаан илгэн цаасан дээр цахилгаан лайм
- Ditto — Нарны гэрэлд зэрлэг цэцгийн дээж бүтээх цех. Дулаан цөцгийтэй гадаргуу, тод шар суурь өнгө, гүн хар хөх бэх, бүтээлийн ард дэлбээлж буй органик өнгөний хэлбэрүүд.
- Officevibe — Дулаан цөцгий өнгийн цаасан дээрх редакцийн сэтгүүл. Хүний нөөцийн менежментийн талаарх бодлыг төрүүлэм, орчин үеийн цэнхэр интерфэйсээр шивнэн бичигдсэн курсив сериф фонтыг бүтээгдэхүүн болгон танилцуулж байна гэж төсөөлөөд үз дээ.