Bài tập lớn môn thiết kế và triển khai web tmđt đề tài thiết kế website cung cấp dịch vụ ngân hàng trực tuyến

TRƯỜNG ĐẠI HỌC MỞ HÀ NỘI KHOA KINH TẾ BÀI TẬP LỚN MÔN: THIẾT KẾ VÀ TRIỂN KHAI WEB TMĐT ĐỀ TÀI: Thiết kế website cung cấp dịch vụ ngân hàng trực tuyến Giảng viên hướng dẫn :Th.S Nguyễn Thị Quỳnh Như Sinh viên thực : Lê Thị Kim Chung Lớp : K30TMĐT02 Hà Nội 2022 Phần 1: Đặt vấn đề - Tên đề tài: Thiết kế website cung cấp dịch vụ ngân hàng - Sinh viên thực : Lê Thị Kim Chung - Mã SV: 21A470100017 - Lớp : K30TMĐT02 Lý chọn đề tài : Như thấy thị trường việc cạnh tranh kinh doanh ngày trở nên liệt hầu hết nhà kinh doanh, công ty lớn tâm đến việc làm thoả mãn khách hàng cách tốt So với kinh doanh truyền thống TMDT chi phí thấp hơn, hiệu đạt cao Hơn nữa, với lợi công nghệ Internet nên việc truyền tải thơng tin sản phẩm nhanh chóng, thuận tiện Kết hợp với phận giao hàng tận nơi, thông qua bưu điện ngân hàng để toán tiền, tăng thêm thuận lợi để loại hình phát triển.Với sản phẩm dịch vụ ngân hàng Biết nhu cầu đó, xây dựng Website ngân hàng trực tuyến nhằm để đáp ứng cho khách hàng, họ mua sản phẩm, sử dụng dịch vụ cần thiết Do đó, với đời website ngân hàng trực tuyến , người giao dịch lúc nơi mà không cần phải tới điểm giao dịch Trước thực tế em thực đề tài: “ Thiết kế website cung cấp dịch vụ ngân hàng trực tuyến” Kết cần đạt được: Tạo website ngân hàng trực tuyến theo đề ra, đủ chức website thương mại điện tử, có bố cục, giao diện dễ nhìn, thân thiện dễ sử dụng cho khách hàng Phần 2: Nội dung Cơ sở lý thuyết: - Áp dụng lý thuyết website Thương mại điện tử - Áp dụng lý thuyết sử dụng phần mềm Photoshop - Áp dụng lý thuyết ngôn ngữ lập trình HTML Cấu trúc thiết kế Website: + Trang web có trang chủ, trang chính, độ sâu trang Số lượng trang: Độ sâu: mức Gam màu chủ đạo: #000866, #f7aa00, #fffff Lý chọn màu sắc: Màu xanh lam màu mà nhiều người yêu thích Trong tự nhiên màu nước bầu trời, thấy loại trái rau củ Màu xanh lam coi màu thiên đường đại diện quan nhà nước, tạo tin tưởng, chuyên nghiệp, phù hợp cho ngành ngân hàng Nó thuộc gram màu lạnh có chút ấm áp làm dịu sức nóng màu đỏ Màu xanh lam đứng đầu với nhiều người yêu thích 53% màu cờ quốc gia có màu xanh lam Màu xanh lam màu sử dụng hầu hết thiết kế nhận diện Một trang phục màu xanh lam đậm thể kinh doanh chuyên nghiệp Hơn nữa, sử dụng màu xanh lam làm bật thiết kế kết hợp với màu vàng khiến thiết kế thêm sáng tạo Phương pháp phối màu: Sử dụng phương pháp bổ túc Phối màu bổ túc cặp màu đối xứng bánh xe màu để tạo nên phối màu động tràn đầy lượng Rõ ràng, với cặp màu đối xứng sử dụng, dễ để tạo điểm cho chi tiết quan trọng thiết kế Ý tưởng thiết kế thành phần trang web (logo, menu, banner,…)  Logo: Thiết kế từ nhận diện thương hiệu Bao gồm: + Phần logo: Ý tưởng logo bắt nguồn từ Đồng tiền, biểu tượng tượng trưng cho giao dịch dịch vụ ngành ngân hàng cung cấp Trong đó, đồng tiền thiết kế cách điệu theo chữ Chung- tên ngân hàng + Phần chữ : Tên viết tắt ngân hàng Kim Chung Bank  Menu: Ngang, search box tích hợp vào menu  Body: Layout đa dạng phù hợp với chức trang  Banner: Số lượng ; Layout tự do, đa dạng ; Style gradient theo nhận diện thương hiệu  Footer: Thông tin trang web gồm: danh mục, địa chỉ, hotline, email, website, …  Sơ đồ liên kết website: TRANG CHỦ Dịch vụ Về KCB Thẻ Tin tức Trợ giúp Đăng nhập Chuyển tiền Thanh tốn Giao diện chi tiết nội dung trang xây dựng:  Ý tưởng thiết kế (prototype) trang web: Từ thiết kế artboard mockup, xuất file HTML mở trình duyệt Các button, Text gắn link liên kết sang trang tương ứng  Bản sketch giao diện trang web:  Bản wireframe giao diện trang web: TRANG CHỦ: TRANG DỊCH VỤ: TRANG THẺ: TRANG TIN TỨC: TRANG VỀ KCB: 10 TRANG CHUYỂN TIỀN: TRANG ĐĂNG NHẬP: 12 TRANG THANH TOÁN: 13  Bản mockup giao diện trang web: TRANG CHỦ: Đây trang bao quát giới thiệu sơ lược website, sản phẩm website 14 TRANG DỊCH VỤ: Đây trang mà người dùng thấy toàn danh sách dịch vụ mà trang web ngân hàng cung cấp 15 TRANG DỊCH VỤ THẺ: Đây trang mà người dùng thấy dịch vụ thẻ Visa, Tín dụng,… mà ngân hàng cung cấp 16 TRANG VỀ KCB: Đây trang giới thiệu chi tiết thông tin ngân hàng KCB: Ra đời, sứ mệnh, tầm nhìn, cổ đơng,… 17 TRANG TIN TỨC: Đây trang mà người dùng đọc tin, tin tức liên quan đến sản phẩm, dịch vụ, hoạt động ngân hàng 18 TRANG TRỢ GIÚP: Đây trang mà người dùng tìm kiếm nhanh sản phẩm, dịch vụ; Hỏi đáp, liên hệ chăm sóc khách hàng viên, liên hệ BOT chat nhanh vấn đề mà khách hàng gặp phải 19 TRANG ĐĂNG NHẬP: Đây trang trang dịch vụ Khi vào trang khách hàng cần điền thông tin tài khoản đăng nhập trước thực giao dịch khác tài khoản TRANG CHUYỂN TIỀN: Đây trang trang dịch vụ, vào trang khách hàng thấy số dư tài khoản, lịch sử giao dịch thực giao dịch liên quan đến tài khoản online 20 TRANG THANH TỐN: Đây trang cuối để hoàn tất chuyển khoản/ giao dịch gửi, nhận tiền Bao gồm thông tin người gửi, người nhận, xác nhận OTP kết giao dịch 21 Phần 3: Kết luận  Tổng kết kết đạt được: Trang web mô nguyên lý hoạt động website ngân hàng trực tuyến Trang web có giao diện thân thiện với người dùng độc đáo bố cục xếp thành phần trang Trang web thiết kế xuyên suốt theo màu nhận diện thương hiệu style gradient, font chữ quy định Logo có ý nghĩa Mọi yếu tố logo, banner, image, icon, có trang web tự thiết kế phần mềm PS AI , thành phần tài nguyên lấy từ nguồn internet  Những vấn đề chưa đạt được: So với ý tưởng thiết kế ban đầu chức website chưa đầy đủ, chi tiết, button chưa liên kết vào đích chưa hồn thành thiết kế trang đích Hơn nữa, thời gian thiết kế bị chậm so với kế hoạch dự định  Hướng phát triển đề tài: Đứng trước xu hướng phát triển công nghệ thông tin thương mại điện tử vũ bão, đề tài: Thiết kế website cung cấp dịch vụ ngân hàng trực tuyến vơ nóng nhu cầu lớn Vì tơi tiếp tục nghiên cứu phát triển ưu điểm, khắc phục nhược điểm, vấn đề chưa đạt nói để hồn thiện, đưa website hoạt động Phần Tài liệu tham khảo phần mềm sử dụng  Các phần mềm sử dụng: Adobe Photoshop, Adobe Illustrator, Sublime text  Tài liệu tham khảo: Trang web BIDV: bidv.com Trang web Momo: momo.vn Trang web MB Bank: mbbank.com Nguồn ảnh: Đính kèm file folder 22 Phần 5: Mục lục: MỤC LỤC Phần 1: Đặt vấn đề Lý chọn đề tài : 2 Kết cần đạt được: Phần 2: Nội dung Cơ sở lý thuyết: 2 Cấu trúc thiết kế Website: Giao diện chi tiết nội dung trang xây dựng:  Ý tưởng thiết kế (prototype) trang web:  Bản mockup giao diện trang web: Phần 3: Kết luận .13  Tổng kết kết đạt được: 13  Những vấn đề chưa đạt được: 13  Hướng phát triển đề tài: .13 Phần Tài liệu tham khảo phần mềm sử dụng .13  Các phần mềm sử dụng: .13  Tài liệu tham khảo: .13 Phần 5: Mục lục: .14 23 Phần 6: Thang điểm 24 25 26