Calendly
หมึกสีน้ำเงินเข้มบนหินอ่อนเย็น
Calendly ให้ความรู้สึกเหมือนเป็นพื้นที่ทำงานวางแผนที่สงบและมั่นใจ: พื้นหลังสีขาวเกือบทั้งหมดที่มีพื้นที่ว่างให้หายใจได้สะดวก การ์ดผลิตภัณฑ์สีขาวคมชัดลอยอยู่บนพื้นหลังสีเทาเย็นตา และตัวอักษรทั้งหมดใช้หมึกสีน้ำเงินเข้มแทนที่จะเป็นสีดำสนิท องค์ประกอบที่โดดเด่นคือสีน้ำเงินเข้ม (#0b3558) ที่ใช้ทุกที่ที่มีข้อความปรากฏ ไม่ว่าจะเป็นหัวข้อ ปุ่ม ไอคอน หรือลิงก์ ซึ่งทำให้ส่วนติดต่อผู้ใช้ทั้งหมดดูนุ่มนวล อบอุ่น และมีสไตล์มากกว่าหน้า Landing Page ของ SaaS ทั่วไป สีน้ำเงินสดใส (#006bff) ถูกใช้สำหรับแอ็กชันหลักทั้งหมด และสีชมพูและสีน้ำเงินที่ตกแต่งเพิ่มเติมที่ขยายออกไปนอกเลย์เอาต์ผลิตภัณฑ์ช่วยเพิ่มความอบอุ่นโดยไม่ทำให้ดูรก ส่วนประกอบต่างๆ ถูกออกแบบอย่างเรียบง่าย: ขอบบางๆ 1 พิกเซล เงาสีฟ้าอ่อนๆ รัศมีการ์ดขนาดใหญ่ 24 พิกเซล และมุมปุ่ม 8 พิกเซล ให้ความรู้สึกตั้งใจมากกว่าที่จะดูจืดชืด
ความกว้างสูงสุด 1200 พิกเซล จัดกึ่งกลาง โดยมีระยะขอบกว้างบนเดสก์ท็อป หน้าจอหลักแบ่งออกเป็นสองคอลัมน์: คอลัมน์ซ้ายประกอบด้วยส่วนหัวขนาด 80 พิกเซล + เนื้อหา + ปุ่มเข้าสู่ระบบแบบเรียงซ้อน ในขณะที่คอลัมน์ขวาประกอบด้วยการ์ดวิดเจ็ตการจองพร้อมองค์ประกอบตกแต่งในพื้นหลัง ด้านล่างหน้าจอหลักเป็นแถบความกว้างเต็มหน้าจอเดียวที่มีโลโก้ Trust ส่วนถัดไปสลับกันระหว่างบล็อกส่วนหัวที่จัดกึ่งกลาง (H2 + ข้อความย่อย + ปุ่มกระตุ้นการดำเนินการ (ถ้ามี)) ตามด้วยบล็อกสองคอลัมน์ที่อธิบายคุณสมบัติ (ข้อความซ้าย/สินค้าขวา หรือ สินค้าซ้าย/ข้อความขวา) พร้อมองค์ประกอบตกแต่งด้านหลังภาพสินค้าแต่ละภาพ การจัดวางแบบตารางการ์ดนั้นแทบจะไม่ใช้เลย—เค้าโครงนี้เน้นส่วนที่จับคู่กันวางเคียงข้างกันมากกว่าตารางหลายคอลัมน์ ระยะห่างระหว่างส่วนต่างๆ อยู่ระหว่าง 48 ถึง 64 พิกเซล การนำทางเป็นแถบด้านบนคงที่ขนาด 64 พิกเซล โดยมีโลโก้อยู่ทางซ้าย เมนูอยู่ตรงกลาง และกลุ่มปุ่มกระตุ้นการดำเนินการอยู่ทางขวา
องค์ประกอบภาพหลักคือภาพหน้าจอผลิตภัณฑ์ ซึ่งเป็นภาพจำลองอย่างง่ายของส่วนติดต่อผู้ใช้ปฏิทินการจอง แสดงผลบนการ์ดสีขาวคมชัดที่มีมุมกว้างและโค้งมน การออกแบบตกแต่ง: การ์ดผลิตภัณฑ์แต่ละใบถูกล้อมรอบด้วยจุดสีม่วงปะการังอ่อน (#e55cff) หรือสีฟ้าคราม (#0099ff) ที่เยื้องและเบลอเล็กน้อย ทำให้เกิดเอฟเฟกต์ภาพตัดปะมากกว่าภาพหน้าจอแบบแบน ไม่มีภาพถ่าย ไม่มีภาพไลฟ์สไตล์—องค์ประกอบภาพทั้งหมดแสดงถึงส่วนติดต่อผู้ใช้ของผลิตภัณฑ์ รูปทรงเน้นที่เป็นนามธรรม หรือโลโก้พันธมิตรแบบขาวดำบนแถบความน่าเชื่อถือ ไอคอนเป็นแบบเส้นตรง มีความกว้างของเส้น 1.5–2 พิกเซล ขาวดำ ในสีน้ำเงินเข้ม (Ink Navy) หรือสีน้ำเงิน (Signal Blue)
จานสี
ยี่ห้อ
- 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 · ข้อความทั้งหมดในส่วนติดต่อผู้ใช้ Gilroy เป็นแบบอักษร sans-serif แนวเรขาคณิตแบบมนุษยนิยม มีช่องว่างระหว่างตัวอักษรกว้างและความคมชัดของเส้นสม่ำเสมอ ตัวหนา (700) ใช้สำหรับหัวข้อหลัก ในขณะที่ 500–600 ใช้สำหรับปุ่มและหัวข้อย่อย ควรใช้ Manrope หรือ Inter แทน
- Gilroy — ทดแทน: Inter · โครงร่าง 400 · ข้อความหลักและป้ายกำกับ UI ทั่วไป - ขนาดตัวอักษร 400 พอยต์ ช่วยให้ข้อความยาวอ่านได้ชัดเจนโดยไม่รู้สึกว่าหนักมือ
- Gilroy — ทดแทน: Inter · โครงร่าง 500 · หัวข้อรองและข้อความหลักที่เน้นสี - ฟอนต์ขนาด 14/500 เป็นเครื่องมือหลักสำหรับหัวข้อการ์ดและป้ายกำกับแบบแทรกในข้อความ
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | หนาแน่น |
| ขั้นตอนพื้นฐาน | 8-16px |
| รัศมีปุ่ม | 8px |
| รัศมีการ์ด | 24px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 48-64px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Calendly และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- ElevenLabs — ภาพถ่ายเชิงสารคดีในโทนสีครีมอบอุ่น พร้อมหัวข้อข่าวที่ไม่ฉูดฉาด สมุดบันทึกสไตล์เบาเฮาส์—กระดาษสีเปลือกไข่ หมึกสีดำ และสีม่วงและสีส้มเพียงเล็กน้อยสำหรับตกแต่งเพื่อแสดงสินค้า
- Awesomic — แผ่นตาข่ายสังกะสีสำหรับงานบรรณาธิการ พร้อมเครื่องหมายวรรคตอนสีส้มที่ชวนให้นึกถึงกระดาษโปรย
- Monad — บทบรรณาธิการวารสารทางเทคนิคเกี่ยวกับกระดาษหนังอุ่น
- Dub — แผงควบคุมกระดาษข้าวแบบด้านของ Link
- Seline Analytics — โต๊ะวิเคราะห์ที่เงียบสงบ บนกระดาษอุ่นๆ
- Notion — สมุดบันทึกกระดาษอุ่นๆ ท่ามกลางแสงแดดกลางวัน
- Anthropic — วารสารภาคสนามทางวิทยาศาสตร์บนกระดาษหนังลูกวัวสีอบอุ่น—พื้นผิวสีงาช้างเรียบลื่น หัวข้อบรรณาธิการแบบมีเชิง และรายละเอียดสีดินเหนียวเพียงจุดเดียวที่ปรากฏขึ้นเฉพาะเมื่อจำเป็นต้องมีการดำเนินการ
- Augen Pro — การตกแต่งสีขาวของ Apple โดดเด่นด้วยสีฟ้าสดใสที่ดูสะอาดตาและไร้น้ำหนัก เป็นเพียงสีเดียวที่ใช้เป็นจุดเด่นในพื้นที่สีขาวดำ
- Antimetal — บันทึกบรรณาธิการบนกระดาษสีครีม—เช้าอันเงียบสงบในวารสารวิทยาศาสตร์ ที่ซึ่งความยับยั้งชั่งใจสื่อถึงความมั่นใจ และตัวอักษรแบบมีเชิงช่วยเน้นความสำคัญ
- Perk — มะนาวไฟฟ้าบนกระดาษไขอุ่น
- Ditto — ห้องทำงานที่สว่างไสวด้วยแสงแดด กำลังสร้างสรรค์ตัวอย่างดอกไม้ป่า พื้นผิวสีครีมอบอุ่น สีเหลืองสดใสเป็นสีพื้นฐาน หมึกสีน้ำเงินเข้ม รูปทรงสีสันแบบธรรมชาติเบ่งบานอยู่ด้านหลังชิ้นงาน
- Officevibe — นิตยสารบทความบนกระดาษสีครีมโทนอบอุ่น ลองนึกภาพบทความเชิงลึกเกี่ยวกับการบริหารทรัพยากรบุคคล ที่นำเสนอในรูปแบบของผลิตภัณฑ์—ตัวอักษรเขียนหวัดแบบมีเชิงที่กระซิบเบาๆ บนพื้นหลังสีฟ้าทันสมัย