ĐỀ tài WEBSITE bán GIÀY – WIS SNEAKER

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 luôn xuất hiện ở trang chủ và thường có mặt ở toà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 ở toà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. Ngoà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

BÁO CÁO SẢN PHẨM

Thứ 3, 4/1/2022

Nhóm 10

Thành viên

I Xác định yêu cầu

- Trang chủ

- Trang đăng ký

- Trang đăng nhập

- 01 trang nội dung

- Trang thoát (exit)

- Sử dụng ngôn ngữ lập trình HTML/CSS, Javascrip

Xây dựng các phần của website bao gồm:

II Ý tưởng

- Xây dựng website bán giày

- Nguồn tham khảo: https://drake.vn/

1 Xác định các thành phần trang

2 Tiêu chí về thiết kế giao diện

III Thiết kế wireframe

1 Xác định các thành phần trang

2 Tiêu chí về thiết kế giao diện

Thiết kế wireframe

Xây dựng các

điều hướng

Điều hướng trong nội bộ trang con

Các nút kêu gọi hành động trong mỗi trang thứ

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

Điều hướng chính – phụ

Horizontal navigation menu

Horizontal – drop down

Breadcrumbs bar

Điều hướng nội bộ trang con

Các nút kêu gọi hành động trong mỗi trang thứ

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

Điều hướng nội các liên kết ngoài

Các liên kết mạng xã hội

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 Xác định các thành phần trang

2 Tiêu chí về thiết kế giao diện

Thiết kế wireframe

1 Khả năng sử dụng

2 Thói quen người dùng

Tiêu chí về thiết kế giao diện

Khả năng sử dụng

Nguyên tắc 7(+/-)2

I

- Số lượng sản phẩm

trên 1 hàng tối đa là 5

- Các nội dung được

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

III

- Trắng-đen là sự kết hợp an toàn và hiệu quả

- Sử dụng khoảng trắng sẽ tạo cảm giác thông thoáng, giúp nội dung dễ đọc hơn

- 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

- 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

Đọc từ trên xuống và

từ trái qua phải

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ợ,

Không có thói quen sử dụng thanh cuộn trong lần đầu truy cập

- Đặt phần banner lên đầu trang

để tạo sự chú ý

- Sử dụng icon quen thuộc với người dùng

Chú ý thông tin dạng hình ảnh hơn văn bản

Thói quen người 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

THE END