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Á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[.]

Trang 1

BÁO CÁO CUỐI KỲ

“THIẾT KẾ WEBSITE THỜI TRANG GUCCI”

Trang 2

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

Trang 3

1 ĐƠN VỊ THỰC HIỆN

I/ GIỚI THIỆU

CHUNG VỀ

• Tên sản phẩm: website bán hàng cho

thương hiệu thời trang gucci

• Trưởng nhóm: Đinh Thị Hương Thảo

Trang 4

• Đâ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

Trang 5

• Số trang chính gồm 6 trang: 1 trang chủ, 2 trang nội dung,

1 trang đăng nhập, 1 trang đăng ký, 1 trang thoát

• Tổng số liên kết Px(P-1)=6x5=30

Trang 6

Đ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 trên web

• Đ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

Trang 7

ĐỐ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…

• 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

Trang 8

• 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

1 Sắp xếp bố cục hợp lý

TỔNG QUAN VỀ GIAO DIỆN WEBSITE

Trang 9

• Web trình bày không quá 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

1 Sắp xếp bố cục hợp lý

2 Khoảng trống trong website

Trang 10

• Website có bố cục hình ảnh khá hợp lý, các sp được sắp xếp gọn gàng, cân đối 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ỡ

Trang 11

1 Sắp xếp bố cục hợp lý • Đen và xám là chủ đạo, kết hợp với chữ

4 Màu sắc của giao diện

Trang 12

1 Sắp xếp bố cục hợp lý • 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

Trang 13

1 Sắp xếp bố cục hợp lý • 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

• 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

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

4 Màu sắc của giao diện

6 Điều hướng người dung hợp lý

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

Trang 14

1 PHÂN LOẠI WEBSITE

II/ QUY TRÌNH THIẾT KẾ

Trang 15

SẢN PHẨM

2 WIREFRAME

• 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

• 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

Trang 16

Trang 17

Trang 18

Trang 19

Trang 20

Trang 21

SẢN PHẨM

• Thiết kế trực quan là việc tập trung thiết kế vào các

trải nghiệm ng dùng, khả năng tương tác của khách

hàng đối với sp

• Những tính năng của visual design xoay quanh việc

mang lại tính thẩm mỹ cho ng xem, từ đó giúp ng

dùng có những trải nghiệm độc đáo, mới lạ

• Các nguyên tắc cơ bản của visual design: điểm, đg

thẳng, hình dáng, màu sắc, bố cục cân bằng, tỷ lệ cân

đối

2 WIREFRAME

3 VISUAL DESIGN

Trang 22

Trang 23

Trang 24

Trang 25

• HTML là ngôn ngữ cơ bản và phổ biến nhất, nó được dùng để tạo ra các

website trên thế giới Khi truy cập vào 1 trang web bất kỳ, cụ thể là 1

đường link, bạn sẽ đc dẫn đến các trang khác nhau, chúng đc gọi là một

tập tài liệu html

• HTML giúp cấu thành các cấu trúc cơ bản trên một website và góp phần

khai báo các tập tin kỹ thuật số: video, nhạc, hình ảnh…

Trang 26

• Được dùng để kiểm soát cách trình bày, định dạng và bố cục

• CSS là nền tảng của website, bổ sung giúp html hoàn chỉnh hơn

Trang 27

Định hướng công cụ, thư viện lập trình

Trang 28

2

THU THẬP TÀI NGUYÊN Web gốc, file figma

Trang 29

2

THU THẬP TÀI NGUYÊN

Trang 30

2

THU THẬP

TÀI NGUYÊN

Trang 31

2

Trang 32

2

Trang 33

2

qezq50RIIcIURq7Oa20rW2n2q+fyXBNcU9lrw==" crossorigin="anonymous"

referrerpolicy="no-referrer"></script>

<script

src="/Javascript/motion.js"></script>

Trang 34

2

3

CODE

HTML

Link các thư viện, tệp css, js sử dụng vào <head> tag

Tổ chức trang web gồm <header>, <section>, <a>, <h1…6>,

<p>, <footer>,

Xây dựng layout chủ yếu bằng flexbox, grid thông qua css

Trang 35

2

3

CODE

CSS

Tạo màu sắc, chuyển động cho Object (menubar transition, ….)

Điều chỉnh kích cỡ, margin, padding

Sắp xếp layer (z-index)

Trang 36

2

3

CODE JavaScript

Tạo chuyển động của các slide

Trang 37

2

var slides = document getElementsByClassName ( "mySlides_child" );

var dots = document getElementsByClassName ( "dot_child" );

for ( i = 0; i < slides length; i ++) {

slides [ i ] style display = "none" ;

}

slideIndex ++;

if ( slideIndex > slides length) { slideIndex = 1}

for ( i = 0; i < dots length; i ++) {

dots [ i ] className = dots [ i ] className replace ( " active_child" , "" );

}

slides [ slideIndex -1] style display = "block" ;

dots [ slideIndex -1] className += " active_child" ;

setTimeout ( showSlides_child , 2000);

}

Tạo chuyển động của các slide

Trang 38

2

3

CODE JavaScript

Tạo chuyển động của các slideTạo chuyển động cho menu (khi scroll)

Trang 39

2

3

CODE

window.addEventListener('scroll', function () {

let header = document.querySelector('div.header');

let windowPosition = window.scrollY > 0;

header.classList.toggle('scrolling-active', windowPosition);

})

Tạo chuyển động cho menu (khi scroll)

Trang 40

2

3

CODE JavaScript

Tạo chuyển động của các slideTạo chuyển động cho menu (khi scroll)Modify js trong file js mặc định của Owl Caroulse

Trang 41

2

Trang 42

2

3

CODE JavaScript

Tạo chuyển động của các slideTạo chuyển động cho menu (khi scroll)Modify js trong file js mặc định của Owl CaroulseThay đổi thuộc tính css, chuyển hướng trang

Trang 43

2

3

CODE

Thay đổi thuộc tính css, chuyển hướng trang

Trang 44

2

3

CODE JavaScript

Tạo chuyển động của các slideTạo chuyển động cho menu (khi scroll)Modify js trong file js mặc định của Owl CaroulseThay đổi thuộc tính css, chuyển hướng trangThay đổi (thêm, xóa) class đối với element

Trang 45

2

Trang 46

2

3

CODE

4

ĐÁNH GIÁ, CHỈNH SỬA

5

TỐI ƯU

Trang 47

THANKS FOR WATCHING

Định dạng
Số trang	47
Dung lượng	5,91 MB

Tiêu đề	Thiết Kế Website Thời Trang Gucci
Tác giả	Đinh Thị Hương Thảo
Thể loại	Báo Cáo Sản Phẩm