Báo cáo Thiết kế và triển khai website Thương mại điện tử -Thiết kế website trang sức

Thiết kế website trang sức

TRƯỜNG ĐẠI HỌC MỞ HÀ NỘ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 đề 3

1.Lý do chọn đề tài: 3

2.Cơ sở thực tiễn của đề tài: 3

3.Các chức năng cần đạt được: 4

Phần II Nội dung: 4

1.Ý tưởng thiết kế: 4

1.1.Số lượng trang: 4

1.2.Độ sâu: 6 mức 4

1.3.Màu sắc: 4

1.4.Bố cục layout của trang chủ, style và cách thức thiết kế (ý tưởng thiết kế): .5

1.5.Bố cục layout của trang con, style và cách thức thiết kế (ý tưởng thiết kế):7 1.6.Ý tưởng thiết kế các thành phần trên trang web (logo, menu, banner, footer…) 14

1.7.Sơ đồ Website – sơ đồ phân cấp liên kết các trang web: 15

2.Giao diện chính và chi tiết nội dung các 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ý do chọn đề tài:

Trang sức là một dòng sản phẩm làm đẹp cao cấp luôn thu hút được sự chú ý của nhiềuchị em phụ nữ kể cả cánh mày râu Rất nhiều thương hiệu bán đồ trang sức ra đời vàtrở nên nổi tiếng lan rộng trên khắp các thị trường trong và ngoài nước, nhờ vào cáchình thức bán hàng, quảng bá thương hiệu cập nhật được xu hướng hiện tại.

Các website bán đồ trang sức được đầu tư thiết kế chuyên nghiệp, độc đáo nhằm tạo

ra sự khác biệt, cảm giác thích thú cho khách hàng

Bán đồ trang sức hay bất cứ sản phẩm nào đi chăng nữa thì luôn cần có một nơi đểtrưng bày, quảng bá và bán sản phẩm hiệu quả Thay vì phải thuê cửa hàng tốn nhiều

chi phí và hiệu quả tiếp cận khách hàng lại không cao thì việc thiết kế một website bán

đồ trang sức trực tuyến trên mạng hoàn toàn là giải pháp lý tưởng cho các cửa hàng.

Một thực tế cho thấy rằng, khi đời sống phát triển, công nghệ phát triển, người dùnginternet tăng cao thì mọi hoạt động kinh doanh mua bán đều hướng đến hình thức kinhdoanh online Cuộc sống bận rộn, mọi người không có nhiều thời gian để mua sắm, nên

mua hàng online là cách tiện lợi và hữu ích nhất cho khách hàng Website bán đồ trang sức giống như là kênh thương mại điện tử bán hàng trực tuyến trên mạng Chúng

ta có thể trưng bày tất cả sản phẩm, giá cả chi tiết cho khách hàng dễ dàng lựa chọnmẫu mã, xem giá cả và đặt mua hàng mà không tốn nhiều công sức phải đi lại cửahàng Vừa tiện lợi cho người bán và cả cho khách hàng nữa

Đối với dòng sản phẩm mang tính thẩm mỹ cao và giá cả đắt như vậy, để đưa ra quyết

định để mua hàng online cũng rất khó khăn Chính vì thế, thiết kế một 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 sẽ

khiến cho khách hàng an tâm hơn khi mua hàng

2.Cơ sở thực tiễn của đề 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 cửa hàng.-Giới thiệu và quảng bá sản phẩm cho cửa hàng trang sức trong phạm vi rộng

-Cung cấp cho khách hàng các thông tin chi tiết về sản phẩm như: tên sản phẩm, giá cả,xuất xứ,… Giúp khách hàng có thể lựa chọn và mua những mặt hàng trang sức mọi lúc,mọi nơi và nhận hàng tại nhà

-Hỗ trợ người mua một cách nhanh nhất khi được yêu cầu liên hệ

3.Các chức năng cần đạt được:

-Website có khả năng tương thích, hiển thị được trên tất cả các thiết bị hiện tại và cóthể nâng cấp trong tương lai

-Hiển thị đầy đủ thông tin sản phẩm: giá cả, hình ảnh, chất liệu,… Khách hàng có thể

dễ dàng tìm thấy thông tin chi tiết của sản phẩm

-Khách hàng có thể đặt hàng, thanh toán và đánh giá về 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:

-Mức 1: Các trang con cấp 1 (Giới thiệu, Trang sức, Nhẫn cưới, Tin tức)

-Mức 2: Các trang con cấp 2 (trang nhẫn bạc, nhẫn vàng, nhẫn ngọc trai, vòng taybạc, vòng tay vàng, vòng tay ngọc trai, dây chuyền vàng,…)

-Mức 3: Các trang con cấp 3 (Trang hiển thị thông tin chi tiết của sản phẩm)

-Mức 4: Các trang con cấp 4 (Trang giỏ hàng và thanh toán)

-Mức 5: Trang con cấp 5 (Trang đặt hàng thành công)

 Về mặt thị giác, xanh dương là màu đem lại cảm giác bình yên, thoải mái khinhìn vào Cho người nhìn cảm nhận về sự tin cậy, chắc chắn và tính bảo đảm,

-Màu nền: sử dụng màu nền trắng để tránh việc màu nền lấn át màu chủ đạo khiến

khách hàng rời khỏi trọng tâm hoặc thông điệp của cửa hàng Nền trắng sẽ giúp làmnổi bật sản phẩm và các nội dung quan trọng trên trang web sẽ thu hút được nhiều sựchú ý hơn

-Phương pháp phối màu: Bổ túc bộ ba (xanh dương-vàng-đỏ) Đây là phương pháp

tạo được sự hài hoà, cân bằng giữa các màu sắc

1.4.Bố cục layout của trang chủ, style và cách thức thiết kế (ý tưởng thiết kế):

Chọn độ phân giải màn hình là 1366 pixels Khi thiết kế cần trừ đi 1 phần thanh cuốndọc (khoảng 15-30 pixels) nên chiều rộng của website là: 1350 pixels

Kích thước của trang chủ : 1350 x 4364 pixels

1.5.Bố cục layout của trang con, style và cách thức thiết kế (ý tưởng thiết kế):

* Bố cục layout của trang con 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 của trang con 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

 Trang Mô tả thông tin chi tiết của sản phẩm (Bông tai ngọc trai) : 1350 x 2609

pixels

 Trang hiển thị giỏ hàng và thanh toán : 1350 x 1374 pixels

 Trang hiển thị tin tức chi tiết: 1350 x 1849 pixels.

 Trang đặt hàng thành công : 1350 x 1140 pixels.

1.6.Ý tưởng thiết kế các thành phần trê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 của tên cá nhân hay tên của chủ cửa hàng

 J: là Jewelry, có nghĩa là trang sức

+Viên kim cương : ẩn chứa 1 vẻ đẹp kiêu sa và tinh tế Kim cương là một loại đá quýhiếm, ngoài giá trị vật chất, đó còn là hiện thân cho sức mạnh, quyền lực, giàu sang, uytín

Logo sẽ có sự kết hợp của màu xanh và vàng đồng để vừa tạo sự 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 thanh menu ngang cố định:

 Đây là thanh menu khi kéo chuột hay cuộn trang website xuống phía dưới thìthanh menu sẽ di chuyển theo và cố định ở vị trí đầu trang Chính vì thế nó sẽgiúp khách hàng có thể chuyển hướng website theo ý mong muốn một cáchnhanh chóng mà không cần mất thời gian để kéo lên đầu trang

 Hơn nữa, nó nằm ở vị trí khá dễ dàng nhìn thấy khi người dùng truy cập vàotrang web

+Thành phần gồm : trang chủ, giới thiệu về cửa hàng, các sản phẩm trang sức, sản

phẩm nhẫn cưới và tin tức

-Baner : Thiết kế các banner về quảng cáo sản phẩm mới, khuyến mại, giảm giá, nhận

quà khi mua hàng, … Những banner này dùng để kích thích nhu cầu mua hàng củakhách hàng

-Footer : gồm 4 cột :

+Cột 1 (Thông tin liên hệ) : địa chỉ cửa hàng, email, số điện thoại

+Cột 2 (Chính sách) : Chính sách thanh toán, chính sách bảo hành, chính sách đổi trả,chính sách vận chuyển

+Cột 3 (Đ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 4 : Kết nối với chúng tôi (facebook, zalo, messenger)

-Header : Gồm có logo, thanh 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 các trang web:

2.Giao diện chính và chi tiết nội dung các trang:

Ring => sẽ hiện ra trang nhẫn cưới.

-Ở phần “Tin Tức Mới”: bấm chuột vào

tin thứ nhất sẽ hiện ra trang tin tức về

“Ưu đãi mùa cưới”.

Trang giới thiệu:

-1 cột giới thiệu về cửa hàng: thờigian thành lập, về tầm nhìn, sứmệnh, nhân sự, khách hàng, đốitác; lý do nên mua trang sức ởTDJ

-1 cột: hiển thị 3 sản phẩm nổi bậtcủa cửa hàng=> nhằm quảng cáosản phẩm của cửa hàng đến ngườimua

-Ô “Xem thêm” là để khách

hàng bấm vào xem các sảnphẩm tiếp theo

-Khi bấm vào tin đầu tiên => sẽ

đi tới trang hiển thị Tin tức chi tiết.

Trang Tin tức chi tiết:

-Gồm 2 cột:

+1 cột: hiển thị thông tin, nộidung chính của bài viết, có phầnbình luận, bên dưới là sản phẩmliên quan đến bài viết

+1 cột: hiển thị các bài viết mớinhất

 Giúp người xem có thể dễdàng xem các tin tức tiếptheo

Trang Trang Sức:

-Đây là trang phân loại trang sức

 Trang sức bạc : vòng taybạc, nhẫn bạc, vòng cổ bạc,bông tai bạc

 Trang sức vàng : vòng tayvàng, nhẫn vàng, vòng cổvàng, bông tai vàng

 Trang sức ngọc trai : vòngtay ngọc trai, bông tai ngọctrai, vòng cổ ngọc trai, nhẫnngọc trai

-Ở Trang Sức Bạc : bấm chuột vào

hình ảnh Vòng tay bạc sẽ hiển thị

ra trang Vòng tay bạc.

-Ở Trang Sức Vàng : Bấm Xem thêm ở ô Nhẫn vàng => sẽ hiển thị

Trang Bông tai ngọc trai:

-Trang hiển thị các sản phẩm vềbông tai ngọc trai :

trang mô tả chi tiết về sản phẩm.

-Ô Xem thêm là để bấm vào xem

các sản phẩm tiếp theo

(Giao diện các trang hiển thị sản phẩm bạc và vàng sẽ tương tự).

Trang Mô Tả sản phẩm:

+Là trang hiển thị thông tin chi tiếtliên quan đến sản phẩm:

 Hình ảnh sản phẩm với kíchthước 600 x 600

 Số sao đánh giá, số lượng đãbán, số lượng còn lại, chi tiếtsản phẩm

 Cam kết chất lượng, hướngdẫn mua hàng

 Phần đánh giá của kháchhàng

 Các sản phẩm tương tự

+Khi bấm vào MUA NGAY => sẽ

đi tới trang giỏ hàng.

Trang giỏ hàng, thanh toán:

-Gồm 2 cột:

+1 cột Thông tin giỏ hàng:

 sẽ hiển thị các 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 của đơnhàng

+1 cột thông tin khách hàng: Kháchhàng sẽ điền họ tên, số điện thoại,email, ngày tháng năm sinh, chọnhình thức nhận hàng, hình thứcthanh toán, địa chỉ nơi sinh sống.-Sau khi khách hàng điền xong,

bấm Đặt Hàng => hiển thị trang

đặt hàng thành công.

Phần III.Tổng kết :

-Kết quả đạt được :

 Đã xây dựng hoàn thiện website bán trang sức theo mục tiêu đề ra ban đầu

 Các chức năng hoạt động tốt, thực hiện đúng quy trình của hệ thống:

Khách hàng có thể xem sản phẩm, tìm kiếm, đặt hàng, đánh giá sản phẩm sau khi mau

 Giao diện gần gũi, thao tác thuận lợi, dễ dàng

-Những tồn tại còn hạn chế:

 Các chức năng còn đơn giản, chưa có chức năng để người dùng chia sẻ sảnphẩm

 Chưa thiết kế trang đăng kí, đăng nhập

 Vẫn còn một số lỗi trong thiết kế: thiết kế chưa bắt mắt

Trang Đặt hàng thành công:+Thông báo cho khách hàngbiết đã đặt đơn thành công.+Nhân viên của hàng sẽ gọilại hoặc nhắn tin để xác nhậnđơn hàng

+Có ô “Tiếp tục mua hàng”

để khách hàng có thể bấmvào để tiếp tục mua sắm trêntrang web

Khi bấm vào “Tiếp tục mua hàng” => sẽ đi tới Trang

chủ.

TÀI LIỆU THAM KHẢO

[1] Dang Quan, 6 cách phối màu trong 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

Thang điểm

Kết quả

-Thành phần trên trang web: logo, hệ thống điều hướng, quảng

-Các chức năng đáp ứng được yêu cầu của người dùng 0,5đ

-Thống nhất ngôn ngữ trên các trang Web 0,5đ

-Các công cụ hỗ trợ được sử dụng trong đề tài 0,5đ

-Nội dung thông tin: chính xác, phong phú, phù hợp với

chủ đề của đề tài

0,5đ

b.Hiểu biết về nguyên lý thiết kế: Màu sắc, bố cục, tỉ lệ,

chức năng,…

1,0đ

c Hiểu biết về công cụ sử dụng trong đề tài 1,5đ