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 ủ a đềề tài .3 3.Kềết mong muôến đạt 4.Các phẫền mềềm sử dụng II Ý T ƯỞ NG THIẾẾT KẾẾ .4 1.Xác đ nh ị phẫn tích yều cẫều 2.Phác thảo ý tưởng thiềết kềế 3.Bơế trí trang 4.Bôế cục 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ềến thuận tiện cho đời sôếng người đ ược sử d ụng phổ biềến đ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 ủ a đềề 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 mong mến đạ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ềết bị có độ rộng khác  Website thiềết kềế rõ 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ềết bị smartphone, laptop, smart TV Nền việc mua hàng trực tuyềến m ột d ch ị v ụcầền thiềết để th ỏa mãn nhu cầều người cách dềễ dàng Khách hàng mà công ty muôến h ướng t ới gôềm tầết c ả lứa tuổi M ột sôế ch ức c trang web bao gơềm:  Menu: Phầền header có đầềy đủ đường dầễn đềến trang con, thiềết lập menu cầếp 1, cầếp  Đăng ký, đăng nhập  Giỏ hàng  Trang chủ: - Hiển thị điện thoại theo độ phổ biềến - Có danh mục gợi ý điện thoại, hãng tiềếng, …  Trang con: Các trang bao gơềm tìm kiềếm, điện thoại theo hãng , thơng tin sản phẩm Mơễi trang seễ có bơế cục khác Phác thảo ý tưởng thiềết kềế Trang web bán điện thoại phải đáp ứng sơế yều cầều sau: - Trang web có màu chủ đạo vàng , đen, trăếng (Phôếi màu tương 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ềết kềế chuẩn responsive cho thiềết bị ệ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ôế lượng trang:  Font chữ: Time News Roman - Logo: Bơế trí trang Trang web phần bôế với trang sau: Trang ĐT theo hãng Hiển thị sản phẩm theo hãng , sản phẩm phổ biềến bán chạy hãng Trang Điện Thoại Cũ Trang Thông Tin Sản Phẩm Chi Tiềết Cho biềết thông tin chi tiềết sản phẩm, đặc điểm bật , cho sản phẩm vào giỏ hàng 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ôế cục layout sản phẩm trang web 13 14 15 16 17 18 19 20 21 22 23 24 IV TÀI LIỆU THAM KHẢO - Trang web, thông tin phim tham khảo từ giao diện trang web sau: - https://cellphones.com.vn/ - https://viettelstore.vn/ - https://www.thegioididong.com/ - https://dphone.com.vn/ 25 TIẾU CHÍ ĐÁNH GIÁ CHUYẾN MƠN BTL Mơn học: Thiềết kềế web Tiều chuẩn TC1=20% Ghi nhớ hiểu - mô tả giải thích TC2=70% Áp dụng vận dụng TC3=10% Ý thức Chú ý: Nội dung tiều chí chuyền mơn Tỷ lệ @ Yều cầều đọc hiểu nguyền tăếc thiềết kềế trình bày ý t ưở ng thiềết kềế phác th oảvềề đềề tài l ựa chọn (Trình bày báo cáo) Đềề cương phải nều rõ ý t ưởng thiềết kềế vềề nội dung sau : 2đ - Ý tưởng phác thảo bôế cục layout trang chủ - Ý tưởng phác thảo bôế cục layout trang - Ý t ưởng phác th ảo thành phầền trền trang web (Logo, h ệthôếng điềều hướng, quảng cáo…) Báo cáo đềề cương không quy định trình bày trừ 0.5đ @ Sinh viền trình diềễn sản phẩm Sản phẩm phải đáp ứng đ ược yều cầều sau : - H ợp lý cách t ổch ức, bơế trí thành phầền trền trang web - H ệthôếng điềều hướng phù hợp - Các ch ức đáp ứng đ ược yều cầều người dùng - Trang trí đẹp, màu săếc hài hồ - Thơếng nhầết ngơn ngữ trền trang web 7đ - Nội dung thơng tin: xác, phong phú, phù hợp v i ớch đềề ủ c đềề tài @ Sinh viền tr lả i ờcầu h i ỏc aủgiáo viền vềề vầến đềề sau: - Nguyền lý thiềết kềế (màu săếc, bôế cục, tỉ lệ…) - Hi uểbiềết vềề ch ủđềề trình bày - Khả sử d ụng công cụ để thể thiềết kềế trực tiềếp trền máy tính (Tỷ lệ điểm : – 4) Báo cáo BTL không quy đ ịnh trình bày tr 0.5đ @ Sinh viền n ộp đềề cương báo cáo tiềến độ hạn Ghi Quy ển đềề cương báo cáo theo quy định trình bày BTL ban hành Quyển báo cáo trình bày theo quy định trình bày BTL ban hành 1đ - SV đăng ký đềề tài, chu ẩn b ịđềề cương, báo cáo tiềến độ làm báo cáo n ộp theo đềề đăng ký - Sinh viền trình diềễn s nảph m, ẩ tr lả i ờcầu h i,ỏth cựhi nệcác yều cầều vềề thiềết kềế trực tiềếp trền máy tính buổi thi Test BTL 26 27