Superhuman
คณะบรรณาธิการช่วงเวลาแสงสีทอง
Superhuman ผสมผสานระหว่างภาพถ่ายเชิงบรรณาธิการและส่วนติดต่อผู้ใช้ของซอฟต์แวร์ได้อย่างลงตัว พื้นหลังสีโทนอบอุ่นคล้ายกระดาษปาร์ชเมนต์ (ไม่ใช่สีขาวบริสุทธิ์) ล้อมรอบองค์ประกอบแบรนด์สีแดงเข้มและสีม่วงสดใส หัวข้อข่าวใช้ฟอนต์ขนาด 460 ให้ความรู้สึกเบาบาง ไม่ฉูดฉาด ทำให้ภาพถ่ายแบบภาพยนตร์เต็มหน้าทำหน้าที่หลัก ขณะที่การ์ดส่วนติดต่อผู้ใช้ผลิตภัณฑ์แบบโปร่งแสงลอยอยู่เหนือภาพ โทนสีโดยรวมยังคงสงบและเรียบง่าย พื้นผิวสีครีม ข้อความสีเทาเข้ม ขอบสีเทาอ่อน และเว้นระยะห่างระหว่างองค์ประกอบอย่างเหมาะสม โดยใช้สีเฉพาะเพื่อเน้นย้ำเอกลักษณ์ของแบรนด์ เช่น ปุ่มกระตุ้นการดำเนินการสีแดงเข้ม ลิงก์สีม่วง และปุ่มเสริมสีม่วงอ่อน ระบบหลีกเลี่ยงเงาและไล่ระดับสีที่ฉูดฉาดบนพื้นผิวส่วนติดต่อผู้ใช้ ความลึกของภาพเกิดจากภาพถ่ายที่ซ้อนกันและการเบลอพื้นหลังอย่างละเอียดอ่อนในส่วนหัวเรื่อง มากกว่าการใช้เอฟเฟกต์การซ้อนภาพ
องค์ประกอบหลักคือภาพถ่ายเต็มความกว้างที่มีหัวข้ออยู่ตรงกลาง (48-64 พิกเซล/460) และปุ่มกระตุ้นการดำเนินการเพียงปุ่มเดียวที่เต็มไปด้วยภาพไวน์ โดยมี UI การ์ดผลิตภัณฑ์โปร่งแสงลอยอยู่ซ้อนทับที่ขอบด้านซ้ายและขวา ด้านล่างองค์ประกอบหลักคือแถบโลโก้สีขาว (6 ช่องต่อแถว ความกว้างสูงสุดจำกัด) จากนั้นเป็นส่วนแท็บที่มีพื้นผิวการ์ดสีขาวบนพื้นหลังสีครีม แถบสีฟ้าอมเข้มตัดกับจังหวะประมาณสองในสามของหน้า – เต็มความกว้าง สองคอลัมน์ (ภาพอยู่ทางซ้าย ข้อความอยู่ทางขวา) – สร้างความแตกต่างของโทนสีเพียงอย่างเดียวเมื่อคุณเลื่อนหน้าจอ ตามด้วยแถบบรรยากาศไล่ระดับสี ระยะห่างแนวตั้งระหว่างส่วนต่างๆ คือ 64-96 พิกเซล ความกว้างของเนื้อหาสูงสุดคือประมาณ 1200 พิกเซลอยู่ตรงกลาง โดยองค์ประกอบหลักและแถบสีเข้มครอบคลุมความกว้างทั้งหมดของหน้าจอ การนำทางเป็นส่วนหัวคงที่เดียวที่มีพื้นหลังเบลอ ไม่มีแถบด้านข้าง ไม่มีเมนูขนาดใหญ่ ส่วนท้ายเป็นหน้าสีแดงเข้มเต็มความกว้างที่มีเค้าโครงลิงก์แบบหลายคอลัมน์ จังหวะโดยรวมคือ: กรอบหลัก → เนื้อหาสีขาว/ครีมที่ดูสงบ → แถบสีเข้มพร้อมภาพหลัก → การไล่ระดับสีที่สร้างบรรยากาศ → ส่วนท้ายสีแดงเข้ม สลับแถบสีอ่อนและสีเข้มเพื่อสร้างจังหวะแบบบทความ
องค์ประกอบภาพหลักคือภาพถ่ายแบบภาพยนตร์: ภาพบุคคลเต็มหน้าจอตัดกับท้องฟ้าโล่งเป็นจุดโฟกัส โดยมีแถบบรรยากาศที่สองวางอยู่ด้านล่างของหน้า ภาพมีโทนสีอบอุ่น ลดทอนรายละเอียดเล็กน้อย และถ่ายจากด้านข้าง ชวนให้นึกถึงช่วงเวลาแสงสีทอง ทำให้ดูเหมือนบทความมากกว่าภาพองค์กร แถบสีเข้มที่มีรูปสี่เหลี่ยมผืนผ้าโปร่งแสงและข้อความที่เขียนด้วยลายมือซ้อนทับอยู่บนภาพถ่ายของชายคนหนึ่งที่กำลังครุ่นคิด—เป็นภาพตัดปะของพื้นผิวต่างๆ มากกว่าภาพเดียว อินเทอร์เฟซผู้ใช้แสดงเป็นแผ่นกระจกลอยที่ซ้อนทับอยู่บนภาพถ่ายโดยตรง แทนที่จะเป็นภาพหน้าจอแยกต่างหาก ไม่มีภาพประกอบสำเร็จรูป ไม่มีภาพเรนเดอร์ 3 มิติ และไม่มีรูปแบบตกแต่งนามธรรมใดๆ ยกเว้นแถบบรรยากาศไล่ระดับสี ไอคอนเป็นไอคอนเส้นขาวดำแบบมินิมอล กว้างประมาณ 16-20 พิกเซล โดยมีความกว้างเดียวที่สอดคล้องกับน้ำหนักตัวอักษร 460 พอยต์
จานสี
ยี่ห้อ
- Midnight Wine
#421d24— ปุ่มควบคุมหลัก แบนเนอร์โฆษณา และส่วนท้ายเว็บไซต์ใช้สีเบอร์กันดีโทนอบอุ่นเกือบดำ ซึ่งให้ความรู้สึกเหมือนหมึกมากกว่าสีแดง ช่วยเสริมโทนสีโดยรวมโดยไม่ดูฉูดฉาดเกินไป - Royal Violet
#714cb6— สีม่วงใช้สำหรับเน้นลิงก์ แท็ก และวลีสั้นๆ ไม่ควรใช้เป็นสีหลักสำหรับข้อความกระตุ้นการกระทำ (Call to Action)
เป็นกลาง
- Lilac Mist
#d4c7ff— พื้นผิวรอง ไอคอนเรืองแสง และพื้นหลังปุ่มโปร่งแสงทั้งหมดใช้สีม่วงอ่อนที่บ่งบอกถึงสไตล์ของแบรนด์โดยไม่ดึงดูดความสนใจมากเกินไป - Deep Lagoon
#0c4243— พื้นหลังสีเข้มของภาพการ์ตูน ซึ่งใช้เป็นองค์ประกอบหลักในการเล่าเรื่อง เป็นพื้นผิวสีเข้มเพียงแห่งเดียวในระบบ โดยผสมผสานกับลวดลายเรขาคณิตที่ซ้อนทับอยู่ - Warm Parchment
#f2f0eb— พื้นผิวการทำงานของหน้าเว็บเป็นองค์ประกอบหลัก โดยใช้สีครีมโทนอบอุ่นแทนสีขาวเป็นสีพื้นฐาน ทำให้ระบบโดยรวมดูอบอุ่นและมีสไตล์แบบบรรณาธิการ - Soft Mist
#e3e3e2— ขอบบางๆ เส้นขอบการ์ด เส้นแบ่งต่างๆ—สีเทาอ่อนอบอุ่นที่กลมกลืนกับกระดาษ parchment แต่ก็กำหนดขอบเขตได้อย่างชัดเจน - Ink Charcoal
#292827— เนื้อหาหลัก หัวข้อ และเส้นขอบไอคอน - สีโทนอบอุ่นเกือบดำ มีสีน้ำตาลเจืออยู่เล็กน้อย ให้ความรู้สึกเหมือนหมึกบนกระดาษ ไม่เย็นชา #000 - Stone Gray
#666666— ข้อความเสริม ข้อความสนับสนุน คำอธิบายที่ไม่โจ่งแจ้ง - ใช้สีเทาอ่อนเพียงสีเดียว และใช้ในปริมาณที่พอเหมาะเพื่อไม่ให้แย่งความสนใจจากข้อความหลัก
การจัดพิมพ์
จาก 12 เป็น 64 พิกเซล · 8 ขั้นตอน
- Super Sans VF — ทดแทน: Inter (closest open equivalent for variable weight range) · โครงร่าง 460, 500, 540, 600, 700 · ใช้ฟอนต์เดียวทั้งระบบ ตัวแปรแกนครอบคลุมช่วงตั้งแต่ 460 (ฟอนต์ลายเซ็นที่ตัดขอบเล็กน้อยสำหรับข้อความหัวเรื่องขนาดใหญ่ทั้งหมด) ไปจนถึง 540 (ข้อความเนื้อหาที่เน้น) และ 700 (คำบรรยายภาพขนาดเล็กตัวหนา) VF ที่ออกแบบมาเป็นพิเศษทำให้หัวเรื่องขนาด 460 ดูตั้งใจมากกว่าดูไม่เป็นระเบียบ—ที่ระยะห่างระหว่างตัวอักษร 48-64 พิกเซล พร้อมระยะห่างที่แคบ เอฟเฟกต์ "ตัดขอบเล็กน้อย" จึงดูมั่นใจมากกว่าดูผอมบาง
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | หนาแน่น |
| ขั้นตอนพื้นฐาน | 8px |
| รัศมีปุ่ม | 16px |
| รัศมีการ์ด | 16px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 64-96px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Superhuman และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- AI for Business — โชว์รูมสำหรับการถ่ายภาพสไตล์บรูทาลิสต์ในโทนสีเทาอบอุ่น
- Jeton — บทความบรรณาธิการเกี่ยวกับฟินเทคบนหินอ่อนสีอบอุ่น
- Airtable — ห้องสัมมนาบรรยากาศอบอุ่น โดยแบ่งเป็นบทต่างๆ ด้วยสีที่แตกต่างกัน
- Osmo — พิพิธภัณฑ์นักพัฒนาบนคอนกรีตสีเทา
- Linktr — โปสเตอร์บทบรรณาธิการเรียงซ้อนกันเหมือนลูกอม เว็บไซต์ออกแบบด้วยบล็อกสี โดยมีพาดหัวสีเขียวสดใสตัดกับพื้นหลังสีน้ำเงินโคบอลต์ และองค์ประกอบการนำทางรูปทรงแคปซูลสีขาวลอยอยู่เหนือพื้นหลังสีแดงเข้ม
- Outsource Consultants — แผ่นพิมพ์สถาปัตยกรรมขนาดใหญ่บนกระดาษสีขาวนวล สุนทรียภาพแบบโมโนกราฟิก โดยมีเพียงจุดสีครามสดใสจุดเดียวที่ตัดกับตารางสีโทนอบอุ่นที่เน้นการจัดวางตัวอักษรอย่างหนาแน่น
- Streamtime — กระดานสร้างแรงบันดาลใจแบบสัมผัส - โต๊ะสำหรับทำสมุดภาพ (Scrapbooking) ของนักออกแบบ
- Switch-Lit — ตารางบรรณาธิการพิมพ์ด้วยหมึกบนกระดาษสีครีม
- HubSpot — กระดาษสีครีมโทนอบอุ่น ตัดกับสีส้มสดใสเพียงจุดเดียว HubSpot ดูคล้ายนิตยสารดีไซเนอร์ที่พิมพ์บนกระดาษหนาคุณภาพดี หัวเรื่องเป็นแบบตัวอักษรมีเชิง หน้ากระดาษสีครีมโทนอบอุ่น และมีสีส้มสดใสเพียงจุดเดียวที่เน้นเฉพาะประเด็นสำคัญที่สุด
- Granola — บันทึกภาคสนามบนกระดาษหนังลูกวัวสีอบอุ่น—กราโนลาให้ความรู้สึกเหมือนสมุดบันทึกโมลสไคน์ที่ใช้มานานเปิดไว้บนโต๊ะที่มีแสงแดดส่องถึง: หัวเรื่องแบบมีเชิงให้ความรู้สึกมั่นคง สีเขียวที่ดูเป็นธรรมชาติเหมือนหมึกที่ทำจากพืช และเส้นบางๆ ในขอบของการ์ดที่คล้ายกับบันทึกที่เขียนด้วยลายมือ
- Secure — การสนทนาในร้านกาแฟสไตล์ยุโรปท่ามกลางแสงแดดอ่อนๆ เป็นการสนทนาทางวิดีโอที่อบอุ่นและมีสไตล์ โดยที่หัวข้อแบบมีเชิงอ่านเหมือนบทความในนิตยสารที่น่าคิด มากกว่าหน้าเว็บผลิตภัณฑ์เทคโนโลยี
- Mockups made easy — สตูดิโอออกแบบสิ่งพิมพ์บนกระดาษขาว