Báo Cáo Sản Phẩm - Thiết Kế Web Cơ Bản - Đề Tài - Thiết Kế Website Thời Trang Gucci .Pptx
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (2.24 MB, 47 trang )
BÁO CÁO CUỐI KỲ
“THIẾT KẾ WEBSITE THỜI TRANG GUCCI”
MỤC LỤC
I/ GIỚI THIỆU CHUNG VỀ SẢN PHẨM
1. Đơn vị thực hiện
2. Mơ tả chung về sản phẩm
II/ QUY TRÌNH THIẾT KẾ SẢN PHẨM
1. Phân loại website
2. Wireframe
3. Visual design
4. Mã hóa bằng HTML/CSS/JS
I/ GIỚI THIỆU
CHUNG VỀ
SẢN PHẨM
•
Nhóm: 7
•
Tên sản phẩm: website bán hàng cho
1. ĐƠN VỊ THỰC HIỆN
thương hiệu thời trang gucci
•
Trưởng nhóm: Đinh Thị Hương Thảo
I/ GIỚI THIỆU
CHUNG VỀ
SẢN PHẨM
SẢN PHẨM
•
Thực hiện thiết kế và mã hóa website bằng
ngơn ngữ html/css
1. ĐƠN VỊ THỰC HIỆN
2. MƠ TẢ CHUNG VỀ
SẢN PHẨM
NỘI DUNG
•
Đây là một trang web có mục đích chính là để
bán và quảng bá các sản phẩm thương hiệu
Gucci
I/ GIỚI THIỆU
CHUNG VỀ
SẢN PHẨM
TỔ CHỨC WEBSITE
•
Hình thức tổ chức website: sử dụng grid layout system (hệ
thống lưới), cụ thể là dạng modular grid.
•
1 trang đăng nhập, 1 trang đăng ký, 1 trang thốt
1. ĐƠN VỊ THỰC HIỆN
•
2. MƠ TẢ CHUNG VỀ
SẢN PHẨM
Số trang chính gồm 6 trang: 1 trang chủ, 2 trang nội dung,
Tổng số liên kết Px(P-1)=6x5=30
I/ GIỚI THIỆU
CHUNG VỀ
SẢN PHẨM
ĐIỀU HƯỚNG WEBSITE
•
Điều hướng chính kết hợp điều hướng vị trí: chữ L ngược inverted L
•
Điều hướng liên kết kết hợp điều hướng footer: các điều
hướng giúp người dùng truy cập các trang k quan trọng
1. ĐƠN VỊ THỰC HIỆN
trên web
•
2. MƠ TẢ CHUNG VỀ
SẢN PHẨM
Điều hướng tiện ích: giúp người dùng có những điều hướng
về các trang web ngoài website
I/ GIỚI THIỆU
CHUNG VỀ
SẢN PHẨM
ĐỐI TƯỢNG TRONG WEBSITE
•
Header: menu, logo, tài khoản, giỏ hàng…
•
Banner slider: giới thiệu sản phẩm và dịch vụ brand, các sự
kiện…
1. ĐƠN VỊ THỰC HIỆN
2. MÔ TẢ CHUNG VỀ
SẢN PHẨM
•
Content: trình bày các sản phẩm, bộ sưu tập của thương hiệu
•
Footer: cung cấp các thơng tin liên quan đến thương hiệu
TỔNG QUAN VỀ GIAO DIỆN WEBSITE
1. Sắp xếp bố cục hợp lý
•
Các thơng tin được sắp xếp hợp lý, rõ
ràng
•
Các sp trong website đc tổ chức dạng
lưới, cung cấp đầy đủ các thông tin về
sản phẩm
TỔNG QUAN VỀ GIAO DIỆN WEBSITE
1. Sắp xếp bố cục hợp lý
2. Khoảng trống trong website
•
Web trình bày khơng q nhiều chữ, chủ
yếu là hình ảnh sản phẩm
•
Việc thiết kế trang web với nhiều
khoảng trống (không quá nhiều chữ)
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ú ý hơn vào những hình ảnh quảng bá
sản phẩm
TỔNG QUAN VỀ GIAO DIỆN WEBSITE
1. Sắp xếp bố cục hợp lý
•
các sp được sắp xếp gọn gàng, cân đối
2. Khoảng trống trong website
3. Thu hút sự chú ý qua bố cục hình ảnh
Website có bố cục hình ảnh khá hợp lý,
trong một diện tích đều nhau
•
Sự lựa chọn về hình ảnh dựa trên 3 yếu
tố: kích cỡ, màu sắc, khoảng trống
•
Hình ảnh có sự đồng bộ về màu sắc,
khoảng cách, kích cỡ
TỔNG QUAN VỀ GIAO DIỆN WEBSITE
1. Sắp xếp bố cục hợp lý
2. Khoảng trống trong website
3. Thu hút sự chú ý qua bố cục hình ảnh
4. Màu sắc của giao diện
•
Đen và xám là chủ đạo, kết hợp với chữ
trắng
•
Màu sắc nhẹ nhàng nhưng vẫn thể hiện
đc
sự
trẻ
trung,
năng
động
TỔNG QUAN VỀ GIAO DIỆN WEBSITE
1. Sắp xếp bố cục hợp lý
2. Khoảng trống trong website
3. Thu hút sự chú ý qua bố cục hình ảnh
4. Màu sắc của giao diện
5. Chất lượng hình ảnh
•
Có đầu tư về mặt hình ảnh
•
Chất lượng hình ảnh cao, rõ nét, thể
hiện đc thương hiệu sản phẩm
TỔNG QUAN VỀ GIAO DIỆN WEBSITE
1. Sắp xếp bố cục hợp lý
•
dựa trên hành vi tìm kiếm cũng như tập
2. Khoảng trống trong website
3. Thu hút sự chú ý qua bố cục hình ảnh
4. Màu sắc của giao diện
Web đã thiết kế các mục điều hướng
khách hàng
•
Giúp ng dùng dễ dàng hơn trong việc di
chuyển trong trang web
•
Thiết kế các bộ lọc giúp ng dùng tìm
kiếm dễ dàng hơn
5. Chất lượng hình ảnh
6. Điều hướng người dung hợp lý
•
Website thương mại
•
Mục đích của web:
•
Bán hàng
•
Quảng bá thương hiệu
II/ QUY TRÌNH
THIẾT KẾ
SẢN PHẨM
1. PHÂN LOẠI WEBSITE
•
Thiết kế wireframe là bước quan trọng trong bất kỳ
quá trình thiết kế giao diện nào
•
Thiết kế wireframe cho phép xác định thứ bậc thông
tin thiết kế, thiết kế bố cục giao diện
•
II/ QUY TRÌNH
THIẾT KẾ
SẢN PHẨM
Wireframe hữu ích trong việc xác định các người dùng
tương tác với giao diện
1. PHÂN LOẠI WEBSITE
2. WIREFRAME
TRANG CHỦ
II/ QUY TRÌNH
THIẾT KẾ
SẢN PHẨM
1. PHÂN LOẠI WEBSITE
2. WIREFRAME
Mobile
Tablet
Desktop
TRANG CON
II/ QUY TRÌNH
THIẾT KẾ
SẢN PHẨM
1. PHÂN LOẠI WEBSITE
2. WIREFRAME
Mobile
Tablet
Desktop
TRANG ĐĂNG KÝ
II/ QUY TRÌNH
THIẾT KẾ
SẢN PHẨM
1. PHÂN LOẠI WEBSITE
2. WIREFRAME
Mobile
Tablet
Desktop
TRANG ĐĂNG NHẬP
II/ QUY TRÌNH
THIẾT KẾ
SẢN PHẨM
1. PHÂN LOẠI WEBSITE
2. WIREFRAME
Mobile
Tablet
Desktop
TRANG THỐT
II/ QUY TRÌNH
THIẾT KẾ
SẢN PHẨM
1. PHÂN LOẠI WEBSITE
2. WIREFRAME
Mobile
Tablet
Desktop
