Shopify
เรือนกระจกเที่ยงคืน - เครื่องหมายการค้าเบ่งบานบนพื้นหลังสีเทอร์ควอยซ์เข้ม ส่องสว่างด้วยประกายแสงสีเขียวมิ้นต์เพียงเล็กน้อย
ระบบการออกแบบของ Shopify เปรียบเสมือนห้องทำงานลับๆ สำหรับการค้าขาย: พื้นหลังสีดำสนิทที่แต้มด้วยสีเขียวเทอร์ควอยซ์เข้ม ตัวอักษรแบบไม่มีเชิงที่กว้างและดูมั่นใจ และสีเขียวมิ้นต์สดใสเพียงสีเดียวที่ใช้เน้นในส่วนที่กระตุ้นให้เกิดการโต้ตอบ อินเทอร์เฟซดูคล้ายห้องมืด ที่ซึ่งผลิตภัณฑ์และแบรนด์เป็นแหล่งกำเนิดแสง—ภาพถ่ายและหน้าร้านเปล่งประกายบนพื้นผิวสีดำสนิท ในขณะที่องค์ประกอบโครเมียมดูจางลง ส่วนประกอบต่างๆ มีรูปทรงเรขาคณิตแต่ก็ดูอ่อนโยน: การ์ดรัศมี 12 พิกเซลที่มีขอบบาง ปุ่มรูปทรงแคปซูล และตัวอักษรขนาด 330 ที่ให้ความรู้สึกถึงขนาดอย่างนุ่มนวลมากกว่าการตะโกน เครื่องหมายวรรคตอนสีเดียว (#36f4a4) ถูกใช้เพียงเล็กน้อยบนลิงก์ แท็ก และสถานะโฟกัส โดยสงวนสีไว้สำหรับส่วนการใช้งานเพื่อให้มั่นใจว่าเรื่องราวของร้านค้ายังคงเป็นจุดโฟกัสหลักทางสายตา
ความกว้างสูงสุดอยู่ที่ประมาณ 1280 พิกเซล จัดกึ่งกลาง โดยมีบล็อกสาดแสงแบบเต็มความกว้างยื่นออกไปนอกกรอบรูปภาพ จังหวะของหน้าเว็บจะสลับกัน: (1) หน้าสาดแสงสีเข้มแบบเต็มความกว้างพร้อมหัวเรื่องและปุ่มกระตุ้นการดำเนินการที่ซ้อนทับอยู่ (2) ส่วนสีเข้มที่สบายตาพร้อมบล็อกข้อความและรูปภาพที่มีความกว้างสูงสุดใน 2 คอลัมน์หรือตารางรูปภาพใน 3 คอลัมน์ (3) แผงแสดงสินค้าแบบโต้ตอบ (บัตรผลิตภัณฑ์ เครื่องคำนวณค่าจัดส่ง แผนที่โลก) แสดงเป็นบัตรนูนบนผืนผ้าใบที่ลึกกว่า การนำทางเป็นแถบด้านบนคงที่พร้อมโลโก้ + องค์ประกอบการนำทาง 3 รายการ + ลิงก์รอง + ปุ่มกระตุ้นการดำเนินการหลัก ทั้งหมดจัดเรียงชิดขวา จังหวะแนวตั้งใช้ช่องว่าง 80 พิกเซลระหว่างส่วนต่างๆ พร้อมการเปลี่ยนผ่านที่ราบรื่น—ไม่มีตัวแบ่งระหว่างส่วนสีเข้ม มีเพียงการเปลี่ยนแปลงโทนสีพื้นผิวเท่านั้น
การออกแบบภาพเน้นไปที่ผู้ค้าปลีกเป็นหลัก: ภาพถ่ายผลิตภัณฑ์ขนาดเต็มและภาพถ่ายจากกิจกรรมของแบรนด์มีน้ำหนักทางภาพมาก มักอยู่ในรูปแบบของพื้นหลังขนาดใหญ่ที่มีข้อความสีขาวซ้อนทับอยู่ ภาพถูกตัดแต่งอย่างกระชับ มีความคมชัดสูง และมีลักษณะที่รื่นเริง (เช่น เสียงระฆัง Nasdaq การทักทายกลุ่มคน ภาพระยะใกล้ของผลิตภัณฑ์ในมือ) พื้นหลังสีเข้มสร้างความรู้สึกว่าภาพเหล่านี้ส่องสว่างด้วยไฟสปอตไลท์ ภาพประกอบมีความเรียบง่าย—งานอธิบายหลักทำโดยภาพผลิตภัณฑ์ที่ฝังอยู่และภาพหน้าจอของหน้าร้านค้า ไอคอนเป็นแบบขาวดำ มีความกว้างของเส้น 1.5–2 พิกเซล โดยทั่วไปจะเป็นสีขาวหรือ #36f4a4 สำหรับสถานะที่ใช้งานอยู่
จานสี
ยี่ห้อ
- Shopify Mint
#36f4a4— ตัวบ่งชี้การนำทางที่ใช้งานอยู่ วงแหวนโฟกัส การเน้นแท็ก และการเน้นเมื่อวางเมาส์เหนือลิงก์ เป็นประกายสีสันเพียงอย่างเดียวที่สร้างความรู้สึกของการโต้ตอบที่เปิดใช้งานบนพื้นหลังสีเข้ม
เป็นกลาง
- Midnight Forest
#02090a— ภาพพื้นหลังหน้าเว็บ, ภาพพื้นหลังส่วนหัว, ภาพพื้นหลังส่วนต่างๆ - Deep Lichen
#061a1c— พื้นผิวหลักของบัตร แผงนูน และช่องสำหรับใส่เนื้อหา - Shaded Fern
#072720— แผงนำทาง, การ์ดเพิ่มเติม, การยกแผงขึ้นเล็กน้อยจนแทบมองไม่เห็น - Spruce Border
#1e2c31— เส้นขอบบางๆ สำหรับการ์ด เส้นแบ่ง และเส้นขอบช่องป้อนข้อมูล - Abyss Indigo
#000a1e— พื้นที่เพิ่มเติมสำหรับติดตั้งผลิตภัณฑ์/การสาธิต แผงพร้อมคำอธิบายฟังก์ชันต่างๆ - Pure White
#ffffff— ข้อความหลัก, สีปุ่ม, ชื่อเรื่อง, โลโก้
การจัดพิมพ์
จาก 12 เป็น 70 พิกเซล · 8 ขั้นตอน
- Neue Haas Grotesk — ทดแทน: Inter · โครงร่าง 330, 400, 500, 550, 600 · ระบบการจัดวางตัวอักษรหลักประกอบด้วย หัวข้อข่าวที่มีความหนาตัวอักษร 70–96 พิกเซล (330–400) ซึ่งดูเรียบง่ายมากกว่าที่จะโดดเด่น เนื้อหาหลักมีความหนาตัวอักษร 16–18 พิกเซล (400–500) และการนำทางและส่วนติดต่อผู้ใช้มีความหนาตัวอักษร 14–16 พิกเซล (500–550) ความหนาตัวอักษรที่บางมากเพียง 330 ในขนาดหน้าจอขนาดใหญ่เป็นคุณลักษณะที่โดดเด่น: มันสื่อถึงความมั่นใจผ่านความเรียบง่ายมากกว่าความใหญ่โต
- Inter Variable — ทดแทน: Inter · โครงร่าง 400, 420, 450, 550 · เป็นแบบอักษรประเภทที่สองที่ใช้ในองค์ประกอบส่วนติดต่อผู้ใช้สำหรับการนำทาง บันทึกย่อขนาดเล็ก การควบคุมแท็บ และข้อความขนาดเล็กในส่วนท้ายเอกสาร ตัวอักษรพิมพ์เล็กที่ใหญ่กว่าเล็กน้อยและระยะห่างระหว่างตัวอักษรที่เป็นมาตรฐานมากขึ้นทำให้สามารถอ่านได้ง่ายขึ้นในขนาดกะทัดรัด นอกจากนี้ยังเหมาะสำหรับสถานการณ์ที่แบบอักษรที่มีความหนา 420 ช่วยเติมเต็มช่องว่างระหว่างแบบอักษรขนาดปกติและขนาดกลาง
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | เฉลี่ย |
| ขั้นตอนพื้นฐาน | 12px |
| รัศมีปุ่ม | 9999px |
| รัศมีการ์ด | 12px |
| เงา | ไม่ - ใช้เส้นขอบแทนเงา |
| ระหว่างส่วนต่างๆ | 80px |
| ความกว้างของหน้า | 1280px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Shopify และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Retool — ห้องทำงานหินออบซิเดียนที่อบอุ่น – พื้นผิวสำหรับเครื่องมือที่มีความแม่นยำสูง ส่องสว่างด้วยถ่านที่คุกรุ่น ที่ซึ่งทุกสิ่งทุกอย่างถูกสร้างสรรค์ขึ้น
- Elektron — แผงควบคุมอุปกรณ์ในเวลาเที่ยงคืนนั้นแทบจะเป็นผืนผ้าใบสีดำสนิท ทำให้ภาพถ่ายผลิตภัณฑ์ดูโดดเด่น ในขณะที่ส่วนติดต่อผู้ใช้แทบจะมองไม่เห็น
- REKKI — แผงควบคุมการบินในห้องแล็บถ่ายภาพ
- OFFFICE : — แกลเลอรี่แนวฟิล์มนัวร์ที่ถูกห้อมล้อมด้วยตัวอักษรขนาดใหญ่
- Clyde — โชว์รูมแห่งนี้มีไฟสปอตไลท์เพียงดวงเดียว ทำให้ภายในห้องดูมืดเกือบสนิท มีเพียงแสงไล่ระดับสีโทนอบอุ่นเท่านั้นที่เป็นสีเดียวในห้องนั้น
- Channel Studio — ห้องแล็บถ่ายภาพสตูดิโอที่มีโคมไฟสีปะการังหนึ่งดวง
- Electronic Materials Office — ถ่านที่ยังคุกรุ่นอยู่ในห้องแสดงภาพที่ตกแต่งด้วยถ่าน
- ORYZO AI — ภาพถ่ายชุดเกี่ยวกับห้องมืด วัตถุโดดเดี่ยวที่ลอยอยู่ท่ามกลางความมืดอบอุ่น ตัวอักษรสีครีมเป็นสิ่งประดับเพียงอย่างเดียว
- Factory — เครื่องเทอร์มินัลใน "ห้องบัญชาการ" ตอนเที่ยงคืน "โรงงาน" คือแผงควบคุมสีดำสนิทที่มีการ์ดสีขาวใบเดียววางลงราวกับคำสั่งที่ส่องด้วยไฟฉาย สิ่งเดียวที่มีอยู่ในห้องนั้นคืองานนั่นเอง
- Hungry Tiger — ภาพกราฟฟิตี้สีเหลืองสดใสบนผนังเตาอบทันดูร์ โทนสีที่กลมกลืนกันระหว่างสีทองและสีน้ำตาลสนิม ตัวอักษรใหญ่มากจนดูเหมือนป้ายตลาดเครื่องเทศมากกว่าเว็บไซต์
- Bibliothèque — ห้องแสดงงานรูปทรงลูกบาศก์สีดำใต้แสงไฟสปอตไลท์ – จานเรืองแสงโดดเดี่ยวในห้องโถงกว้างใหญ่และมืดมิด
- Apple (España) — โรงละครสีดำที่มีอุปกรณ์ให้แสงสว่าง