Letters
การนัดหมายช่วงเช้าที่คลินิกกลางแจ้ง—โต๊ะสีขาวสะอาดตาใต้เพดานสีฟ้าอ่อน วางเรียงรายไปด้วยเครื่องมือผ่าตัดสีฟ้า
Letters คือเครื่องมือเขียนจดหมายทางการแพทย์ที่เริ่มต้นด้วยส่วนหัวแบบไล่ระดับสีเหมือนท้องฟ้าเปิด—แถบสีฟ้าอ่อนๆ ที่สร้างบรรยากาศสงบและเหมือนห้องผ่าตัด—ก่อนที่จะเปลี่ยนไปสู่พื้นที่ทำงานสีขาวสะอาดตา ระบบได้รับการออกแบบในสไตล์ขาวดำ: พื้นหลังสีขาวสะอาดตา ข้อความสีดำสนิท (#070709) ปุ่มกระตุ้นการกระทำรูปทรงแคปซูลสีเข้ม และการ์ดทรงกลมที่ลอยอยู่บนเงาที่บางเบา สีฟ้าสดใสเพียงสีเดียว (#2597d0) ถูกสงวนไว้สำหรับเครื่องหมายวรรคตอนที่ใช้งานได้จริง—ไอคอน ไมโครกราฟิก เครื่องเล่นคลื่นเสียง—ซึ่งจะไม่ใช้สำหรับปุ่มหรือพื้นที่ขนาดใหญ่ การจัดพิมพ์ใช้ Open Runde ซึ่งเป็นแบบอักษร sans-serif เชิงเรขาคณิตแบบมนุษยนิยมที่มีระยะห่างระหว่างตัวอักษรติดลบอย่างมากในขนาดหน้าจอที่ใหญ่ขึ้น (-0.04em ที่ 80px) ซึ่งบีบอัดส่วนหัวให้เป็นบล็อกที่ดูมั่นใจ ส่วนประกอบต่างๆ ให้ความรู้สึกเบาเหมือนเครื่องมือทางการแพทย์: ขอบบาง ระยะห่างระหว่างการ์ดกว้างขวาง ปุ่มรูปทรงแคปซูล และการใช้ระดับความสูงอย่างรอบคอบที่ช่วยให้ส่วนหัวรูปทรงท้องฟ้าทำหน้าที่ทางอารมณ์ได้
หน้าแรกเป็นโทนสีฟ้าอ่อนไล่ระดับสี ครอบคลุมความกว้างทั้งหมดของหน้า โดยมีหัวเรื่องและข้อความย่อยอยู่ตรงกลาง และมีปุ่มกระตุ้นการดำเนินการอยู่ด้านล่าง หน้าแรกเปลี่ยนไปเป็นพื้นที่เนื้อหาสีขาวอย่างราบรื่น โดยมีระยะห่างระหว่างส่วนต่างๆ อย่างเหมาะสม (80-120 พิกเซล) ส่วนต่างๆ ที่นำเสนอจะใช้ตารางสองคอลัมน์ของการ์ดขนาดใหญ่ที่มีขอบมน (รัศมี 18-32 พิกเซล) ที่มีสัดส่วนเท่ากัน หัวข้อส่วนต่างๆ จะอยู่ตรงกลางเสมอ ในคอลัมน์เดียว เหนือตารางการ์ด การนำทางเป็นแถบด้านบนสีขาวคงที่ โดยมีกลุ่มลิงก์อยู่ตรงกลาง และปุ่มเข้าสู่ระบบจัดชิดขวา จังหวะโดยรวมคือแถบหลักที่ดูสบายตา จากนั้นสลับกับส่วนสีขาวและสี #f5f5f5 โดยมีพื้นที่ว่างแนวตั้งที่สม่ำเสมอ ไม่มีแถบด้านข้าง ไม่มีเมนูขนาดใหญ่ ไม่มีเลย์เอาต์ที่ไม่สมมาตร หน้าเว็บจึงให้ความรู้สึกสงบและสมมาตรเหมือนคอลัมน์
การออกแบบภาพเน้นไปที่ส่วนติดต่อผู้ใช้ของผลิตภัณฑ์เป็นหลัก ไม่มีภาพถ่ายไลฟ์สไตล์ หรือภาพเรนเดอร์ 3 มิติแบบนามธรรม ภาษาภาพสร้างขึ้นจากบัตรผลิตภัณฑ์ที่แสดงส่วนติดต่อผู้ใช้ดั้งเดิมของแอป: การเปรียบเทียบเอกสาร "ก่อน" และ "หลัง" พื้นที่โหลดที่มีเส้นขอบประ และเครื่องเล่นเสียงในรูปแบบของคลื่นเสียง องค์ประกอบภาพบรรยากาศเพียงอย่างเดียวคือการไล่ระดับสีของท้องฟ้าในภาพหลัก ไอคอนเป็นไอคอนเส้นแบนสีเดียว #2597d0 (ซองจดหมาย ไมโครโฟน เครื่องหมายถูก) ที่มีน้ำหนักเส้นสม่ำเสมอ ไม่มีแบบเติมสี การวาดภาพประกอบมีความเรียบง่าย: ภาพจำลองผลิตภัณฑ์แสดงบนพื้นหลังสีขาว หมุนเล็กน้อยเพื่อสร้างความลึก ไม่เอียงอย่างแหลมคม แบบอักษรลายมือ (The Doctor) เป็นองค์ประกอบที่เป็นธรรมชาติ/ทำด้วยมือเพียงอย่างเดียว ใช้เพื่อสื่อถึงลายมือทางการแพทย์บนบัตร "ก่อน" เท่านั้น
จานสี
ยี่ห้อ
- Surgical Blue
#2597d0— ไอคอนต่างๆ ไอคอนไมโครโฟน เครื่องเล่นคลื่นเสียง และองค์ประกอบเล็กๆ ที่แสดงถึงฟังก์ชันการทำงาน ล้วนสร้างเป็นโทนเสียงเดียวกันตลอดทั้งอินเทอร์เฟซ
เป็นกลาง
- Obsidian
#070709— เนื้อหาหลัก ปุ่มกระตุ้นการดำเนินการ และองค์ประกอบ UI สีเข้ม—โดยเลือกใช้สีดำสนิทแทนสี #000 เพื่อลดความแตกต่างของสีกับพื้นหลังสีขาว - Paper White
#ffffff— พื้นหลังของหน้าเว็บ พื้นผิวของการ์ด และข้อความบนปุ่ม คือผืนผ้าใบหลักสำหรับทุกส่วนที่อยู่ด้านล่างองค์ประกอบหลัก - Cloud Gray
#f5f5f5— พื้นผิวการ์ดเพิ่มเติมและพื้นหลังส่วนต่างๆ ช่วยแยกบล็อกการใช้งานออกจากผืนผ้าใบหลัก - Sky Tint
#d7e6f5— สีของกรอบกระดาษแข็งและโทนสีฟ้าอ่อนๆ บนพื้นผิวช่วยสร้างบรรยากาศมากกว่าความเทาหม่น - Charcoal
#60606c— ข้อความหลัก ข้อความรอง และเส้นขอบสีอ่อน - ใช้สีกลางที่เด่นชัดสำหรับเนื้อหาที่ไม่ใช่หัวเรื่อง - Slate
#8b8b8b— ข้อความขนาดเล็กและสถานะขอบเขตที่ไม่ใช้งาน - ใช้เพื่อระบุตำแหน่งและอำนวยความสะดวกในการเข้าถึงสำหรับผู้พิการ
การจัดพิมพ์
จาก 12 เป็น 80 พิกเซล · 8 ขั้นตอน
- sans-serif — ทดแทน: Inter · โครงร่าง 400, 700 · แบบอักษร sans-serif - พบในข้อมูลที่ดึงมาได้ แต่ไม่ได้ถูกอธิบายไว้โดย AI
- Open Runde — ทดแทน: Inter Tight · โครงร่าง 400, 500, 600, 700, 900 · แบบอักษรหลักสำหรับหัวข้อและการนำทางคือแบบอักษรมนุษยนิยมเชิงเรขาคณิต ที่มีระยะห่างระหว่างตัวอักษรแคบเมื่อขยายขนาดใหญ่ การเว้นวรรค -0.04em ที่ขนาด 80px จะบีบหัวข้อให้เป็นบล็อกเดียวที่ดูมั่นใจ ควรใช้แบบอักษรนี้สำหรับหัวข้อทั้งหมด การนำทาง และข้อความขนาดใหญ่
- Inter — ทดแทน: system-ui · โครงร่าง 400, 500 · ข้อความรองสำหรับเนื้อหาและส่วนติดต่อผู้ใช้ – ใช้สำหรับหัวข้อขนาดเล็ก องค์ประกอบการนำทาง และลิงก์แบบแทรกในข้อความ ซึ่งต้องการจังหวะการอ่านที่เป็นกลางมากขึ้น ใช้ร่วมกับ Open Runde เพื่อสร้างความแตกต่างเชิงลำดับชั้น
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | หนาแน่น |
| ขั้นตอนพื้นฐาน | 12-16px |
| รัศมีปุ่ม | 100px |
| รัศมีการ์ด | 18px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 80-120px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Letters และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Integrated Biosciences — ห้องปฏิบัติการเรืองแสงชีวภาพตอนเที่ยงคืน
- Mintlify — สวนเมฆเหนือโต๊ะกระจก ท้องฟ้าที่วาดด้วยมือและสารคดีถูกจัดวางเข้าด้วยกัน—เป็นเพียงจุดเดียวที่สีสันและแนวคิดมาบรรจบกันก่อนที่หน้ากระดาษจะจางหายไปเป็นสีขาวบริสุทธิ์
- Gleap — พื้นที่ทำงานที่ตกแต่งด้วยโทนสีครีมอบอุ่น พร้อมด้วยรายละเอียดสีเทากราไฟต์—สตูดิโอที่จุดหมึกสีดำด้านดูเหมือนจะลอยอยู่เหนือโครงสร้างผ้าลินิน
- Render — ดีไซน์นี้ใช้วัสดุอะลูมิเนียมขัดเงา อินเทอร์เฟซให้ความรู้สึกเหมือนเอกสารทางวิศวกรรมที่สะอาดตาและเป็นรูปทรงเรขาคณิต—พื้นที่ว่างสีขาว เส้นบางๆ และเส้นสีม่วงเส้นเดียวที่ดึงดูดความสนใจไปยังการทำงาน
- Grafbase — แบบร่างทางวิศวกรรมบนหินอ่อนเย็น
- Slash — ห้องนิรภัยเที่ยงคืนพร้อมสมุดบัญชีปิดทอง
- Modal — เทอร์มินัลเรืองแสงในห้องเซิร์ฟเวอร์ที่มืดมิด - แหล่งกำเนิดแสงเพียงแหล่งเดียวคือแสงสีเขียวสดใส
- Whimsical — หมึกสีพลัมเข้มบนพื้นหลังสีลาเวนเดอร์—สมุดบันทึกสำหรับสตูดิโอสร้างสรรค์ที่สามารถใช้เป็นกระดานไวท์บอร์ดทางเทคนิคได้ด้วย
- AgentQL — แสงเหนือเหนืออาคารผู้โดยสารในเวลากลางคืน
- Alveos One — ที่พักอันอบอุ่นที่สร้างจากหินแม่น้ำ – ห้องทำสมาธิที่เงียบสงบ แสงสีนวลตา มีเพียงวัตถุกราไฟต์ชิ้นเดียววางอยู่ท่ามกลางแสงสีเหลืองอำพันอ่อนๆ
- GitHub — แผงควบคุมอวกาศที่มีจุดควบคุมเรืองแสงชีวภาพ—พื้นที่ทำงานที่มืดมิดและสร้างบรรยากาศ โดยมีแสงสีเขียวเพียงจุดเดียวชี้บอกทิศทางไปข้างหน้า
- Buddy — ภาพวาดทางวิศวกรรมบนกระดาษกราฟ พื้นผิวสีขาวของภาพวาดถูกทำเครื่องหมายด้วยตารางที่แทบมองไม่เห็น ซึ่งวาดด้วยหมึกสีดำสนิท พร้อมด้วยเส้นสีเขียวมะนาวเรืองแสงและเส้นไล่ระดับสีเหลือบมุก