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 - 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: 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 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 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: https://thepet.vn/ 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 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à 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 - http://binbondogshop.com/ - https://thepet.vn/ - https://www.petxinh.net 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 ... III Ý tưởng thiết kế Dựa Thepet.vn  Một trang web chuyên bán thú vật nuôi 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 dễ sử dụng  Có đ? ?y đủ loại sản...I Tổng quan đề tài: - Kinh tế ng? ?y phát triển, nhu cầu người ng? ?y cao Phong trào nuôi thú cưng năm gần nở rộ khắp nước Đặc biệt giới trẻ dần coi thú cưng người bạn thân thiết Xuất phát từ... trịn đen đưa hai hình ảnh vào hình trịn với tên web “ All for your pets ” logo - Tiếp theo ta thêm tên “ by HuyenThuHien ” white backgroud logo “ by HuyenThuHien ”: ý nghĩa tạo thành viên nhóm