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

BỘ THÔNG TIN VÀ TRUYỀN THÔNG HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN THÔNG

BỘ THÔNG TIN VÀ TRUYỀN THÔNG

HỌC VIỆN CÔNG NGHỆ BƯU CHÍNH VIỄN

THÔNG

-🙦🙦🙦 -BÁO CÁO KẾT THÚC HỌC PHẦN

THIẾT KẾ WEBSITE

Mục lục

I Phân tích Website……… 3

1 Nội dung……….………… 3

2 Giao diện……….…… 3

3 Công nghệ……… 5

4 Trải nghiệm người dùng……… ……… 5

II Xây dựng website……… ……… 5

1.Thiết kế trên Figma……… ……… 5

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

I Phân tích website

Nhóm em sẽ báo cáo 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, mục đích chính của trang web là để bán hàng, quảng bá thông tin sản phẩm đến người mua hàng Sản phẩm bán chính là giày thể thao và một số phụ kiện liên quan như quần, áo, balo Đối tượng hướng đến là những người trẻ có nhu cầu mua sắm các sản phẩm local brand, độ tuổi từ 16 đến 28 tuổi

- Về tổ chức website:

+ Hình thức tổ chức web: dạng lưới đầy đủ (full-mesh)

+ Số trang thiết kế chính bao gồm: trang chủ, trang nội dung sản phẩm, trang đăng nhập, đăng xuất, đăng ký

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 nhưng vẫn giữ được nhiều

khoảng trắng tạo sự 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, các danh mục mua hàng, các sản phẩm đang được hạ giá, sản phẩm mới, thông tin địa chỉ liên lạc,…

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

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

b Khoảng trắng trong website:

- Web được trình bày dễ nhìn, thoáng, không quá nhiều kênh thông tin, chủ yếu

là các hình ảnh của sản phẩm; giúp 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ú ý, tập trung hơn vào sản phẩm

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

- Các kênh thông tin, hình ảnh có bố cục được thay đổi nhẹ tạo điểm nhấn riêng cho mỗi phần

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

- Lựa chọn ảnh có nền đen hoặc ảnh không nền

d Màu sắc giao diện

- Nền trắng, chữ đen (nền đen chữ trắng với phần đầu trang hoặc phần thông tin cuối trang)

- Màu sản phẩm được lựa chọn kết hợp với màu nền tạo sự trẻ trung năng động, sang trọng

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

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

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

f Typography

- Font chữ chính được sử dụng trong trang web là Roboto

- Được in đậm, kích cỡ khác nhau với từng kênh thông tin tương ứng

g Điều hướng người dùng

- Trang web 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ễ 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 ngôn ngữ lập trình html kết hợp với css

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

- Trang web duy trì được sự đồng nhất trong thiết kế (màu sắc, font, hình ảnh,…)

- Áp dụng phong cách thiết kế đơn giản tăng khả năng sử dụng, sự tiện lợi trên các nền tảng

- 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

II Xây dựng website

1 Thiết kế trên Figma

Phiên bản Desktop (chính)

Trang chủ

Trang đăng nhập/ đăng ký

Trang nội dung

Trang đăng xuất

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

a Header

b footer

c body

d Css