Báo Cáo - Thiết Kế Web Cơ Bản - Sản Phẩm - Trang Web Thương Mại Điện Tử Với Mặt Hàng Mĩ Phẩm

HỌC VIỆN CƠNG NGHỆ BƯU CHÍNH VIỄN THƠNG
KHOA ĐA PHƯƠNG TIỆN

BÁO CÁO BÀI TẬP CUỐI KỲ
MÔN THIẾT KẾ WEB CƠ BẢN
SẢN PHẨM

TRANG WEB THƯƠNG MẠI ĐIỆN
TỬ VỚI MẶT HÀNG MĨ PHẨM


Mục lục
I. Phân tích Website……………………………………………………… 3
1. Nội dung……………………………………………………………….. 3
2. Giao diện………………………………………………………………. 3
3. Công nghệ……………………………………………………………... 4
4. Trải nghiệm người dùng……………………………………………… 4
II. Xây dựng Website
1. Thiết kế Figma………………………………………………………… 5
2. Xây dựng Website bằng Visual Studio Code………………………… 8


I. Phân tích Website
Website sẽ được phân tích trên 6 yếu tố: Nội dung, giao diện (UI), công
nghệ, trải nghiệm người dùng (UX), mục đích và lưu lượng của web.
1. Nội dung
- Xét về mặt nội dung, mục đích của trang web là để bán hàng, giới thiệu sản
phẩm, quảng bá thông tin sản phẩm đến khách hàng. Sản phẩm chính trên
trang web là mỹ phẩm chăm sóc tóc ví dụ như dầu gội, dầu xả, tinh dầu, lược,
…. Đối tượng hướng là phụ nữ có độ tuổi từ 16 đến 40.
- Về tổ chức website:

+ Số trang bao gồm: trang chủ, trang nội dung sản phẩm, trang đăng
nhập, đăng kí.
2. Giao diện (UI)
Trang web được thế kế dựa trên 8 tiêu chí:
a. Sự sắp sếp bố cục hợp lý:
- Bố cục của trang web được thiết kế đảm bảo đủ 3 phần: header, content và
footer. Các phần đều đảm bảo đủ yêu cầu cung cấp thông tin cần thiết của một
trang web bán hàng nói chung như thơng tin nhãn hàng, thông tin sản phẩm,
cách thức liên lạc.
- Các đề mục được phân chia rõ ràng dễ quan sát, phân biệt. Sản phẩm được
làm nổi bật, dễ gây ấn tượng, thu hút cho người xem.
b. Khoảng trắng trong website
- Website được trình bày dễ nhìn, tối giản, khơng có quá nhiều text, các hình
ảnh được làm lớn giúp sản phẩm luôn được nổi bật, mang lại hiệu quả cao
trong việc tiếp cập sự tập trung của khách hàng.
c. Màu sắc, giao diện
- Nền trắng chữ đen tạo sự tối giản dễ đọc.
- Màu nâu sáng mang lại giá trị thẩm mỹ, tinh tế, phù hợp với màu sắc thương
hiệu, logo thể hiện sự sang trọng, uy tín, an tồn.
d. Chất lượng hình ảnh.


- Hình ảnh có độ phân giải cao, rõ nét.
- Các hình ảnh lựa khơng những mang lại giá trị về thẩm mỹ mà cịn có giá trị
nghệ thuật cao.
- Hình ảnh sản phẩm được tách nền, rõ nét, nổi bật kết hợp với hiệu ứng di
chuyển vào đổi sang ảnh mới sẽ mang lại nhiều thơng tin hình ảnh hơn cho
khách hàng.
e. Typography
- Website có kết hợp sử dụng nhiều phơng chữ khác nhau tùy thuộc vào mục

đích.
- Các phông chữ liên quan đến thông tin sản phẩm đều có điểm chung là mềm
mại, bo trịn mang lại cảm giác nhẹ nhàng, sang trọng.
f. Điều hướng người dùng
- Trang web thiết kế các mục điều hướng dựa trên hành vi tìm kiếm cũng như
tập khách hàng.
- Người dùng có thể dễ dàng thao tác ngay cả khi lần đầu biết tới trang web
bởi sự tối giản, rõ ràng trong cách phân chia các đề mục.
- Cách thiết kế bộ lọc giúp người dùng dễ tìm kiếm hơn.
g. Thiết kế đa nền tảng.
- Thiết kế phù hợp với nhiều thiết bị phổ thông như laptop, tablet,
smartphone nhằm đa dạng người dùng.
3. Công nghệ
- Website được xây dựng dựa trên ngôn ngữ lập trình HTML, CSS.
4. Trải nghiệm người dùng (UX)
- Trang web được duy trì sự đồng nhất trong thiết kế bố cục (màu sắc, font,
hình ảnh, …)
- Hình ảnh sử dụng có kích thước lớn, rõ nét giúp người dùng có thể dễ dàng
đánh giá chất lượng sản phẩm, tăng hiểu quả trải nghiệm.
- Người dùng có thể nhanh chóng, dễ dàng sử dụng các tính năng của trang
web như tìm kiếm, mua bán.
II. Xây dựng website


1. Thiết kế Figma
Phiên bản destop (Chính)
Trang chủ


Trang đăng nhập

Trang đăng kí


Trang sản phẩm


2. Xây dựng Website bằng Visual Studio Code
a. Header

b. Footer


c. Body


d. CSS