ออกแบบเว็บความงาม Shopyy: Chroma Dewy ลุคและสีสัน

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

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

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

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

กลยุทธ์: ลุคแต่งหน้าและสีสินค้า

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

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

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

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

แบนเนอร์แรก: ให้ดวงตาเป็นจุดสนใจ

ภาพตาสองชุดอยู่ขวา ข้อความธีมอยู่ซ้าย โลโก้ Chroma Dewy สีส้มอยู่ในส่วนหัวเรียบง่าย ภาพใกล้แสดงสีและเนื้อสัมผัส ลูกศรเปิดทางไปธีมอื่น

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

สินค้าใหม่: เทียบสีด้วยกริดสม่ำเสมอ

New Arrivals จัดพาเลตหลายคอลัมน์ ให้สีอายแชโดว์เทียบกันบนพื้นอ่อน ชื่อและราคาสั้นใต้ภาพ จากนั้นจึงเป็นหมวด Brushes, Eyes และ Lips

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

หมวดแปรง: เห็นรูปทรงและส่วนประกอบเซ็ต

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

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

หน้าสินค้า: ภาพแพ็กเกจนำสู่รายละเอียด

The Volturi ใช้ภาพแพ็กเกจแดงดำด้านซ้าย ขวาเป็นชื่อ ราคา จำนวน และคำอธิบายสั้น ภาพบอกลักษณะก่อนให้ข้อความช่วยอ่านรายละเอียด

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

รายละเอียดต่อเนื่อง: แยกข้อมูลเสริมและคำแนะนำ

ด้านล่างมีภาพย่อ รีวิว และ You May Also Like ระยะห่างเชื่อมส่วนเหล่านี้ แต่แยกข้อมูลสินค้าหลักออกจากทางเลือกซื้อเพิ่มเติม

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

หน้าแรกมือถือ: ย่อเมนูแต่คงธีมและสินค้าใหม่

เมนูแนวนอนเปลี่ยนเป็นแถบแดง MENU โลโก้และค้นหาเรียงเหนือขึ้นไป แบนเนอร์ต่อด้วย New Arrivals คงลำดับดูลุคก่อนสินค้า

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

สินค้ามือถือ: ภาพและข้อมูลตามลำดับ

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

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

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

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

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

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