Thiết kế website trang sức
TRƯỜNG ĐẠI HỌC MỞ HÀ NỘI KHOA KINH TẾ ***** BÁO CÁO BÀI TẬP LỚN THIẾT KẾ VÀ TRIỂN KHAI WEBSITE THƯƠNG MẠI ĐIỆN TỬ ĐỀ TÀI Xây dựng website bán đồ trang sức Giảng viên hướng dẫn: Nguyễn Thị Quỳnh Như Sinh viên thực hiện: Đoàn Thị Thim Lớp: K28-TMĐT Mã sinh viên: Msv 19A47010074 Hà Nội – 2021 Mục lục Phần I: Đặt vấn đề 1.Lý chọn đề tài: 2.Cơ sở thực tiễn đề tài: 3.Các chức cần đạt được: .4 Phần II Nội dung: 1.Ý tưởng thiết kế: 1.1.Số lượng trang: .4 1.2.Độ sâu: mức 1.3.Màu sắc: 1.4.Bố cục layout trang chủ, style cách thức thiết kế (ý tưởng thiết kế): 1.5.Bố cục layout trang con, style cách thức thiết kế (ý tưởng thiết kế):7 1.6.Ý tưởng thiết kế thành phần trang web (logo, menu, banner, footer…) 14 1.7.Sơ đồ Website – sơ đồ phân cấp liên kết trang web: 15 2.Giao diện chi tiết nội dung trang: 17 Phần III.Tổng kết : 26 TÀI LIỆU THAM KHẢO 27 THANG ĐIỂM ĐÁNH GIÁ ĐỀ TÀI 27 Phần I: Đặt vấn đề 1.Lý chọn đề tài: Trang sức dịng sản phẩm làm đẹp cao cấp ln thu hút ý nhiều chị em phụ nữ kể cánh mày râu Rất nhiều thương hiệu bán đồ trang sức đời trở nên tiếng lan rộng khắp thị trường ngồi nước, nhờ vào hình thức bán hàng, quảng bá thương hiệu cập nhật xu hướng Các website bán đồ trang sức đầu tư thiết kế chuyên nghiệp, độc đáo nhằm tạo khác biệt, cảm giác thích thú cho khách hàng Bán đồ trang sức hay sản phẩm ln cần có nơi để trưng bày, quảng bá bán sản phẩm hiệu Thay phải thuê cửa hàng tốn nhiều chi phí hiệu tiếp cận khách hàng lại khơng cao việc thiết kế website bán đồ trang sức trực tuyến mạng hoàn toàn giải pháp lý tưởng cho cửa hàng Một thực tế cho thấy rằng, đời sống phát triển, công nghệ phát triển, người dùng internet tăng cao hoạt động kinh doanh mua bán hướng đến hình thức kinh doanh online Cuộc sống bận rộn, người khơng có nhiều thời gian để mua sắm, nên mua hàng online cách tiện lợi hữu ích cho khách hàng Website bán đồ trang sức giống kênh thương mại điện tử bán hàng trực tuyến mạng Chúng ta trưng bày tất sản phẩm, giá chi tiết cho khách hàng dễ dàng lựa chọn mẫu mã, xem giá đặt mua hàng mà không tốn nhiều công sức phải lại cửa hàng Vừa tiện lợi cho người bán cho khách hàng Đối với dịng sản phẩm mang tính thẩm mỹ cao giá đắt vậy, để đưa định để mua hàng online khó khăn Chính thế, thiết kế website bán đồ trang sức chuyên nghiệp, quảng bá thông tin rộng rãi, tạo dựng thương hiệu uy tín khiến cho khách hàng an tâm mua hàng 2.Cơ sở thực tiễn đề tài: -Phục vụ mục đích kinh doanh online, quản lý việc mua bán sản phẩm cửa hàng -Giới thiệu quảng bá sản phẩm cho cửa hàng trang sức phạm vi rộng -Cung cấp cho khách hàng thông tin chi tiết sản phẩm như: tên sản phẩm, giá cả, xuất xứ,… Giúp khách hàng lựa chọn mua mặt hàng trang sức lúc, nơi nhận hàng nhà -Hỗ trợ người mua cách nhanh yêu cầu liên hệ 3.Các chức cần đạt được: -Website có khả tương thích, hiển thị tất thiết bị nâng cấp tương lai -Có chức đăng kí đăng nhập, lịch sử đơn hàng, giỏ hàng -Hiển thị đầy đủ thơng tin sản phẩm: giá cả, hình ảnh, chất liệu,… Khách hàng dễ dàng tìm thấy thơng tin chi tiết sản phẩm -Khách hàng đặt hàng, toán đánh giá sản phẩm -Website hiển thị sản phẩm đẹp thu hút người dùng Phần II Nội dung: 1.Ý tưởng thiết kế: 1.1.Số lượng trang: -1 trang chủ -4 trang -Khoảng 60 trang chi tiết 1.2.Độ sâu: mức -Mức 0: Trang chủ -Mức 1: Các trang cấp (Giới thiệu, Trang sức, Nhẫn cưới, Tin tức) -Mức 2: Các trang cấp (trang nhẫn bạc, nhẫn vàng, nhẫn ngọc trai, vòng tay bạc, vòng tay vàng, vòng tay ngọc trai, dây chuyền vàng,…) -Mức 3: Các trang cấp (Trang hiển thị thông tin chi tiết sản phẩm) -Mức 4: Các trang cấp (Trang giỏ hàng toán) -Mức 5: Trang cấp (Trang đặt hàng thành công) 1.3.Màu sắc: -Gam màu chủ đạo: Xanh dương Lý chọn: Trong môi trường cạnh tranh mạnh mẽ ngày nay, tin cậy yếu tố vô quan trọng Xanh dương chứng minh làm gia tăng cảm giác tin tưởng Ngay pha trộn với màu sắc khác cho nhìn tốt kết tuyệt vời Chắc chắn lựa chọn tốt để định hình thương hiệu cửa hàng nơi mà người tiêu dùng đặt niềm tin Về mặt thị giác, xanh dương màu đem lại cảm giác bình yên, thoải mái nhìn vào Cho người nhìn cảm nhận tin cậy, chắn tính bảo đảm, vững bền -Màu nền: sử dụng màu trắng để tránh việc màu lấn át màu chủ đạo khiến khách hàng rời khỏi trọng tâm thông điệp cửa hàng Nền trắng giúp làm bật sản phẩm nội dung quan trọng trang web thu hút nhiều ý -Phương pháp phối màu: Bổ túc ba (xanh dương-vàng-đỏ) Đây phương pháp tạo hài hoà, cân màu sắc 1.4.Bố cục layout trang chủ, style cách thức thiết kế (ý tưởng thiết kế): Chọn độ phân giải hình 1366 pixels Khi thiết kế cần trừ phần dọc (khoảng 15-30 pixels) nên chiều rộng website là: 1350 pixels Kích thước trang chủ : 1350 x 4364 pixels 1.5.Bố cục layout trang con, style cách thức thiết kế (ý tưởng thiết kế): *Bố cục layout trang chính: Trang Giới thiệu: (1350 x 2271 pixels) Trang sản phẩm trang sức : 1350 x 3618 pixels Trang Nhẫn cưới : (1350 x 3240 pixels) Trang Tin tức : (1350 x 2400 pixels) *Bố cục layout trang chi tiết : Trang hiển thị sản phẩm ( Ví dụ : trang hiển thị sản phẩm bơng tai ngọc trai): 1350 x 2390 pixels 10 1.6.Ý tưởng thiết kế thành phần trang web (logo, menu, banner, footer…) -Logo: Tên cửa hàng (TDJ) + Viên kim cương +TDJ: TD: viết tắt tên cá nhân hay tên chủ cửa hàng J: Jewelry, có nghĩa trang sức +Viên kim cương : ẩn chứa vẻ đẹp kiêu sa tinh tế Kim cương loại đá quý hiếm, giá trị vật chất, cịn thân cho sức mạnh, quyền lực, giàu sang, uy tín Logo có kết hợp màu xanh vàng đồng để vừa tạo tin cậy, vừa tạo nên ấn tượng sang trọng, tiện nghi cho thương hiệu -Menu : +Sử dụng menu ngang cố định: Đây menu kéo chuột hay cuộn trang website xuống phía menu di chuyển theo cố định vị trí đầu trang Chính giúp khách hàng chuyển hướng website theo ý mong muốn cách nhanh chóng mà khơng cần thời gian để kéo lên đầu trang Hơn nữa, nằm vị trí dễ dàng nhìn thấy người dùng truy cập vào trang web +Thành phần gồm : trang chủ, giới thiệu cửa hàng, sản phẩm trang sức, sản phẩm nhẫn cưới tin tức 14 -Baner : Thiết kế banner quảng cáo sản phẩm mới, khuyến mại, giảm giá, nhận quà mua hàng, … Những banner dùng để kích thích nhu cầu mua hàng khách hàng -Footer : gồm cột : +Cột (Thông tin liên hệ) : địa cửa hàng, email, số điện thoại +Cột (Chính sách) : Chính sách tốn, sách bảo hành, sách đổi trả, sách vận chuyển +Cột (Điều khoản) : Điều khoản sử dụng, điều khoản giao dịch, dịch vụ tiện tích +Cột : Kết nối với (facebook, zalo, messenger) -Header : Gồm có logo, tìm kiếm, tài khoản, giỏ hàng, lịch sử đơn hàng 1.7.Sơ đồ Website – sơ đồ phân cấp liên kết trang web: 15 16 2.Giao diện chi tiết nội dung trang: Trang chủ: -Nội dung gồm phần: Sản phẩm bật Sản phẩm Bộ sưu tập nhẫn cưới Tin tức -Ở BST Nhẫn cưới: bấm vào ảnh Wedding Ring => trang nhẫn cưới -Ở phần “Tin Tức Mới”: bấm chuột vào tin thứ trang tin tức “Ưu đãi mùa cưới” 17 Trang giới thiệu: -1 cột giới thiệu cửa hàng: thời gian thành lập, tầm nhìn, sứ mệnh, nhân sự, khách hàng, đối tác; lý nên mua trang sức TDJ -1 cột: hiển thị sản phẩm bật cửa hàng=> nhằm quảng cáo sản phẩm cửa hàng đến người mua 18 Trang nhẫn cưới: -Đây trang sưu tập nhẫn cưới cửa hàng -Hiện có số sản phẩm giảm giá (giảm đến 20%) -Ô “Xem thêm” để khách hàng bấm vào xem sản phẩm 19 Trang tin tức: -1 cột: hiển thị thông tin, kiện cửa hàng -1 cột hiển thị sản phẩm (để kích thích khách hàng mua hàng) -Khi bấm vào tin => tới trang hiển thị Tin tức chi tiết 20 Trang Tin tức chi tiết: -Gồm cột: +1 cột: hiển thị thông tin, nội dung viết, có phần bình luận, bên sản phẩm liên quan đến viết +1 cột: hiển thị viết Giúp người xem dễ dàng xem tin tức 21 Trang Trang Sức: -Đây trang phân loại trang sức Trang sức bạc : vòng tay bạc, nhẫn bạc, vịng cổ bạc, bơng tai bạc Trang sức vàng : vòng tay vàng, nhẫn vàng, vòng cổ vàng, tai vàng Trang sức ngọc trai : vịng tay ngọc trai, bơng tai ngọc trai, vịng cổ ngọc trai, nhẫn ngọc trai -Ở Trang Sức Bạc : bấm chuột vào hình ảnh Vịng tay bạc hiển thị trang Vòng tay bạc -Ở Trang Sức Vàng : Bấm Xem thêm ô Nhẫn vàng => hiển thị sang trang nhẫn vàng -Ở Trang Sức Ngọc Trai :Bấm Xem thêm ô Bông tai ngọc trai=> hiển thị trang Bông tai ngọc trai 22 Trang Bông tai ngọc trai: -Trang hiển thị sản phẩm tai ngọc trai : + Hiển thị 12 sản phẩm +Hiển thị thơng tin: hình ảnh sản phẩm, tên, giá, mã hàng +Khi bấm vào Bông tai vàng ngọc trai (Sản phẩm thứ tư) => trang mơ tả chi tiết sản phẩm -Ơ Xem thêm để bấm vào xem sản phẩm (Giao diện trang hiển thị sản phẩm bạc vàng tương tự) 23 Trang Mô Tả sản phẩm: +Là trang hiển thị thông tin chi tiết liên quan đến sản phẩm: Hình ảnh sản phẩm với kích thước 600 x 600 Số đánh giá, số lượng bán, số lượng lại, chi tiết sản phẩm Cam kết chất lượng, hướng dẫn mua hàng Phần đánh giá khách hàng Các sản phẩm tương tự +Khi bấm vào MUA NGAY => tới trang giỏ hàng 24 Trang giỏ hàng, tốn: -Gồm cột: +1 cột Thơng tin giỏ hàng: hiển thị sản phẩm mà khách hàng cho vào giỏ hàng ( giá, số lượng) Có áp mã giảm giá Hiển thị tổng tiền đơn hàng +1 cột thông tin khách hàng: Khách hàng điền họ tên, số điện thoại, email, ngày tháng năm sinh, chọn hình thức nhận hàng, hình thức tốn, địa nơi sinh sống -Sau khách hàng điền xong, bấm Đặt Hàng => hiển thị trang đặt hàng thành công 25 Trang Đặt hàng thành công: +Thông báo cho khách hàng biết đặt đơn thành công +Nhân viên hàng gọi lại nhắn tin để xác nhận đơn hàng +Có “Tiếp tục mua hàng” để khách hàng bấm vào để tiếp tục mua sắm trang web Khi bấm vào “Tiếp tục mua hàng” => tới Trang chủ Phần III.Tổng kết : -Kết đạt : Đã xây dựng hoàn thiện website bán trang sức theo mục tiêu đề ban đầu Các chức hoạt động tốt, thực quy trình hệ thống: Khách hàng xem sản phẩm, tìm kiếm, đặt hàng, đánh giá sản phẩm sau mau Giao diện gần gũi, thao tác thuận lợi, dễ dàng -Những tồn hạn chế: Các chức cịn đơn giản, chưa có chức để người dùng chia sẻ sản phẩm Chưa thiết kế trang đăng kí, đăng nhập Vẫn cịn số lỗi thiết kế: thiết kế chưa bắt mắt 26 -Hướng phát triển đề tài: thêm trang đăng kí đăng nhập, thêm chức cho phép chia sẻ sản phẩm,… TÀI LIỆU THAM KHẢO [1] Dang Quan, cách phối màu thiết kế website: design.vn [2] tatthanh.com.vn, Cách chọn lựa màu sắc cho website bán trang sức [3] Website trang sức Eropi Jewelry:https://eropi.com/ [4] Website trang sức PNJ: https://www.pnj.com.vn/ [5] Website trang sức NTJ:https://ngoctham.com/ [6] Website trang sức TSJ: https://trangsuctsj.vn/ [7] Website trang sức Huy Thanh: https://www.huythanhjewelry.vn/ [8] Website trang sức: https://pearls.myharavan.com/ THANG ĐIỂM ĐÁNH GIÁ ĐỀ TÀI ĐỀ TÀI: Website bán trang sức 1.Bảng thiết kế tổng thể: -Bố cục layout trang chủ -Bố cục layout trang -Thành phần trang web: logo, hệ thống điều hướng, quảng cáo,… 2.Trình diễn: (Demo) -Tính hợp lý cách tổ chức, bố trí thành phần trang web -Hệ thống điều hướng phù hợp -Các chức đáp ứng yêu cầu người dùng -Trang trí đẹp, màu sắc hài hồ -Thống ngôn ngữ trang Web -Các công cụ hỗ trợ sử dụng đề tài -Nội dung thông tin: xác, phong phú, phù hợp với chủ đề đề tài 3.Trình bày đề tài: a.Trình bày báo cáo b.Hiểu biết nguyên lý thiết kế: Màu sắc, bố cục, tỉ lệ, chức năng,… c Hiểu biết công cụ sử dụng đề tài 27 Thang điểm 3,0đ 1,0đ 1,0đ 1,0đ 3,5đ 0,5đ 0,5đ 0,5đ 0,5đ 0,5đ 0,5đ 0,5đ 3,5đ 0,5đ 1,0đ 1,5đ Kết d.Phong cách trình bày Tổng điểm 0,5đ 10đ 28 ... trang con, style cách thức thiết kế (ý tưởng thiết kế) :7 1.6.Ý tưởng thiết kế thành phần trang web (logo, menu, banner, footer…) 14 1.7.Sơ đồ Website – sơ đồ phân cấp liên kết trang. .. Trang Trang Sức: -Đây trang phân loại trang sức Trang sức bạc : vòng tay bạc, nhẫn bạc, vịng cổ bạc, bơng tai bạc Trang sức vàng : vòng tay vàng, nhẫn vàng, vòng cổ vàng, bơng tai vàng Trang. .. nhẫn ngọc trai -Ở Trang Sức Bạc : bấm chuột vào hình ảnh Vịng tay bạc hiển thị trang Vòng tay bạc -Ở Trang Sức Vàng : Bấm Xem thêm ô Nhẫn vàng => hiển thị sang trang nhẫn vàng -Ở Trang Sức Ngọc