THIẾT KẾ WEBSITE BÁN ĐỒ CHĂM SÓC CHÓ MÈO

TRƯỜNG ĐẠI HỌC MỞ HÀ NỘI
KHOA CÔNG NGHỆ THÔNG TIN
----------------------

BÁO CÁO BÀI TẬP LỚN
ĐỀ TÀI: THIẾT KẾ WEBSITE BÁN ĐỒ CHĂM SĨC CHĨ MÈO
Chun ngành: Cơng nghệ thơng tin
Giảng viên hướng dẫn: Dương Chí Bằng
Sinh viên thực hiện: Nguyễn Thị Yến Vy
Lớp: 2110A01
MSSV: 21A100100438

Môn: THIẾT KẾ WEB

Hà Nội – 2023

MỤC LỤC


2


I.

II.

Giới thiệu
1. Lí do chọn đề tài
Ngày nay chó mèo được nhiều người coi như một người bạn ở bên để
giải toả căng thẳng, mệt mỏi, xoá tan phiền muộn của cuộc sống.
Chính vì vậy việc chăm sóc chó mèo đúng cách đang được nhiều

người quan tâm. Thêm vào đó với thời đại công nghệ 4.0 hiện đại,
việc mua bán online đang trở nên phổ biến, thu hút rất nhiều người
tiêu dùng bởi sự tiện lợi, nhanh chóng khi mua hàng. Do đó, em
quyết định chọn đề tài “ Thiết kế website bán đồ chăm sóc chó mèo”
để đáp ứng nhu cầu trên. Qua đó em có thêm hiểu biết, , nắm rõ hơn
về lĩnh vực thiết kế website một cách hiệu quả.
2. Mục đích của đề tài
Pet’s Dot là 1 trong những trang web cung cấp những sản phẩm chăm
sóc dành cho chó mèo tốt nhất hiện nay dành cho những người chủ
tận tâm, yêu quý chó mèo của mình.
Với các sản phẩm đa dạng đến từ nhiều nhãn hàng từ nhiều nước trên
thế giới, Pet’s Dot sẽ mang đến cho thú cưng của bạn những điều kiện
tuyệt vời nhất để phát triển và duy trì sức khoẻ.
3. Kết quả mong muốn đạt được
• Phân tích và thiết kế website theo kiến thức của mơn thiết kế
web.
• Thiết kế giao diện dễ nhìn.
• Tạo được giao diện với một số chức năng cơ bản.
• Nắm được các bước cơ bản trong thiết kế Web.
• Mang lại tính khả dụng cao
• Thơng tin các sản phẩm được hiển thị rõ ràng, đẹp mắt
Ý tưởng thiết kế:
1. Xây dựng bố cục Website
Trong thiết kế này em sử dụng bố cục dạng lưới với thông số như sau

3


1444px
10

0
50

46
0

44
0

Header top
Menu

Ảnh giới
thiệu về

Ảnh giới
thiệu các

3000px 71
5

80
0

35
0

1 số mặt
hàng nổi bật

Đánh giá của
khách hàng

Footer

Bố cục trang chủ
4


5


1444px
150

100
100

Header
Thanh điều
hướng

Thanh sắp
xếp

Thanh
bên
Thanh
bên

Sản phẩm

Sản phẩm

Sản phẩm

Thanh
bên

Sản phẩm

Sản phẩm

Sản phẩm

Sản phẩm

Sản phẩm

Sản phẩm

350

2400px

1100

10
0
350

Nút chuyển
trang

Footer

Bố cục trang con “Chó”

6


1444px

15
0

70
0

Header

Tên sản
phẩm

Ảnh

Chọn
mẫu
15
0

50

3300px

40

Ảnh con

Nút mua

Chia sẻ

Mô tả sản
phẩm

Đánh giá
51

70

350

Sản phẩm
khác

Footer

Bố cục trang “Sản phẩm”
7

1444px
150

Header

Ảnh giới
thiệu

500

2210px

Ảnh

Các
khung
nhập tài
khoản

Nút

1210

350

Đăng
nhập
bằng cách
khác

Footer

Bố cục trang “Đăng nhập”

8


2.

Chọn màu sắc cho trang web
Trong bản thiết kế này, em sử dụng phương pháp phối màu đơn sắc
với màu chủ đạo chính là màu hồng với mã màu chính #f9acb0
Sau khi chọn xong, tiếp theo ta sẽ điều chỉnh màu đó với những sắc
độ khác nhau để sử dụng linh hoạt hơn và tạo ra được liền mạch về
màu sắc.
Một số bảng màu phụ em sẽ sử dụng trong bản thiết kế như:
#497eb3(xanh lam), #515050(xám đậm),#e1dfdf(xám nhạt)

3.

Xây dựng Typography
Bản thiết kế này sử dụng bộ font chính là Myriad Pro với nhiều định
dạng font khác nhau, là bộ font được nhiều người sử dụng, style đa
dạng và mang tính đồng bộ cao, được sử dụng rộng rãi trong thiết kế
và biên tập nội dung
Các font chữ phụ khác em sử dụng tiếp theo là:
• DINAlternate để viết tên các sản phẩm trong các mục con
như: Đồ ăn, Đồ chơi, Đồ tắm với font chữ thon gọn, kiểu dáng
tương tự Myriad Pro tăng cảm giác quen thuộc nhưng khơng
nhàm chán

• AmericanTypewriter dùng cho trang Đăng nhập vì nét chữ
mềm mại kết hợp với hình ảnh những con vật đáng yêu trơng
rất hài hịa
Khoảng cách dịng: em sử dụng khoảng cách là 150% (1.5) là khỏang
cách nằm trong vùng lí tưởng (130% - 150%)
Đây là cỡ chữ được sử dụng trong bản thiết kế:

9


Myriad Pro
III.

H1 171pt 70pt
H2

60pt

68pt

H3

48pt

50pt

H4

30pt

33pt

H5

18pt

23pt

Sơ đồ Website-sơ đồ phân cấp liên kết các trang web
Trang chủ

Mèo

Đồ ăn

Đồ chơi

Chó

Đồ tắm

Đồ ăn

Đồ chơi

Đồ tắm

Sản phẩm

Sản phẩm

Mua hàng

IV.

Giao diện website
10


1.

Giao diện trang chủ

2.

Giao diện các trang con
11


12


13


14


V.

Tài liệu tham khảo
• />• />
15