Figma
ตัวถังสีเดียวสำหรับความวุ่นวายของสีสัน
อินเทอร์เฟซนี้ทำหน้าที่เป็นโครงสร้างคอนเทนเนอร์ที่มีความคมชัดสูง ให้ความสำคัญกับเนื้อหาที่ผู้ใช้สร้างขึ้นอย่างเต็มที่ โทนสีพื้นฐานคือ #000000 ถึง #ffffff ซึ่งตัดเฉดสีเทาอ่อนๆ ออกไป เพื่อให้ได้ความคมชัดสูงสุดสำหรับเส้นขอบและข้อความหลัก ลำดับชั้นของตัวอักษรขึ้นอยู่กับขนาดและการเว้นวรรคตัวอักษรอย่างมาก มากกว่าการใช้สี ทำให้ข้อความยาวๆ กลายเป็นบล็อกกราฟิกที่หนาแน่น ตรรกะของรัศมีเส้นขอบสร้างความแตกต่างที่ชัดเจน: เส้นขอบด้านนอกขนาด 50 พิกเซลสำหรับองค์ประกอบการนำทางหลักนั้นตัดกันอย่างชัดเจนกับมุมขนาด 0 พิกเซลของคอนเทนเนอร์เนื้อหา
การจัดองค์ประกอบภาพนั้นใช้ขอบที่มีความกว้างสูงสุด (สูงสุด 1440 พิกเซล) โดยจัดวางเนื้อหาไว้ตรงกลางหน้าจอ และประกอบด้วยกลุ่มเนื้อหาที่หนาแน่นคั่นด้วยพื้นที่ว่างขนาดใหญ่ (96-120 พิกเซลระหว่างส่วนต่างๆ) รูปแบบ "ฮีโร่" มักใช้แกลเลอรีภาพที่ไม่สมมาตรซึ่งยึดอยู่ด้านล่างบล็อก UI ที่ลอยตัวและจัดวางอยู่ตรงกลางอย่างสมบูรณ์แบบ ด้านล่างของหน้าจอ ข้อมูลจะจัดเรียงตามตารางสี่คอลัมน์อย่างเคร่งครัดโดยไม่มีระยะขอบ จัดวางกลุ่มการ์ดที่ซ้ำกันเพื่อเพิ่มความหนาแน่นของวัตถุให้สูงสุดในขณะที่กำจัดระยะขอบออกจากกรอบ
การออกแบบภาพเน้นผลลัพธ์ที่ผู้ใช้เป็นศูนย์กลาง ภาพจะแสดงเป็นสี่เหลี่ยมแบนๆ ไร้กรอบ หรือเป็นชิ้นส่วนที่กระจัดกระจายและซ้อนทับกัน คล้ายกับวัตถุจริง บนพื้นหลังที่เรียบง่ายและว่างเปล่า ภาพเป็นแหล่งสีเพียงแหล่งเดียวบนเว็บไซต์ ไม่มีองค์ประกอบภาพถ่ายไลฟ์สไตล์หรือภาพประกอบองค์กรแบบมาตรฐาน แต่ละองค์ประกอบกราฟิกเป็นภาพที่แม่นยำและตรงไปตรงมาของผืนผ้าใบดิจิทัล ทำหน้าที่ทั้งเป็นหลักฐานของผลิตภัณฑ์และองค์ประกอบด้านสุนทรียศาสตร์หลักไปพร้อมๆ กัน
จานสี
ยี่ห้อ
- Context Action Violet
#4d49fc— การกำหนดปุ่มกระตุ้นการดำเนินการหลักเฉพาะจุดภายในแผงย่อย - สีที่โดดเด่นเพียงสีเดียวจะกำหนดจุดสนใจ
เป็นกลาง
- Absolute Canvas
#ffffff— พื้นหลังหน้าเว็บ แถบเครื่องมือแบบลอยตัว ฐานแผงแบบยกสูง - Structural Ink
#000000— แบบอักษรพื้นฐาน พื้นหลังปุ่มสีทึบ เส้นขอบปุ่ม - Graphite Metadata
#595959— ข้อความต้นฉบับเพิ่มเติม, ข้อความย่อยที่แปลเป็นภาษาท้องถิ่น, ค่าตัวแทน - Boundary Frame
#e2e2e2— เส้นแบ่งที่ละเอียดอ่อนและขอบเขตช่องป้อนข้อมูลที่ไม่ได้ใช้งาน - Angular Teal
#33dfdf— เอฟเฟกต์ตกแต่ง, ตัวบ่งชี้การโหลด และการแสดงภาพเคอร์เซอร์ที่ใช้งานอยู่
การจัดพิมพ์
จาก 12 เป็น 72 พิกเซล · 6 ขั้นตอน
- figmaSans — ทดแทน: Inter · โครงร่าง 320, 330, 340, 400, 450, 480, 520, 700 · เครื่องมืออเนกประสงค์ที่จัดการทุกอย่างตั้งแต่ชื่อเรื่องที่แสดงไปจนถึงป้ายกำกับการนำทาง สร้างรูปลักษณ์ที่เป็นเอกลักษณ์โดยการปรับแต่งการติดตามภาพเนกาทีฟแบบออปติคอล
- figmaMono — ทดแทน: JetBrains Mono · โครงร่าง 400 · ไมโครแท็ก การติดตามพิกัด และลักษณะทางเทคนิคที่ทำหน้าที่เป็นองค์ประกอบส่วนติดต่อผู้ใช้มากกว่าเนื้อหา
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | หนาแน่น |
| ขั้นตอนพื้นฐาน | 24px |
| รัศมีปุ่ม | 8px |
| รัศมีการ์ด | 12px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 96-120px |
| ความกว้างของหน้า | 1440px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Figma และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Caldera — ก่อกองไฟบนหินปูนอุ่นๆ พื้นผิวเป็นปูนปลาสเตอร์ดิบๆ ที่ยังอุ่นอยู่ และองค์ประกอบสีส้มแต่ละชิ้นดูเหมือนถ่านที่กำลังคุอยู่ซึ่งถูกกดลงบนพื้นผิว
- Vercel — พิมพ์เทอร์มินัลลงบนกระดาษสีขาว
- Dylanbrouwer — โรงหล่อสไตล์บรูทาลิสต์ยามพระอาทิตย์ตกดิน
- Headspace — มุมพักผ่อนที่อบอุ่นและสดใสบนกระดาษเนื้อนุ่ม
- WHOOP — ห้องทดลองการแสดงยามเที่ยงคืน - โต๊ะห้องปฏิบัติการสีขาววางเรียงอยู่ใต้ฉากละครสีดำอันว่างเปล่า มีเพียงแสงไฟฟ้าสีม่วงวาบเดียว
- (dot)connect — ภาพวาดทางวิศวกรรมของสวิสที่วาดด้วยถ่านเพียงชิ้นเดียว
- Together AI — คอนโซลวิจัยบนกระดาษธารน้ำแข็ง
- Vivid+Co — แสงสีรุ้งส่องผ่านหินออบซิเดียน
- Sequel — การฉายภาพยนตร์ส่วนตัวหลังพระอาทิตย์ตกดินเป็นแสงสว่างอบอุ่นเพียงหนึ่งเดียวในโรงภาพยนตร์ที่มืดมิด
- v0 by Vercel — ภาพวาดจากเครื่องกลึง ความแม่นยำและฟังก์ชันการใช้งานเป็นสิ่งสำคัญยิ่ง โดยแต่ละองค์ประกอบทำหน้าที่อย่างชัดเจนบนพื้นผิวที่สะอาดและสมบูรณ์แบบทางเทคนิค
- ThoughtLab — อนุสาวรีย์หินออบซิเดียนที่มีสัญลักษณ์สีแดงเข้ม พื้นที่ว่างเปล่าสีดำสนิท ที่ซึ่งวัตถุสีแดงสดเพียงชิ้นเดียวในมหาวิหาร คือรูปทรงสีเดียวที่พิมพ์ด้วยตัวอักษรสีขาวขนาดใหญ่
- Dovetail — แบบแปลนภายใต้แสงจันทร์สีดำ—เส้นกราฟแทบมองไม่เห็น ตัวอักษรสีขาว และประกายสีม่วงหนึ่งดวง