Shop
กลุ่มดาวการค้าลอยตัวบนหินอ่อนสีขาว
ร้านค้าออนไลน์นี้ใช้โมเดล "ผืนผ้าใบสีขาว" โดยแสดงสินค้าเป็นภาพการ์ดขนาดใหญ่ที่มีความโค้งสูง แทนที่จะเป็นตารางภาพขนาดย่อ อินเทอร์เฟซโดยรวมมีความเรียบเนียนอย่างเหลือเชื่อ: รัศมี 20-28 พิกเซลตลอดทั้งระบบ ปุ่มควบคุมรูปทรงแคปซูล และตัวแบบอักษร GT Standard ขนาดกะทัดรัด 16 พิกเซล พร้อมการเว้นระยะห่างระหว่างตัวอักษรที่แคบ ทำให้ตัวอักษรคมชัดและโดดเด่น จุดเด่นเพียงอย่างเดียวของระบบคือสีม่วงสดใส (#5433eb) ซึ่งปรากฏในโลโก้ ช่องแสดงผลการค้นหาแบบวงกลม และเงาจางๆ บนปุ่มเดียวกัน ส่วนสีอื่นๆ เป็นสีโทนกลางอบอุ่น: พื้นผิวสีขาว พื้นหลังสีเทาเย็นๆ เส้นขอบบางๆ และตัวอักษรสีดำสนิท ความหนาแน่นยังคงกะทัดรัดด้วยช่องว่าง 12 พิกเซล แต่แถบส่วนหัวและหมวดหมู่ดูโปร่งสบายด้วยระยะห่างแนวตั้งที่กว้างขวาง 64-80 พิกเซล ทำให้ประสบการณ์การซื้อขายรู้สึกเหมือนกับการเรียกดูมากกว่าแคตตาล็อก
ความกว้างสูงสุดคือ 1200 พิกเซล จัดวางอยู่ตรงกลางบนพื้นหลังโปร่งแสงสี #f2f4f5 โดยมีแถบด้านข้างกว้าง 64 พิกเซลอยู่ทางซ้ายมือซึ่งมีเฉพาะไอคอนนำทางเท่านั้น องค์ประกอบหลักเป็นแถบความกว้างเต็มหน้าจอ โดยมีบัตรผลิตภัณฑ์วางอยู่เหนือโลโก้ "ร้านค้า" สีม่วงที่อยู่ตรงกลาง และแถบค้นหาแบบแคปซูลอยู่ด้านล่าง บัตรหมวดหมู่จัดเรียงเป็นแถวเดียวอยู่ตรงกลางด้านล่างแถบค้นหา ส่วนเนื้อหา (ผู้หญิง ผู้ชาย ความงาม บ้าน เด็กและทารก) ตามมาเป็นแถบที่กำหนดไว้ โดยแต่ละแถบประกอบด้วยตาราง 4 คอลัมน์พร้อมรูปภาพผลิตภัณฑ์ หรือองค์ประกอบหลักและตารางแบบ 2 คอลัมน์ จังหวะแนวตั้งค่อนข้างกว้าง: 64–80 พิกเซลระหว่างส่วนหลัก ส่วนท้ายเป็นแถบสีเข้มที่ด้านล่างของหน้าเว็บพร้อมกลุ่มลิงก์รูปทรงคอลัมน์ ลูกศรแบบแครูเซลทางด้านขวาของแผงผลิตภัณฑ์แนวนอนแสดงถึงเนื้อหาที่สามารถเลื่อนดูได้โดยไม่มีจุดแบ่งหน้า
การถ่ายภาพเป็นองค์ประกอบภาพที่โดดเด่น: ภาพสินค้าแบบเต็มหน้าจอโดยมีพื้นหลังสีขาว ครอบตัดในอัตราส่วน 1:1 และภาพไลฟ์สไตล์ที่มีโทนสีอบอุ่นแบบเอิร์ธโทน (เบจ เทอร์ราคอตตา เสจ งาช้าง) ภาพสินค้ามีสีเป็นของตัวเอง—ส่วนติดต่อผู้ใช้ยังคงเป็นสีขาวดำ เพื่อให้เฉดสีของสินค้าสร้างความหลากหลายทางสายตา โลโก้แบรนด์ปรากฏเป็นข้อความซ้อนทับบนภาพหลักที่มีสีเข้มหรือสีอ่อน แทนที่จะเป็นไอคอนแยกต่างหาก ในองค์ประกอบหลัก การ์ดสินค้าจะถูกจัดวางเป็นกลุ่มลอยตัวที่ซ้อนทับกันเล็กน้อยเหนือชื่อแบรนด์ ไอคอนมีความเรียบง่ายและเป็นสีขาวดำ (เส้นขอบสีดำ) ยกเว้นไอคอนหมวดหมู่ซึ่งใช้สีเดียวของแบรนด์ ไม่มีภาพประกอบ เอฟเฟกต์ 3 มิติ หรือการไล่ระดับสีในภาพสินค้า
จานสี
ยี่ห้อ
- Shop Violet
#5433eb— ปุ่มส่ง ข้อความเส้นประ และโลโก้แบรนด์ เป็นเพียงองค์ประกอบเสริมที่เน้นการกระทำและเอกลักษณ์เฉพาะตัวบนพื้นหลังสีขาว - Violet Wash
#c0b5f3— มีรัศมีโปร่งแสงอยู่ด้านหลังปุ่มส่งสีม่วง ซึ่งคงความสว่างโดยไม่เปลี่ยนสี
เป็นกลาง
- Canvas Mist
#f2f4f5— พื้นหลังของหน้ากระดาษและการตกแต่งพื้นผิวเพิ่มเติมด้านหลังการ์ดนูน - Pure White
#ffffff— พื้นผิวหลักสำหรับวางการ์ด ช่องป้อนข้อมูล ป้ายลอย และปุ่มรูปทรงแคปซูล - Ink Black
#000000— ข้อความหลัก หัวข้อ ไอคอน สัญลักษณ์นำทาง และการ์ดผลิตภัณฑ์ในโหมดมืด - Faint Border
#ebebeb— เส้นแบ่งบางๆ บนการ์ด เส้นขอบช่องป้อนข้อมูล และกรอบปุ่มรูปทรงแคปซูล - Muted Gray
#787574— ข้อความรอง ป้ายกำกับนำทาง และเส้นขอบไอคอนเมื่อไม่ได้ใช้งาน - Cool Stone
#cccccc— ตัวยึดตำแหน่ง สถานะปิดใช้งาน และพื้นหลังไอคอนที่ไม่ทำงาน
การจัดพิมพ์
จาก 11 เป็น 16 พิกเซล · 4 ขั้นตอน
- GT Standard — ทดแทน: Inter · โครงร่าง 400 · แบบอักษรหลักที่ใช้ในทุกขนาด ทั้งสำหรับข้อความหลักและหัวข้อ คือ GTStandard-MRegular ขนาด 16px/-0.031em ซึ่งใช้สำหรับข้อความหลัก ปุ่ม และป้ายกำกับ GTStandard-MSemibold ขนาด 20px/-0.05em ใช้สำหรับหัวข้อขนาดใหญ่หลายหัวข้อ และ GTStandard-MMedium ขนาด 11–12px ใช้สำหรับคำบรรยายขนาดเล็ก แบบอักษรแต่ละแบบแสดงผลด้วยน้ำหนักสี 400 การจัดลำดับความสำคัญของแบบอักษรทำได้โดยการไล่ระดับสีอย่างละเอียดอ่อนและการเว้นระยะห่างระหว่างตัวอักษรที่หนาแน่น แทนที่จะใช้ความแตกต่างของสีที่ชัดเจน นี่คือสไตล์ที่เป็นเอกลักษณ์: ร้านค้าไม่ได้ใช้แบบอักษรตัวหนาเพื่อดึงดูดความสนใจ แต่ใช้การเว้นระยะห่างระหว่างตัวอักษรเพื่อจัดรูปทรงของข้อความ
- Shopify Sans — ทดแทน: Inter · โครงร่าง 400, 700 · สงวนไว้สำหรับข้อความระดับระบบ เช่น แบนเนอร์ขณะโหลดแอป และข้อความขอความยินยอมใช้คุกกี้
ช่วงเวลาและรูปแบบ
| วัตถุประสงค์ | ความหมาย |
|---|---|
| ความหนาแน่น | เฉลี่ย |
| ขั้นตอนพื้นฐาน | 12px |
| รัศมีปุ่ม | 9999px |
| รัศมีการ์ด | 28px |
| เงา | เงาอ่อนๆ |
| ระหว่างส่วนต่างๆ | 64px |
| ความกว้างของหน้า | 1200px |
AI จะสร้างเว็บไซต์ของคุณในสไตล์ของ Shop และเติมข้อมูลลงไป
- ใส่สินค้าและโพสต์ผ่านลิงก์ - Instagram, TikTok, Facebook
- ย้ายเนื้อหาจากเว็บไซต์เก่าของคุณ—เพียงระบุที่อยู่เว็บไซต์
- ดีไซน์ทันสมัยบนเอนจิ้นที่ดีที่สุด: React ( Next.js) พร้อมการเรนเดอร์ฝั่งเซิร์ฟเวอร์และการเพิ่มประสิทธิภาพ SEO ในตัว
- การเพิ่มประสิทธิภาพ SEO แบบอัตโนมัติเต็มรูปแบบสำหรับผลการค้นหาและคำแนะนำจากโครงข่ายประสาทเทียม
สไตล์ที่คล้ายกัน
- Cursor — ห้องทำงานเขียนบนกระดาษหนังที่อบอุ่น สว่างไสวด้วยแสงจากถ่านที่กำลังคุอยู่
- Slush — จักรวาลเป่าลมที่สร้างจากสติ๊กเกอร์บนกระดาษสีพาสเทล
- MindMarket — หนังสือนิทานแสนอบอุ่นบนกระดาษสีครีม – พื้นที่บรรณาธิการที่เป็นมิตรซึ่งพาดหัวข่าวขนาดใหญ่ของ Inter และตัวการ์ตูนกระดาษที่ตัดออกมาอยู่ร่วมกันบนพื้นผิวที่นุ่มนวลราวกับสติ๊กเกอร์ที่อาบแสงแดด
- Airbnb — ผนังแกลเลอรี่สีขาวเงียบสงบ มีเพียงที่คั่นหนังสือสีแดงปะการังชิ้นเดียว
- Superr — สมุดนักเรียนอุ่นๆ ในแสงแดดอ่อนๆ ยามบ่าย กระดาษสีครีม ปากกาเมจิกสีส้มที่ไม่มีฝาปิด และสติ๊กเกอร์ชื่อเคลือบพลาสติกกองโตที่รอการลอกออก
- Apple (España) — ห้องแสดงงานศิลปะของพิพิธภัณฑ์ ภายใต้แสงแดดอ่อนๆ เป็นพื้นที่สีขาวโล่งกว้างที่ดึงดูดใจและไร้น้ำหนัก โดยแต่ละชิ้นงานจัดแสดงจะถูกส่องสว่างด้วยไฟสปอตไลท์ที่ส่องไปยังผนังสีอ่อนๆ
- Lamborghini — รถสีดำในโชว์รูม ใต้แสงไฟสปอตไลท์ มีรถสีเหลืองคันหนึ่งจอดอยู่
- Amplemarket — สถานที่ทำงานที่อาบไปด้วยแสงแดดและโปรยปรายด้วยกระดาษสีสันสดใส
- Getharvest — โต๊ะทำงานในยามเย็นแสงสีทอง – พื้นหลังสีครีมอบอุ่น โปสการ์ดสีขาวแขวนอยู่บนพื้นหลัง และเปลวไฟสีส้มสดใสเพียงดวงเดียว
- Agence Foudre — หน้าปกนิตยสารเป็นสีชมพูอ่อนคล้ายสีลิปสติก
- Drive Capital — โปสเตอร์การเดินทางย้อนยุคบนกระดาษสีอบอุ่น
- Apple (España) — ตู้โชว์สีขาว