Electronic Materials Office
ถ่านที่ยังคุกรุ่นอยู่ในห้องแสดงภาพที่ตกแต่งด้วยถ่าน
สำนักงานสื่ออิเล็กทรอนิกส์เปรียบเสมือนห้องทำงานยามดึก: พื้นหลังสีดำด้านสนิท แสงสีส้มเรืองรองเพียงดวงเดียว และแบบอักษรที่กระซิบมากกว่าประกาศอย่างโจ่งแจ้ง อินเทอร์เฟซปฏิบัติต่อแต่ละหน้าจอเหมือนสตูดิโอมืด ภาพถ่ายของแป้นพิมพ์เป็นแหล่งกำเนิดแสงเพียงแหล่งเดียว และ UI ก็ปฏิบัติตามนั้น หัวข้อข่าวที่ใช้แบบอักษร GT-Flexa ขนาด 200 ลอยอยู่ในพื้นที่ว่างขนาดใหญ่ เนื้อหาข้อความมีขนาดเล็กและดูเป็นธรรมชาติ (Times) สีถูกวัดอย่างพิถีพิถัน: สีขาวบริสุทธิ์สำหรับตัวอักษร สีม่วงอ่อน (#9e9eff) สำหรับลิงก์ และปุ่มกระตุ้นการดำเนินการสีส้ม (#f45500) เพียงปุ่มเดียวบนหน้าเว็บที่เรืองแสงด้วยแสงเรืองรองขนาด 30 พิกเซล ส่วนประกอบต่างๆ พอดีอย่างแน่นหนาภายในรัศมี 20 พิกเซล ขอบแทบมองไม่เห็นที่ #9d9d9d และเงาเดียวในระบบคือแสงสีสองสีรอบๆ ปุ่มกระตุ้นการดำเนินการหลัก
หน้าจอหลักเป็นภาพขาวดำขนาดเต็มความกว้างของหน้าจอ จัดวางเนื้อหาให้อยู่ตรงกลางและมีความกว้างสูงสุด (~1200 พิกเซล) หน้าจอเริ่มต้นด้วยการ์ดแสดงข้อมูลขนาดรัศมี 20 พิกเซล ซึ่งบรรจุวิดีโอผลิตภัณฑ์ กินพื้นที่ประมาณ 80% ของความกว้างของหน้าจอ ตามด้วยหัวข้อแบบหลายบรรทัด GT-Flexa 200 ที่ขึ้นบรรทัดใหม่เกือบเต็มความกว้างของเนื้อหา การจัดวางส่วนต่างๆ ประกอบด้วยส่วนคำอธิบายผลิตภัณฑ์แบบตัวพิมพ์ใหญ่ทั้งหมดในสไตล์ Tobias ตามด้วยตาราง 2x2 (บนเดสก์ท็อป) ของการ์ดคำอธิบายผลิตภัณฑ์ การ์ดใช้เส้นขอบ #9d9d9d ขนาด 1 พิกเซล และช่องว่างระหว่างการ์ด 24 พิกเซล มีการเว้นระยะห่างแนวตั้งอย่างเหมาะสม โดยแต่ละส่วนคั่นด้วยพื้นที่ว่างสีเทาเข้มขนาด 48–128 พิกเซล แทนที่จะใช้เส้นแบ่ง การนำทางเป็นแผงโปร่งใสเดียวที่ยึดอยู่ด้านบน มีกลุ่มลิงก์ที่ซ่อนอยู่และปุ่มกระตุ้นการดำเนินการ Ember เพียงปุ่มเดียว ไม่มีแถบด้านข้าง ไม่มีเมนูขนาดใหญ่ ไม่มีเมนูนำทางรอง
ภาพเหล่านี้ใช้เพื่อการสาธิตผลิตภัณฑ์เท่านั้น—เป็นภาพมาโครระยะใกล้ของคีย์บอร์ด Altar I โดยมีพื้นหลังสีดำสนิท และมีแสงส่องจากด้านบน ทำให้ตัวเคสเรืองแสงและปุ่มกดสะท้อนแสงบริเวณขอบ ไม่มีภาพชีวิตประจำวัน ไม่มีมือคน ไม่มีบริบททางสิ่งแวดล้อม ภาพมีความคมชัดสูงและมืด สีเดียวที่อยู่นอกเหนือโทนสีขาวดำคือสวิตช์เปิดปิดสีส้มบนคีย์บอร์ด ซึ่งสอดคล้องกับคำกระตุ้นการตัดสินใจ Ember Orange ภาพเป็นสี่เหลี่ยมจัตุรัสหรืออัตราส่วน 16:9 วางอยู่ในการ์ดที่มีรัศมี 20 พิกเซลและยื่นออกไปนอกขอบการ์ด (ไม่มีระยะห่างรอบภาพ และข้อความอยู่ด้านล่างขอบ) รูปแบบไอคอน: ไอคอนเดียวที่มีคือวงกลมเล็กๆ ที่เติมสี (●) อยู่หน้าโลโก้—จุดสีส้มจุดเดียว หนาประมาณ 6 พิกเซล
จานสี
ยี่ห้อ
- Ember Orange
#f45500— ปุ่มการกระทำหลักที่มีการเติมสีเป็นพื้นผิวที่มีสีสันเพียงอย่างเดียวใน UI โดยจะมีรัศมีสีส้มขนาด 30 พิกเซลล้อมรอบอยู่เสมอ ทำให้ดูเหมือนเรืองแสงเป็นเส้นใย รัศมีเรืองแสงด้านนอกขนาด 30 พิกเซลบนปุ่มโทรหลักนั้นจำลองสัญลักษณ์หกเหลี่ยมสีส้ม Ember Orange แต่ปรากฏเป็นเงาแทนที่จะเป็นการเติมสี ทำให้ปุ่มดูเหมือนส่องสว่างจากภายใน
เป็นกลาง
- Studio Charcoal
#202020— พื้นผิวของผืนผ้าใบและกระดาษแข็งนั้นคล้ายกับพื้นของหอศิลป์ที่มืดมิด ไม่มืดสนิท เพื่อให้สายตาได้พักสายตาไปกับขอบที่นุ่มนวล - Bone White
#ffffff— ข้อความหลัก ขอบบางรอบรูปภาพ และพื้นผิวกลับด้านที่ไม่ค่อยพบเห็น ลำดับชั้นของแบบอักษรทั้งหมดถูกรักษาไว้อย่างอิสระ - Ash Gray
#9d9d9d— ตัวอักษรสีอ่อน ขอบการ์ดที่ดูเรียบง่าย และคำบรรยายภาพที่ไม่แสดงอารมณ์ เป็นสีเทาโทนกลางเพียงอย่างเดียวในโทนสีที่ใช้เมื่อสีขาวดูฉูดฉาดเกินไป - Mid Felt
#eaeaea— การลงสีพื้นผิวบางๆ สำหรับแผงกลับด้านหรือตารางโมดอล - สีขาวที่อยู่ระหว่างสีเบจและสีเข้มของผ้าใบ - Carbon
#000000— จุดเด่นที่เห็นได้ชัดที่สุดคือเส้นขีดของไอคอนและกรอบที่ตัดกัน ซึ่งผืนผ้าใบสีเทาเข้มนั้นสว่างเกินไปจนไม่สามารถคงรูปทรงได้ดี - Lavender Link
#9e9eff— สีของลิงก์ที่ฝังอยู่และเส้นขอบของกรอบการกระทำเพิ่มเติมเป็นสีโทนเย็นที่ตัดกับสีส้มโทนอบอุ่น ทำให้มั่นใจได้ว่าการกระทำต่างๆ จะอ่านได้ชัดเจนบนพื้นหลังสีเทาเข้ม
การจัดพิมพ์
จาก 16 เป็น 86 พิกเซล · 8 ขั้นตอน
- GT-Flexa — ทดแทน: Inter (200/400) or Manrope (200/400) · โครงร่าง 200, 400 · แบบอักษรหลักสำหรับหัวข้อและองค์ประกอบตกแต่ง แบบอักษรขนาด 200 เหมาะสำหรับหัวข้อที่มีขนาดใหญ่กว่า 24 พิกเซล ซึ่งเป็นสไตล์ที่เป็นเอกลักษณ์: ที่ขนาด 68 พิกเซลและ 86 พิกเซล ตัวอักษรจะดูเหมือนกลืนหายไปในอากาศมากกว่าที่จะโดดเด่น แบบอักษรขนาด 400 เหมาะสำหรับหัวข้อย่อยและคำบรรยายภาพ ซึ่งตัวอักษรแทบจะไม่ได้ยิน ระยะห่างระหว่างบรรทัดลดลงเหลือ 1.0 ในขนาดที่ใหญ่ที่สุด เพื่อให้แบบอักษรตกแต่งเรียงซ้อนกันเหมือนเสาอากาศ
- Tobias-light — ทดแทน: Söhne Buch or Inter Tight · โครงร่าง 400 · รูปแบบตัวอักษรเสริมสำหรับหัวข้อส่วนต่างๆ และโลโก้ส่วนท้าย ใช้ในระดับที่ต่ำกว่า GT-Flexa 200 หนึ่งระดับเพื่อสร้างความแตกต่างของโทนสี—Tobias ให้ความรู้สึกที่ดูเป็นสถาปัตยกรรมและแสดงออกได้ดีกว่า ในขณะที่ GT-Flexa ให้ความรู้สึกที่ดูมีบรรยากาศมากกว่า การเว้นระยะห่างระหว่างตัวอักษรแบบติดลบช่วยลดสัดส่วนที่กว้างของ Tobias Light ลง
- Times — ทดแทน: Source Serif 4 or PT Serif · โครงร่าง 400 · เนื้อหาหลักและหัวข้อในย่อหน้าต่างๆ ถูกออกแบบมาให้ตัดกันอย่างจงใจกับแบบอักษรที่มีรูปทรงเรขาคณิตและตกแต่งสวยงาม โดยใช้แบบอักษรมีเชิง (serif) เชิงเหล่านี้ช่วยเพิ่มความอบอุ่นและความน่าเชื่อถือให้กับคำอธิบายผลิตภัณฑ์โดยไม่ทำให้ขนาดของข้อความหลักใหญ่เกินไป
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | หนาแน่น |
| ขั้นตอนพื้นฐาน | 4-8px |
| รัศมีปุ่ม | 20px |
| รัศมีการ์ด | 20px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 48-128px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Electronic Materials Office และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- OFFFICE : — แกลเลอรี่แนวฟิล์มนัวร์ที่ถูกห้อมล้อมด้วยตัวอักษรขนาดใหญ่
- Bibliothèque — ห้องแสดงงานรูปทรงลูกบาศก์สีดำใต้แสงไฟสปอตไลท์ – จานเรืองแสงโดดเดี่ยวในห้องโถงกว้างใหญ่และมืดมิด
- 21 TSI — พื้นที่ว่างเปล่าสีแดงฉาน เงาเดียวที่ปรากฏ – บทความแฟชั่นชั้นสูงที่ส่วนติดต่อผู้ใช้กลืนหายไปในบรรยากาศ
- Structured — หอศิลป์ยุคเรเนซองส์บนกระดาษคล้ายดินน้ำมัน
- CHAIBOY — ผนังแกลเลอรี่สีดำที่มีภาพถ่ายส่องแสงจากด้านหลังเพียงภาพเดียว
- Holiday 100 — แกลเลอรี่แห่งของขวัญยามเที่ยงคืน—หัวข้อแบบตัวอักษรมีเชิงทำหน้าที่เป็นเหมือนไฟสปอตไลท์ พื้นหลังสีเข้มเปรียบเสมือนกำแพงกำมะหยี่ และภาพสินค้าแต่ละชิ้นแขวนอยู่ราวกับกรอบรูปที่คัดสรรมาอย่างพิถีพิถัน
- Apple (España) — ห้องแสดงงานศิลปะของพิพิธภัณฑ์ ภายใต้แสงแดดอ่อนๆ เป็นพื้นที่สีขาวโล่งกว้างที่ดึงดูดใจและไร้น้ำหนัก โดยแต่ละชิ้นงานจัดแสดงจะถูกส่องสว่างด้วยไฟสปอตไลท์ที่ส่องไปยังผนังสีอ่อนๆ
- Analogue — ตู้โชว์สีดำ – สินค้าลอยอยู่ในความว่างเปล่า
- Apple (España) — ห้องจัดแสดงนิทรรศการ Obsidian Gallery เป็นห้องจัดแสดงที่มืดมิด ซึ่งมีวัตถุไทเทเนียมชิ้นเดียวเรืองแสงตัดกับฉากหลังสีดำสนิท
- Studio Oker — แกลเลอรี่ที่มืดสลัวประดับประดาด้วยสีแดงสด—ห้องเก็บแฟ้มผลงานที่ผนังบุด้วยสีดำ ตัวอักษรสีขาวดูเหมือนลอยอยู่ และเสียงกระซิบสีแดงเพียงเสียงเดียวแทรกผ่านความเงียบงัน
- 099 SUPPLY — ผนังแกลเลอรี่ที่เต็มไปด้วยวัตถุสีดำและสีขาว
- Retool — ห้องทำงานหินออบซิเดียนที่อบอุ่น – พื้นผิวสำหรับเครื่องมือที่มีความแม่นยำสูง ส่องสว่างด้วยถ่านที่คุกรุ่น ที่ซึ่งทุกสิ่งทุกอย่างถูกสร้างสรรค์ขึ้น