Tổng quan dự án
Với website Shopyy Chroma Dewy, các trang xoay quanh phong cách trang điểm và trưng bày sản phẩm nhiều màu. Ảnh mắt cận cảnh cùng thông điệp bộ sưu tập tạo banner trang chủ, tiếp theo là bảng màu mắt và ảnh danh mục dẫn vào mua sắm. Nhận diện cam, nền sáng và ảnh trang điểm bão hòa nối việc xem chủ đề, so sánh danh mục và khám phá sản phẩm.
| Dịch vụ | Ngành hàng | Nền tảng |
| Thiết kế và xây dựng website Shopyy | Làm đẹp & Chăm sóc cá nhân | Shopyy |
| Yêu cầu dự án | Thị trường mục tiêu | Phong cách thiết kế |
| Phong cách trang điểm và trưng bày sản phẩm nhiều màu | Cửa hàng bằng tiếng Anh, niêm yết giá bằng đô la Mỹ | Nhận diện cam, nền sáng và ảnh trang điểm đậm màu |
| Báo giá dự án | Hạng mục bàn giao | Thời gian thực hiện |
| 4.500 CNY | Trang chủ, cấu trúc danh mục, chi tiết sản phẩm và giao diện đáp ứng | 7 ngày |
Thách thức thiết kế
Website mỹ phẩm phải thể hiện hiệu ứng trang điểm đồng thời giúp so sánh màu và dụng cụ. Chân dung cận cảnh giới thiệu chủ đề, còn lưới đều thể hiện bảng màu, cọ và bao bì, tránh hai loại thông tin cạnh tranh nhau.
Chiến lược thiết kế: phong cách trang điểm và trưng bày sắc màu
Ảnh mắt cận cảnh và thông điệp tạo banner trang chủ. Bảng màu và ảnh danh mục bên dưới dẫn vào cửa hàng. Trang chủ định hướng, danh mục giúp so sánh, sản phẩm giải thích hình thức và thông số; điều hướng và liên kết nối các cấp.
Josefin Sans tổ chức tiêu đề, điều hướng và nội dung, dùng kích thước, độ đậm và độ rộng đoạn để tạo thứ bậc. Nhận diện cam, nền sáng và ảnh đậm màu xuyên suốt trang chính. Thông tin trong nhóm gọn, giữa các phần thoáng hơn để ảnh, mô tả và thao tác có vị trí riêng.
Chuyển động và chức năng: hỗ trợ lựa chọn hiện tại
Banner trang chủ giữ mũi tên trái phải; ảnh danh mục phía dưới mở các nhóm hàng. Điều chỉnh số lượng, ảnh và mô tả theo nhóm tập trung vào sản phẩm hiện tại. Điều hướng di động thu vào mục menu rõ ràng nhưng vẫn giữ đường duyệt liên tục.
Banner trang chủ: trang điểm mắt là điểm nhìn đầu tiên
Hai ảnh mắt cận cảnh ở phải banner, thông điệp bên trái và logo Chroma Dewy cam trong đầu trang đơn giản. Cận cảnh thể hiện trực tiếp màu và chất liệu, mũi tên dành lối chuyển sang chủ đề khác.
Josefin Sans thanh nhẹ nối điều hướng với chữ sản phẩm. Nền nhạt dành chỗ cho hiệu ứng đậm màu. Ảnh và nội dung có vùng riêng nên màn hình đầu không cần nhồi mọi chi tiết sản phẩm.
Hàng mới: so sánh màu trong lưới đều
Lưới bảng màu nhiều cột tổ chức New Arrivals, giúp so sắc mắt trên nền sáng. Tên và giá bên dưới ngắn gọn. Phần sau giới thiệu ảnh danh mục Brushes, Eyes và Lips.
Bảng màu đồng kích thước và thẻ cùng chiều rộng tạo trật tự; lối vào danh mục cách đều. Màu cam thương hiệu chỉ xuất hiện chọn lọc, còn màu chính đến từ sản phẩm.
Danh mục cọ: thể hiện hình dáng và thành phần bộ cọ
Cọ đơn và bộ cọ nằm trong cùng lưới dưới tiêu đề Makeup Brushes. Ảnh thể hiện đầu cọ, cán và số món trong bộ trước khi tên và giá xuất hiện bên dưới.
Nền trắng và khoảng thẻ rộng giảm chật chội. Điều hướng chữ mảnh và tiêu đề giữa giữ cảm giác nhẹ. Công cụ danh mục có vị trí riêng, không ngắt nhịp so sánh.
Trang sản phẩm: ảnh bao bì giới thiệu chủ đề
Trang The Volturi dành bên trái cho ảnh bao bì đỏ đen, bên phải là tên, giá, số lượng và mô tả ngắn. Ảnh xác lập đặc điểm thị giác trước khi chữ đưa thông tin cụ thể.
Nền ảnh đỏ tạo ranh giới rõ với trang nhạt. Viền mảnh và khoảng gọn tổ chức thao tác. Khoảng trống giữa ảnh và chữ giúp chủ đề tối vẫn rõ trong giao diện nhẹ.
Chi tiết mở rộng: tách nội dung bổ sung khỏi gợi ý
Bên dưới giữ ảnh thu nhỏ, đánh giá và You May Also Like. Khoảng cách phần nối nội dung nhưng phân biệt thông tin sản phẩm chính với lối xem thêm mẫu.
Ảnh gợi ý cùng độ rộng cột; chân dung, bao bì và dụng cụ vẫn trên nền sáng. Tiêu đề phụ và khoảng dọc chia nhóm, giúp người đọc tiếp tục tới sản phẩm quan tâm.
Trang chủ di động: gọn điều hướng, giữ chủ đề và hàng mới
Di động thu điều hướng ngang vào mục MENU đỏ, logo và tìm kiếm xếp trên theo chiều dọc. Banner tiếp đến New Arrivals, giữ thứ tự xem hiệu ứng trang điểm rồi tới hàng hóa.
Ở chiều rộng nhỏ, ảnh sản phẩm có nhiều diện tích hơn, tên và giá xếp dọc. Thanh menu đỏ tách rõ khỏi vùng nội dung nhạt, giúp quay lại danh mục khi đang xem chủ đề.
Trang sản phẩm di động: ảnh và mô tả theo trình tự
Trang di động bắt đầu bằng đường dẫn và ảnh bao bì lớn, rồi tên, giá và số lượng. Chủ đề ảnh còn nguyên khi hai cột máy tính chuyển thành luồng đọc liên tục.
Tiêu đề căn trái xuống dòng tự nhiên; giá và điều khiển cách nhau rõ. Nền sáng, viền mảnh và màu thương hiệu nối trang sản phẩm với phần còn lại của website.
Tổng kết thiết kế: nối chủ đề với chi tiết thực tế
Với Chroma Dewy, phong cách trang điểm và sắc màu sản phẩm định hướng nhận diện cam, nền sáng và ảnh bão hòa trên trang chủ, danh mục và sản phẩm. Ảnh truyền chủ đề, chữ giải thích chi tiết, danh mục và thông số dẫn bước sau. Di động giữ trình tự để trải nghiệm nhất quán.
Lên kế hoạch website Shopyy rõ ràng cho thương hiệu
Hãy gửi website hiện tại, tư liệu thương hiệu và phạm vi trang cần làm. Chúng tôi sẽ cùng xem xét sản phẩm, thị trường mục tiêu và trọng tâm nội dung để lên kế hoạch trang, hình ảnh và chức năng phù hợp.
