Thiết kế web cơ bản sản phẩm 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ã mơn học
Nhóm mơn học
Giảng viên giảng dạy

:
:
:

01
Nguyễn Thị Tuyết Mai
Nguyễn Thị Thanh Tâm

Hà Nội – 1, 2022
1


Mục lục
I.

Phân tích Website ......................................................................................................................... 2
1.

Nội dung ..................................................................................................................................... 2

2.

Giao diện (UI) ............................................................................................................................ 2

3.

Công nghệ .................................................................................................................................. 4

4.

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

II.

Xây dựng Website ..................................................................................................................... 6

1.

Thiết kế trên Figma .................................................................................................................. 6

2.

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

1


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ý:
-

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á.
2


-

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.

-

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
3


-

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 tồ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:
+ 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


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,...)

5

II.

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

Trang chủ

Trang đăng ký

6


Trang danh mục sản phẩm

Trang chi tiết sản phẩm

Trang thanh toán

7


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

Trang chủ

Trang đăng ký

8


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

9


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

10


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

Trang chủ

Trang đăng ký

Trang danh mục sản phẩm

11


Trang chi tiết sản phẩm

Trang thanh tốn

Trang hồn tất mua hàng

12