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

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

BÁO CÁO SẢN

PHẨM

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

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

Đ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

- 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

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