Đang tải... (xem toàn văn)
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 Chuyên 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ự.
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 Chuyên 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 I II Giới thiệu Lí chọn đề tài Ngày chó mèo nhiều người coi người bạn bên để giải toả căng thẳng, mệt mỏi, xoá tan phiền muộn sống Chính việc chăm sóc chó mèo cách nhiều người quan tâm Thêm vào với thời đại cơng nghệ 4.0 đại, việc mua bán online trở nên phổ biến, thu hút nhiều người tiêu dùng tiện lợi, nhanh chóng mua hàng Do đó, em định chọn đề tài “ Thiết kế website bán đồ chăm sóc chó mèo” để đáp ứng nhu cầu Qua em có thêm hiểu biết, , nắm rõ lĩnh vực thiết kế website cách hiệu Mục đích đề tài Pet’s Dot trang web cung cấp sản phẩm chăm sóc dành cho chó mèo tốt dành cho người chủ tận tâm, yêu quý chó mèo Với sản phẩm đa dạng đến từ nhiều nhãn hàng từ nhiều nước giới, Pet’s Dot mang đến cho thú cưng bạn điều kiện tuyệt vời để phát triển trì sức khoẻ Kết mong muốn đạt • Phân tích thiết kế website theo kiến thức mơn thiết kế web • Thiết kế giao diện dễ nhìn • Tạo giao diện với số chức • Nắm bước thiết kế Web • Mang lại tính khả dụng cao • Thơng tin sản phẩm hiển thị rõ ràng, đẹp mắt Ý tưởng thiết kế: Xây dựng bố cục Website Trong thiết kế em sử dụng bố cục dạng lưới với thông số sau 1444px 10 50 46 44 Header top Menu Ảnh giới thiệu Ảnh giới thiệu 3000px 71 80 35 số mặt hàng bật Đánh giá khách hàng Footer Bố cục trang chủ 1444px 150 100 100 Header Thanh điều hướng Thanh 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 350 Nút chuyển trang Footer Bố cục trang “Chó” 1444px 15 70 Header Tên sản phẩm Ảnh Chọn mẫu 15 50 3300px 40 Ảnh 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” 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 cách khác Footer Bố cục trang “Đăng nhập” Chọn màu sắc cho trang web Trong 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 màu hồng với mã màu #f9acb0 Sau chọn xong, ta điều chỉnh màu với sắc độ khác để sử dụng linh hoạt tạo liền mạch màu sắc Một số bảng màu phụ em sử dụng thiết kế như: #497eb3(xanh lam), #515050(xám đậm),#e1dfdf(xám nhạt) Xây dựng Typography Bản thiết kế sử dụng font Myriad Pro với nhiều định dạng font khác nhau, font nhiều người sử dụng, style đa dạng mang tính đồng cao, sử dụng rộng rãi thiết kế biên tập nội dung Các font chữ phụ khác em sử dụng là: • DINAlternate để viết tên sản phẩm mục 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 khơng nhàm chán • AmericanTypewriter dùng cho trang Đăng nhập nét chữ mềm mại kết hợp với hình ảnh vật đáng u trơng hài hòa Khoảng cách dòng: em sử dụng khoảng cách 150% (1.5) khỏang cách nằm vùng lí tưởng (130% - 150%) Đây cỡ chữ sử dụng thiết kế: 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 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 Giao diện trang chủ Giao diện trang 11 12 13 14 V Tài liệu tham khảo • https://dollyspet.net/ • https://shopee.vn/ 15