(Tiểu luận) bài tập lớn môn thiếết kếế web đềềt ài thiếết kếế giao diện trang web bán điện thoại

TRƯỜNG ĐẠI HỌC MỞ HÀ NỘI KHOA CÔNG NGHỆ THÔNG TIN BÀI TẬP LỚN MÔN: THIẾẾT KẾẾ WEB Đềề Tài : Thiếết Kếế Giao Diện Trang Web Bán Điện Thoại Gi ảng viền h ướng dẫẫn: D ương Chí Bằềng Sinh viền thực hiện: Phạm Thị Dung Mã SV: 21A100100054 Khoa: Công nghệ Thông Tin Hà Nội, năm 2022 Mục lục I GIỚI THIỆU 1.Lí ch ọn đềề tài 2.M ục đích c đềề tài 3.Kềết qut mong muôết qun đtạ 4.Các phẫền mềềm sử dụng II Ý T ƯỞNG THIẾẾT KẾẾ 1.Xác đ nhị phẫn tích yều cẫều .4 2.Phác thảo ý tưởng thiềết qut kềết qu 3.Bơết qu trí trang 4.Bôết qu ụcc layout sản phẩmcủa trang web IV TÀI LIỆU THAM KHẢO 26 I GIỚI THIỆU Lí ch ọn đềề tài Trong thời đại 4.0 khoa học công nghệ ngày phát tri ển t ạo nhiềều sản phẩm công nghệ tiền tiềếnthunthuận tiện cho đời sôếnthungcon người sử dụng phổ biềếnthunchính điện thoại Số lượng người dùng smartphone ngày gia tăng, giá thành hợp túi tiền khiến cho smartphone xuất thay máy tính, laptop Thêm vào đó, việc sử dụng điện thoại di động để lướt web tiện lợi nhiều cho việc di chuyển thường xuyên Vì việc thiết kế website chuyên bán điện thoại di động giúp người dùng tham khảo sản phẩm, giá dễ dàng định mua hàng nhanh chóng M ục đích c đềề tài Tiếp cận nhiều khách hàng hơn: Việc có website bán điện thoại giúp doanh nghiệp ta kết nối với khách hàng chuyển đổi hành vi thành hành động Thay dùng phương thức truyền thống phát tờ rơi, quảng cáo, trưng bày sản phẩm cửa hàng đợi khách hàng đến xem việc thiết kế website giúp ta có cửa hàng thu nhỏ để tiếp cận tới khách hàng rộng khắp nhờ hệ thống Internet Website có mục đích phân phối trực tiếp sản phẩm, dịch vụ cửa hàng tới khách hàng thông qua hoạt động mua sắm trực tuyến Website giúp khách hàng tiết kiệm thời gian, khách hàng có nhiều lựa chọn dễ dàng so sánh giá sản phẩm website bán hàng trực tuyến với Trang web thiết kế phải có giao diện sáng, dễ nhìn, dễ dàng truy cập thiết bị từ hình HD, FULL HD hay hình điện thoại tỷ lệ 16:9 18:9 Kềết qut mong mết qun đtạ Website có đầềy đủ tính năng, giao diện phẳng, dềễ nhìn Website hi ển th ịphù h ợp trền nhiềều thiềếnthutbị có độ rộng khác Website thiềếnthutkềếnthurõ ràng, người khơng có nhiềều kinh nghi ệm vềề cơng nghệ sử dụng dềễ dàng Các phẫền mềềm sử dụng Phầền mềềm: - Microsoft Visual Studio Code - Adobe Photoshop CC 2021 Ngơn ngữ - HTML - CSS Trình duyệt kiểm thử - Google Chrome II Ý T ƯỞNG THIẾẾT KẾẾ Xác đ nhị phẫn tích yều cẫều Hiện nay, với xu hướng công nghệ thông tin thời đại 4.0, mà m ọi gia đình, cá nhần đềều dềễ dàng truy cập internet từ thiềếnthutbị smartphone, laptop, smart TV Nền việc mua hàng trực tuyềếnthunlà m ột d chị v ụcầền thiềếnthutđể th ỏa mãn nhu cầều người cách dềễ dàng hnơ Khách hàng mà công ty muôếnthunh ướng t ới gôềm tầếnthutcả lứa tuổi M ột sơếnthu chcứ c trang web bao gơềm: Menu: Phầền header có đầềy đủ đường dầễ nđềếnthun trang con, thiềếnthutậlp menu cầếnthup 1, ầếnthupc Đăng ký, đăng nhập Giỏ hàng Trang chủ: Hiển thị điện thoại theo độ phổ biềếnthun Có danh mục gợi ý điện thoại, hãng tiềếnthung, … Trang con: Các trang bao gôềm tìm kiềếnthum,đi ện thoại theo hãng , thơng tin sản phẩm Mơễ i trang onc seễ óc bơếnthu ụcc khác Phác thảo ý tưởng thiềết qut kềết qu Trang web bán điện thoại phải đáp ứng sơếnthuyều cầều sau: Trang web có màu chủ đạo vàng , đen, trăếnthung (Phôếnthui màu ươtng phản) Màu vàng màu ánh nắng mặt trời, liền với thông thái, mạnh mẽ hạnh phúc Màu vàng mang đến cho người truy cập cảm giác ấm áp, làm tăng thích thú, kích thích trí óc hoạt động mạnh mẽ Màu đen thường sử dụng làm màu sắc kết hợp với màu sắc thương hiệu tính chất màu trung tính, dễ kết hợp với nhiều màu khác Sử dụng màu đen đem lại cảm giác sang trọng cho tổng thể thiết kế website Màu đen kết hợp với số màu vàng, cam, đỏ, Sự tương phản màu sắc màu giúp tổng thể website bán điện thoại trở nên ấn tượng có điểm nhấn Web thiềếnthutkềếnthuchuẩn responsive cho thiềếnthutbị điện thoại, máy tính, máy tính bảng… - Tham khảo bảng màu chủ đạo: - # f6de9d #7c7a7a # f9d060 #ffffff #ecad00 #000000 Màu chủ đạo: Sôếnthuượlng trang: Font chữ: Time News Roman - Logo: Bơết qu trí trang Trang web phần bôếnthu ớvi trang sau: Trang ĐT theo hãng Hiển thị sản phẩm theo hãng , sản phẩm phổ biềếnthun bán chạy hãng Trang Thông Tin Sản Phẩm Chi Tiềết qut Cho biềếnthut thông tin chi tiềếnthut ủca sản phẩm, đặc điểm bật , cho sản phẩm vào giỏ hàng Trang Điện Thoại Cũ Hiển thị sản phẩm cũ giá rẻ TRANG CHỦ Trang Đằng Nhập/Đằng Kí Cho phép người dùng có tài khoản đăng nhập để sử dụng, người chưa có tài khoản đăng kí Đăng nhập qua email Google, Facebook Trang Giỏ Hàng Người dùng seễ xem sản phẩm chọn thực trả phí dịch vụ xem phim trang Có th ểthanh tốn băềng thẻ tín dụng, VNPayQR, Viettel Pay, Momo, … Bôết qu ụcc layout sản phẩm trang web 9