Superlist
พื้นที่ทำงานยามค่ำคืนที่ประดับประดาด้วยประกายไฟสีปะการัง—พื้นผิวแอปพลิเคชันสีม่วงเข้มเงียบสงบ ที่ซึ่งประกายไฟสีส้มอบอุ่นเพียงดวงเดียวจะส่งสัญญาณทุกการกระทำ
Superlist ใช้ภาษาที่เน้นประสิทธิภาพการทำงานในโทนสีม่วงเข้ม: สีม่วงมะเขือม่วงเข้ม สีส้มปะการังอบอุ่นเป็นสีหลักเพียงสีเดียว และหัวข้อแบบไม่มีเชิงขนาดใหญ่ที่จับเอาบรรยากาศโดยรวมไว้ได้ อินเทอร์เฟซชวนให้นึกถึงการทำงานอย่างมีสมาธิในยามดึก—เงียบสงบ มีรายละเอียด และมั่นใจ โดยใช้สีเป็นเพียงเครื่องหมายวรรคตอนเพื่อเน้นการกระทำ สถานะที่ใช้งานอยู่ และประเด็นสำคัญ พื้นผิวมีโทนสีเข้มที่ละเอียดอ่อนพร้อมโทนสีม่วง (#181824 → #26253b) หลีกเลี่ยงสีดำสนิทเพื่อให้ความลึกรู้สึกอบอุ่นมากกว่าที่จะดูแห้งแล้ง ส่วนประกอบต่างๆ มีรูปทรงโค้งมนที่กว้างขวาง (การ์ดขนาด 20 พิกเซล ปุ่มแบบแคปซูล) เงาอ่อนๆ และ "หายใจ" ผ่านช่องว่างที่สบายตา 10-16 พิกเซล แทนที่จะเป็นตารางที่แน่น หัวข้อมีความสำคัญอย่างยิ่ง: น้ำหนักตัวอักษร 600 พอยต์ ที่ระยะห่าง 70-88 พิกเซล พร้อมระยะห่างระหว่างตัวอักษรที่แคบ -0.02em ทำให้ข้อความดูเหมือนเป็นตัวอักษรมากกว่า UI—มันใกล้เคียงกับเนื้อหาบรรณาธิการมากกว่า SaaS
ส่วนสีเข้มครอบคลุมความกว้างทั้งหมดของหน้า โดยมีคอนเทนเนอร์เนื้อหาที่มีความกว้างสูงสุดอยู่ตรงกลาง ส่วนหลักอยู่ตรงกลางในแนวตั้งและประกอบด้วยหัวข้อ ข้อความย่อย และคำกระตุ้นการตัดสินใจ (CTA) ตามด้วยภาพหน้าจอผลิตภัณฑ์ขนาดใหญ่ที่ซ้อนทับส่วนถัดไป ส่วนต่อๆ ไปจะสลับกันระหว่างบล็อกข้อความที่อยู่ตรงกลางและตารางการ์ด ส่วนรีวิวใช้ตารางสามคอลัมน์พร้อมการ์ดรีวิวและช่องว่าง 16 ช่อง การนำทางเป็นแถบด้านบนเพียงแถบเดียวที่มีโลโก้ทางด้านซ้าย ลิงก์อยู่ตรงกลาง และการดำเนินการเข้าสู่ระบบอยู่ทางด้านขวา—ไม่มีแถบด้านข้างคงที่หรือเมนูขนาดใหญ่ ช่องว่างระหว่างส่วนต่างๆ มีขนาดกว้าง (16 ช่อง) ทำให้เกิดจังหวะที่กว้างขวางและดูเป็นบรรณาธิการมากกว่าตารางผลิตภัณฑ์ที่หนาแน่น
พื้นที่ภาพโดยรวมถูกครอบงำด้วยภาพหน้าจอผลิตภัณฑ์—กรอบขนาดใหญ่ที่มีมุมโค้งมน แสดงให้เห็นถึงอินเทอร์เฟซของแอปจริง โดยครอบคลุมทั้งส่วนหลักและส่วนรอง ภาพถ่ายมีน้อยมาก ใช้เฉพาะเป็นรูปประจำตัวผู้ใช้หรือภาพตัวอย่างของสื่อภายในแอป (เช่น ภาพคอนเสิร์ตในแผงด้านขวาของแบบจำลองผลิตภัณฑ์) โลโก้บนแถบความน่าเชื่อถือเป็นสัญลักษณ์ข้อความสีขาวเรียบๆ ไม่มีภาพประกอบตกแต่ง ไม่มีกราฟิกนามธรรม ไม่มีภาพเรนเดอร์ 3 มิติ กลยุทธ์ด้านภาพคือการแสดงผลิตภัณฑ์ในขนาดที่เหมาะสม ปล่อยให้ตัวอักษรทำหน้าที่สร้างอารมณ์ และใช้สีปะการังเป็นสีเน้นเพียงสีเดียว
จานสี
ยี่ห้อ
- Coral Ember
#ff4a36— สีส้มใช้เป็นสีเสริมสำหรับรายละเอียดตกแต่งและเพื่อเน้นย้ำสิ่งที่ปรากฏไม่บ่อยนัก ไม่ควรใช้เป็นสีหลักสำหรับข้อความกระตุ้นการกระทำ
เป็นกลาง
- Aubergine Canvas
#181824— พื้นหลังของหน้าเว็บ ซึ่งเป็นผืนผ้าใบหลัก เป็นเฉดสีโทนอบอุ่นและเข้ม แทนที่สีดำสนิท ทำให้ส่วนติดต่อผู้ใช้ดูมีมิติมากกว่าที่จะดูเรียบแบน - Elevated Plum
#26253b— พื้นผิวการ์ด ช่องป้อนข้อมูล ช่องนำทาง—ง่ายกว่าการใช้ผืนผ้าใบในการสร้างมิติความลึกโดยไม่มีขอบเขตที่มองเห็นได้ - Pure White
#ffffff— หัวข้อหลัก ข้อความบนปุ่ม และเส้นขอบของไอคอน—เน้นความคมชัดสูงสุดบนพื้นหลังสีเข้ม - Fog Text
#696f81— เนื้อหาหลัก หัวข้อรอง และเส้นขอบสีอ่อนทั้งหมดมีอัตราส่วนความคมชัด 7:1 เพื่อให้อ่านได้สบายตาบนพื้นหลังสีม่วงเข้ม - Ash Text
#8e8da0— สามารถใช้สีกลางสำหรับองค์ประกอบ UI รอง เส้นแบ่ง และป้ายกำกับที่ไม่เด่นชัดได้ แต่ไม่ควรใช้เป็นสีหลักสำหรับปุ่มกระตุ้นการดำเนินการ (Call to Action) - Mist Highlight
#a3a3a7— เส้นขอบ เส้นแบ่ง และองค์ประกอบการนำทางที่ไม่ใช้งานอย่างละเอียดอ่อน สร้างโทนสีที่เป็นกลางอย่างนุ่มนวล แต่ยังคงโดดเด่นบนพื้นหลัง
การจัดพิมพ์
จาก 12 เป็น 88 พิกเซล · 9 ขั้นตอน
- sans-serif — ทดแทน: Inter · โครงร่าง 400 · แบบอักษร sans-serif - พบในข้อมูลที่ดึงมาได้ แต่ไม่ได้ถูกอธิบายไว้โดย AI
- Haffer XH SemiBold — ทดแทน: Inter Tight · โครงร่าง 400, 600 · ฟอนต์หลักสำหรับแสดงผลและหัวข้อ ใช้ขนาด 70–88 พิกเซลสำหรับหัวข้อหลัก โดยมีระยะห่างระหว่างตัวอักษร -0.02em และน้ำหนัก 600 ระยะห่างระหว่างตัวอักษรที่แคบและความสูงของตัวอักษรมากทำให้หัวข้อดูมีน้ำหนักแบบนิตยสาร ทำให้ส่วนติดต่อผู้ใช้สีเข้มดูเหมือนปกนิตยสารมากกว่าแผงควบคุม สามารถเปลี่ยนไปใช้ Inter Tight หรือ General Sans ในแบบตัวหนาได้
- Jersey 10 — ทดแทน: Anybody · โครงร่าง 400 · แบบอักษรขนาดใหญ่สำหรับตกแต่ง ใช้สำหรับเน้นตัวเลขและไฮไลต์ ใช้เพียงเล็กน้อยในขนาดใหญ่มากเพื่อสร้างความโดดเด่นทางด้านการพิมพ์ สามารถใช้แทนด้วยแบบอักษร Anybody หรือ Cabinet Grotesk ได้
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | เฉลี่ย |
| ขั้นตอนพื้นฐาน | 10-16px |
| รัศมีปุ่ม | 100px |
| รัศมีการ์ด | 20px |
| เงา | เงาอ่อนๆ |
| ระหว่างส่วนต่างๆ | 80px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Superlist และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- DNA — หอดูดาวเที่ยงคืนที่มองเห็นผ่านเลนส์อนุภาค
- Abetterlou — Sparks on Saddle Leather - ตัวอักษรสีครีมอบอุ่นเปล่งประกายบนพื้นหลังสีดำเข้มคล้ายกาแฟ พร้อมปุ่มสีอำพันทองที่ให้ความรู้สึกเหมือนโลหะร้อนถูกกดลงบนหน้ากระดาษ
- Galileo-ft — ห้องบัญชาการอวกาศลึกพร้อมสัญญาณสีฟ้าไฟฟ้า
- Decide AI — หอดูดาวตอนเที่ยงคืน - สัญญาณโรงกษาปณ์
- Redis Agency — ห้องทำงานบรรณาธิการ ซึ่งเปิดให้บริการหลังเลิกงาน เป็นสถานที่มืดสนิท ที่ซึ่งงานสร้างแบรนด์ทั้งหมดทำโดยใช้แบบอักษรมีเชิงและหัวไชเท้าสีแดงเพียงหัวเดียว
- Spellbook — ห้องพิจารณาคดีในยามเที่ยงคืนที่ส่องสว่างด้วยหมึกสีปะการัง พื้นผิวห้องทำงานสีเข้มที่เสียงเดียวที่ได้ยินคือเสียงขีดเขียนของปากกาสีส้มอบอุ่น
- Linear — เครื่องมือวัดความแม่นยำเที่ยงคืน
- Origin Financial — หอศิลป์ยามเที่ยงคืนแห่งความหรูหราอันเงียบสงบ ห้องที่เงียบสงบเกือบมืดสนิท ที่ซึ่งตัวอักษรขนาดใหญ่แบบมีเชิง และแผงไฟสีสันสดใสเพียงไม่กี่แผง สร้างความรู้สึกว่าการเงินเป็นงานศิลปะที่ได้รับการคัดสรรมาอย่างพิถีพิถัน
- Hyperstudio — ลวดลายถูกสลักลงบนหินออบซิเดียน ตัวอักษรและเส้นบางๆ ล้อมรอบพื้นที่สีขาวสีดำสนิท โดยมีเครื่องหมายเข็มทิศสีทองปรากฏเป็นระยะๆ เพื่อบอกทิศทาง
- Air — ประติมากรรม "ท้องฟ้ายามเที่ยงคืนผ่านกระจก"
- Raycast — ศูนย์บัญชาการเที่ยงคืน, ปะการังนีออน
- dope.security — สถานีปลายทางเที่ยงคืนพร้อมสัญญาณไฟสีม่วง