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

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

1


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:

2


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ều
chị 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à ngồi nước, nhờ vào các
hì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ì ln 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ùng
internet tăng cao thì mọi hoạt động kinh doanh mua bán đều hướng đến hình thức kinh
doanh 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ọn
mẫ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ửa
hà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.
-Có chức năng đăng kí đăng nhập, lịch sử đơn hàng, giỏ hàng.
3


-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:
1.Ý tưởng thiết kế:

1.1.Số lượng trang:
-1 trang chủ.
-4 trang con chính.
-Khoảng 60 trang con chi tiết.
1.2.Độ sâu: 6 mức.
-Mức 0: Trang chủ.
-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 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 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).
1.3.Màu sắc:
-Gam màu chủ đạo: Xanh dương.
Lý do chọn:
 Trong môi trường cạnh tranh mạnh mẽ như ngày nay, sự tin cậy là yếu tố vô
cùng quan trọng. Xanh dương đã được chứng minh là có thể làm gia tăng cảm
giác tin tưởng. Ngay cả khi pha trộn nó với bất cứ một màu sắc nào khác thì
cũng đều cho một cái nhìn tốt và những kết quả tuyệt vời. Chắc chắn đây sẽ là
một lựa chọn tốt để định hình thương hiệu của cửa hàng như một nơi mà người
tiêu dùng có thể đặt niềm tin.
 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 khi
nhì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,
vững bền.
4


-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àm
nổ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ốn
dọ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.

5


6


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

7


 Trang Nhẫn cưới : (1350 x 3240 pixels)

8


 Trang Tin tức : (1350 x 2400 pixels)

9


*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.

10


 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.

11


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

12


 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.

13


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 đá q
hiếm, ngồ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, uy
tí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ách
nhanh 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ào
trang 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.

14


-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ủa
khá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 tố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:

15


16


2.Giao diện chính và chi tiết nội dung các trang:
Trang chủ:
-Nội dung gồm 4 phần:
 Sản phẩm nổi bật
 Sản phẩm mới
 Bộ sưu tập nhẫn cưới
 Tin tức mới
-Ở BST Nhẫn cưới: bấm vào ảnh Wedding
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”.

17


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

nên mua trang sức ở TDJ.
-1 cột: hiển thị 3 sản phẩm nổi bật của
cửa hàng=> nhằm quảng cáo sản
phẩm của cửa hàng đến người mua.

18


Trang nhẫn cưới:
-Đây là trang về bộ sưu tập nhẫn
cưới của cửa hàng.
-Hiện tại đang có một số sản phẩm
được giảm giá. (giảm đến 20%).
-Ô “Xem thêm” là để khách hàng
bấm vào xem các sản phẩm tiếp
theo.

19


Trang tin tức:
-1 cột: hiển thị các thông tin, sự
kiện của cửa hàng.
-1 cột hiển thị các sản phẩm (để có
thể kích thích khách hàng mua
hàng).
-Khi bấm vào tin đầu tiên => sẽ đi
tới trang hiển thị Tin tức chi tiết.

20

Trang Tin tức chi tiết:
-Gồm 2 cột:
+1 cột: hiển thị thơng tin, nội dung
chính của bài viết, có phần bình
luận, bên dưới là sản phẩm liên
quan đến bài viết.
+1 cột: hiển thị các bài viết mới
nhất
 Giúp người xem có thể dễ
dàng xem các tin tức tiếp
theo.

21


Trang Trang Sức:
-Đây là 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 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 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ị sang
trang nhẫn vàng.
-Ở Trang Sức Ngọc Trai :Bấm Xem
thêm ở ô Bông tai ngọc trai=> sẽ hiển
thị trang Bông tai ngọc trai.

22


Trang Bông tai ngọc trai:
-Trang hiển thị các sản phẩm về bông
tai ngọc trai :
+ Hiển thị 12 sản phẩm.
+Hiển thị thơng tin: về 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ư) => sẽ hiện ra 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ự).

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ố sao đánh giá, số lượng đã
bán, số lượng còn 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á của khách hà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.

24


Trang giỏ hàng, thanh tố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 đơn
hàng.
+1 cột thông tin khách hàng: Khách
hàng sẽ đ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 thanh tố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.

25