BÀI TẬP LỚN Môn: Thiết Kế Giao Diện Web Tên đề tài: Thiết kế giao diện web bán thú vật nuôi và thuốc thú y

HỌC VIỆN NÔNG NGHIỆP VIỆT NAM
KHOA CÔNG NGHỆ THÔNG TIN

***

BÀI TẬP LỚN
Mơn: Thiết Kế Giao Diện Web
Nhóm: 05
Tên đề tài: Thiết kế giao diện web bán thú vật nuôi và thuốc thú y
STT

Sinh viên thực hiện

Mã SV

Lớp

1

Vũ Minh Thư

637865

K63TH

2

Trần Văn Hiển

637822

K63TH

3

Nguyễn Thị Huyền

637829

K63TH

Giáo viên hướng dẫn: Phạm Thị Lan Anh
Hà Nội – 2019

Điểm


I. Tổng quan đề tài:
- Kinh tế ngày càng phát triển, nhu cầu con người ngày một cao. Phong
trào nuôi thú cưng trong những năm gần đây đang nở rộ khắp trên cả nước.
Đặc biệt là giới trẻ đang dần coi những con thú cưng là một trong những
người bạn thân thiết của mình. Xuất phát từ đó, các ý tưởng kinh doanh
bán thú cưng đang được khai thác triệt để. Hàng loạt các cửa hàng thú
cưng, cửa hàng kinh doanh phụ kiện thú cưng, dịch vụ y tế... ngày một xuất
hiện càng nhiều. Tuy nhiên làm sao để mọi người biết đến bạn cũng như
các sản phẩm, dịch vụ mà bạn đang kinh doanh?
- Công nghệ thông tin ngày một phát triển, hàng triệu người trên thế giới
đều sử dụng Internet và xem đây là nơi lý tưởng để tìm kiếm thơng tin
cũng như mua sắm sản phẩm. Thì website được xem là một trong những
phương tiện hỗ trợ đắc lực nhất cho hoạt động kinh doanh bên cạnh các
trang mạng xã hội. Bạn đang kinh doanh thú cưng thì việc thiết kế website

shop thú cưng chuyên nghiệp để quảng bá thương hiệu, sản phẩm, dịch
vụ một cách hiệu quả cũng như nâng cao khả năng cạnh tranh với doanh
nghiệp khác một cách dễ dàng và trực quan nhất.

II. Các sản phẩm cùng chủ đề.
1. binbondogshop.com: Đây là một trang web bán thú cưng nơi
tiếng ở TP.Hồ Chí Minh. Tại đây danh mục sản phẩm chủ yếu gồm 3 giống
chó là : Poodle, Pom, Phốc sóc. Hầu hết chúng đều có xuất xứ chó cha, chó
mẹ thuần chủng được nhập từ Thái Lan và được nuôi trại giống , cho sinh
sản tại Việt Nam.


- Ngồi ra website cịn cung cấp thơng tin về các sản
phẩm liên quan đến thức ăn, dinh dưỡng và phụ kiện ni chó với sự đa
dạng về chủng loại, phong phú về mẫu mã : thưc ăn, sữa tắm, dây dắt chó
đến nệm lót, lược, />
2. KUN MIU: Trang web không chỉ cung cấp cho khách hàng các
loại thú cưng như chó, mèo, chuột… mà cịn có những dịch vụ như tư vấn
chế độ dinh dưỡng cho vật nuôi, các dịch vụ làm đẹp như spa, cắt tỉa lơng,
móng, tắm … , cung cấp các loại phụ kiện…


III. Ý tưởng thiết kế
Dựa trên Thepet.vn


 Một trang web chuyên bán thú vật nuôi và các sản phẩm dành cho
thú vật nuôi
 Tốc độ truy cập trang web nhanh
 Giao diện bắt mắt và dễ sử dụng

 Có đầy đủ các loại sản phẩm và các loại giá cả hợp lý
 Có đầy đủ các chức năng như tìm kiếm, giỏ hàng, đăng nhập, liên hệ,
…
IV. Chi tiết
1.

Bố cục : gồm ba thành phần chính : header, body, footer.
1.1.
Demo tổng quan:

Header:
gồm hình ảnh logo, thương hiệu, danh mục các thanh menu, chuyên
1.2

mục điều hướng người dùng đến các trang con và các bài viết cụ thể:
vị trí đặt thanh menu là thanh ngang cố định, logo nằm góc trên cùng


bên trái của trang web, phần tên logo nằm trên cùng ngang hàng với
logo, …
+ Phần slider: ở trang chủ có hình ảnh với hiệu ứng chuyển đổi tạo
ấn tượng với người dùng.
+ Ơ tìm kiếm: Phát huy vai trị đắc lực trong việc tìm kiếm một sản
phẩm mà khách hàng cần tìm kiếm một cách nhanh nhất.
+ Hotline: cách thức liên lạc giúp khách hàng liên hệ với chủ cửa
hàng một cách nhanh nhất, tiện lợi trong việc cần tư vấn.
+ giỏ hàng: là một thành phần không thể thiếu của một website bán
hàng, nó giúp khách hàng ln cập nhật được những sản phẩm mà
mình đã sở hữu và dễ dàng thêm, bớt nếu muốn.
1.3.

Body :
là nơi thể hiện nội dung của trang web. Đây là phần tập trung và thể
hiện nhiều nhất. Doanh nghiệp cần sáng tạo và xây dựng nội dung
hấp dẫn người đọc. Trong trang web này thì chia nội dung được trải
đều từ trên xuống dưới, từ trang trước ra trang sau. Và trang chủ là
nơi đảm nhận chủ yếu về các thông tin tóm tắt nhất của trang web.
Và các trang con sẽ thể hiện chi tiết nhất về các nội dung đó.
1.4
Footer:
là nơi shop đưa ra các thông tin về shop như: địa chỉ shop (google
map), email, số điện thoại, các chi nhánh con, có thơng tin khuyến
2

mãi,…
Màu sắc:
màu sắc chủ đạo của trang web là đen – trắng với mã màu
RGB: #161616 ( R: 22%, G: 22%, B: 22% )
(Tạo nên sự huyền bí cho trang web), phần chữ đen trên nền trắng
hoặc phần chữ trắng trên nền đen ở phần footer sẽ làm nổi bật
nhất có thể về những thơng tin cần hiển thị, thu hút được sự chú ý
của người nhìn.
Logo là một biểu tượng hình trịn với hình ảnh hai thú cưng là chó
và mèo. Cũng với hai màu đen trắng : nền đen và hình ảnh pet là
màu trắng.


3

Hình ảnh: vì đây là trang web bán thú cưng và các dịch vụ đi kèm nên
hình ảnh về pet và các sản phẩm là chủ yếu.

Hình ảnh sẽ có thông tin về thú cưng đi kèm bên dưới về tình
trạng (hết hay cịn), về giá cả, về những chương trình khuyến mại,
…
Hình ảnh về những sản phẩm như thức ăn: có đi kèm thơng tin về

4

loại thức ăn đó như thành phần, giá, phù hợp với loại pet nào,…
Nguồn ảnh: />Font chữ:
Tên trang Web:
“ All for your pets ”


Kiểu chữ jellyka-love and passion

Size 42.
Thanh menu:
 tahoma-bold
Tên sản phẩm:
 Times
 Size 23.
Tên trang:
 Tahoma-regular
 Size 38.
Chi tiết từng phần:
Header:
B1: Tạo file mới (File -> New) với kích thước 1920x4880 và 72


5

dpi. Sử
dụng màu background là #fff
B2: Tạo phần header với Rectangle Marqueue Tool với màu là
#fff
B3: Tạo Logo: được ghép từ 2 hình ảnh


Bắt đầu từ hai hình trên
B4: Thay đổi viền của đối tượng trong ảnh từ Black -> White.


B5: Tạo 1 layer white backgroud với kích thước 160 x 200px


B6: - Sau khi tạo được hình chữ nhật, ta tạo một layer hình trịn nền
đen rồi đưa hai hình ảnh vào hình trịn đó cùng với tên của web “ All
for your pets ” ở trên nền logo.
- Tiếp theo ta thêm tên “ by HuyenThuHien ” ở white backgroud ở
dưới logo
“ by HuyenThuHien ”: ý nghĩa là được tạo bởi 3 thành viên của
nhóm


B7: Sau đó ta bổ sung các mục menu (Trang chủ, giới thiệu, sản
phẩm, sản phẩm dịch vụ, thú cưng tìm chủ, tin tức, khuyến mại, liên
hệ) tên trang web và Hotline cùng
B8: Khi hover vào từng mục trong menu sẽ hiển thị màu backgroud
là #010101. Ta sử dụng công cụ rectangle tool để tạo 1 layer khung
hình chữ nhật vừa với nội dung hiển thị và nằm dưới nội dung hiển

thị, màu sắc của nội dung khi hover chuột vào là #fff, ta sẽ được kết
quả như sau:


B9: Thêm các icon-social-media và hotline vào góc phải phần header
(Nguồn: Sưu tầm)

B10: Tạo thanh tìm kiếm
Sử dụng cơng cụ line tool để tạo 1 đường thẳng ngang, bên trên ta
dùng công cụ custom shape tool để lấy icon search.
Text placeholder với color là #8f8989
Kết quả đạt được:

Body:
B1: Dùng phím tắt Ctr + H để bật đường line, đồng thời căn chỉnh
vào các ảnh mà ta muốn lấy


B2: Sử dụng công cụ Slide tool để cắt nhiều ảnh cần thiết cho bản
thiết kế, vì
Các sản phẩm và các vật ni là khơng được public đo đó chúng em
khơng tải
ảnh từ trang chính. (Nguồn ảnh: thepet.vn)
+ Click chuột trái + kéo chọn các ảnh cần cắt + sử dụng tổ hợp
phím tắt
(Ctrl + shift + alt + S)
Tất cả các ảnh đó sẽ được save vào 1 thư mục là Img


B3: Sau khi đã lấy được tất cả ảnh sản phẩm cùng với thú vật cưng,

ta chia bố cục, khoảng cách các sản phẩm và các phần với nhau rồi
đưa ảnh vào bản thiết kế.
Chú ý: Khi lấy ảnh việc bị vỡ ảnh là điều khó tránh khỏi, do đó ta sử
dụng công cụ Convert to Smart Opject để tránh vỡ ảnh, sử dụng
phím tắt Ctrl + T để thay đổi kích thước của ảnh ban đầu sao cho
phù hợp với bố cục


Kết quả đạt được:


Footer:
B1: Lấy thông tin địa chỉ của shop và chia bố cục làm 3 cột
- Cột 1: địa chỉ chi tiết
- Cột 2: nhập email để nhận thông báo khuyến mại
- Cột 3: google map


B2: Để tạo được ô nhập email, ta sử dụng công cụ Rounded
rectangle tool để tạo được ô nhập thông tin, sử dụng Text để chèn
chữ gợi ý lên trên, sao cho layer chữ nằm trên layer được tạo bởi
Rounded rectangle tool.


Đối với trang “ Thú cưng tìm chủ”, nhìn chung phần header và footer
giống với trang Home nhưng bên cạnh đó cịn có 1 số phần khác biệt
là phần chuyển tab.
- Cách tạo nút chuyển tab: sử dụng công cụ rectagle tool với
backgroud color: #000000 đối với trang đang hiển thị thì số trang có
backgroud color: #fff

TỔNG HỢP NGUỒN ẢNH VÀ TRANG WEB THAM
KHẢO
- />- />-


MENU
I. TỔNG QUAN ĐỀ TÀI
II. CÁC SẢN PHẨM CÙNG CHỦ ĐỀ
1. Binbondogshop
2. KUN MIU
III. Ý TƯỞNG THIẾT KẾ
IV. CHI TIẾT
1. Bố cục
1.1 Demo tổng quan
1.2 Header
1.3 Body
1.4 Footer
2. Màu sắc
3. Hình ảnh
4. Font chữ
5. Chi tiết