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

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

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 WebNhó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

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ấthiệ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ốngchó 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

- Ngoà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 nuôi 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, http://binbondogshop.com/

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… https://www.petxinh.net

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:

1.2 Header:

gồm hình ảnh logo, thương hiệu, danh mục các thanh menu, chuyên 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ùngbê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 luôn 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 mãi,…

2 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ắnghoặ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

4 Font chữ:

Tên trang Web:

“ All for your pets ”

 Kiểu chữ jellyka-love and passion

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 nuôi 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à footergiố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

- http://binbondogshop.com/

- https://thepet.vn/

- https://www.petxinh.net

III Ý TƯỞNG THIẾT KẾ

IV CHI TIẾT