Báo Cáo Sản Phẩm - Thiết Kế Web Cơ Bản - Đề Tài - Thiết Kế Website Ananas.vn

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 CUỐI KỲ
MÔN: THIẾT KẾ WEB CƠ BẢN
SẢN PHẨM: THIẾT KẾ WEBSITE ANANAS.VN

Mục lục
I.

Phân tích Website

2

1.

Nội dung

2

2.

Giao diện (UI)

2
1


3.

Công nghệ

4

4.

Trải nghiệm người dùng (UX)

5

Xây dựng Website

6

1.

Thiết kế trên Figma

6

2.

Xây dựng Website bằng Visual Studio Code

11

Đánh giá thành viên

12

II.

III.

2


I.

Phân tích Website
Chúng em sẽ phân tích dựa 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
-

Về nội dung, đây là trang web có mục đích chính là để bán hàng, quảng bá
thơng tin sản phẩm hướng đến người mua hàng. Các sản phẩm chủ yếu bao
gồm giày thể thao, mũ áo, balo và một số phụ kiện liên quan. Đối tượng hướng
đến là những người trẻ, có nhu cầu mua sắm local brand, có độ tuổi từ 18 đến
26 tuổi

-

Về tổ chức website:
+ Hình thức tổ chức web: dạng lưới đầy đủ (full-mesh)
+ Số trang chính bao gồm 4 trang: trang chủ (home), trang nội dung sản
phẩm, trang thanh toán, trang exit
+ Tổng số liên kết Px(P-1) = 4x3 = 12 liên kết

-

Về điều hướng website: website có điều hướng đa dạng, bao gồm nhiều loại
hình điều hướng:
+ Điều hướng chính kết hợp điều hướng vị trí: (chữ L ngược – Inverted L)
giúp người dùng có cái nhìn tổng quan về website và có thể sử dụng
website một cách dễ dàng và thuận tiện nhất
+ Điều hướng liên kết kết hợp điều hướng footer: các điều hướng giúp
người dùng truy cập các trang không quan trọng trên website, thường là
những điều hướng cung cấp thơng tin về website
+ Điều hướng tiện ích: giúp người dùng có những điều hướng về các trang
web ngồi website, góp phần tìm hiểu thêm về sản phẩm của website.

2. Giao diện (UI)
Sẽ đánh giá trang web dựa trên 8 tiêu chí:
a. Sắp xếp bố cục hợp lý:

3


-

Bố cục của trang web được thiết kế mạch lạc, hiện đại, cung cấp cho
người dùng đủ các mục cần thiết như các sản phẩm của cửa hàng, thông
tin đăng nhập, các danh mục mua hàng, các sản phẩm đang được hạ giá.

-

Các đề mục được chia rõ ràng, đem lại trải nghiệm tốt cho người sử
dụng.

-

Trang web đã áp dụng rất tốt định luật miller khi chia nhỏ các khối
thơng tin giúp người mua dễ theo dõi và có thể tìm kiếm sản phẩm mà
mình muốn tìm một cách nhanh chóng.

b. Khoảng trống trong website:
-

Web được trình bày trơng khá dễ thở, với không quá nhiều chữ , chủ yếu
là các hình ảnh của sản phẩm.

-

Nhưng theo cá nhân tơi thấy thì phần hình ảnh ở đầu trang chủ và trước
mục instagram quá to
Việc thiết kế trang web với nhiều khoảng trống(khơng q nhiều chữ)
đem lại hiệu quả, nó làm cho người xem không quá bị phân tâm bởi
những chi tiết thừa, làm khách hàng chú ý hơn vào những hình ảnh
quảng cáo sản phẩm của trang web.

c. Thu hút sự chú ý qua bố cục hình ảnh
-

Như tơi đã nói ở trên, ngồi việc khó chịu với hai hình ảnh khá to của
trang web, thì nhìn chung web có bố cục hình ảnh khá hợp lý

-

Sự lựa chọn về hình ảnh sẽ dựa trên 3 yếu tố là (kích cỡ, màu sắc, và
khoảng trống)

-

Cá nhân tơi thấy web đã làm gần tốt: Hình ảnh có tính đồng điệu về màu
sắc, khoảng cách, kích cỡ ảnh cũng phù hợp.

d. Màu sắc của giao diện
-

Nền trắng , chữ màu đen , nhưng có vẻ khơng phù hợp với tên thương
hiệu- ananas (Trái dứa)

-

Màu sắc nhẹ nhàng nhưng vẫn thể hiện được sự trẻ trung, năng động

e. Chất lượng hình ảnh
-

Tốt, có đầu tư về mặt hình ảnh.

4


-

Các hình ảnh đều là sản phẩm tự chụp, chất lượng hình ảnh cao, rõ nét,
thể hiện được thương hiệu của sản phẩm.

f. Typography

-

Hai font chữ được dùng trong trang web là Geometric ExtraBold -cho
các mục tiêu đề chính và Nunito sans Bold l - cho các phần nội dung

-

Phần Typo của trang nhìn chung khá ổn với phần in đậm cho các đề mục
kết hợp với font chữ Geometric ExtraBold là một font chữ hình học
mang lại một cảm giác thanh lịch(phù hợp với gam màu của trang)

-

Việc kết hợp hai font chữ ( một font chữ hình học và một font chữ mang
hơi hướng hiện đại và có sự cân bằng tốt ) đã đem lại một cảm giác hài
hòa , hiện đại trẻ trung cho trang web.

-

Bố cục text tốt dễ nhìn, màu chữ và màu nền có sự tương phản.

g. Điều hướng người dùng hợp lý
-

Về mặt điều hướng, trang web cũng đã có 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.

-

Làm cho người dùng dễ dàng hơn trong việc di chuyển trong trang web.

-

Có thiết kế các bộ lọc giúp người dùng tìm kiếm dễ dàng hơn.

h. Thiết kế tối ưu trên đa nền tảng.
-

Có thể sử dụng web trên laptop/pc, tablet, smartphone...

3. Công nghệ
- Trang web sử dụng html5 ( hầu hết các trang web những năm gần đây đều sử
dụng) với các ưu điểm:
+ HTML5 sử dụng cho nhiều ứng dụng hơn: Một số ứng dụng như SVG,
canvas… được HTML5 hỗ trợ, nhưng dùng trong HTML thì phải sử
dụng thêm các phương tiện bổ trợ.
+ JavaScript chạy trong web browser: HTML5 hỗ trợ hoàn toàn cho
JavaScript chạy trên web browser, còn HTML ở các phiên bản cũ hơn
thì khơng thể thực hiện được.
- Bên cạnh html5, web cũng sử dụng css3:

5


+ Hiển thị cho các thiết bị có kích thước khác nhau. Hỗ trợ tương thích với
các kích thước màn hình mà khơng cần chỉnh sửa nội dung hiển thị.
+ Tối ưu hóa cơng cụ tìm kiếm SEO và khả năng loại bỏ những đoạn code
HTML thừa giúp website hoạt động tốt hơn.
+ Tăng khả năng nhất quán, hỗ trợ tương thích với mọi trình duyệt giúp tối
ưu và hạn chế lỗi trên các nền tảng trình duyệt khác nhau.

4. Trải nghiệm người dùng (UX)
-

Trang web đã duy trì được sự đồng nhất trong thiết kế (bao gồm màu
sắc, font chữ, hình ảnh,...)

-

Áp dụng phong cách thiết kế đơn giản đồng nhất trên các thiết bị pc,
smartphone và tablet giúp tăng khả năng sử dụng, dễ dàng tương tác và
điều hướng

-

Các ký hiệu, nút biểu tượng được sử dụng theo thiết kế tiêu chuẩn tạo
cho người dùng độ tin cậy và quen thuộc cho người dùng trong quá trình
sử dụng.

-

Tuy nhiên bên cạnh đó web cịn thiếu một số tính năng quan trọng như
chức năng đăng ký và đăng nhập. Đây là 2 tính năng đang trong giai
đoạn hình thành và khi người dùng nhấn “đăng ký” hoặc “đăng nhập”,
hệ thống sẽ đưa ra thông báo cho người dùng.

-

Màu trắng và xám được sử dụng chủ yếu trong thiết kế mang lại sự trẻ
trung cũng như sự điềm tĩnh, đơn giản mà các mặt hàng của trang web
hướng đến.

-

Các hình ảnh được sử dụng trong trang web có kích thước lớn, độ phân
giải cao giúp người dùng dễ dàng tương tác và mang lại trải nghiệm
chân thực nhất trước khi tiến hành mua sản phẩm.

-

Các thiết kế luôn hướng người dùng đến đích đến cuối cùng là giúp
người dùng mua hàng từ trang web (vd: người dùng có thể truy cập vào
các sản phẩm theo nhiều cách từ trang web, các đường dẫn đến các mục
sản phẩm xuất hiện theo nhiều cách khác nhau,...)

6


II.

Xây dựng Website
1. Thiết kế trên Figma
a. Phiên bản Desktop

Trang chủ

Trang đăng ký

7

Trang danh mục sản phẩm

Trang chi tiết sản phẩm

Trang thanh toán

8


Trang hoàn tất mua hàng
b. Phiên bản Tablet

Trang chủ

Trang đăng ký

9


Trang danh mục sản phẩm

Trang chi tiết sản phẩm

Trang thanh tốn

Trang hồn tất mua hàng

10

c. Phiên bản Smartphone

Trang chủ

Trang đăng ký

Trang danh mục sản phẩm

Trang chi tiết sản phẩm

Trang menu

11


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

Trang chủ

Trang đăng ký

Trang danh mục sản phẩm

12


Trang chi tiết sản phẩm

Trang thanh tốn

Trang hồn tất mua hàng

III. Đánh giá thành viên
ST
T
1
2
3
4
5
6

Họ và tên
Đỗ Đình Bình
Nguyễn Tiến Đạt
Nguyễn Đức Giang
Nguyễn Đức Mạnh
Nguyễn Duy Quang
Đỗ Quang Tâm

Mã sinh viên

Đánh giá (của nhóm trưởng)

B19DCPT018
B19DCPT048
B19DCPT063
B19DCPT158
B19DCPT183
B19DCPT198

8.5/10
8.5/10
8.5/10
8.5/10
9/10
8.5/10
13


14