Subframe
ภาพวาดกราฟิกบนกระดาษปาร์ชเมนต์สีอบอุ่น กระดาษดีไซเนอร์ที่ทุกเส้นขีดเขียนล้วนมาจากกราไฟต์หรือยางลบ ไม่ใช่สีทา ความลึกของภาพเกิดจากความหนาของเส้นและเชิงอักษรที่เรียบง่าย
Subframe คือพื้นที่ทำงานของนักออกแบบแบบขาวดำ: พื้นหลังสีครีมอบอุ่น หมึกสีดำกราไฟต์ และปราศจากสีสันฉูดฉาดโดยสิ้นเชิง อินเทอร์เฟซทั้งหมดให้ความรู้สึกเหมือนวัสดุชิ้นเดียว—กระดาษ ดินสอ และเงา—โดยมีสัมผัสการพิมพ์ที่โดดเด่นเพียงอย่างเดียว: ตัวอักษรแบบมีเชิง (Instrument Serif) ที่ประณีตตัดกับตัวอักษรแบบไม่มีเชิง (Inter) ที่เป็นระบบ ทำให้หัวข้อข่าวดูมีน้ำหนักและน่าเชื่อถือ พื้นผิวเรียบและมีกรอบแทนที่จะนูนขึ้น ความลึกเกิดขึ้นจากเส้นแบ่งบางๆ ในสี #e5e7eb และไฮไลต์ที่ฝังอยู่ในปุ่มควบคุมสีเข้มแทนที่จะใช้เงา ความหนาแน่นสูง: จังหวะแนวตั้งกว้าง (ช่องว่างระหว่างส่วนต่างๆ 48–64 พิกเซล) เลย์เอาต์แบบเต็มความกว้างที่อยู่ตรงกลาง และพื้นที่ว่างรอบข้อความอย่างกว้างขวาง สีเดียวที่มีคือความแตกต่างระหว่างสีขาวและสีดำ ทำให้ปุ่มสีเข้มเป็นองค์ประกอบที่โดดเด่นที่สุดในแต่ละหน้า และแถบโลโก้แบรนด์พันธมิตรในโทนสีเทาเป็นองค์ประกอบภาพตกแต่งเพียงอย่างเดียว
การจัดวางเลย์เอาต์แบบกึ่งกลางเต็มความกว้าง (1200 พิกเซล) พร้อมจังหวะแนวตั้งที่ลงตัว องค์ประกอบหลักคือบล็อกเดียวที่อยู่ตรงกลาง: ปุ่มควบคุมสีเข้มแบ่งเป็นส่วนๆ อยู่ด้านบน หัวข้อ "Inter" ขนาดใหญ่ หัวข้อย่อยแบบบรรทัดเดียว และปุ่มสองปุ่มที่อยู่ติดกัน (ทึบและโปร่งแสง) – ไม่มีภาพด้านข้าง ไม่มีส่วนแบ่งเลย์เอาต์ ด้านล่างองค์ประกอบหลักคือแถบโลโก้สีเทาที่อยู่ตรงกลาง แต่ละส่วนถัดไปจะใช้รูปแบบเดียวกัน: บล็อกชื่อเรื่องและหัวข้อย่อยจัดชิดซ้าย จากนั้นเป็นกรอบแสดงสินค้าแบบเต็มความกว้างพร้อมช่องว่างระหว่างส่วนต่างๆ 48–64 พิกเซล การนำทางมีน้อยมาก: แถบด้านบนที่มีลิงก์อยู่ตรงกลางและปุ่มควบคุมจัดชิดขวา ไม่มีแถบด้านข้าง ไม่มีเมนูขนาดใหญ่ หน้าเว็บอ่านจากบนลงล่างเหมือนเป็นชุดข้อความที่จัดวางอยู่ตรงกลาง โดยแต่ละข้อความมีพื้นที่เพียงพอ – เลย์เอาต์ให้ความรู้สึกเหมือนพอร์ตโฟลิโอเชิงบรรณาธิการมากกว่าหน้าสินค้าที่ดูวุ่นวาย
การออกแบบภาพนั้นเรียบง่ายและเน้นการใช้งาน ระบบใช้โหมดภาพสองโหมด: (1) ภาพหน้าจอผลิตภัณฑ์และแบบจำลอง UI ที่อยู่ในกรอบรัศมี 24 พิกเซล ซึ่งแสดงส่วนประกอบอินเทอร์เฟซจริง (ตาราง ปุ่ม ฟอร์ม) ที่แสดงผลในโทนสีขาวดำเดียวกัน ทำให้ภาพหน้าจอดูเหมือนผสานรวมเข้ากับหน้าเว็บได้อย่างราบรื่น (2) แถบโลโก้พันธมิตรสีเทาเพียงแถบเดียวทำหน้าที่เป็นหลักฐานทางสังคม แสดงผลแบบเรียบ ไม่มีสีหรือกรอบ ไม่มีภาพถ่ายไลฟ์สไตล์ การไล่ระดับสีแบบนามธรรม หรือภาพเรนเดอร์ 3 มิติ องค์ประกอบภาพประกอบเพียงอย่างเดียวคือ "ไทล์" ผลิตภัณฑ์สีเข้ม วางอยู่ตรงกลางพื้นหลังสีเทาโทนอบอุ่นพร้อมไอคอนแบรนด์ ซึ่งถูกมองว่าเป็นการสาธิตผลิตภัณฑ์ ไม่ใช่การตกแต่ง ภาพทั้งหมดอยู่ในรูปแบบการจัดวางแบบข้อความ โดยน้ำหนักภาพอยู่ที่ข้อความ
จานสี
เป็นกลาง
- Page Canvas
#fafafa— พื้นหลังของหน้ากระดาษ โปสการ์ดบนผืนผ้าใบ ตัวอักษรสีอ่อนบนพื้นผิวสีเข้ม – สีขาวโทนอบอุ่นที่เป็นพื้นฐานของระบบขาวดำทั้งหมด - Hairline Border
#e5e7eb— เส้นแบ่ง, ขอบการ์ด, กรอบรูปภาพ, เส้นขอบไอคอน - เส้นขอบประเภทที่ใช้บ่อยที่สุดในระบบนี้ กำหนดโครงสร้างเชิงพื้นที่ - Card Surface
#ededed— พื้นหลังยกสูงสำหรับไพ่ ซึ่งเป็นพื้นผิวเพิ่มเติม จะอยู่เหนือผืนผ้าใบหนึ่งขั้น ทำให้เกิดการจัดกลุ่มโดยไม่มีเงา - Divider Mid
#dadada— เส้นแบ่งกลางและช่วงเปลี่ยนผ่านระหว่างส่วนต่างๆ - Graphite
#242424— ใช้สีพื้นกลางที่มีความตัดกันสูงสำหรับปุ่มหลักบนพื้นผิวสีอ่อน - Ink Black
#171717— ข้อความหลัก หัวข้อ และโครงร่างไอคอน - ดูเท่กว่ากราไฟต์เล็กน้อย ใช้สำหรับการจัดวางตัวอักษรมากกว่าพื้นผิว
การจัดพิมพ์
จาก 12 เป็น 128 พิกเซล · 7 ขั้นตอน
- Inter — ทดแทน: Inter (Google Fonts) · โครงร่าง 500, 600, 700 · ระบบส่วนติดต่อผู้ใช้แบบไม่มีเชิง (sans-serif) ประกอบด้วย การนำทาง เนื้อหาหลัก ปุ่ม หัวข้อย่อย และหัวข้อส่วนต่างๆ น้ำหนักตัวอักษร: 500 สำหรับเนื้อหาหลักและส่วนควบคุม 600 สำหรับหัวข้อย่อยและสัญลักษณ์เน้นการนำทาง และ 700 สำหรับหัวข้อส่วนต่างๆ การเว้นวรรคตัวอักษรแบบติดลบอย่างมากช่วยบีบอัดรูปทรงเรขาคณิตในทุกขนาด ทำให้ส่วนติดต่อผู้ใช้ดูเรียบง่ายและทันสมัย
- Instrument Serif — ทดแทน: Playfair Display · โครงร่าง 400 · แบบอักษรเซริฟที่ออกแบบมาโดยเฉพาะสำหรับพาดหัวข่าวและเนื้อหาบรรณาธิการ น้ำหนักตัวอักษร 400 และระยะห่างระหว่างตัวอักษร -0.025em สร้างรูปลักษณ์ที่สง่างามและเป็นตัวเอียง ซึ่งตัดกับรูปทรงเรขาคณิตแบบอุตสาหกรรมของ Inter ซึ่งเป็นเทคนิคเฉพาะตัว: คำหรือวลีเซริฟเพียงคำเดียวภายในหน้าที่มีแบบอักษรซานเซริฟ ทำหน้าที่เป็นเครื่องหมายวรรคตอนทางสายตามากกว่าจะเป็นรูปแบบพาดหัวข่าว
- Fragment Mono — ทดแทน: JetBrains Mono · โครงร่าง 400 · ใช้สีโมโนเพื่อเน้นองค์ประกอบที่คล้ายโค้ดแบบแทรกในบรรทัด ป้ายกำกับแท็ก และคำอธิบายทางเทคนิค ใช้ในปริมาณน้อย โดยจะปรากฏในรายการฟังก์ชันและคำอธิบายประกอบแบบแทรกในบรรทัด ในกรณีที่เครื่องมือออกแบบต้องการระบุว่า "นี่คือผลลัพธ์จากเครื่องจักร"
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | เฉลี่ย |
| ขั้นตอนพื้นฐาน | 8px |
| รัศมีปุ่ม | 16px |
| รัศมีการ์ด | 24px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 64px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Subframe และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- monopo saigon — แสงเรืองรองระยิบระยับราวกับของเหลวอยู่เบื้องหลังความเงียบงันของกองบรรณาธิการ—แกลเลอรีภาพถ่ายขาวดำที่ลอยล่องอยู่บนแสงหลอมเหลว
- Hyer Aviation — ยามพลบค่ำในห้องนักบินเหนือกระดาษปาร์ชเมนต์ ท้องฟ้าสีซีดในยามรุ่งอรุณบรรจบกับโลโก้ตัวอักษรแบบมีเชิงขนาดเท่าลำตัวเครื่องบิน และสีดินเผาโทนอบอุ่นเพียงสีเดียวช่วย打破ความเรียบง่ายแบบขาวดำ
- OFF+BRAND. — ทรงกลมเหลือบสีบนกระดาษปาร์ชเมนต์อุ่นๆ
- Seed — สิ่งมีชีวิตภายใต้กระจกในห้องปฏิบัติการ
- Eindhoven Design District — การออกแบบสไตล์บรูทัลลิสม์บนกระดาษขาว เป็นแถลงการณ์ด้านการออกแบบของเทศบาล ที่ใช้ตัวอักษรขนาดใหญ่ ภาพถ่ายน้อยที่สุด และความเรียบง่ายอย่างที่สุด
- Miranda — ตัวอักษรแบบคลาสสิกขนาดใหญ่บนพื้นหลังสีครีมอ่อน—บทบรรณาธิการหนังสือพิมพ์สำหรับยุคดิจิทัล
- Monocle — หนังสือพิมพ์คุณภาพสูง รูปแบบขนาดใหญ่ พิมพ์บนกระดาษสีครีม บทบรรณาธิการได้รับการคัดสรรอย่างพิถีพิถัน ทุกคอลัมน์มีความสำคัญ และใช้สีที่มีความหมายเพียงสีเดียวบนหน้ากระดาษ
- Agencja brandingowa — แกลเลอรี่ภาพบรรณาธิการในโทนสีขาว โดยใช้หมึกสีดำในการจัดวางตัวอักษร
- Websmith Studio — แสงยามเช้าบนกระดาษสีครีม
- Aspelin Reitan — หอจดหมายเหตุสถาปัตยกรรมใต้แสงเทียน - หน้าเว็บนี้ดูเหมือนแฟ้มสะสมผลงานสถาปัตยกรรมที่ติดอยู่บนผนังสีครีมอบอุ่น โดยมีข้อความสีขาวบรรทัดเดียวลอยอยู่เหนือภาพแต่ละภาพตลอดความกว้างของหน้าเว็บ
- Public — บทความขาวดำบนพื้นหินอ่อนเย็นชา ราวกับภาพวาดขาวดำ ที่ใช้ฟอนต์แบบมีเชิงขนาด 300 พอยต์ และมีเส้นสีม่วงเพียงเส้นเดียวเป็นจุดเด่นที่ให้สีสันทั้งหมด
- Motto — ภาพพิมพ์ขนาดใหญ่บนกระดาษ – เสียงเดียวที่มั่นใจประกาศตนบนกระดาษสีขาวบริสุทธิ์