BÁO CÁO SẢN PHẨM HỌC PHẦN THIẾT KẾ WEB CƠ BẢN ĐỀ TÀI WEBSITE BÁN GIÀY – WIS SNEAKER

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 SẢN PHẨM
HỌC PHẦN: THIẾT KẾ WEB CƠ BẢN
ĐỀ TÀI: WEBSITE BÁN GIÀY – WIS SNEAKER
Nhóm 10: Trần Trung Hiếu-B19DCPT087
Lê Anh Huy-B19DCPT101
Nguyễn Thị Lý-B19DCPT153
Nguyễn Công Quyền-B19DCPT187
An Nguyễn Nam Sơn-B19DCPT191
Bùi Tuấn Thanh-B19DCPT222
Giảng viên hướng dẫn:
Nguyễn Thị Tuyết Mai
Nguyễn Thị Thanh Tâm

Hà Nội – 2021


MỤC LỤC
I. Xác định yêu cầu ................................................................................................ 3
II. Ý tưởng sản phẩm ............................................................................................. 3
III. Thiết kế wireframe .......................................................................................... 3
1. Xác định thành phần trang ............................................................................ 3
1.1 Xây dựng các điều hướng........................................................................ 3
1.2 Trang chủ ................................................................................................ 5
1.3 Trang đăng ký.......................................................................................... 5
1.4 Trang đăng nhập ..................................................................................... 6
1.5 Trang nội dung ........................................................................................ 6
2. Tiêu chí về thiết kế giao diện ........................................................................ 6
2.1 Khả năng sử dụng ................................................................................... 6

2.2 Thói quen người dùng ............................................................................. 7
IV. Xây dựng website............................................................................................ 7


I. Xác định yêu cầu
Xây dựng các phần của một website bao gồm:
Trang chủ
Trang đăng ký
Trang đăng nhập
01 trang nội dung
Trang thốt (exit)
Sử dụng ngơn ngữ lập trình HTML/CSS, Javascrip
II. Ý tưởng sản phẩm
Xây dựng website bán giày
Nguồn tham khảo: />III. Thiết kế wireframe
1. Xác định thành phần trang
1.1 Xây dựng các điều hướng
Điều hướng là một phần quan trọng không thể thiếu đối với mỗi trang web. Việc điều
hướng thành cơng sẽ giúp người dùng nhanh chóng đến nơi muốn tới trong trang web.
Menu điều hướng dẫn đến trang con
Menu điều hướng chính và phụ của trang web ln xuất hiện ở trang chủ và thường có
mặt ở tồn bộ trang thứ cấp của website. Menu này được tích hợp trong phần Header và
Footer của trang web. Hai vị trí cố định này ở tồn bộ các trang trong một website có
đóng góp quan trọng trong việc điều hướng website bằng nhiều yếu tố khác nhau. Ngồi
menu chính ra cịn có các nút CTA như “ Đăng ký”, “Đăng nhập”, “Liên kết’…Cùng
với một số liên kết ngoài quan trọng như các phương tiện truyền thơng, …
Điều hướng chính: horizontal navigation menu - hình thức này mang tính cổ điển rõ rệt
nhưng đồng thời cho thấy độ tin cậy của cấu trúc các liên kết nội bộ được thiết lập trong
menu. Cũng như việc triển khai các thành phần trong menu thành một thanh ngang theo
chiều từ trái sang phải. Đây là tương ứng với chuyển động mắt thường thấy của con

người nói chung. Và người dùng cũng cảm thấy quen thuộc và dễ dàng nắm bắt, thao
tác nhất.

Điều hướng vị trí: horizontal – drop down dạng thanh ngang bên dưới điều hướng chính.


Điều hướng vị trí: Breadcrumbs bar giúp người dùng nhận định được chính xác vị trí
của trang thứ cấp mà họ đang ở.

Trong phần Header, menu điều hướng được xây dựng ở dạng đa cấp.
Các điều hướng nội bộ của trang con
Là các điều hướng đơn với từng liên kết nội bộ xuất hiện ở từng trang thứ cấp của
website. Đây là yếu tố riêng của mỗi trang con nên các điều hướng này có thể xuất hiện
hoặc khơng hoặc có sự trùng lặp giữa các trang. Bao gồm:
Các nút kêu gọi hành động trong mỗi trang thứ cấp (Các nút này có thiết kế nổi bật để
người dễ nhận biết và thao tác nhanh nhất)


Các liên kết nội bộ giữa hai trang thứ cấp trong cùng một website

Các liên kết ngoài

1.2 Trang chủ
Điều hướng chính, phụ
Các thương hiệu giày có tại cửa hàng
List sản phẩm (đi kèm với bộ lọc)
Giới thiệu các bài viết liên quan
1.3 Trang đăng ký
Điều hướng chính, phụ

Thông tin các nhân (tên, sđt, email)
Địa chỉ
Mật khẩu
Điều hướng nội bộ
1.4 Trang đăng nhập
Điều hướng chính, phụ
Tên đăng nhập
Mật khẩu
Điều hướng nội bộ
1.5 Trang nội dung
Điều hướng chính, phụ
Thơng tin sản phẩm
Tùy chọn (màu sắc, size, số lượng)
Sản phẩm tương tự
Điều hướng nội bộ
Xác nhận đặt hàng thành công
Theo dõi đơn hàng
Tiếp tục mua hàng
2. Tiêu chí về thiết kế giao diện
2.1 Khả năng sử dụng
Người sử dụng luôn tối đa hóa lợi ích và giảm thao tác thực hiện.
Theo nguyên tắc 7(+/-)2:
- Số lượng sản phẩm trên 1 hàng tối đa là 5
- Các nội dung được phân thành các mục, trong mỗi mục có nội dung con
- Phần đăng kí có nội dung dài được chia thành các mục và tối đa trong 3 lần thao tác
Thời gian đáp ứng cho cảm nhận tốt nhất là 0,1s, sau 8-10s người dùng sẽ phân tán sự
tập trung. Để đảm bảo quy tắc 8s, kích thước 1 trang khơng nên vượt quá 56kb.
Khả năng di chuyển:
- Tăng kích thước nút bấm để người sử dụng dễ dàng thao tác

- Nhóm và sắp xếp các nội dung tương tự ở cạnh nhau. Sử dụng khoảng trắng để tạo
danh giới cho các mục tránh việc người dùng ấn nhầm.
Thị giác


- Trắng-đen là sự kết hợp an toàn và hiệu quả. Website bán hàng giống như một không
gian trưng bày các sản phẩm, vì vậy sử dụng khoảng trắng sẽ tạo cảm giác thơng thống,
giúp nội dung dễ đọc hơn.
- Khoảng trắng còn được sử dụng để phân cấp nội dung trong trang web.
- Sản phẩm được bán có màu sắc đa dạng, vì vậy cần tối giản phơng nền.
- Sử dụng font chữ nhất quán, độ đa dạng dựa trên định dạng của font đó và cỡ chữ.
- Sử dụng font không chân để giảm cảm giác mỏi mắt khi đọc.
- Kích thước font và dãn dịng hợp lý
- Căn lề văn bản sẽ khiến văn bản được sắp xếp gọn gàng
- Kích thước thanh tìm kiếm rộng giúp người dùng dễ dàng xem lại và xác minh nội
dung tìm kiếm.
2.2 Thói quen người dùng
Thói quen đọc của người dùng là từ trên xuống:
- Phần thơng tin đăng kí, đăng nhập sẽ có label phía bên trên.
- Nội dung sản phẩm được sắp xếp theo thứ tự từ trên xuống: hình ảnh - thơng tin chi
tiết
Hầu hết người dùng không sử dụng thanh cuộn trong lần truy cập đầu tiên, vì vậy cần
ưu tiên sắp xếp những nội dung quan trọng và nổi bật lên đầu: thương hiệu, các nhãn
hàng, hình ảnh để thu hút sự chú ý, xu hướng, hỗ trợ,...
Sử dụng màu xanh cho các liên kết.
Người dùng có xu hướng chú ý thơng tin dạng hình ảnh hơn là văn bản.
Sử dụng icon phù hợp.
IV. Xây dựng website
-

Phân tích giao diện để xác định bố cục và các thư viện cần dùng
Thu thập tài nguyên: hình ảnh, font, icon,…
Code: tạo các folder của các file html, css, image, font để dễ quản lý
Kiểm tra và sửa lỗi (nếu có)
Tối ưu

1. Header: Điều hướng

2. Footer: Thơng tin


3. Đăng nhập:

4. Đăng ký


5. Trang chủ

6. Trang nội dung sản phẩm


7. Trang thoát