ออกแบบเว็บ Shopyy: Lash & Wigs เชื่อมลุคกับรายละเอียดสินค้า

ภาพรวมโครงการ

เว็บ Shopyy ของ Lash & Wigs เชื่อมภาพลุคผมและเมกอัพกับรายละเอียดสินค้า ภาพคอลลาจนางแบบสร้างความเข้าใจหมวดหมู่ แล้วรวมช่อผม ขนตา และภาพสวมใส่ในระบบแสดงสินค้าเดียวกัน แบนเนอร์นางแบบ กริดขาว และท้ายดำเชื่อมธีม การเปรียบเทียบ และหน้าสินค้า

ความท้าทายในการออกแบบ

วิกและขนตาต้องแสดงทั้งลุคโดยรวมและรูปทรงเฉพาะ ภาพนางแบบสร้างสไตล์ แล้วภาพสินค้าชัดอธิบายลอน ความยาว และแพ็กเกจ ให้ภาพแต่ละแบบรับหน้าที่ต่างกัน

กลยุทธ์: เชื่อมลุคกับรายละเอียดสินค้า

คอลลาจนางแบบแนะนำหมวดหมู่ จากนั้นช่อผม ขนตา และภาพสวมใส่อยู่ในระบบเดียว หน้าแรกชี้ทาง หมวดหมู่ช่วยเทียบ และรายละเอียดอธิบายรูปทรงกับสเปก เมนูและลิงก์เชื่อมระดับ

Poppins เป็นตัวหลัก และ Helvetica ใช้บางคำอธิบาย ขนาด น้ำหนัก และความกว้างย่อหน้าจัดหัวข้อ เมนู และข้อความ คอลลาจ กริดขาว และท้ายดำใช้ต่อเนื่อง กลุ่มข้อมูลกระชับและเว้นส่วนให้ภาพ คำอธิบาย และปุ่มมีพื้นที่

การเคลื่อนไหวและฟังก์ชันเพื่อการเลือกปัจจุบัน

หน้าสินค้าใช้ภาพย่อหลายมุมกับตัวเลือกความยาว มือถือคงหมายเลขภาพและเมนูพับไว้ ปฏิสัมพันธ์เน้นมองสินค้าและเลือกความยาว ส่วนจังหวะหลักมาจากการแบ่งภาพข้อความและการเลื่อนอ่าน

หน้าแรก: ดูลุคก่อนเข้าสินค้า

ภาพผมและเมกอัพของนางแบบหลายคนประกอบเป็นแบนเนอร์แนวนอน มี LASH & WIGS กลางภาพ ใต้ลงมาเป็น Top Sellers รวมช่อผมหยิก ขนตา และภาพสวมใส่

ข้อความขาววางบนภาพนางแบบ รอบข้างเป็นส่วนหัวเรียบง่าย ภาพสร้างสไตล์ก่อน ส่วนรายการพื้นขาวด้านล่างนำสู่สินค้าเฉพาะ จากลุคไปการเลือก

สินค้าขายดี: ให้สินค้าต่างรูปแบบมีที่ของตนเอง

ช่อผม ชุดขนตา และภาพสวมใส่แสดงข้างกันในบัตรกว้างเท่ากัน ชื่อและราคาอยู่ใต้ภาพเพื่ออ่านต่อหลังดูรูปทรง

รายการพื้นขาวเว้นระหว่างการ์ดเท่ากัน ผมหยิกสีเข้มตัดกับพื้นอ่อนชัด แพ็กเกจขนตาสีสันยังแยกได้ในกริดเดียว

หมวดขนตา: ภาพขนาดสม่ำเสมอช่วยเปรียบเทียบ

หมวดขนตารวมภาพสวมใส่ แพ็กเกจเซ็ต และรูปร่างแต่ละรุ่นในกริด หัวข้อและเครื่องมือด้านบนกำหนดขอบเขตก่อนเทียบสินค้า

ใต้ภาพมีชื่อและราคาสั้น ข้อมูลในการ์ดกระชับแต่ระหว่างแถวโปร่ง ข้อความขาวดำและพื้นอ่อนทำให้เส้นขนตาและสีแพ็กเกจเป็นตัวเปรียบเทียบหลัก

รายละเอียดช่อผม: ภาพลอนใกล้ตัวเลือกความยาว

ภาพช่อผมลอนลึกขนาดใหญ่อยู่ซ้าย ขวาเรียงชื่อ ราคา ความยาว และปุ่ม รูปทรงได้พื้นที่หลัก ส่วนปุ่มความยาวรวมในกลุ่มเดียว

หัวข้อ sans serif ใหญ่และกรอบอ่อนแยกความยาว ปุ่มชำระเงินเหลืองด้านล่างเน้นเฉพาะจุด แต่ภาพกับสเปกยังมีพื้นที่อ่านแยกกัน

รายละเอียด: อธิบายลอนและการใช้งานต่อ

ด้านล่างคงภาพใหญ่และภาพย่อหลายมุม ขวาอธิบายสินค้าด้วยย่อหน้าสั้น ภาพและข้อความต่อในสองคอลัมน์ ก่อนเชื่อมส่วนรีวิว

ภาพย่อเว้นคงที่ คำอธิบายใช้หัวข้อย่อยกับช่องว่างแบ่งกลุ่ม ผมสีเข้มมีขอบชัดบนขาว จึงดูจากรูปทรงรวมสู่รายละเอียดได้

หน้าแบรนด์: ข้อความสั้นอธิบายธุรกิจ

About Us แนะนำธุรกิจ ExcitingFashion ด้วยย่อหน้าสั้น คงส่วนหัวเหมือนหน้าสินค้า และต่อท้ายสีดำที่มีชุมชนกับเมนู สร้างขอบเขตบนล่างชัด

ตัวหนังสือบางและระยะย่อหน้ากว้างทำให้ส่วนขาวเรียบง่าย หน้านี้เพิ่มข้อมูลพื้นหลังโดยไม่ซ้ำภาพสินค้า จึงแยกหน้าที่ของแต่ละหน้า

ติดต่อ: รวมช่องทางสื่อสาร

ใต้หัวข้อรวมคำแนะนำ WhatsApp และอีเมลในโครงข้อความง่าย ช่องทางอยู่ใกล้กัน อ่านแล้วเลือกวิธีติดต่อได้ทันที

เนื้อหาขาวแยกจากท้ายดำ ข้อความชิดซ้ายและบรรทัดชัด ช่วยค้นข้อมูลเร็วด้วยจังหวะเบากว่าหน้าสินค้า

หน้าแรกมือถือ: คงแบนเนอร์และลำดับสินค้า

มือถือเริ่มด้วยคอลลาจนางแบบ แล้วเป็น Top Sellers และภาพสินค้าใหญ่ คงธีมเดสก์ท็อปเพื่อให้จอแคบเข้าใจทิศทางผมและเมกอัพก่อน

เมนูบนกลายเป็นไอคอน ภาพสินค้าใช้ความกว้างมากขึ้น แบนเนอร์ หัวข้อ และสินค้าเว้นแนวตั้งให้แต่ละกลุ่มมีพื้นที่อ่าน

รายละเอียดมือถือ: เห็นพื้นผิวช่อผมก่อน

หน้าสินค้ามือถือเริ่มด้วยภาพช่อผมใหญ่และเลขภาพ ตามด้วยชื่อ ราคา และความยาว ลอนและเส้นผมมีพื้นที่พอให้ยืนยันรูปร่างก่อน

ข้อความตัดตามจอแคบ ชื่อกับราคาเว้นชัด สองคอลัมน์เปลี่ยนเป็นแนวตั้งแต่ยังดูภาพก่อนตรวจสเปก

สรุปการออกแบบ: เชื่อมธีมกับข้อมูลจริง

Lash & Wigs เชื่อมลุคกับรายละเอียดผ่านคอลลาจ กริดขาว และท้ายดำบนหน้าแรก หมวดหมู่ และสินค้า ภาพบอกธีม ข้อความอธิบาย เมนูและตัวเลือกนำสู่ขั้นต่อไป มือถือคงลำดับเพื่อประสบการณ์ภาพและการดูที่ต่อเนื่อง

วางแผนเว็บไซต์ Shopyy ที่ชัดเจนสำหรับแบรนด์ของคุณ

ส่งเว็บไซต์เดิม สื่อแบรนด์ และขอบเขตหน้าที่ต้องการ เราจะพิจารณาประเภทสินค้า ตลาด และเนื้อหาสำคัญเพื่อวางหน้า ภาพ และฟังก์ชันร่วมกัน