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

WEBSITE BÁN GIÀY Môn thiết kế Website Ho m e Abou t Us Con tact Next file ///tmp/jodconverter ab30846a b4f6 4082 9e09 754db3599809/%23action%3Fjump=nextslide #1 PHÂN TÍCH WEBSITE Ho m e Abou t Us Con[.]

WEBSITE

BÁN GIÀY

Môn thiết kế Website

e

PHÂN TÍCH WEBSITE

e

- Trang đăng ký, đăng nhập:

+ Thao tác đăng ký đơn giản

Ưu điểm e

- Trang chủ: Hình ảnh, thông tin liên

- Trang đăng ký, đăng nhập:

+ Chưa có thông báo nếu nhập thông tin sai

+ Chưa có các liên kết đăng nhập nhanh (Facebook, Gmail,…)

- Trang chủ: Phân cấp thông tin chưa tốt: banner chính nên để thông

tin của những sản phẩm mới, những sự kiện hay chương trình đang

giảm giá Nên có thêm các tag sản phẩm bán chạy.

- Trang nội dung: Thiếu thông tin số lượng sản phẩm còn lại, đã bán.

Nhược điểm e

- Trang thoát: Kênh chữ tương tác chưa được phân biệt rõ ràng.

Nhược điểm e

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

- Về tổ chức website:

+ Hình thức tổ chức web: dạng cân bằng, đối xứng

+ 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ý.

Nội dung e

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.

Giao diện (UI) e

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.

Giao diện (UI) e

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.

Giao diện (UI) e

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.

Giao diện (UI) e

- Trang web sử dụng ngôn ngữ lập trình html kết hợp với css.

Công nghệ e

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

Trải nghiệm người dùnge

CÔNG TÁC

THÀNH VIÊN

e

- Nguyễn Minh Quang:

Phân chia công việc phần Code

Thiết kế figma phần nền tảng Mobile

Code phần Body của web

Chỉnh sửa, tổng hợp lại phần Code

- Nguyễn Văn Khải (leader):

Phân chia công việc phần thiết kế

Thiết kế figma phần nền tảng PC

Code phần Đăng nhập/Đăng xuất và đăng ký của web

Chỉnh sửa, tổng hợp lại phần thiết kế

Phân chia công việce

- Phạm Tuấn Dũng:

Thiết kế figma phần nền tảng Tablet

Code phần Footer của web

Làm báo cáo tổng kết của nhóm

- Nguyễn Nhật Long:

Thiết kế figma wireframe 3 nền tảng

Code phần Header của web

- Đoàn Đắc Quang:

Không hoàn thành công việc, bỏ thi

Phân chia công việce

XÂY DỰNG

WEBSITE

e

Thiết kế trên Figma

B Thiết kế giao diện nền tảng PC:

https://www.figma.com/file/sXz7hQ0ono2yalONQ3xfkj/Untitled?node-id=0%3A1

Thiết kế trên Figma

B Thiết kế giao diện nền tảng PC:

https://www.figma.com/file/sXz7hQ0ono2yalONQ3xfkj/Untitled?node-id=0%3A1

Thiết kế trên Figma

C Thiết kế giao diện nền tảng Mobile:

https://www.figma.com/file/F9pOx9ueUZB2xpTiLRsvoU/Web-2?node-id=0%3A1

Thiết kế trên Figma

D Thiết kế giao diện nền tảng Tablet:

https://www.figma.com/file/QX4dUFvdebryafHBjVo1Hs/Tablet-(Ipad-Pro-11'')?node-id=0%3A 1

Thiết kế trên Figma

D Thiết kế giao diện nền tảng Tablet:

https://www.figma.com/file/QX4dUFvdebryafHBjVo1Hs/Tablet-(Ipad-Pro-11'')?node-id=0%3A 1

Xây dựng giao diện bằng HTML/CSS/Js

A Phần Header:

Xây dựng giao diện bằng HTML/CSS/Js

B Phần Body trang chủ:

Xây dựng giao diện bằng HTML/CSS/Js

B Phần Body trang chủ:

Xây dựng giao diện bằng HTML/CSS/Js

C Phần Body đăng nhập, đăng ký:

Xây dựng giao diện bằng HTML/CSS/Js

D Phần Body đăng xuất:

Xây dựng giao diện bằng HTML/CSS/Js

E Phần Footer:

Xây dựng giao diện bằng HTML/CSS/Js

E Phần Footer:

Xây dựng giao diện bằng HTML/CSS/Js

F Phần CSS:

Xây dựng giao diện bằng HTML/CSS/Js

F Phần CSS:

THANK FOR

FOLLOWING

e